skills.rest
double-coding-lab
double-coding-labOFFICIAL
Explore all skills by this author →
GitHub

pp-d2c

Generates React and React Native page code from Figma design URLs via REST API.

4|Updated Aug 4, 2026
Search Tags:#react#code generation#figma#rest api#react native#design-to-code#visual comparison
One-click install
npx skills add https://github.com/double-coding-lab/PixelPrint --skill pp-d2c-double-coding-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pp-d2c
Source: https://github.com/double-coding-lab/PixelPrint/tree/main/templates/skills/pp-d2c
Command: npx skills add https://github.com/double-coding-lab/PixelPrint --skill pp-d2c-double-coding-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Converting Figma design mockups into runnable front-end code by hand is slow and error-prone. This Skill lets an AI agent read a Figma design URL, decompose layers by naming prefixes, slice images, generate code, and run per-block visual comparisons automatically. ## Core Features & Use Cases - Figma-to-code generation: Parses Figma nodes through the REST API (no MCP plugin or OAuth) and produces React H5, React Native, or Taro/xtaro cross-platform code with configurable style formats (scss, less, css-modules, tailwind, inline, styled-components, nativewind). - Prefix-driven layer protocol: Designers name layers with prefixes like sub-, img-, bg-, btn-, fixed-, list- to control block splitting, image slicing, and layout semantics. - Rule-based quality gates: 24 rules (R01-R24) plus a check-rules.mjs validator enforce fidelity on positioning, colors, padding, flex direction, sizing, and image slicing, with per-block visual screenshot comparison against the design. - Use Case: Paste a Figma design link into Claude Code or Codex after running npx @double-coding/pixel-print init; the agent slices assets, dispatches block generation, and delivers code plus visual diff screenshots. ## Quick Start Ask the agent to convert this Figma design into code by pasting the design URL, for example: turn https://figma.com/design/xxx?node-id=1-2 into a React page.

Frequently Asked Questions about pp-d2c

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to React code with an AI agent?▼

Install the skill into your project with npx @double-coding/pixel-print init, configure your Figma token in .env, then paste the Figma design URL to the agent. It fetches nodes via the Figma REST API, slices images, and generates the page code automatically.

How to generate React Native code from Figma designs?▼

Set project.framework to rn in pp-d2c.config.json during init, optionally choosing an adapter preset like xtaro or taro. The skill then emits React Native output using stylesheet, styled-components, or nativewind style formats.

Does this Figma-to-code tool require an MCP plugin or OAuth?▼

No. It uses only the Figma REST API with a personal access token stored in the project .env file. No MCP plugin installation or OAuth flow is needed.

What layer naming conventions does Figma design-to-code need?▼

Designers prefix layer names to control output: sub- splits blocks, img- exports images, bg- sets parent background-image, btn- marks clickable areas, fixed- pins viewport elements, and list- forces map rendering. The full prefix table is in the designer specification doc.

Why is my generated page background white instead of the design color?▼

The page-level background must be written to body, and :global(body) only works in css-modules projects. In plain scss/less/css the :global selector fails silently, so the skill selects strategy P-A/P-B/M-A/M-B based on your config styleFormat.

What happens if the Figma token is missing or expired?▼

The skill runs a verify-token probe before any work. If the token fails, it stops immediately and asks you to check the FIGMA_TOKEN in .env, its File content read permission, and network access to api.figma.com.

Related Skills

Explore More Software Engineering Skills→
OpenCovenOpenCoven
20

figma

Extract design context and specifications from Figma files via MCP.

Official
Intermediate
Benmore-StudioBenmore-Studio
1

pcs-new-service

Generate a complete PCS microservice scaffold with FastAPI, Kafka, and Docker.

Official
Advanced
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate
tuyoogametuyoogame
124

Figma

Query Figma design files to extract structure, components, and styles.

Official
Intermediate