From c0921cd5ff61232d36b12791a586eb69f5062e23 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Fri, 10 Oct 2025 14:25:27 +0800 Subject: [PATCH] feat(ui-design): add optional layout-specific token extension MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .claude/commands/workflow/ui-design/generate.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.claude/commands/workflow/ui-design/generate.md b/.claude/commands/workflow/ui-design/generate.md index c3fdc47a..b480f6da 100644 --- a/.claude/commands/workflow/ui-design/generate.md +++ b/.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);\"