메뉴
Design a spacing and layout token system for a Figma design system. Use when asked to create a spacing system, define layout tokens, set up a grid system, build a spacing scale, or establish layout foundations for a Figma file. Produces a complete spacing scale, grid definition, component spacing conventions, and Figma implementation guide.
SOC 직업 분류 기준
Apply prioritisation frameworks (RICE, MoSCoW, Kano, ICE, Opportunity Scoring) to rank features and backlog items. Use when asked to prioritise features, rank a backlog, decide what to build next, or evaluate tradeoffs between competing ideas. Produces a scored, ranked feature list with framework-specific tables, recommended build order, deprioritised items, and assumptions made.
Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a complete annotation set covering interactions, states, spacing, accessibility, and edge cases.
Audit a Figma component library for consistency, coverage gaps, and naming issues. Use when asked to audit components, review a design system, check component consistency, identify missing components, or assess Figma library health. Produces a structured audit report with issues prioritised by impact, naming recommendations, and a fix plan.
Write a structured design brief for a Figma design task from a product requirement or feature request. Use when asked to write a design brief, create a design spec for Figma, turn a PRD into design requirements, or brief a designer on what to build in Figma. Produces a brief with goals, scope, user flows, components needed, constraints, and success criteria.
Runs a PM-perspective design critique focused on product outcomes and user goals, not aesthetics. Use when asked for a PM design critique, a product review of a Figma design, or feedback from a product perspective without needing to be a designer. Produces structured outcome-based feedback tied to user goals, business metrics, and requirement coverage.
Runs a pre-handoff QA checklist on a Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, or validate a Figma file is ready to build. Produces a structured QA report covering file hygiene, component usage, accessibility, and handoff readiness with explicit pass/fail status per item. Optimised for Opus 4.7 and newer models.
| name | figma-spacing-system |
| description | Design a spacing and layout token system for a Figma design system. Use when asked to create a spacing system, define layout tokens, set up a grid system, build a spacing scale, or establish layout foundations for a Figma file. Produces a complete spacing scale, grid definition, component spacing conventions, and Figma implementation guide. |
Produces a complete spacing and layout token system — the foundation that makes a design system consistent and developer handoff unambiguous.
[4px or 8px] with rationale. All values must be multiples.
| Token | Value | Use case |
|---|---|---|
| spacing.none | 0px | Removing space intentionally |
| spacing.xs | 4/8px | Icon padding, tight labels |
| spacing.sm | 8/12px | Internal component padding compact |
| spacing.md | 12/16px | Internal component padding standard |
| spacing.lg | 16/24px | Section padding, card internal |
| spacing.xl | 24/32px | Between components |
| spacing.2xl | 32/48px | Section separation |
| spacing.3xl | 48/64px | Page-level breaks |
| spacing.4xl | 64/96px | Hero sections |
Mobile (375px): 4 columns, margin [value], gutter [value] Tablet (768px): 8 columns, margin [value], gutter [value] Desktop (1440px): 12 columns, margin [value], gutter [value], max content width [value]
| Context | Token | Example |
|---|---|---|
| Button horizontal padding | spacing.md | Left/right |
| Button vertical padding | spacing.sm | Top/bottom |
| Card internal padding | spacing.lg | All sides |
| Input padding | spacing.sm vertical, spacing.md horizontal | |
| Icon gap from label | spacing.xs | |
| Section gap | spacing.xl |
