WAVE uses Pencil.dev for IDE-native design. Design files (.pen) live in the Git repo alongside code, enabling version-controlled design with AI-driven code generation.
Pencil.dev is currently free. Download from pencil.dev/downloads .
Download the desktop app for your platform from pencil.dev/downloads , or install the VS Code extension (“Pencil” in Extensions marketplace).
Pencil uses your Claude Code credentials. Run claude auth status to verify.
Design files are in design/pencil/:
dashboard.pen — Main dashboard layoutstream-player.pen — Video player componentcontrol-room.pen — Studio control roomThe Pencil MCP server is configured in .mcp.json (disabled by default). Enable it:
# In .mcp.json, change "disabled": true to "disabled": false
# for the "pencil" server entry.pen files are JSON with a typed object tree. They’re human-readable, diffable in Git, and can be edited by AI via MCP tools.
{
"version": "1.0",
"variables": {
"color.primary": { "type": "color", "value": "#6C63FFFF" }
},
"children": [
{
"id": "my-frame",
"type": "frame",
"name": "My Component",
"width": 400,
"height": 300,
"children": []
}
]
}WAVE’s OKLCH design tokens sync bidirectionally with Pencil variables:
# Sync CSS tokens → Pencil format
npx tsx scripts/sync-pencil-tokens.tsThis reads design/tokens/exports/colors.css and outputs design/pencil/tokens.json.
When the Pencil MCP server is enabled, these tools are available:
| Tool | Description |
|---|---|
batch_design | Create, modify, delete design elements |
batch_get | Read components, search by pattern |
get_screenshot | Render preview of current design |
snapshot_layout | Analyze structure, detect issues |
get_variables | Read design tokens |
set_variables | Write design tokens |
get_editor_state | Current selection and context |