figma-to-page

majiayu000's avatarfrom majiayu000

Generates React code for a full page based on pasted Figma 'Inspect' details. Uses the page scaffolder.

⭐5stars🔀1forks📁View on GitHub🕐Updated Jan 11, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines the front-end development workflow by automatically generating production-ready React (TSX) components and CSS Modules directly from Figma 'Inspect' panel details. By automating page scaffolding, file creation, and linting, it bridges the gap between design and code, significantly reducing manual effort and ensuring high fidelity to original UI designs.

Use Cases

  • Rapid UI Prototyping: Quickly transform high-fidelity Figma mockups into functional React pages for immediate testing and stakeholder demonstrations.
  • Front-end Workflow Automation: Eliminate repetitive boilerplate coding by automatically generating directory structures and styled components based on design specifications.
  • Design System Implementation: Ensure pixel-perfect accuracy by directly translating Figma layout properties and styles into clean, modular CSS and TypeScript code.
  • Legacy Code Migration: Efficiently rebuild existing UI designs in React by extracting design tokens and structures directly from Figma files.
namefigma-to-page
description"Generates React code for a full page based on pasted Figma 'Inspect' details. Uses the page scaffolder."

Figma to Page Workflow

  1. Ask for the page name in PascalCase (e.g., UserProfile).
  2. Ask the user to paste all details from the Figma 'Inspect' panel for the entire page.
  3. Execute scaffolder:
    • Run chmod +x .claude/skills/react-page-scaffolder/scripts/create-page.sh
    • Run .claude/skills/react-page-scaffolder/scripts/create-page.sh {{PAGE_NAME}}
    • Report the output (the new file paths). Let {{PAGE_DIR}} be the new directory (e.g., src/pages/userprofile).
  4. Generate Code:
    • Read the user-pasted Figma details.
    • Generate the TSX code for {{PAGE_DIR}}/{{PAGE_NAME}}.tsx.
    • Generate the corresponding CSS for {{PAGE_DIR}}/{{PAGE_NAME}}.module.css.
  5. Write Files:
    • Write the new TSX content, overwriting the template.
    • Write the new CSS content, overwriting the template.
  6. Lint: Run yarn lint:fix {{PAGE_DIR}} to clean up the new files.
  7. Report that the page has been created and populated from Figma details.