🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Pencil To Code
πŸ¦€ ClawHub

Pencil To Code

by @jcwen

Export .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design.

Versionv0.1.0
Downloads2,158
#image-gen#legal
TERMINAL
clawhub install pencil-to-code

πŸ“– About This Skill

name: pencil-to-code description: | Export .pen design to React/Tailwind code. Does ONE thing well.

Input: .pen frame ID or file path Output: React component code + Tailwind config

Use when: design-exploration or user needs implementation code from a finalized Pencil design. effort: high

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

    // Get full frame tree
mcp__pencil__batch_get({
  filePath: ".pen",
  nodeIds: ["frameId"],
  readDepth: 10,
  resolveInstances: true,
  resolveVariables: true
})
    // Get design variables/theme
mcp__pencil__get_variables({ filePath: ".pen" })

    2. Extract Design Tokens

    Transform .pen variables β†’ Tailwind theme:

    /* From .pen variables */
@theme {
  --color-primary: [from variables.colors.primary];
  --color-background: [from variables.colors.background];
  --font-sans: [from variables.fonts.body];
  /* ... */
}

    Reference: references/token-extraction.md

    3. Map Nodes to Components

    | .pen Node Type | React Output | |---------------|--------------| | frame with layout |

    | | frame with children | Component with children | | text |

    , , or | | ref (instance) | Reusable component | | rectangle |

    with fill | | ellipse |
    | | image | or fill: url() |

    Reference: references/node-mapping.md

    4. Generate Code

    Component structure: 

    // components/[ComponentName].tsx
import { cn } from "@/lib/utils"
    interface [ComponentName]Props {
  className?: string
  // Extracted props from design
}
    export function ComponentName {
  return (
    
    
      {/* Nested structure */}
    
    
  )
}

    Tailwind mapping: 

    .pen property β†’ Tailwind class
--------------------------------
fill: #000     β†’ bg-black
layout: horizontal β†’ flex flex-row
gap: 16        β†’ gap-4
padding: [16,24,16,24] β†’ py-4 px-6
fontSize: 24   β†’ text-2xl
fontWeight: 700 β†’ font-bold
cornerRadius: [8,8,8,8] β†’ rounded-lg

    5. Validate (Optional)

    // Screenshot the .pen frame
mcp__pencil__get_screenshot({ nodeId: "frameId" })
    // Compare visually with rendered React
// (Manual step or browser automation)

    6. Output

    ## Generated Components
    [ComponentName]
    

  • File: components/[ComponentName].tsx
    • 

  • Props: [list extracted props]
    • Theme Configuration
    

  • File: app/globals.css (additions)
    • Verification
    
Screenshot comparison: [attached]

    Translation Rules

    Layout System

    .pen                          Tailwind
--------------------------------------
layout: "vertical"         β†’ flex flex-col
layout: "horizontal"       β†’ flex flex-row
layout: "grid"             β†’ grid
alignItems: "center"       β†’ items-center
justifyContent: "center"   β†’ justify-center
gap: 8                     β†’ gap-2
gap: 16                    β†’ gap-4
gap: 24                    β†’ gap-6
width: "fill_container"    β†’ w-full
height: "fill_container"   β†’ h-full

    Spacing (8-point grid)

    .pen padding                  Tailwind
----------------------------------------
[8,8,8,8]                  β†’ p-2
[16,16,16,16]              β†’ p-4
[16,24,16,24]              β†’ py-4 px-6
[24,32,24,32]              β†’ py-6 px-8

    Typography

    .pen                          Tailwind
----------------------------------------
fontSize: 12               β†’ text-xs
fontSize: 14               β†’ text-sm
fontSize: 16               β†’ text-base
fontSize: 20               β†’ text-xl
fontSize: 24               β†’ text-2xl
fontSize: 32               β†’ text-3xl
fontSize: 48               β†’ text-5xl
fontWeight: 400            β†’ font-normal
fontWeight: 500            β†’ font-medium
fontWeight: 600            β†’ font-semibold
fontWeight: 700            β†’ font-bold

    Colors

    .pen                          Tailwind
----------------------------------------
fill: "#FFFFFF"            β†’ bg-white
fill: "#000000"            β†’ bg-black
fill: variable             β†’ bg-[var(--color-name)]
textColor: "#6B7280"       β†’ text-gray-500
stroke: "#E5E5E5"          β†’ border-gray-200

    Border Radius

    .pen cornerRadius             Tailwind
----------------------------------------
[0,0,0,0]                  β†’ rounded-none
[4,4,4,4]                  β†’ rounded
[8,8,8,8]                  β†’ rounded-lg
[16,16,16,16]              β†’ rounded-2xl
[9999,9999,9999,9999]      β†’ rounded-full

    Constraints

  • 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

  • references/node-mapping.md β€” Complete node β†’ component mapping
  • references/token-extraction.md β€” Variable β†’ theme extraction
  • design-tokens/ β€” Token system conventions

    • Integration

    Called by:

  • design-exploration orchestrator (after direction selection)
  • Direct user invocation

    • Composes:

  • design-tokens (for theme structure)

    • πŸ”’ Constraints

  • 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