pencil-to-code

Export Pencil .pen designs to production React/Tailwind code. Input: Output: Transform .pen variables → Tailwind theme: Reference: references/token-extraction.md Reference: references/node-mapping.md Component structure: Tailwind mapping: Called by: Composes: - Frame ID to export (or entire document) - Target framework: React (default), Vue, HTML - Optional: Component name, output path - React component(s) with Tailwind classes - Tailwind theme configuration (from .pen variables) - Optional: Screenshot comparison for validation - Single concern : Export → code. No design modifications. - Tailwind 4 @theme : CSS-first token system - React + TypeScript : Default output target - Semantic HTML : Choose appropriate elements - Accessibility : Include aria attributes where detectable - references/node-mapping.md — Complete node → component mapping - references/token-extraction.md — Variable → theme extraction - design-tokens/ — Token system conventions - design-exploration orchestrator (after direction selection) - Direct user invocation - design-tokens (for theme structure)