메뉴
Use when packaging a design for developer implementation, writing component specifications, running design QA against a built UI, exporting assets from Figma, or resolving design-vs-code drift before a release.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | design-handoff |
| description | Use when packaging a design for developer implementation, writing component specifications, running design QA against a built UI, exporting assets from Figma, or resolving design-vs-code drift before a release. |
| metadata | {"references":["references/annotation-guide.md","references/handoff-checklist.md","references/qa-process.md"]} |
Tick every item before transferring to engineering. Missing items become implementation debt.
--spacing-4 / --color-primary, never 16px / #3b82f6.# Figma assets via figma-export CLI
npx figma-export use-config
# Or via REST:
curl -H "X-Figma-Token: $FIGMA_TOKEN" \
"https://api.figma.com/v1/images/$FILE_KEY?ids=$NODE_IDS&format=svg&scale=2" \
| jq -r '.images[]' | xargs -I{} curl -o "./assets/{}.svg" "{}"
# Optimize SVGs
npx svgo --multipass --folder ./assets
# Convert raster to WebP/AVIF
npx @squoosh/cli --webp '{"quality":85}' --avif '{"cqLevel":30}' ./images/*.png
For every interactive component, ship this state matrix:
| State | Background | Text | Border | Shadow | Cursor | Opacity |
|---|---|---|---|---|---|---|
| Default | --color-surface | --color-on-surface | --border-default | --shadow-sm | pointer | 1 |
| Hover | --color-surface-hover | --color-on-surface | --border-hover | --shadow-md | pointer | 1 |
| Active | --color-surface-active | --color-on-surface | --border-active | none | pointer | 1 |
| Focus | --color-surface | --color-on-surface | --border-focus | --shadow-focus | pointer | 1 |
| Disabled | --color-surface-disabled | --color-on-surface-disabled | --border-disabled | none | not-allowed | 0.6 |
| Loading | --color-surface | --color-on-surface-muted | --border-default | --shadow-sm | wait | 0.8 |
| Error | --color-error-surface | --color-error | --border-error | none | pointer | 1 |
Box-model annotation block (paste into Figma comment or spec doc):
[Button / Primary]
├── Width: auto (min 96px) | Height: --size-10
├── Padding: --spacing-2 --spacing-4
├── Background: --color-primary
├── Border: 1px solid transparent | Radius: --radius-md
├── Typography: --font-sans / --text-sm / 600 / --leading-tight
└── Color: --color-on-primary
Run after the engineer says "done", before sign-off. Each gate has a documented failure path.
Compare implemented page against the Figma frame side-by-side. Verify spacing rhythm, typography hierarchy, color application, component proportions.
Fail path: open a ticket with [screenshot from Figma | screenshot from build | element selector | token expected vs token used]. Re-run Gate 1 after fix.
Test at 320, 375, 768, 1024, 1440, 1920px (Chrome DevTools Cmd+Shift+M). Verify layout matches the responsive spec; check overflow, truncation, and touch targets.
Fail path: record the breakpoint and behavior. If a layout shift wasn't specified, escalate to design — do not let the engineer invent it.
Hover, tab through, submit invalid, trigger loading, empty the data. Each state must match the matrix above.
Fail path: flag missing states. Loop back to design if any state was never specified.
npx @axe-core/cli https://staging.example.com/page --tags wcag2aa
npx pa11y https://staging.example.com/page --standard WCAG2AA
Plus manual: keyboard-only flow, screen reader on critical paths, contrast for focus ring against every background it lands on.
Pass criteria: 0 critical / serious axe violations, 0 pa11y errors, all interactive elements reachable.
npx lighthouse https://staging.example.com/page \
--only-categories=performance \
--output=json --output-path=lh.json \
--chrome-flags="--headless" \
--throttling-method=devtools
Pass criteria: LCP < 2.5s, CLS < 0.1, INP < 200ms, Performance score ≥ 90. Verify animations hold 60fps in DevTools Performance panel.
Fail path: Performance regressions get a dedicated ticket (not bundled with visual bugs). Re-verify only the failing metric after the fix.
All five gates green → mark the Figma frame "Implemented" and close the handoff ticket. Any gate red → block release.