Design To Code Bridge

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:

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

Read REFERENCES.md from the plugin root and run the pre-flight check described there. Call list_marketing_references() to verify Tiger Den is reachable. If it fails or the tool is not found, STOP — do not continue. Follow the error handling in REFERENCES.md.

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

Content Components

Compound Components

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

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

Tiger Data Website Conventions

Reference for adapting Figma designs to the Tiger Data website codebase.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: CSS Modules + CSS custom properties
• Component library: Custom components (no external UI library)
• Fonts: Geist Sans + Geist Mono (loaded via next/font)
• Icons: Material Icons (outlined) via @mui/icons-material or inline SVG
• Images: Next.js Image component with responsive srcset

CSS Custom Properties

The website uses CSS custom properties for theming. Map Figma variables to these:

/* Colors — from brand-guidelines */
--color-electric-yellow: #F5FF80;
--color-tiger-blood: #FF7044;
--color-vivid-purple: #7558FF;
--color-pure-teal: #14D7D8;
--color-black: #000000;
--color-gray: #E9E9E9;
--color-white: #FFFFFF;

/* Spacing — 4px base */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;

/* Typography */
--font-sans: 'Geist Sans', sans-serif;
--font-mono: 'Geist Mono', monospace;

/* Layout */
--max-width: 1200px;
--gutter-desktop: 24px;
--gutter-tablet: 16px;
--gutter-mobile: 12px;

Component Patterns

When generating components, follow these conventions:

// File: components/SectionName/SectionName.tsx
import styles from './SectionName.module.css';

interface SectionNameProps {
  // typed props
}

export function SectionName({ ...props }: SectionNameProps) {
  return (
    <section className={styles.root}>
      {/* semantic HTML */}
    </section>
  );
}

/* File: components/SectionName/SectionName.module.css */
.root {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--gutter-desktop);
}

@media (max-width: 768px) {
  .root {
    padding: var(--space-2xl) var(--gutter-mobile);
  }
}

Responsive Breakpoints

Image Handling

import Image from 'next/image';

<Image
  src="/images/section-name/asset.png"
  alt="Descriptive alt text"
  width={1200}
  height={630}
  className={styles.image}
  priority={isAboveFold}
/>

CTA Patterns

// Primary CTA — Electric Yellow background
<a href="/cloud/signup" className={styles.ctaPrimary}>
  Try Tiger Cloud Free
</a>

// Secondary CTA — outline
<a href="/docs" className={styles.ctaSecondary}>
  Read the Docs
</a>