Handoff

From design tokens to a shippable component spec.

Choose a design from your workspace or paste a design.md, pick a component, and describe what it needs to do. You get the anatomy, variants, states and accessibility requirements, every property mapped to your real tokens, and code that uses your theme variables instead of hard-coded values.

Use Component Spec Generator See the Pro plan

Credits per run12

Runs in a Pro monthup to 37

Typical timeAbout 2–3 minutes

Failed runsNever charged

Illustrative sample

Button · Northwind React + Tailwind v4

export function Button({ variant = "primary", ...props }) {
  return (
    <button
      className="rounded-[var(--radius-md)] bg-[var(--color-brand-primary)]
        text-[var(--color-brand-on-brand)] focus-visible:outline-2"
      {...props}
    />
  );
}

Background color.brand.primary

Corner radius radius.md

Focus ring color.border.focus

What you get

Everything a single run returns.

A full specification

Anatomy, variants, sizes, interaction states and do/don’t usage guidance.

Token mapping

Each visual property mapped to a token from your system, with its resolved value.

Accessible by default

Keyboard, focus, ARIA and contrast requirements written into the spec.

Code that uses your theme

Component files that reference your exported CSS variables, ready to copy or download.

How it works

Three steps from input to result.

Typical run time: about 2–3 minutes.

Pick your system
Select a saved design or paste any valid design.md.
Describe the component
Choose a preset or name your own, and add the requirements that matter.
Hand it off
Review the spec and copy code that already speaks your token language.

Who it’s for

Made for real design work.

Designer–developer handoff. Replace screenshots and redlines with a spec developers can implement directly.
Grow a design system. Document new components consistently with the tokens you already have.
Prompt AI coding tools precisely. Give your AI assistant a component contract instead of a vague request.

Good to know

What you provide, and the limits.

A design from your workspace, or a pasted design.md.
A component: a button, card, navigation, data table or your own.
Your requirements and a code target: React with Tailwind, React with CSS, or HTML with CSS.
Generated code is a strong starting point. Review it and test it in your codebase.
Tokens that don’t exist in your design are flagged rather than invented.

Questions

About Component Spec Generator.

Which design systems can I use?

Any valid design.md: systems saved in your workspace, ones generated from URLs or screenshots, or a file you paste. DesignMD checks it first.

Does the code use my tokens?

Yes. The code references your design’s own CSS variables, so it matches your theme from the first paste. Any token that can’t be matched is flagged in the spec rather than invented.

Which frameworks are supported?

React with Tailwind CSS v4, React with plain CSS, and framework-free HTML with CSS.

Can I describe my own component?

Yes. Pick a preset such as a button, pricing card or data table, or name a custom component and describe its requirements.

Works well with