◉CLAUDE LABJP
●2.1.301 — Adds the vim % motion, LaTeX math rendering in the VS Code panel, and a retry-watchdog limit for usage-limit waits (10/15)●2.1.299 — Conversations over 200K tokens left idle about 54 minutes get compacted; MCP allow rules now match only the server they name●SONNET 4.5 — Retires on the Claude API on 11/30, 45 days left. Migrate to Sonnet 5.5●WINDOWS — Reports say hooks break silently only on Japanese-locale Windows; check the character encoding first●FAST MODE — Opus 5.5 fast mode is out of research preview and no longer needs the beta header (10/15)●NEW — I Put a Ten-Line Promise File at the To…●2.1.301 — Adds the vim % motion, LaTeX math rendering in the VS Code panel, and a retry-watchdog limit for usage-limit waits (10/15)●2.1.299 — Conversations over 200K tokens left idle about 54 minutes get compacted; MCP allow rules now match only the server they name●SONNET 4.5 — Retires on the Claude API on 11/30, 45 days left. Migrate to Sonnet 5.5●WINDOWS — Reports say hooks break silently only on Japanese-locale Windows; check the character encoding first●FAST MODE — Opus 5.5 fast mode is out of research preview and no longer needs the beta header (10/15)●NEW — I Put a Ten-Line Promise File at the To…
Articles/Claude Code
⟐ Claude Code/2026-06-24Intermediate

Productionizing a Claude Design Prototype — Single Source, CI, and OGP Auto-Generation

Turn a Claude Design prototype into something that survives production with Claude Code. The call to keep the generated runtime as your foundation, separating logic with a mixin, a single-source data design around a ledger CSV, and CI auto-updates with real-browser OGP capture — implementation included.

Claude Design8Claude Code264CI6GitHub Actions12OGParchitecture10premium4
✦ Premium Article

The previous article covered splitting Claude Design and Claude Code into diverge and converge. This follow-up steps into the work of turning a prototype into "production you use daily." As the subject, picture a static site I actually built as an indie developer — a dashboard-like page that shows data at a glance.

Four decisions are in play here: how far you can trust an AI-generated artifact as your foundation, how to separate logic, where the source of truth for data lives, and what to automate in CI. Each is a point where you must stop and choose when turning a prototype into something public.

Keep the generated runtime as your foundation, without rebuilding

A Claude Design prototype sometimes ships with a built runtime bundled in — a single JS file like a generated support.js. The reflex is "a prototype is a prototype, rebuild for production," but I deliberately chose to carry the runtime along.

The axis is simple: does the artifact fit your requirements? In this case the conditions lined up.

  • Zero dependencies, buildless: read it with <script src>, no bundler or install required
  • The prototype already runs as is; porting to a framework gains little
  • The runtime is closed in a single JS file, so worst case, it is all there to read

Rather than reflexively avoiding it because "AI generated it," decide by whether its nature fits the need. For a long-lived indie tool, carrying no dependencies was itself a source of reassurance. Had these conditions not lined up, I would have swapped it out. Keep the artifact out of your edit scope and write "generated — do not edit" into your rules to stay safe.

Separate logic with a mixin

Prototypes tend to be all-in-one in a single HTML file. That makes change sites hard to isolate and maintenance heavy. So I pushed most of the implementation into external js/*.js, registered it on a global method bag, and composed it at the end of the main component.

// at the end of js/format.js (idempotent registration, safe to load repeatedly)
window.AppLogic = Object.assign(window.AppLogic || {}, {
  yen(n) { return '¥' + Math.round(n).toLocaleString('en-US'); },
  pct(n) { return (n * 100).toFixed(1) + '%'; },
});
 
// compose at the end of the main component
Object.assign(Component.prototype, window.AppLogic);

The line I drew: leave only the runtime's contract surface inline — the constructor, lifecycle, and render method it calls by name — and move everything else to external files. "How the screen is described" follows the runtime; "how the code and operations are structured" is mine to decide. Make that boundary clear and the converge phase stays legible no matter how often you touch the detail.

✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN
✦The criteria for keeping an AI-generated runtime as your foundation instead of rebuilding, and when a zero-dependency buildless setup pays off
✦Concrete code that separates logic with a mixin while leaving only the runtime's contract surface inline
✦A single-source data design around a ledger CSV, plus OGP auto-generation that captures a real browser with Playwright
Secure payment via Stripe · Cancel anytime
✦

Unlock This Article

Get full access to the rest of this article. Buy once, read anytime. This site is ad-free — your support goes directly toward keeping it running.

or
Unlock all articles with Membership →
Share

Thank You for Reading

Claude Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.

  • ✦Copy-paste ready implementation code
  • ✦New advanced guides published daily
  • ✦$5/mo or $10 for lifetime access
View Membership →

Related Articles

⟐ Claude Code2026-05-20
Claude Code Says 'All Tests Pass' but CI Goes Red — Designing Around Exit Code Pitfalls
Locally, Claude Code reports 'all tests pass.' You push it, and GitHub Actions turns red within minutes. The root cause is usually not Claude Code itself but how the shell and the test runner interpret exit codes. Here is a practical, experience-backed walkthrough.
⟐ Claude Code2026-08-27
Trusting the allow rules in your repo, or moving them to the environment
On disposable machines, the permissions.allow rules committed to your repo are dropped while the workspace waits to be trusted. Here is what gets dropped and what survives on 2.1.246, where each kind of rule belongs, and a preflight that catches the gap before a run starts.
⟐ Claude Code2026-05-04
Build a Pipeline Where Docs Update Automatically Every Time Your Code Changes
Build a CI/CD pipeline that auto-generates README, CHANGELOG, and API docs whenever code changes. Use Claude Haiku 4.5 for cost-efficient classification and Sonnet 4.6 for quality output — cutting API costs by up to 70% while keeping documentation accurate.