design-to-code-bridge

name	design-to-code-bridge
description	Turn Figma designs into code using the Tiger Data website's component library and conventions. Use when the user shares a Figma URL, asks to implement a design, build a component from Figma, or convert any design into working React/Next.js code. Triggers on 'build this from Figma', 'implement this design', 'code this component', 'Figma to code', or sharing a Figma URL. Pairs with website-content-editor for deploying changes to the Tiger Data website.
platforms	["cowork","claude-code"]
references	["brand-guidelines"]

Design-to-Code Bridge

Convert Figma designs into implementation-ready code using the Tiger Data website's component library, Tailwind CSS patterns, and Atomic Design conventions.

Source of Truth

The Tiger Data website repo is the source of truth for all design tokens, component APIs, and code conventions. Fetch these files from GitHub when you need current values:

Reference	GitHub URL
Color palette	colors.js
Breakpoints	breakpoints.ts
Tailwind config	tailwind.config.ts
Text component props	Text types.ts
Button component props	Button types.ts
CTA text and URLs	constants.ts
Project patterns & conventions	README.md

Prerequisites

This skill requires the Figma MCP to be connected. Before starting, verify by attempting to call get_design_context — if it fails or the tool isn't available, stop and tell the user:

"This skill needs the Figma MCP server to be connected. Please add it in your Claude settings under MCP Servers, then restart and try again."

Do not proceed without a working Figma MCP connection.

Tiger Den pre-flight check

Invoke the marketing-preflight skill via the Skill tool, passing this skill's name: field value (design-to-code-bridge) as the args. Do not proceed until it completes successfully. If it stops with an error, follow its instructions and stop.

If marketing-preflight returned a stale-connector footer note, append it verbatim at the end of your final response to the user.

Workflow

Step 1: Extract Design Context

When the user provides a Figma URL:

1. Parse the URL to extract fileKey and nodeId

   • URL format: https://figma.com/design/:fileKey/:fileName?node-id=:nodeId
   • Convert node-id format: URL uses 1-2, API uses 1:2

2. Call get_design_context with the extracted fileKey and nodeId

   • Set clientFrameworks to "react"
   • Set clientLanguages to "typescript,css"
   • Do NOT set excludeScreenshot: true — the screenshot is essential for verification

3. Review the response:

   • Screenshot: Visual reference of what the design looks like
   • Code: Reference implementation — a starting point, NOT copy-paste output
   • Metadata: Node structure, dimensions, styles

Step 2: Understand the Component Structure

If the design is complex (multiple components, nested layouts):

1. Call get_metadata to see the full node tree
2. Call get_code_connect_map to check for existing component mappings
3. Call get_variable_defs to extract design tokens and map them to Tailwind classes

Step 3: Map Figma to Existing Components

Before writing any new code, check what already exists. Always prefer reusing existing components.

Layout Components

Figma Pattern	Use This Component
Page-width container	Container (max-w-1440px, px-4 md:px-10)
Horizontal stack / auto-layout row	Flex direction="row"
Vertical stack / auto-layout column	Flex direction="col"
Grid of cards or items	Grid cols={{ base: 1, md: 2, lg: 3 }}
Curved divider between sections	Separator (from rebrand/atoms/Separator)

Content Components

Figma Pattern	Use This Component
Any text (heading, body, label)	Text as="h1|h2|p|span" with responsive size and weight
CTA button	Button color="electricYellow|white|black" with href
Tag / label / chip	Badge color="electricYellow|clearPurple|black-200"
Card with border	Card (from rebrand/molecules/Card) — rounded, shadow, href
Collapsible section	Accordion + AccordionItem
Link with tracking	Link (from atoms)

Compound Components

Figma Pattern	Use This Component
FAQ section	FAQ molecule
Quote / testimonial	Quotes organism
HubSpot form embed	HubSpotForm organism

Step 4: Generate Implementation Code

Adapt the Figma design to the project's conventions. Do NOT output Figma reference code verbatim.

Typography Mapping

// Figma: 72px bold heading
<Text as="h1" size={{ base: '5xl', lg: '8xl' }} weight="bold">

// Figma: 44px heading
<Text as="h2" size={{ base: '3xl', lg: '6xl' }}>

// Figma: 16px body text
<Text as="p" size="md">

// Figma: monospace / code text
<Text as="span" monoFont>

Text sizes and props: Fetch Text types for available size and weight values.

Fonts:

• Geist (font-Geist) — primary font for all text
• Geist Mono (monoFont prop on Text) — code, technical labels, uppercase badges
• Cygnito Mono (font-Cygnito-Mono) — decorative/brand accents only

Color Mapping

Map Figma colors to Tailwind classes. Never use hardcoded hex values.

Color palette: Fetch colors.js for the full palette with hex values and Tailwind class names. Key color groups: brand (clearPurple, orange, electricYellow, teal, crispBlue), grayscale (black through black-50, white), and semantic (success, error, warning).

If Figma uses a color not in the palette, flag it and suggest the nearest brand color.

Layout Mapping

// Figma auto-layout horizontal, gap 32, centered
<Flex direction="row" gap={8} alignItems="center">

// Figma auto-layout vertical, gap 16
<Flex direction="col" gap={4}>

// Figma grid, 3 columns, gap 32
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={8}>

// Always wrap page content in Container
<Container>
  {/* page content */}
</Container>

Always use responsive prop objects — never manual breakpoint classes:

// RIGHT
<Flex direction={{ base: 'col', lg: 'row' }} gap={{ base: 4, md: 8 }}>
<Text size={{ base: '3xl', lg: '5xl' }}>
<Grid cols={{ base: 1, md: 2, lg: 3 }}>

// WRONG
className="flex-col lg:flex-row gap-4 md:gap-8"

Breakpoints: Fetch breakpoints.ts for the full breakpoint definitions.

Spacing and extended config: Fetch tailwind.config.ts for custom spacing, animations, and other extended tokens.

Page Section Structure

<div className="pt-8 lg:pt-20">
  <Container>{/* Main content */}</Container>
  <Separator
    bottomBgColor="black-200"
    bottomBgTexture
    className="hidden md:block"
  />
  <div className="py-20 bg-texture-black-200">
    <Container>{/* Secondary content */}</Container>
  </div>
  <Separator
    topBgColor="black-200"
    topBgTexture
    bottomBgColor="black"
    bottomBgTexture
  />
</div>

Button Patterns

Button props: Fetch Button types for available color, icon, and other props.

// Primary CTA
<Button href="/signup" color="electricYellow">Start a free trial</Button>

// Secondary CTA
<Button href="/contact" color="white">Contact sales</Button>

// With icon
<Button href="/docs" color="black" icon={<ArrowRight />} iconPosition="end">
  Read docs
</Button>

CTA text and URLs: Fetch constants.ts for shared CTA labels (CONSOLE_CTA_TEXT, CONTACT_CTA_TEXT) and URLs (WEBSITE_URL, CONSOLE_URL, DOCS_URL, etc.).

Step 5: Component Placement

Type	Location
Primitive (button, input, badge)	src/components/atoms/ComponentName/index.tsx — rarely needed, check first
Composition of atoms	src/components/molecules/ComponentName/index.tsx
Complex section	src/components/organisms/ComponentName/index.tsx
Page-specific only	app/.../[slug]/_components/ComponentName/index.tsx

Component file structure:

ComponentName/
├── index.tsx           # Main component (named export)
├── types.ts            # TypeScript interfaces
└── index.stories.tsx   # Storybook story (optional)

Conventions:

• Named exports: export const ComponentName = () => {}
• Server Components by default — only add 'use client' for state/effects/event handlers
• Use twMerge for class composition, cva for variant-heavy components
• Accept className prop for external customization
• Polymorphic as prop for semantic HTML flexibility
• Direct imports: import { Text } from '@/src/components/atoms/Text'

Step 6: Verify Implementation

## Verification
- [ ] Uses existing components (Text, Flex, Grid, Container, Button, etc.)
- [ ] Colors use Tailwind tokens (no hardcoded hex)
- [ ] Typography uses Text component with correct size/weight props
- [ ] Layout uses responsive prop objects (not manual breakpoint classes)
- [ ] Spacing follows Tailwind scale
- [ ] Server Component by default (no unnecessary 'use client')
- [ ] Semantic HTML (correct heading levels, landmarks)
- [ ] Images use next/image with alt text
- [ ] No inline styles (except dynamic values)
- [ ] No Figma artifacts in output (layer names, auto-layout metadata)

Step 7: Deployment Path (Optional)

If the user wants to deploy to the Tiger Data website:

1. website-content-editor can make the content change, open a PR, and provide a Vercel preview link
2. Claude Code can directly write files, run the dev server, and commit/push

Interaction with Other Skills

• website-content-editor: Use for deploying generated code to the Tiger Data website
• creative-brief-generator: May provide the design brief that led to the Figma design
• pre-publish-quality-gate: Run after deployment to verify the published result