DEV Community

Chris F A
Chris F A

Posted on

The Design Handoff Changed — Here's What AI-Legible Specs Look Like

#ai #webdev #productivity #design

A year ago, the design handoff was: Figma file, Slack thread, engineer opens Figma, translates layout, spends 4 hours on one screen. Feedback loop measured in days.

Today, if the engineer is using Claude Code and your Figma has the right structure, one screen can go from design-approved to feature-branch in 20 minutes. But only if design changed how it hands off. Otherwise you get the AI-slop version.

Here's what changed.

The new handoff

The AI does the layout translation. What it needs from you:

  1. A structured spec (not just a Figma link).
  2. Named components and design tokens (not raw pixel values).
  3. State variants explicit (loading / empty / error / success, all designed).
  4. A working example somewhere in the codebase the AI can pattern-match against.

Give the AI these and the engineer's role shifts from 'implementer' to 'QA'.

What makes a spec AI-legible

Bad spec (what most teams still write):

'Login screen with email + password. Match the style of the signup screen.'

Good spec:

**Login screen** (`app/(auth)/login.tsx`)

**Layout:** Centered card, 24px padding, max-width 400px, radius 12px.

**Contents (top-down):**
- Logo (asset: `assets/logo.svg`, 64x64px)
- Heading: 'Welcome back' (typography token: `heading/md`)
- Email input (component: `<Input type="email" label="Email" />`)
- Password input (component: `<Input type="password" label="Password" />`)
- Primary button: 'Sign in' (component: `<Button variant="primary" fullWidth />`)
- Text link: 'Forgot password?' → `/(auth)/reset`
- Divider with 'or'
- Google OAuth button (component: `<Button variant="oauth" provider="google" />`)

**States:**
- Idle: as above.
- Loading: primary button disabled + spinner, other fields disabled.
- Error (invalid credentials): red banner above form, 'Invalid email or password.'
- Success: redirect to `/(protected)/home`.

**Existing pattern to match:** `app/(auth)/signup.tsx`.
Enter fullscreen mode Exit fullscreen mode

The second spec, an AI can implement in one shot. The first spec, the AI guesses and you get random.

Where design still has to be in the room

  • Deciding what should exist on the screen. The AI can render anything; deciding what shouldn't be there is the design call.
  • Reviewing motion / interaction. Static screenshots don't communicate feel. Design still needs to test the interaction on-device.
  • Sign-off on brand-adjacent decisions. Illustrations, iconography, tone of empty-state copy. AI generates competent, not distinctive.
  • The system-level view. Any single screen an AI can build. The design system it's building against is your job.

The design-to-Claude-Code checklist

Before you hand a spec to be implemented via AI:

  • [ ] Every component named matches a real component in the codebase (or is explicitly new with an inline spec).
  • [ ] Every typography/color/spacing value is a design token, not a hex/px.
  • [ ] All five states (loading / empty / error / success / boundary) are designed.
  • [ ] Copy is finalised, not lorem ipsum.
  • [ ] Analytics events (what to track() on interactions) are listed.
  • [ ] The existing screen most similar to this one is linked.

That checklist is 10 minutes of design time. It saves the engineer an hour and gives you a much better first cut back.

Practical: what to put in your team's design workflow

  • Design deliverable is now a Markdown spec + Figma link, not just a Figma link.
  • The Markdown lives in the repo alongside the code (in /docs/screens/ or similar).
  • The AI reads both when implementing.
  • Design reviews the implemented screen, not the code — the AI wrote what you told it to; you check that you told it right.

If you want to see this spec-first workflow in action end-to-end, Applighter is built around exactly this loop — structured specs in, working screens out.

Design's role isn't shrinking with AI. It's shifting to more explicit specification and more rigorous review — the parts that were always undervalued when handoffs were 'just look at the Figma'. The tools finally reward doing them well.

What does your team's handoff look like right now — still Figma-link-and-pray, or have you started writing specs the AI can read? Drop a comment.

Top comments (0)