Installs into .claude/skills of the current project.
Are you the author of Figma To Page?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-figma-to-page)
---
name: figma-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.
