Stats
Actions
Tags
From paper-desktop
Turn a Paper design into production code using the project's existing conventions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/paper-desktop:design-to-codeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Before starting, ensure Paper Desktop is running with a file open. If a connection to the Paper MCP server fails, remind the user to open Paper Desktop first.
Before starting, ensure Paper Desktop is running with a file open. If a connection to the Paper MCP server fails, remind the user to open Paper Desktop first.
Read the selected frame or artboard from Paper — including structure, styles, text content, and computed layout. Then generate production-ready components in the project's framework and coding style. Match the design's layout, spacing, typography, and colors using the codebase's existing conventions (e.g. Tailwind classes, CSS modules, design tokens, styled-components).
npx claudepluginhub paper-design/agent-plugins --plugin paper-desktopGenerates production-ready React, Vue, or HTML/CSS code from Figma components or frames via Figma MCP server with Code Connect support. For design-to-code workflows.
Implement UI from design sources (Figma, Sketch, MasterGo, etc.) into production-ready frontend components. Reuses existing components, maps design tokens, ensures accessibility and type safety.
Extracts UI/UX design data from Paper, Figma, Stitch, or local files and guides implementation with design-to-code workflow, responsive design, and design system alignment.