Write a design spec with spacing, type and component states
Stop answering the same Slack questions during a build. Generate a spec that pins down the spacing scale, type ramp and every component state up front.
A good spec is boring on purpose: it says exactly how much padding a card has, which type size a label uses, and what color a button turns when pressed. That precision is what lets two engineers build the same thing without a meeting.
This tool drafts that precision for you. Give it the screen and it returns a tokenized spacing scale (4/8/12/16…), a type ramp with weights and line-heights, and a per-component state table. You edit the numbers to match your system; the structure is already there.
The tool for this
📐Design Handoff Spec
Turn a screen description into a developer-ready handoff spec — spacing, type, states, a11y.
Frequently asked questions
What spacing scale should I use? +
A 4px or 8px base scale is the common default. The tool proposes one and applies it consistently across the spec so you can adjust the base once.
Does it cover responsive breakpoints? +
Yes — it notes how the layout should reflow at smaller widths and which elements stack or hide.
Can I use this with any design system? +
Yes. It produces generic tokens you remap to your own system (Material, Tailwind, a custom scale, etc.).
Related tools
📐Design Handoff Spec
Turn a screen description into a developer-ready handoff spec — spacing, type, states, a11y.
✏️UX Microcopy Pack
Buttons, empty states, errors, tooltips — multiple on-tone variants per slot.
♿Accessibility (WCAG) Check
Heuristic WCAG 2.2 review — likely issues, the success criterion, impact and fixes.
Browse the full tools directory, or see all Panshi services.