# Figma To Page

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

- Skill: `majiayu000/figma-to-page` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/figma-to-page`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/figma-to-page/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/figma-to-page

---


# 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.