Generated Skill

YAML
---
name: figma-to-code-prompting
description: Generates precise prompts for converting Figma designs to production-ready React/HTML/CSS code using Figma MCP. Use when transforming design files into functional components with proper spacing, interactions, and accessibility.
---

JavaScript
// Base prompt template
const designToCodePrompt = `
Convert this Figma design to production React code:

COMPONENT: ${componentName}
DESIGN TOKENS: Extract spacing, colors, and typography from Figma
STRUCTURE: ${structureRequirements}
RESPONSIVE: Mobile-first, breakpoints at 768px, 1024px
ACCESSIBILITY: ARIA labels, keyboard navigation, screen reader support
INTERACTIONS: ${interactionStates}

Output: Clean React component with Tailwind CSS classes.
`;

Progress:

• Extract design from Figma MCP
• Generate component-specific prompt
• Run code generation
• Review output against design
• Test responsive behavior
• Validate accessibility
• Iterate if needed

Step-by-step:

1. Design Analysis

   "Analyze this Figma design and extract:
   - Design tokens (spacing, colors, typography)
   - Component hierarchy and layout structure
   - Interactive elements and their states
   - Responsive behavior requirements"
   

2. Code Generation Use component-specific template with extracted context

3. Quality Review

   "Review this generated code for:
   - Pixel-perfect match to Figma design
   - Proper semantic HTML structure
   - Responsive breakpoint behavior
   - WCAG 2.1 AA compliance"
   

Example 1: Hero Section Input:

Convert this Figma hero section to React:

COMPONENT: Hero
DESIGN TOKENS: 
- Heading: text-5xl font-bold leading-tight
- Spacing: py-20 px-6, gap-8
- Colors: bg-gradient-to-r from-blue-600 to-purple-600
STRUCTURE: Centered content, heading + subtitle + CTA button
RESPONSIVE: Stack vertically on mobile, side-by-side on desktop
ACCESSIBILITY: h1 for heading, descriptive button text
INTERACTIONS: Hover state on button (scale-105, shadow-lg)

Output:

JavaScript
export function Hero() {
  return (
    <section className="bg-gradient-to-r from-blue-600 to-purple-600 py-20 px-6">
      <div className="max-w-4xl mx-auto text-center text-white">
        <h1 className="text-5xl font-bold leading-tight mb-6">
          Build Better Products
        </h1>
        <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
          Transform your ideas into reality with our design system
        </p>
        <button 
          className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold 
                     hover:scale-105 hover:shadow-lg transition-all duration-200"
          aria-label="Get started with our platform"
        >
          Get Started
        </button>
      </div>
    </section>
  );
}

Example 2: Feature Grid Input:

COMPONENT: FeatureGrid
DESIGN TOKENS:
- Grid: grid-cols-1 md:grid-cols-3, gap-8
- Cards: bg-white p-6 rounded-xl shadow-sm
- Icons: w-12 h-12 mb-4
STRUCTURE: 3-column grid of feature cards with icon + title + description
RESPONSIVE: Single column mobile, 3 columns desktop
ACCESSIBILITY: Proper heading hierarchy (h2 for section, h3 for features)
INTERACTIONS: Card hover (shadow-md, translate-y-1)

Token Extraction:

• Always specify exact Figma layer names for token extraction
• Include fallback values: spacing-4 || 16px
• Map Figma variables to Tailwind classes

Component Structure:

• Use semantic HTML: <section>, <article>, <nav>
• Maintain design system consistency
• Include proper TypeScript interfaces

Responsive Specifications:

• Mobile-first approach: base styles for mobile, md: for tablet, lg: for desktop
• Specify exact breakpoint behaviors
• Test critical user paths on all screen sizes

Accessibility Requirements:

• Always include ARIA labels and roles
• Specify focus management for interactive elements
• Include keyboard navigation patterns

Avoid:

• Generic spacing values - always extract from Figma tokens
• Missing hover/focus states
• Hardcoded colors instead of design system tokens
• Non-semantic HTML structure
• Missing responsive specifications

Don't:

• Skip accessibility requirements in prompts
• Forget to specify component props/interfaces
• Use absolute positioning without fallbacks
• Ignore design system naming conventions

Navigation Component:

COMPONENT: Navigation
TOKENS: Extract from Figma nav tokens
STRUCTURE: Logo + nav links + mobile menu toggle
RESPONSIVE: Horizontal desktop, hamburger mobile
ACCESSIBILITY: Skip links, ARIA expanded states
INTERACTIONS: Mobile menu slide-in, link hover effects

Testimonial Block:

COMPONENT: TestimonialCard  
TOKENS: Quote text-lg, author text-sm, spacing p-6
STRUCTURE: Quote + author info + avatar
RESPONSIVE: Full width mobile, grid desktop
ACCESSIBILITY: blockquote semantic markup
INTERACTIONS: Subtle hover elevation

Button Variants:

VARIANTS: primary, secondary, outline, ghost
STATES: default, hover, focus, active, disabled
SIZES: sm (px-3 py-2), md (px-4 py-3), lg (px-6 py-4)
ACCESSIBILITY: Focus rings, disabled states