Design Anywhere.Promote Through Code.

The old design workflow was built around scarcity. Designers made the clearest possible picture of a future product, then engineering rebuilt it in the medium that had state, latency, content, permissions, and failure.

AI changes the cost curve. A team can generate variants in Figma, v0, coding agents, or a browser-based editor before lunch. The question is no longer whether a screen can appear quickly. It can.

The new question is whether the thing that appeared can be maintained. Does it use the right tokens? Does the copy ship? Are the states real? Can engineering review the diff? Can the next designer inherit the decision?

Figma still belongs in the room. So do v0, shadcn registries, screenshots, docs, production URLs, and whatever agent shows up next. Each surface is good at a different kind of thinking.

Figma is strong for shared critique, variables, spatial exploration, diagrams, and workshops. v0 is strong for fast UI sketches and visual iteration. Coding agents are strong when the work needs to touch real components, routes, data, and tests.

The mistake is letting any of those surfaces become a hidden source of truth. A tool can help choose direction. The repo decides what becomes part of the system.

The durable system is the relationship between tokens, components, copy, decisions, tests, and review. If those pieces live apart, drift becomes normal. If they live together, drift has fewer places to hide.

That is why this starter centers the cascade. The cascade is not another generator. It is the promotion step that turns a chosen direction into token changes, skill files, locale copy, decision records, and audit results.

The same pipeline can accept a short intake form today, Figma variables tomorrow, a v0 branch next week, and a production screenshot after that. The input can change. The promotion rules should not.

Handoff asks one team to explain and another team to reinterpret. Promotion asks the work to become inspectable. The branch shows the implementation. The preview URL shows the behavior. The audits show what passed. The decision log shows why.

That does not remove judgment. It makes judgment easier to apply. Designers can critique hierarchy and feel in the browser. Engineers can review accessibility, performance, integration, and maintainability against the same artifact.

A PR is not just an engineering container. In this workflow, it is the design review packet, the implementation record, and the collaboration record in one place.

The future-proof version is not anti-Figma. It is anti-drift. Figma can send variables, component context, and design snapshots into the repo. The repo can send live UI back to Figma when the team needs critique, stakeholder review, or workshop material.

Code Connect and MCP context help agents understand the design, but they do not remove the need for governance. A design node can guide an agent. It cannot prove the result is accessible, tokenized, localized, tested, and reviewable.

A healthy loop lets Figma stay excellent at collaboration while the codebase remains the place where product decisions become durable.

This workflow asks teams to treat design output with the same rigor they already expect from engineering output. That is heavier than a mockup. It is also the point.

Fast AI tools can produce a lot of plausible work. Without promotion rules, that work becomes a pile of one-off spacing, hardcoded color, vague copy, missing states, and untraceable decisions.

The playbook is a way to let exploration stay fast without letting the system get soft.

Do not start by arguing which AI tool should win. Start by defining how any tool output becomes safe to keep.

Pick one valuable flow, build every state, run the gates, and open a PR. Keep the parts that survive review. Delete what was only scaffolding.

That is the modern playbook: AI for exploration, code for truth, audits for trust, and PRs for collaboration.