catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui-design): streamline output files for animation, layout, and style extraction commands by removing unnecessary guide files

Browse Source
This commit is contained in:
catlog22
2025-11-11 20:23:46 +08:00
parent 19351cd938
commit 30071f48e8
4 changed files with 46 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
.claude/agents/ui-design-agent.md
View File

@@ -71,13 +71,37 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
5. **Record Code Snippets**: When in code import mode, capture complete code blocks with context
6. **Write Files Immediately**: JSON files with embedded code snippets (when applicable)
**Execution Modes**:
Pattern 2 has two distinct execution modes that determine how code snippets and design patterns are obtained:
1. **Code Import Mode** (Source: `import-from-code` command)
- **Data Source**: Existing source code files (CSS/SCSS/JS/TS/HTML)
- **Code Snippet Strategy**: Directly read source files and extract complete code blocks
- **MCP Usage**: ❌ NO Exa MCP research (only extract from provided code)
- **Process**: Read discovered-files.json → Read source files → Extract tokens with code snippets
- **Code Snippets**: Record actual code from source files in `_metadata.code_snippets` or `extraction_metadata.code_snippets`
- **Example Context Types**: css-variable, css-class, js-object, css-keyframes, react-component
2. **Explore/Text Mode** (Source: `style-extract`, `layout-extract`, `animation-extract` commands)
- **Data Source**: User prompts, visual references, images, URLs
- **Code Snippet Strategy**: Creative generation based on research and best practices
- **MCP Usage**: ✅ YES - Use Exa MCP to research design patterns and obtain code examples
- **Process**: Analyze inputs → Research patterns via Exa → Generate tokens with example code
- **Code Snippets**: Generate example implementations based on modern patterns and best practices
- **MCP Queries**: "modern [pattern] implementation", "best practices for [feature]", "code examples for [component]"
**Mode Detection**: Check task prompt for MODE field or extraction strategy indicators:
- `MODE: style-extraction` or `MODE: animation-extraction` or `MODE: layout-extraction` with `SOURCE: [path]` → Code Import Mode
- `MODE: style-generation` or prompt-based generation → Explore/Text Mode
**Design System Generation**:
- **Input**: Selected design direction OR visual references, computed styles (if available), user refinements
- **Output**:
- `{base_path}/style-extraction/style-{id}/design-tokens.json` (W3C format, OKLCH colors)
- **Content**: Complete token system (colors, typography, spacing, opacity, shadows, border_radius, breakpoints, component_styles, typography.combinations)
- **Code Snippets** (when in code import mode): Record complete code blocks in `_metadata.code_snippets` with source location, line numbers, and context type
- **MCP Use**: Research modern color palettes, typography trends, design system patterns
- **MCP Use** (Explore/Text mode only): Research modern color palettes, typography trends, design system patterns
**Layout Template Generation**:
- **Input**: Selected layout concepts OR visual references, device type, DOM structure data (if available)
@@ -446,6 +470,8 @@ STEP 5: Final Verification
### MCP Integration
**⚠️ Mode-Specific Usage**: MCP tools are ONLY used in **Explore/Text Mode**. In **Code Import Mode**, extract directly from source files without MCP research.
**Exa MCP: Design Research & Trends**
*Use Cases*:
@@ -600,7 +626,7 @@ layout_results = mcp__exa__web_search_exa(
- ✅ Include Google Fonts imports with fallback stacks (Pattern 2 & 3)
- ✅ Use mobile-first responsive design with token-based breakpoints
- ✅ Implement semantic HTML5 with ARIA attributes (Pattern 2 & 3)
- ✅ Execute MCP research for modern patterns (Pattern 1 & 2 when applicable)
- ✅ Execute MCP research for modern patterns (Pattern 1 & Pattern 2 Explore/Text mode only)
- ✅ Record complete code snippets when in code import mode (_metadata.code_snippets with location, lines, snippet, context)
**Target Independence**:

48
.claude/commands/workflow/ui-design/animation-extract.md
View File

@@ -9,7 +9,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestio
## Overview
Extract animation and transition patterns from prompt inference and image references using AI analysis. Directly generates production-ready animation systems with complete `animation-tokens.json` and `animation-guide.md`.
Extract animation and transition patterns from prompt inference and image references using AI analysis. Directly generates production-ready animation systems with complete `animation-tokens.json`.
**Strategy**: AI-Driven Animation Specification with Visual Previews
@@ -818,32 +818,17 @@ IF NOT refine_mode:
}
}
### 2. animation-guide.md
Comprehensive usage guide with sections:
- **Animation Philosophy**: Rationale from user choices and CSS analysis
- **Duration Scale**: Explanation of timing values and usage contexts
- **Easing Functions**: When to use each easing curve
- **Transition Presets**: Property-specific transition guidelines
- **Keyframe Animations**: Available animations and use cases
- **Interaction Patterns**: Button, card, input animation examples
- **Page Transitions**: Route change animation implementation (if enabled)
- **Scroll Animations**: Scroll-trigger setup and configuration (if enabled)
- **Implementation Examples**: CSS and JavaScript code samples
- **Accessibility**: prefers-reduced-motion media query setup
- **Performance Best Practices**: Hardware acceleration, will-change usage
## Output File Paths
- animation-tokens.json: {base_path}/animation-extraction/animation-tokens.json
- animation-guide.md: {base_path}/animation-extraction/animation-guide.md
## Critical Requirements
- ✅ Use Write() tool immediately for both files
- ✅ Use Write() tool immediately to generate JSON file
- ✅ All tokens use CSS Custom Property format: var(--duration-fast)
- ✅ Include prefers-reduced-motion media query guidance
- ✅ Validate all cubic-bezier values are valid (4 numbers between 0-1)
- ${user_answers ? "✅ READ analysis-options.json for user_selection field" : "✅ Use first option from each question as default"}
- ❌ NO user questions or interaction in this phase
- ❌ NO external research or MCP calls
- ✅ Can use Exa MCP to research modern animation patterns and obtain code examples (Explore/Text mode)
`
ELSE:
@@ -898,7 +883,6 @@ ELSE:
- If multiple selected refinements modify same token:
* Apply refinements in ID order (lowest first)
* Later refinements override earlier ones
* Document conflicts in animation-guide.md
## Generate Updated Files
@@ -909,33 +893,22 @@ ELSE:
- Maintain var() references and semantic naming
- Validate all cubic-bezier values
### 2. animation-guide.md
Updated usage guide with refinement documentation:
- Original sections (Animation Philosophy, Duration Scale, etc.)
- **NEW: Refinement History** section:
* Applied refinements list
* Before/after comparisons
* Rationale for changes
* Migration notes if needed
## Output File Paths
- animation-tokens.json: {base_path}/animation-extraction/animation-tokens.json (OVERWRITE)
- animation-guide.md: {base_path}/animation-extraction/animation-guide.md (UPDATE with refinement history)
## Critical Requirements
- ✅ Use Write() tool immediately for both files
- ✅ Use Write() tool immediately to generate JSON file
- ✅ OVERWRITE existing animation-tokens.json with refined version
- ✅ UPDATE animation-guide.md (don't overwrite, add refinement history section)
- ✅ All tokens use CSS Custom Property format: var(--duration-fast)
- ✅ Include prefers-reduced-motion media query guidance
- ✅ Validate all cubic-bezier values are valid (4 numbers between 0-1)
- ${selected_refinements ? "✅ READ refinement-options.json for user_selection.selected_refinements" : "✅ Apply ALL refinements from refinement_options"}
- ❌ NO user questions or interaction in this phase
- ❌ NO external research or MCP calls
- ✅ Can use Exa MCP to research modern animation patterns and obtain code examples (Explore/Text mode)
`
```
**Output**: Agent generates/updates 2 files (animation-tokens.json, animation-guide.md)
**Output**: Agent generates/updates animation-tokens.json
## Phase 3: Verify Output
@@ -944,7 +917,6 @@ ELSE:
```bash
# Verify animation system created
bash(test -f {base_path}/animation-extraction/animation-tokens.json && echo "exists")
bash(test -f {base_path}/animation-extraction/animation-guide.md && echo "exists")
# Validate structure
bash(cat {base_path}/animation-extraction/animation-tokens.json | grep -q "duration" && echo "valid")
@@ -957,7 +929,7 @@ bash(cat {base_path}/animation-extraction/animation-tokens.json | grep -q "easin
bash(ls -lh {base_path}/animation-extraction/)
```
**Output**: 2 files verified (animation-tokens.json, animation-guide.md)
**Output**: animation-tokens.json verified
## Completion
@@ -998,8 +970,7 @@ Configuration:
Generated Files:
{base_path}/animation-extraction/
├── animation-tokens.json # Production-ready animation tokens
└── animation-guide.md # Usage guidelines and examples
└── animation-tokens.json # Production-ready animation tokens
{IF has_images OR options.user_selection:
Intermediate Analysis:
@@ -1067,8 +1038,7 @@ bash(ls {base_path}/animation-extraction/)
│ ├── animations-{target}.json # Extracted CSS (URL mode only)
│ └── analysis-options.json # Generated questions + user answers (embedded)
└── animation-extraction/ # Final animation system
├── animation-tokens.json # Production-ready animation tokens
└── animation-guide.md # Usage guide and examples
└── animation-tokens.json # Production-ready animation tokens
```
## animation-tokens.json Format

18
.claude/commands/workflow/ui-design/layout-extract.md
View File

@@ -659,20 +659,12 @@ FOR each task in task_list:
- component_hierarchy (array of strings)
- css_layout_rules (string)
2. **layout-guide.md** - {task.output_file.replace('.json', '-guide.md')}
Write layout system guide with:
- Layout Philosophy: Design philosophy from selected concept
- Component Hierarchy: Description of layout regions and their purpose
- Layout Pattern: Explanation of grid/flexbox structure
- Responsive Strategy: Breakpoint behavior and device optimizations
- Usage Guidelines: How to implement and customize the layout
- Accessibility Notes: ARIA roles and semantic HTML structure
## Critical Requirements
- ✅ Use Write() tool for BOTH files (JSON + MD)
- ✅ Use Write() tool to generate JSON file
- ✅ Single template for {task.target} variant {task.variant_id}
- ✅ Structure only, no visual styling
- ✅ Token-based CSS (var())
- ✅ Can use Exa MCP to research modern layout patterns and obtain code examples (Explore/Text mode)
- ✅ Maintain consistency with selected concept
`
```
@@ -736,8 +728,7 @@ Generated Templates:
{base_path}/layout-extraction/
{FOR each target in targets:
{FOR each variant_id in range(1, selections_per_target[target].selected_indices.length + 1):
├── layout-{target}-{variant_id}.json
└── layout-{target}-{variant_id}-guide.md
└── layout-{target}-{variant_id}.json
}
}
@@ -793,8 +784,7 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
│ ├── analysis-options.json # Generated layout concepts + user selections (embedded)
│ └── dom-structure-{target}.json # Extracted DOM structure (URL mode only)
└── layout-extraction/ # Final layout templates
├── layout-{target}-{variant}.json # Structural layout template JSON
└── layout-{target}-{variant}-guide.md # Layout system usage guide
└── layout-{target}-{variant}.json # Structural layout template JSON
```
## Layout Template File Format

26
.claude/commands/workflow/ui-design/style-extract.md
View File

@@ -14,7 +14,7 @@ Extract design style from reference images or text prompts using Claude's built-
**Strategy**: AI-Driven Design Space Exploration
- **Claude-Native**: 100% Claude analysis, no external tools
- **Direct Output**: Complete design systems (design-tokens.json + style-guide.md)
- **Direct Output**: Complete design systems (design-tokens.json)
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single design fine-tuning)
- **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
@@ -173,7 +173,6 @@ bash(test -f {base_path}/.brainstorming/role analysis documents && cat it)
# Load existing design system if refinement mode
IF refine_mode:
existing_tokens = Read({base_path}/style-extraction/style-1/design-tokens.json)
existing_guide = Read({base_path}/style-extraction/style-1/style-guide.md)
```
### Step 2: Generate Options (Agent Task 1 - Mode-Specific)
@@ -236,7 +235,6 @@ ELSE:
## Existing Design System
- design-tokens.json: {existing_tokens}
- style-guide.md: {existing_guide}
## Input Guidance
- User prompt: {prompt_guidance}
@@ -611,28 +609,15 @@ FOR variant_index IN 1..actual_variants_count:
${extraction_mode == "explore" && refinements.enabled ? "- Apply user refinements where specified" : ""}
- Common Tailwind CSS usage patterns in project (if extracting from existing project)
2. **style-guide.md**:
- Design philosophy (${extraction_mode == "explore" ? "expand on: " + selected_direction.philosophy_name : "describe the reference design"})
- Complete color system documentation with accessibility notes
- Typography scale and usage guidelines
- Typography Combinations section: Document each preset (heading-primary, heading-secondary, body-regular, body-emphasis, caption, label) with usage context and code examples
- Spacing system explanation
- Opacity & Transparency section: Opacity scale usage, common use cases (disabled states, overlays, hover effects), accessibility considerations
- Shadows & Elevation section: Shadow hierarchy and semantic usage
- Component Styles section: Document button, card, and input variants with code examples and visual descriptions
- Border Radius system and semantic usage
- Component examples and usage patterns
- Common Tailwind CSS patterns (if applicable)
## Critical Requirements
- ✅ Use Write() tool immediately for each file
- ✅ Write to style-{variant_index}/ directory
- ❌ NO external research or MCP calls (pure AI generation)
- ✅ Can use Exa MCP to research modern design patterns and obtain code examples (Explore/Text mode)
- ✅ Maintain consistency with user-selected direction
`
```
**Output**: {actual_variants_count} parallel agent tasks generate 2 files each (design-tokens.json, style-guide.md)
**Output**: {actual_variants_count} parallel agent tasks generate design-tokens.json for each variant
## Phase 3: Verify Output
@@ -690,7 +675,7 @@ Design Direction Selection:
Generated Files:
{base_path}/style-extraction/
└── style-1/ (design-tokens.json, style-guide.md)
└── style-1/design-tokens.json
{IF computed_styles_available:
Intermediate Analysis:
@@ -755,8 +740,7 @@ bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json &&
│ └── analysis-options.json # Design direction options + user selection (explore mode only)
└── style-extraction/ # Final design system
└── style-1/
├── design-tokens.json # Production-ready design tokens
└── style-guide.md # Design philosophy and usage guide
└── design-tokens.json # Production-ready design tokens
```
## design-tokens.json Format