Pencil to Code

Export Pencil .pen designs to production React/Tailwind code.

Interface

Input:

• Frame ID to export (or entire document)
• Target framework: React (default), Vue, HTML
• Optional: Component name, output path

Output:

• React component(s) with Tailwind classes
• Tailwind theme configuration (from .pen variables)
• Optional: Screenshot comparison for validation

Workflow

1. Read Design Structure