How much does Design Handoff Spec cost?

About 9 points per run (1 point = $0.01). You get 30 free points on signup to try it. No subscription — pay only for what you run, and points never expire.

Your input is used only to generate this one result; results are saved to your own account history, never shared and never used to train models.

What if the result isn’t good?

If a tool fails to deliver a usable result within 14 days, we refund or re-credit it — just email hi@panshi.io.

Do I need a subscription?

No. Buy points once, use them on every tool, no monthly fee, and they never expire.

← Services

📐 Design Handoff Spec

Describe a screen or component and get a developer-ready handoff spec — layout & spacing, type, color, every state, interactions, responsive, a11y and dev notes.

Every state covered. Default, hover, focus, active, disabled, loading, error and empty — so engineers never have to ask "what about…?"
Concrete defaults. 8pt spacing scale, WCAG-AA contrast, exact px and tokens — and anything assumed is clearly marked "(suggested)".
Respects your system. Give it your brand color, grid or font and it builds on them instead of inventing conflicting values.

See the quality — a real example

Sample only · no credits used

Input — screen / component

"Login card, 360px wide, 16px padding. Email + password fields, a primary 'Sign in' button, and a 'Forgot password?' link."

Context: 8pt grid, brand primary #5E6AD2, Inter font.

Output — handoff spec

Layout & spacing

Card max-width 360px, padding 16px, radius 12px
Vertical rhythm: 24px title → fields, 8px label → input, 16px between fields

Typography

Title Inter 600 / 20px / 28px · Label 500 / 13px · Input 400 / 14px

Button states & tokens

--btn-bg:        #5E6AD2;  /* default */
--btn-bg-hover:  #4F5ABF;  /* -8% L  */
--btn-bg-active: #454FAD;
--btn-fg:        #FFFFFF;  /* AA 8.6:1 */
--btn-disabled:  #5E6AD2 @ 40% opacity;
height: 40px; radius: 8px; focus: 2px ring #5E6AD2 @ 60%

Accessibility

Inputs need <label for>; error text wired via aria-describedby
Visible focus ring on all controls; tab order top→bottom

📐 Design Handoff Spec

See the quality — a real example

Sign in to use this tool

Handoff spec

Related tools