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>
8c93c31b90