feat(guide): add Pencil (IDE-native canvas) to Product Designer workflow

Add comprehensive documentation for Pencil, a new IDE-native design canvas tool launched January 2026.

Changes:
- guide/ultimate-guide.md (Wireframing Tools section):
  - Added Pencil to tools comparison table (after tldraw)
  - Added detailed description with features, founder info, disclaimer
  - Note: Launched Jan 2026, strong traction (1M+ views, a16z funded) but still maturing

- guide/workflows/design-to-code.md:
  - NEW section "Alternative: Pencil (IDE-Native Canvas)" (~115 lines)
  - Architecture explanation (WebGL + AI agents + Git-native)
  - Comparison table: Pencil vs Figma MCP
  - When to use (good fit / consider carefully)
  - Setup instructions + example prompt
  - Founder & backing details (Tom Krcha, ex-Adobe XD, a16z Speedrun)
  - Maturity note with recommendations

- machine-readable/reference.yaml:
  - Added 3 entries: pencil_canvas, pencil_workflow, pencil_vs_figma

Positioning:
- Pencil complements Figma MCP (not replaces)
- Target: Engineer-designers, code-centric teams on Cursor/VSCode/Claude Code
- Format: .pen JSON (open, git-versionnable)
- AI agents: Multiplayer parallel (unique feature)
- MCP: Bi-directional read+write (vs Figma read-only)

Status: Early but promising (score 3.5/5)
- Strong founder (Adobe XD co-creator, 2 exits)
- Solid funding (a16z + KAYA VC)
- Viral traction (1M+ views, FAANG signups)
- Currently FREE, pricing TBD

Disclaimers included for maturity/pricing uncertainty.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Florian BRUNIAUX 2026-01-22 10:16:20 +01:00
parent f6c98851e9
commit 222a2ed39c
3 changed files with 132 additions and 0 deletions

View file

@ -110,6 +110,9 @@ deep_dive:
product_designer_claudemd: "examples/claude-md/product-designer.md"
design_system_handoff: "guide/workflows/design-to-code.md:531"
figma_make_integration: "guide/workflows/design-to-code.md:26"
pencil_canvas: "guide/ultimate-guide.md:529"
pencil_workflow: "guide/workflows/design-to-code.md:447"
pencil_vs_figma: "guide/workflows/design-to-code.md:470"
commands: 4950
command_template: 5020
hooks: 5273