Commit Graph

14 Commits

Author SHA1 Message Date
catlog22
6a50b714d0 Enhance layout and style extraction commands with dual mode support for exploration and refinement.
- Updated `layout-extract` command to include a refinement mode (`--refine`) for generating single refined layouts, alongside exploration mode for multiple contrasting variants.
- Added detailed reporting and validation for variants count based on the selected mode.
- Implemented logic to load existing layouts for refinement and generate specific refinement options categorized by density, responsiveness, grid specifics, and component arrangement.
- Updated `style-extract` command similarly to support refinement mode, allowing for detailed adjustments to existing design systems.
- Enhanced user interaction phases to accommodate selection of refinements or design directions based on the active mode.
2025-11-10 09:49:10 +08:00
catlog22
22b2cecd1f refactor(ui-design): unify ID architecture with design-id parameter
Replace --base-path with --design-id/--session across all UI design commands to eliminate ambiguity and improve consistency.

Key changes:
- New command: list.md for viewing available design runs
- Unified ID format: design_id = directory_name = "design-run-YYYYMMDD-RANDOM"
- Consistent path resolution: --design-id > --session > auto-detect/create
- Updated 11 commands: explore-auto, imitate-auto, capture, style/layout/animation-extract, generate, update, explore-layers, import-from-code
- Enhanced error handling with /workflow:ui-design:list hints
- Fixed import race condition with cleanup logic in explore-auto

Verified by Gemini: 5.0/5.0 consistency score

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 21:14:54 +08:00
catlog22
dd0348c3eb docs(ui-design): add batch text format interaction strategy for user questions
Add universal question interaction rules to UI design commands:
- Use batch text format (1a 2b) when questions > 4 OR options > 3
- Otherwise use AskUserQuestion tool
- Support multi-selection: [N][key1,key2] format for layout/style commands
- Variable-based templates with option descriptions for clarity

Updated commands:
- animation-extract.md: Single selection per question
- layout-extract.md: Multi-selection per target support
- style-extract.md: Multi-selection for variants

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 14:59:27 +08:00
catlog22
c647787b86 feat: add interactive multi-selection mechanism for UI design workflow
- Add --interactive flag to style-extract and layout-extract commands
- Enhance animation-extract --mode interactive with selection storage
- Implement unified user-selections storage in .intermediates/user-selections/
- Add parameter passthrough in explore-auto (default: enabled) and imitate-auto (always enabled)
- Support fallback to generate all variants when no selection file exists
- Fix explore-auto.md bug: duplicate --base-path in import-from-code call (line 313)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 23:53:27 +08:00
catlog22
d213885f52 Refactor layout and style extraction workflows for multi-selection capabilities
- Updated `layout-extract` command to support user multi-selection of layout concepts, allowing for multiple layout templates to be generated based on user preferences.
- Revised argument hints and output structures to reflect changes in selection handling and output file formats.
- Enhanced user interaction by enabling multi-select options in both layout and style extraction phases.
- Streamlined the generation of layout templates and design systems to accommodate multiple selected variants, improving flexibility and user experience.
- Adjusted validation and output verification processes to ensure consistency with new multi-selection features.
2025-11-08 23:23:06 +08:00
catlog22
1fb5b3cbe9 refactor: standardize UI design workflow folder naming and add absolute path conversion
Unified folder naming format across all UI design commands:
- Session mode: .workflow/WFS-{session}/design-run-YYYYMMDD-RANDOM
- Standalone mode: .workflow/.design/design-run-YYYYMMDD-RANDOM

Key changes:
- Standardized run directory naming to design-run-* format
- Added absolute path conversion for all base_path variables
- Updated path discovery patterns from design-* to design-run-*
- Maintained backward compatibility for existing directory discovery

Modified commands (10 files):
- explore-auto.md, imitate-auto.md: Unified standalone path format
- explore-layers.md: Changed from design-layers-* to design-run-*
- capture.md: Added design- prefix to standalone mode
- animation-extract.md, style-extract.md, layout-extract.md,
  generate.md, batch-generate.md: Added absolute path conversion
- update.md: Updated path discovery pattern

Technical improvements:
- Eliminates path ambiguity between command and agent execution contexts
- Ensures all file operations use absolute paths for reliability
- Provides consistent directory structure across workflows

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 20:52:10 +08:00
catlog22
920b179440 docs: 更新所有命令描述并重新生成索引文件
- 更新所有69个命令文件的description字段,基于实际功能重新生成详细描述
- 重新生成5个索引文件(all-commands, by-category, by-use-case, essential-commands, command-relationships)
- 移动analyze_commands.py到scripts/目录并完善功能
- 移除临时备份文件

命令描述改进示例:
- workflow:plan: 增加了工具和代理的详细说明(Gemini, action-planning-agent)
- cli:execute: 说明了YOLO权限和多种执行模式
- memory:update-related: 详细说明了批处理策略和工具回退链

索引文件改进:
- usage_scenario从2种扩展到10种(更精细分类)
- command-relationships覆盖所有69个命令
- 区分built-in(内置调用)和sequential(用户顺序执行)关系

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-06 15:11:31 +08:00
catlog22
3b351693fc refactor: 重构UI设计工作流的交互模式和字段架构
主要变更:

1. animation-extract.md 重构交互流程
   - Phase 2 交互从Agent移至主流程(参考artifacts.md模式)
   - 使用【问题N - 标签】格式,提供方向性指导而非具体示例
   - Phase 3 Agent改为纯合成任务(无用户交互)
   - 保留独立的animation-tokens.json输出

2. style-extract.md 字段扩展优化
   - 保留字段扩展:typography.combinations、opacity、component_styles、border_radius、shadows
   - 移除animations字段(由专门的animation-tokens.json提供)
   - 完善design-tokens.json格式文档

3. generate.md 支持新字段
   - 保留animation-tokens.json可选加载
   - 支持typography.combinations、opacity、component_styles
   - 生成对应CSS类(组件样式类、排版预设类)

4. batch-generate.md 字段支持
   - 解析新的design-tokens字段结构
   - 使用组件预设和排版预设

架构改进:
- 清晰分离:design-tokens.json(基础设计系统)+ animation-tokens.json(动画配置)
- 主流程交互:用户决策在主流程完成,Agent只负责合成
- 字段完整性:保留所有设计系统扩展字段

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 19:50:47 +08:00
catlog22
57fa379e45 Refactor workflow to replace synthesis-specification.md with role analysis documents
- Updated references in various workflow commands to utilize role analysis documents instead of synthesis-specification.md.
- Modified CLI templates and command references to reflect the new architecture and document structure.
- Introduced conflict-resolution command to analyze and resolve conflicts between implementation plans and existing codebase.
- Deprecated synthesis role template and provided migration guidance for transitioning to the new role analysis approach.
2025-10-24 11:08:15 +08:00
catlog22
d8649db5cb feat: add interactive user selection to UI design workflows
Enhanced layout-extract and style-extract workflows with two-phase generation
process, allowing users to preview and select preferred options before full
generation.

Key changes:
- Split generation into two agent tasks:
  * Task 1: Generate concept options with previews
  * Task 2: Develop selected option into complete output
- Add Phase 1.5 interactive user selection:
  * Present concept options with visual previews
  * Capture user selection via AskUserQuestion tool
  * Save selection to user-selection.json
- Layout workflow improvements:
  * Generate layout concept options with ASCII wireframes
  * User selects preferred structural approach
  * Generate detailed templates only for selected concepts
- Style workflow improvements:
  * Generate design direction options with color/typography previews
  * User selects preferred design philosophy
  * Generate complete design system only for selected direction
- Better user experience:
  * Avoid generating unwanted variants
  * Allow informed decisions before full generation
  * Reduce wasted computation on unused variants

This change improves workflow efficiency and user control over design output.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-17 15:57:08 +08:00
catlog22
610f75de52 feat: enhance UI design workflows with URL auto-trigger and streamlined output
- Add --urls parameter support to style-extract and layout-extract
- Auto-trigger computed styles extraction when URLs provided (no manual flag)
- Auto-trigger DOM structure extraction for layout analysis
- Streamline imitate-auto workflow by removing redundant REPORT statements
- Maintain clear phase headers while reducing verbose output
- Enable graceful fallback to visual analysis if Chrome DevTools unavailable

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-16 14:32:42 +08:00
catlog22
e95be40c2b refactor: streamline UI design workflow and add extraction scripts
- Simplified UI design command workflows (batch-generate, explore-auto, generate, update)
- Enhanced style-extract and layout-extract with improved documentation
- Refactored imitate-auto for better usability
- Removed obsolete consolidate workflow
- Added extract-computed-styles.js and extract-layout-structure.js utilities
- Updated UI generation and instantiation scripts

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-16 13:47:58 +08:00
catlog22
369bfa8a08 Refactor command YAML headers: replace examples with argument-hint
**Summary:**
Updated all 62 command files in `.claude/commands` directory to improve parameter documentation clarity by replacing `examples` field with descriptive `argument-hint` field.

**Changes:**
- Added/improved `argument-hint` for all commands based on usage patterns
- Removed `examples` field and all example items from YAML headers
- Maintained all other YAML fields (name, description, usage, allowed-tools)
- Deleted obsolete commands: workflow/issue/*, workflow/session/pause.md, workflow/session/switch.md
- Cleaned up temporary analysis files

**Rationale:**
The `argument-hint` field provides clearer, more concise parameter documentation than example lists, improving command discoverability and usability in the Claude Code interface.

**Files Modified:** 62 command files
**Lines Changed:** -1570 insertions, +192 deletions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 23:45:55 +08:00
catlog22
7c8e75f363 Release v4.4.0: UI Design Workflow V3 - Layout/Style Separation Architecture
## Breaking Changes

- **Command Renamed**: `extract` → `style-extract`
- **New Required Phase**: `layout-extract` now mandatory before `generate`
- **Workflow Changed**: Old flow (extract → consolidate → generate)
  → New flow (style-extract → consolidate → layout-extract → generate)

## Added

**New Command: layout-extract**
- Extract structural layout separate from visual style
- Agent-powered with ui-design-agent
- Dual-mode: imitate (high-fidelity) / explore (multiple variants)
- Device-aware: desktop, mobile, tablet, responsive
- MCP-integrated layout pattern research (explore mode)
- Output: layout-templates.json with DOM structure + CSS layout rules

**Enhanced Architecture**
- Layout/Style Separation: Clear responsibility boundaries
- Pure Assembler: generate command combines pre-extracted components
- Device-Aware Layouts: Optimized structures for different devices
- Token-Based CSS: var() placeholders for spacing/breakpoints

## Changed

**style-extract (Renamed from extract)**
- File renamed: extract.md → style-extract.md
- Scope clarified: Visual style only (colors, typography, spacing)
- No functionality change, all features preserved

**generate (Refactored to Pure Assembler)**
- Before: Agent designed layout + applied style
- After: Pure assembly - combines layout-templates.json + design-tokens.json
- No design logic: All decisions made in previous phases
- Simplified agent instructions: Focus on assembly only

**Workflow Commands Updated**
- imitate-auto: Added Phase 2.5 (layout extraction)
- explore-auto: Added Phase 2.5 (layout extraction)
- Both workflows now include layout-extract step

## Removed

-  V2 Commands: generate-v2, explore-auto-v2 (merged into main commands)
-  Old extract command (renamed to style-extract)
-  ui-generate-preview-v2.sh (merged into ui-generate-preview.sh)

## Files Changed

- Renamed: extract.md → style-extract.md
- Added: layout-extract.md (370+ lines)
- Modified: generate.md, imitate-auto.md, explore-auto.md, consolidate.md
- Removed: 2 deprecated v2 command files
- Updated: CHANGELOG.md, README.md

## Benefits

-  Single Responsibility: Each phase has one clear job
-  Better Layout Variety: Explore mode generates structurally distinct layouts
-  Reusability: Layout templates work with any style
-  Clarity: All structural decisions visible in layout-templates.json
-  Testability: Layout structure and visual style tested independently

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 16:21:28 +08:00