Stats
Actions
Tags
From paper-desktop
Generate a Paper design from the project's codebase — using its tokens, styles, and components as context.
How this skill is triggered — by the user, by Claude, or both
Slash command
/paper-desktop:code-to-designThe 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 project's stylesheets, design tokens, or theme files to understand the existing design language. Then create a new artboard in Paper and build the requested UI using the codebase's actual colors, typography, spacing, and component patterns — not generic defaults.
npx claudepluginhub paper-design/agent-plugins --plugin paper-desktopExtracts 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.
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.
Automates design system construction from repository analysis: extracts patterns, builds OKLCH token hierarchies, implements accessible components with tests, verifies via multi-reviewer panels.