Import Design — Design skill for Claude Code
Import a design from an external tool (Figma, Stitch, v0, Pencil, Claude Design, DESIGN.md, or React JSX) into this Pulp project.
How to install Import Design
Installs to ~/.claude/commands/generous-corp-pulp-import-design.md
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/Generous-Corp/pulp/HEAD/.claude/commands/import-design.md -o ~/.claude/commands/generous-corp-pulp-import-design.md Restart Claude Code, or start a new session, for it to be picked up.
What Import Design does
Import a design from an external tool (Figma, Stitch, v0, Pencil, Claude Design, DESIGN.md, or React JSX) into this Pulp project.
Detect which design source the user wants by checking:
- If a Figma MCP server is available (com.figma.mcp), offer to read the current file/selection
- If Stitch MCP is available (mcp__stitch__*), offer to list projects and get screens
- If Pencil MCP is available (mcp__pencil__*), offer to read the current editor state
- If the user mentions Claude Design or han
Alternatives in Design
- Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
- Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
- Stitch Remotion — Generate walkthrough videos from app designs 2.6k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Design Import
Import an external design document (Markdown, JSON, or HTML from Confluence/Notion) and convert it to design_d
Nano Banana UI Prompts
Claude Code skill that adapts the 12k-prompt Nano Banana Pro library for UI workflows — Google Stitch MCP scre
Design UI
Designer workflow — create a mockup for a screen using Pencil MCP (default) or Figma MCP. Usage: /design-ui
Dom2figma
Capture rendered web prototypes with headless Chrome and import them into Figma as editable layers. Whole prot
Figma To Roblox UI
Claude skill for high-fidelity Figma → Roblox Studio GUI import (Scale-only, UIStroke ScaledSize, UICorner sca
Figma Design To Code
Figma tasarımını inceleyerek üretim kalitesinde React/HTML/CSS kodu üretir. Token binding ve component yapısın
Related Agents
Design Extractor
Extracts precise design specifications from Paper/Figma/Stitch MCPs or local reference images; produces struct
Canvas To Code Extractor
Decodes any design-source HTML (Claude Design bundle, Figma Export-to-Code, V0, Lovable, Webflow, generic HTML
Codebase Analytics
Use to audit the production-code side of the design system: Figma<->code parity gaps, import coverage of regis