Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
Brand Reference (DESIGN.md)
Fetch and apply DESIGN.md files from the awesome-design-md ecosystem. Each file is a complete, AI-readable design spec with exact CSS values for 66 real brands.
1. Parse goal/context
↓
2. Search slide-strategies.csv → Get strategy + emotion beats
↓
3. For each slide:
a. Query slide-layout-logic.csv → layout + break_pattern
b. Query slide-typography.csv → type scale
c. Query slide-color-logic.csv → color treatment
d. Query slide-backgrounds.csv → image if needed
e. Apply animation class from slide-animations.css
↓
4. Generate HTML with design tokens
↓
5. Validate with slide-token-validator.py
Pattern Breaking (Duarte Sparkline)
Premium decks alternate between emotions for engagement:
"What Is" (frustration) ↔ "What Could Be" (hope)
System calculates pattern breaks at 1/3 and 2/3 positions.
Slide Requirements
ALL slides MUST:
Import assets/design-tokens.css - single source of truth
Use CSS variables: var(--color-primary), var(--slide-bg), etc.
Use Chart.js for charts (NOT CSS-only bars)
Include navigation (keyboard arrows, click, progress bar)
Slides must import design-tokens.css and use var() exclusively
From design-systems
Component library architecture, design tokens, Storybook, theming, documentation, and scalable design system patterns
Design Systems & Component Libraries
Purpose
Provide expert guidance on building scalable design systems: token architecture, component API design, variant systems, theming, Storybook documentation, and the organizational patterns that make component libraries maintainable across teams and products.
Key Patterns
Token Architecture
Tokens are the atomic design decisions that feed every component. Structure them in three tiers:
Design skeleton/placeholder states for every component
No keyboard support
Inaccessible for keyboard users
Implement onKeyDown handlers for Enter, Space, Escape, Arrow keys
From design-principles
Visual design fundamentals — golden ratio, visual hierarchy, spacing systems, typography scale, color theory, Gestalt principles, and layout patterns
Design Principles
Purpose
Provide foundational visual design knowledge that informs every UI decision: proportional systems, hierarchy tools, spacing mathematics, typography, color theory, perceptual psychology (Gestalt), and proven layout patterns. This skill underpins all UI-related skills in the mesh.
Golden Ratio (phi = 1.618)
The golden ratio produces naturally harmonious proportions. Use it to derive type scales, spacing progressions, and layout divisions.
Phi-Based Type Scale
Starting from 1rem (16px base), multiply/divide by phi:
4.236rem (67.8px) — Hero / display
2.618rem (41.9px) — H1
1.618rem (25.9px) — H2
1.000rem (16.0px) — Body / base
0.618rem (9.9px) — Caption / fine print (use sparingly, min 0.75rem for readability)
Practical scale (rounded for pixel grid alignment):
Use for: content + sidebar, text + image, main + aside.
Visual Hierarchy
The order in which the eye processes elements. Use these tools in priority order:
Hierarchy Tools (strongest to weakest)
1. SIZE Larger elements are seen first
2. COLOR/CONTRAST High-contrast or saturated elements pop
3. WEIGHT Bold text draws the eye before regular weight
4. POSITION Top-left (LTR) and above-the-fold have priority
5. WHITESPACE Isolated elements with breathing room stand out
6. DEPTH Shadows and elevation create foreground/background
Applying Hierarchy
Content Role
Size
Weight
Color
Spacing Above
Primary heading
2.625rem
700-800
High contrast
4rem
Secondary heading
1.625rem
600-700
High contrast
2rem
Body text
1rem
400
Medium contrast
1rem
Caption / metadata
0.8125rem
400
Low contrast
0.5rem
Label / badge
0.75rem
500-600
Accent color
0.25rem
Hierarchy Anti-patterns
Everything bold = nothing bold. Limit bold to 1-2 elements per section.
Too many colors = visual noise. Stick to 1 primary + 1 accent + neutrals.
No breathing room = claustrophobic. Content needs whitespace to breathe.
Equal sizing = flat hierarchy. Vary sizes by at least 1.2x between levels.
Spacing Systems
4px Base Grid (Micro Grid)
All spacing values must be multiples of 4px (0.25rem):
Within component: 4-12px (tight coupling)
Between components: 16-32px (related grouping)
Between sections: 48-96px (clear separation)
The 3C Rule
Content spacing < Component spacing < Container spacing. Never let inner spacing exceed outer spacing.
Typography
Measure (Line Length)
Optimal reading measure: 45-75 characters per line. Target 65ch.
.prose { max-width: 65ch; } /* Ideal for body text */.prose-wide { max-width: 80ch; } /* Code, tables */.prose-narrow { max-width: 45ch; } /* Captions, sidebars */
Line Height
Headings: 1.1 - 1.25 (tight, because large text needs less leading)
Body: 1.5 - 1.6 (comfortable reading)
Small: 1.6 - 1.75 (small text needs more leading)
Code: 1.5 - 1.7 (legibility in monospace)
Letter Spacing
Large headings (>2rem): -0.02em to -0.04em (tighten)
Body text: 0 (default)
All caps: +0.05em to +0.1em (widen for legibility)
Small text (<0.875rem): +0.01em to +0.02em (slight widen)
Font Pairing Rules
Contrast, not conflict — Pair a serif with a sans-serif, not two similar sans-serifs.
Max 2 families — One for headings, one for body. A third for code if needed.
Weight range — Ensure the chosen families have weights 400, 500, 600, 700 minimum.
x-height match — Paired fonts should have similar x-heights for visual harmony.
Build palettes from a single hue with systematic lightness steps:
50: Background tint (lightest)
100: Hover background
200: Active background, borders
300: Disabled text, secondary borders
400: Placeholder text
500: Base color (the "brand" shade)
600: Hover state for base
700: Active state, dark text on light
800: Headings on light backgrounds
900: Primary text on light backgrounds
950: Darkest shade (near black)
Contrast Requirements (WCAG AA)
Normal text (<24px / <19px bold): 4.5:1 minimum
Large text (>=24px / >=19px bold): 3:1 minimum
UI components (borders, icons): 3:1 minimum
Focus indicators: 3:1 minimum against adjacent colors
Dark Mode Strategy
Don't just invert. Reduce contrast to avoid eye strain:
Light mode: text gray-900 on white (21:1 ratio — soften to gray-800)
Dark mode: text gray-100 on gray-900 (~15:1 ratio — comfortable)
Light mode surfaces: white, gray-50, gray-100
Dark mode surfaces: gray-950, gray-900, gray-800
Accent colors: reduce chroma slightly in dark mode to avoid vibrating
Gestalt Principles
Perceptual psychology principles that explain how users group visual elements.
1. Proximity
Elements close together are perceived as related. Use spacing to create groups.
Related items: 8-16px gap (tight = grouped)
Unrelated items: 32-48px gap (loose = separate)
2. Similarity
Elements that look alike are perceived as related. Use consistent styling for related items.
Same role → same size, color, weight
Different role → vary at least 2 visual properties
3. Continuity
The eye follows lines and curves. Use alignment to create visual flow.
Left-align body text (LTR languages)
Maintain consistent left edge across sections
Use consistent grid columns for vertical alignment
4. Closure
The brain completes incomplete shapes. Use this for:
Card boundaries with subtle borders (don't need heavy outlines)
Icon design (simple shapes, brain fills gaps)
Truncated content with "..." (user infers continuation)
5. Figure-Ground
Elements are perceived as either foreground (figure) or background (ground).
Elevation creates figure: shadow-sm for cards over background
Color contrast creates figure: primary button on neutral surface
Blur creates depth: backdrop-blur for overlays
6. Common Region
Elements within a shared boundary are perceived as grouped.
Cards group related content
Bordered sections separate concerns
Background color changes delineate areas
Layout Patterns
F-Pattern (Content-Heavy Pages)
Users scan in an F shape: across the top, then down the left side.
Use for: articles, documentation, dashboards, feeds
Structure:
- Strong horizontal element at top (hero, title bar)
- Left-aligned headings serve as scan anchors
- Most important content in the first two paragraphs
- Secondary content in sidebars (right, 38.2% width)
Z-Pattern (Marketing / Landing Pages)
Users scan in a Z: top-left → top-right → bottom-left → bottom-right.
Use for: landing pages, sign-up screens, product pages
Structure:
- Top-left: logo / brand
- Top-right: nav / CTA
- Center: hero content (the diagonal)
- Bottom-left: supporting info
- Bottom-right: primary CTA
Rule of Thirds
Divide the viewport into a 3x3 grid. Place key elements at intersections.
12-column grid: Most flexible, standard for dashboards and complex layouts
4-column grid: Mobile layouts, simple content pages
Asymmetric: 61.8% / 38.2% (golden ratio), 2fr / 1fr, content + sidebar
Full-bleed: Edge-to-edge sections with contained content max-width
Responsive Breakpoints
/* Mobile first */
sm: 640px/* Large phones, small tablets */
md: 768px/* Tablets portrait */
lg: 1024px/* Tablets landscape, small desktops */
xl: 1280px/* Standard desktops */2xl: 1536px/* Large desktops */
Content Width Constraints
Prose content: 65ch (~600px)
Card grids: max 1280px with 16-24px gutters
Dashboards: max 1440px or full-width with sidebar
Marketing hero: max 1200px centered
Forms: max 480px for single-column, 640px for two-column
Quick Reference: Component Design Checklist
Before outputting any UI component, verify:
[ ] Spacing uses 4px grid (0.25rem multiples)
[ ] Typography follows the phi scale (or project scale)
[ ] Heading hierarchy is correct (only one H1, correct nesting)
[ ] Line length is 45-75ch for body text
[ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)
[ ] Related elements are grouped by proximity
[ ] Interactive elements have distinct hover/focus/active states
[ ] Whitespace creates clear visual hierarchy
[ ] Layout follows F-pattern (content) or Z-pattern (marketing)
[ ] Cards have depth (shadow or border, never flat)
[ ] Maximum 2 font families in use
Pitfalls
Pixel-perfect obsession — Design systems work in relative units (rem, em, %). Don't fight sub-pixel rendering.
Too many accent colors — One primary + one secondary accent. More than that creates visual chaos.
Ignoring the grid — Off-grid elements create subliminal unease. Everything should align to the 4px/8px grid.
Symmetric spacing everywhere — Asymmetry creates visual interest. Use golden ratio divisions, not 50/50 splits.
Dark mode as an afterthought — Design for both modes simultaneously. Color tokens should have light/dark variants from day one.
Skipping the squint test — Blur your eyes and look at the layout. If you can't tell what's most important, the hierarchy is flat.
From design-router
Design intent orchestrator — analyzes what the user wants and activates the precise skill chain needed. The brain before the hands.
Design Router — Intent Orchestrator
Purpose
This is the decision layer for all design work. Before any UI code is written, this skill
analyzes the user's intent and assembles the right skill chain. Think of it as the architect
who reads the brief before calling in specialists.
How It Works
Step 1: Classify the Intent
Read the user's request and classify into one of these design intents:
BUILD → Create something new from scratch
IMPROVE → Make existing UI better
FIX → Repair broken layout/styling/responsiveness
REVIEW → Audit existing design quality
STYLE → Change aesthetic (glassmorphism, minimalism, etc.)
BRAND → Logo, identity, color system, design tokens
RESPONSIVE → Mobile/tablet/desktop adaptation
ANIMATE → Add motion and transitions
TYPOGRAPHY → Font selection, type scale, text styling
SYSTEM → Design system / component library creation
Step 2: Activate the Skill Chain
Each intent maps to an ordered chain of skills. Load them in sequence:
BUILD:
1. creative-vision → Brainstorm style direction
2. design-principles → Lock typography + color + spacing
3. impeccable-frontend-design → Build it
4. ui-ux-pro → Validate against standards
IMPROVE:
1. ui-ux-pro → Audit current state (Phase 1-4 review)
2. creative-vision → Identify style improvements
3. impeccable-frontend-design → Implement changes
4. ui-ux-pro → Re-validate
FIX:
1. ui-ux-pro → Identify what's broken
2. responsive-design → If layout issue
3. css-architecture → If styling/specificity issue
4. accessibility → If a11y issue
REVIEW:
1. ui-ux-pro → Full 4-phase review
2. web-design-guidelines → Vercel guidelines check
3. accessibility → WCAG audit
STYLE:
1. creative-vision → Explore style options
2. design-principles → Apply composition rules
3. ui-styling → Implement with Tailwind/shadcn
4. animation → Add motion if requested
BRAND:
1. creative-vision → Brainstorm brand direction
2. design-principles → Color theory + typography
3. brand → Identity system
4. design-systems → Component library
RESPONSIVE:
1. responsive-design → Breakpoint strategy
2. css-architecture → Container queries, grid
3. ui-ux-pro → Validate at all viewports
ANIMATE:
1. animation → Motion strategy
2. tailwindcss → Tailwind animation utilities
3. ui-ux-pro → Validate motion-reduce support
TYPOGRAPHY:
1. design-principles → Type scale, font pairing (PRIMARY source)
2. ui-ux-pro → Visual hierarchy validation
3. css-architecture → CSS custom properties for fonts
4. responsive-design → Fluid typography with clamp()
SYSTEM:
1. design-systems → Token architecture, component specs
2. design-principles → Foundational scales
3. ui-styling → shadcn/Tailwind implementation
4. brand → Brand token integration
GENERATE (AI Design):
1. stitch → Generate screens with Google Stitch AI
2. design-principles → Validate typography + color + spacing
3. impeccable-frontend-design → Convert to production code
4. ui-ux-pro → Validate against standards
DESIGN-TO-CODE:
1. stitch (extract) → Extract design DNA from screenshot/URL
2. stitch (implement) → Convert to React/Next.js components
3. design-systems → Apply design tokens
4. impeccable-polish → Production finish
PENCIL-EDIT:
1. stitch (edit) → Open/edit in Pencil visual editor
2. stitch (extract) → Extract variables and tokens
3. stitch (implement) → Convert to production code
Step 3: Context Injection
Before handing off to the first skill in the chain, inject:
Style context: Which of the 5 styles applies? (Glassmorphism, Skeuomorphism, Claymorphism, Minimalism, Liquid Glass)
Composition rules: Which rules are most relevant? (Thirds, Odds, Balance, Scale, Grid)
Existing patterns: What does the current codebase use? (Check Tailwind config, globals.css, component patterns)
Typography state: What fonts/scale does the project already have?
Typography Locator
Typography content lives in multiple places. Here's the definitive map:
Quick pick: Read design-principles for the 13 go-to pairings
Full exploration: Read docs/font-pairings.md for all 230
Ready to implement: Read typography.csv for the pairing + its Tailwind config + Google Fonts import URL
Font rules: Read design-principles for weight/height/spacing rules
Decision Shortcuts
Quick patterns for common requests:
User Says
Activate
"build me a..."
creative-vision → impeccable-frontend-design
"make it look better"
ui-ux-pro (review) → creative-vision
"fix the layout"
responsive-design → css-architecture
"use glassmorphism"
ui-styling (has Tailwind classes for all 5 styles)
"what font should I use"
design-principles (font pairing rules)
"design system"
design-systems → design-principles
"landing page"
landing-gen → impeccable-frontend-design
"add animations"
animation → ui-ux-pro (motion-reduce check)
"dark mode"
ui-styling (dark mode patterns section)
"audit my design"
ui-ux-pro (4-phase review workflow)
"generate a design"
stitch (AI generation → code)
"design with AI"
stitch (generate mode)
"edit in pencil"
stitch (edit mode → Pencil .pen)
"screenshot to code"
stitch (extract → implement)
"wireframe to code"
stitch (generate → implement)
"design to code"
stitch (full pipeline)
From creative-vision
Creative brainstorming agent — explores style directions, generates design concepts, and proposes aesthetic improvements before any code is written
Creative Vision — Design Brainstorming Agent
Purpose
This is the creative thinker in the design pipeline. Before writing CSS or JSX, this skill
explores what the design could be. It generates multiple style concepts, evaluates trade-offs,
and proposes a direction the user can approve before implementation begins.
This skill does NOT write code. It outputs a design brief that downstream skills execute.
Brainstorming Process
Phase 1: Understand the Canvas
Before proposing anything, gather:
QUESTIONS TO ANSWER (from context, code, or by asking):
1. What is being designed? (page type, component, full app)
2. Who is the audience? (developers, consumers, enterprise, creative, kids)
3. What emotion should it evoke? (trust, excitement, calm, urgency, playfulness)
4. What's the existing tech? (Tailwind version, shadcn, existing theme)
5. Are there brand constraints? (colors, fonts, existing identity)
6. What's the competitive context? (what do similar products look like?)
Phase 2: Generate 3 Concepts
Always propose exactly 3 directions (Rule of Odds). Each concept is a mini design brief:
## Concept A: [Name] — [1-line vibe description]**Style**: [Primary style from the 5 available]
**Palette**: [3-5 colors with hex/oklch values]
**Typography**: [Heading font + Body font, with reasoning]
**Composition**: [Which rules apply most — Thirds? Grid? Balance?]
**Motion**: [Animation strategy — subtle/bold/none]
**Mood**: [2-3 reference sites from inspiration sources]
**Best for**: [When this concept wins over the others]
### Visual Preview (text description)
[Describe what the hero/main section would look like in vivid detail]
Concept Generation Matrix
Cross the audience with the emotion to find the right style starting point:
docs/font-pairings.md — 230 pairings in 10 categories with source + mood
.claude/skills/ui-ux-pro-max/data/typography.csv — 50 curated with Tailwind config, Google Fonts URLs, CSS imports (ready to paste)
Quick-reference picks by vibe:
Pair
Vibe
Best For
Inter + Inter
Clean, neutral, professional
SaaS, dashboards, tools
Poppins + Open Sans
Modern, friendly, corporate
Startups, business apps
Space Grotesk + DM Sans
Tech, innovative, bold
AI products, dev tools
Playfair Display + Inter
Elegant, premium, editorial
Luxury brands, fashion
Geist + Geist Mono
Developer-native, Vercel feel
Dev tools, CLIs, code-heavy
DM Sans + DM Serif
Contemporary editorial
Magazines, portfolios, creative
Cabinet Grotesk + Instrument Serif
Bold geometric + elegant serif
Fashion, luxury, agencies
Clash Display + Satoshi
Statement headline + clean body
Product launches
Cormorant Garamond + Libre Baskerville
Classic, literary, refined
Publishing, editorial
General Sans + Sentient
Friendly geometric + humanist
Consumer apps, social
For the full 230 pairings organized by category (Serif+Sans, Sans+Sans, Display+Body, Monospace+Sans, Handwritten+Sans, etc.), read docs/font-pairings.md.
Phase 4: Color Exploration
Generate palettes using these methods:
MONOCHROMATIC: Single hue, varying lightness. Safe. Professional.
Example: Blue-500 primary, Blue-100 bg, Blue-900 text
ANALOGOUS: Adjacent hues (30° apart). Harmonious. Warm/cool themes.
Example: Blue-500 primary, Cyan-400 accent, Indigo-600 hover
COMPLEMENTARY: Opposite hues (180°). High contrast. Bold.
Example: Blue-500 primary, Orange-400 accent (use sparingly)
SPLIT-COMPLEMENT: One hue + two neighbors of its complement. Vibrant but balanced.
Example: Blue-500 primary, Orange-300 accent, Red-400 highlight
TRIADIC: Three equally-spaced hues (120°). Energetic. Use for playful/creative.
Example: Blue-500, Yellow-500, Red-500 (only one dominant)
Palette generation formula:
1. Pick primary hue based on emotion (Blue=trust, Green=growth, Purple=creative, etc.)
2. Generate 50-950 scale using oklch for perceptual uniformity
3. Add 1 accent color (complementary or analogous)
4. Add semantic colors (success=emerald, warning=amber, error=red, info=blue)
5. Generate neutral scale (true neutral or slightly tinted toward primary)
Phase 5: Present & Decide
Present all 3 concepts clearly. Recommend one with reasoning. Ask the user to pick or mix.
Output format:
# Design Direction: [Project Name]## The Brief
[1-2 sentences: what we're designing and for whom]
## Concept A: [Name]
[Full concept as described above]
## Concept B: [Name]
[Full concept]
## Concept C: [Name]
[Full concept]
## Recommendation
I'd go with **Concept [X]** because [reasoning tied to audience + emotion + tech constraints].
## Next Steps
Once you pick a direction, I'll hand off to:
1.`design-principles` — Lock the type scale + color tokens
2.`impeccable-frontend-design` — Build it
3.`ui-ux-pro` — Validate against standards
Inspiration Quick-Reference
When brainstorming, mentally reference these for current trends:
Mobile patterns, bottom sheets, gesture interactions
Godly
Landing page structures, above-the-fold patterns
Dribbble
Color palette trends, icon styles, illustration approaches
Behance
Full case studies, design process documentation
Refero
Category-based design references
Anti-Patterns
Don't propose without understanding the audience — a kids' app and an enterprise dashboard need wildly different aesthetics
Don't default to minimalism for everything — it's safe but not always right
Don't ignore existing brand — if the project has colors/fonts, work with them
Don't over-specify code — this skill outputs intent, not implementation
Don't propose more than 3 concepts — decision paralysis is real (Rule of Odds applies to concepts too)
Don't skip typography — font choice makes or breaks a design. Always specify the pair.
From figma
Figma API integration, design tokens export, Auto Layout to Flexbox mapping, Dev Mode handoff, code-to-design reverse translation, and component property mapping
Figma
Purpose
Bridge the gap between design and code. This skill covers the Figma REST API, design token extraction, Auto Layout to CSS/Flexbox translation, Dev Mode handoff workflows, component property to React prop mapping, and reverse code-to-design translation.
Figma REST API
Authentication
Header: X-Figma-Token: <personal_access_token>
Base URL: https://api.figma.com/v1
Core Endpoints
Endpoint
Method
Purpose
/files/:file_key
GET
Get full file tree (nodes, styles, components)
/files/:file_key/nodes?ids=:ids
GET
Get specific nodes by ID
/images/:file_key?ids=:ids&format=png
GET
Export nodes as images (png, jpg, svg, pdf)
/files/:file_key/styles
GET
Get all published styles
/files/:file_key/components
GET
Get all published components
/files/:file_key/component_sets
GET
Get component sets (variant groups)
/files/:file_key/variables/local
GET
Get local variables (colors, spacing, etc.)
/files/:file_key/variables/published
GET
Get published variable collections
File Key Extraction
From URL: https://www.figma.com/design/ABC123xyz/Project-Name
File key: ABC123xyz
Node IDs are in the format 1:234 (page:node). URL-encode as 1%3A234.
Pagination and Depth
?depth=1 Only top-level children (fast, for structure scanning)
?depth=2 Two levels deep (good for page → frame overview)
?depth=N N levels (full tree can be very large)
For large files, always use ?ids= to request specific nodes rather than the full tree.
Image Export
GET /images/:file_key
?ids=1:234,5:678
&format=svg (svg | png | jpg | pdf)
&scale=2 (1-4, for raster formats)
&svg_include_id=true (include node IDs in SVG)
Auto Layout to CSS/Flexbox
Figma's Auto Layout maps directly to CSS Flexbox. Use this reference for 1:1 translation.
// Figma has a variant set with "State" property: default, hover, active, disabled// Don't create a "state" prop — these are CSS states, not props// Figma has a variant set with "Type" property: filled, outlined, ghost// This IS a prop:typeButtonVariant = 'filled' | 'outlined' | 'ghost';
Code-to-Design Reverse Translation
When given existing code (especially Tailwind), translate back to a Figma specification.
Tailwind to Figma Auto Layout
Tailwind
Figma Property
flex flex-col
Auto Layout: Vertical
flex flex-row
Auto Layout: Horizontal
gap-4
Item spacing: 16
p-6
Padding: 24 (all sides)
px-4 py-3
Padding: L12, R12, T12, B12
items-center
Cross axis: Center
justify-between
Primary axis: Space between
flex-1
Sizing: Fill container
w-fit
Sizing: Hug contents
w-[320px]
Sizing: Fixed 320
min-w-0
Min width: 0
max-w-md
Max width: 448
Tailwind to Figma Visual Properties
Tailwind
Figma Property
rounded-lg
Corner radius: 8
rounded-xl
Corner radius: 12
rounded-full
Corner radius: 9999
shadow-sm
Drop shadow: 0 1 2 0 rgba(0,0,0,0.05)
shadow-md
Drop shadow: 0 4 6 -1 rgba(0,0,0,0.1)
bg-gray-100
Fill: #F3F4F6
text-gray-900
Text color: #111827
text-sm
Font size: 14, Line height: 20
font-medium
Font weight: Medium (500)
border border-gray-200
Stroke: Inside, 1px, #E5E7EB
opacity-50
Opacity: 50%
Reverse Translation Workflow
1. Read the React component and extract all Tailwind classes
2. Group by purpose: layout, spacing, typography, color, effects
3. Map each group to Figma properties
4. Output a Figma spec document:
Frame: "Card"
Auto Layout: Vertical, Gap 16, Padding 24
Fill: white
Corner radius: 12
Effects: Drop shadow (0, 1, 3, rgba(0,0,0,0.1))
Width: Fill container
Min width: 280
Child: "Heading"
Type: Text
Font: Inter, 20/28, Semibold
Fill: #111827
Child: "Body"
Type: Text
Font: Inter, 16/24, Regular
Fill: #6B7280
Dev Mode Handoff Workflow
Reading Dev Mode Output
When a developer inspects a frame in Figma Dev Mode:
Properties panel — Shows Auto Layout, sizing, constraints
Variables tab — Shows which Figma variables are applied
Assets tab — Lists components and their properties
Handoff Checklist
[ ] Extract variable names, not raw values (use tokens)
[ ] Map Auto Layout to Flexbox (use the mapping table above)
[ ] Check which properties are from component variants vs. overrides
[ ] Verify responsive behavior (check Figma's min/max constraints)
[ ] Export icons as SVG with svg_include_id for component matching
[ ] Note any prototype interactions that need JS implementation
[ ] Check for Figma comments / annotations from designers
Common Handoff Mistakes
Copying Figma CSS verbatim — Figma generates absolute positioning and pixel values. Always translate to flex/grid with rem units.
Ignoring constraints — Figma min/max width constraints are often the responsive behavior spec. Don't skip them.
Missing hover/focus states — Check if the component has variant states. Figma often stores these as separate variants, not as CSS pseudo-classes.
Hardcoding colors — Always use design token variables, not the hex values from Figma's CSS output.
Pitfalls
Full file fetches — Never fetch an entire Figma file without depth or ids constraints. Large files can be 50MB+ of JSON.
Token sync drift — Design tokens in code and Figma must stay in sync. Use automated token pipelines (Style Dictionary, Token Studio) rather than manual copy.
Auto Layout !== CSS Grid — Auto Layout is Flexbox only. For CSS Grid layouts, you need to interpret the design intent, not translate 1:1.
Responsive breakpoints — Figma doesn't natively handle responsive breakpoints well. Designers often create separate frames per breakpoint. Combine them into a single responsive component in code.
Figma's shadow model — Figma uses separate inner shadow and drop shadow. CSS box-shadow can handle both but the syntax differs from Figma's visual representation.
