feat(ui-design): add optional layout-specific token extension

- Allow agent to create layout-specific tokens if needed
- Use `--layout-*` prefix for layout-specific CSS variables
- Keep prompt minimal - let agent decide when extension is needed
- Examples: --layout-spacing-navbar-height, --layout-size-sidebar-width

Benefits:
- ✅ Flexible token system (core + layout-specific)
- ✅ Agent autonomy (decides when to extend)
- ✅ Clear naming convention (--layout-* prefix)
- ✅ Minimal workflow changes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/commands/workflow/ui-design/generate.md

@@ -342,6 +342,10 @@ FOR layout_id IN range(1, layout_variants + 1):
           - Radius: {', '.join(radius_vars[:3])}... ({len(radius_vars)} total)
           - Shadows: {', '.join(shadow_vars)}
 
+          **OPTIONAL: Layout-Specific Token Extension**
+          If core tokens are insufficient, create `{target}-layout-{layout_id}-tokens.css` with `--layout-*` prefix.
+          Example: `--layout-spacing-navbar-height`, `--layout-size-sidebar-width`
+
           **Example Workflow**:
           1. Read tokens.css → find \"--color-brand-primary: oklch(0.55 0.12 45);\"
           2. Use in CSS → \"background: var(--color-brand-primary);\"