Design Spec Framework

design-spec-framework

Spec-Driven Development for product design. Clone the template, open it in Claude Code, and walk a product from a blank folder to a handoff-ready design system with /dsf:* commands — the way spec-kit does it for code, but for design.

The repo is the design file — and the source of truth. Figma is not required, and not forbidden: if your team lives in Figma, the finished system can be exported there through the Figma MCP at handoff, from a design system that already exists as code.

What it looks like

The project home page (index.html) is the state view of the run — phases on the left, the step-by-step guide with copy-paste prompts in the middle, the phase's done-criteria on the right:

"How this works" states the working contract on one screen: the page tracks state, the chat executes:

Why this exists

Most product design work has three chronic problems, and none of them is about talent:

1. Decisions evaporate. Research lives in a Notion page nobody reopens, the reasoning behind a color lives in a Slack thread, tone of voice lives in the designer's head. Six months later nobody can say *why* the product looks and speaks the way it does — so every redesign starts from zero.
2. The mockup is a dead end. A Figma file is a *picture of* the product, not the product. At handoff it gets re-implemented from scratch, states and edge cases get lost in translation, and from that day on the design and the code drift apart forever.
3. AI without discipline produces slop. Ask a model for "a cozy design" and you get the same cream-and-terracotta page as everyone else, happy-path screens with no empty/error/loading states, invented user insights, and celebration emoji in system messages. The model is powerful; unguided, it defaults to…