Florian BRUNIAUX
|
222a2ed39c
|
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>
|
2026-01-22 10:16:20 +01:00 |
|
Florian BRUNIAUX
|
8c93c31b90
|
feat(guide): add Product Designer learning path and design-to-code workflow
Add comprehensive resources for Product Designers working with Claude Code via Figma MCP:
- New workflow: guide/workflows/design-to-code.md (700 lines)
- Documented metrics: 62% reduction in design inconsistencies, 78% workflow efficiency improvement
- 4 core workflows: Frame→Component, Design System Audit, Token Automation, Visual Iteration
- 3-tier token hierarchy (base/composite/semantic)
- Team adoption patterns for designers, developers, PMs
- Implementation roadmap (Foundation → Scaling → Orchestration)
- Sources: builder.io, parallelhq.com, composio.dev, vladimirsiedykh.com
- New template: examples/claude-md/product-designer.md (400 lines)
- Complete CLAUDE.md configuration for design-to-code projects
- Figma MCP commands reference
- Design handoff checklist
- Token conventions and implementation constraints
- Updated README.md: Added "Product Designer" learning path (5 steps)
- Positioned after DevOps/SRE, before main content
- Links to image analysis, wireframing, Figma MCP, new workflow, cheatsheet
- Updated machine-readable/reference.yaml: Added 4 new entries
- product_designer_workflow, product_designer_claudemd
- design_system_handoff, figma_make_integration
Templates count: 72 → 73 (examples/claude-md/product-designer.md)
Guide workflows: 6 → 7 (guide/workflows/design-to-code.md)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
2026-01-22 09:15:16 +01:00 |
|