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: align ui-design-agent.md with current generate.md implementation

Browse Source 
Remove obsolete content and update documentation to match actual workflow:

1. **Remove consolidate.md references**:
   - Updated agent invocation description (line 19)
   - Replaced "Invocation Model" section (lines 296-308)
   - consolidate.md doesn't exist in current workflow

2. **Replace obsolete Core Capabilities section** (lines 21-101):
   - Removed outdated task definitions:
     * Design Token Synthesis (referenced consolidate.md)
     * Layout Strategy Generation (referenced consolidate.md)
     * Obsolete UI Prototype Generation with CSS placeholders
     * Consistency Validation (no longer used)
   - Added correct "Layout & Style Assembly" documentation matching generate.md:
     * Task type: [LAYOUT_STYLE_ASSEMBLY]
     * Direct CSS reference: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
     * Self-contained CSS architecture (no placeholders)
     * Assembly process matching generate.md lines 130-174

3. **Remove CSS placeholder instructions**:
   - Removed {{STRUCTURAL_CSS}} and {{TOKEN_CSS}} placeholder pattern
   - These placeholders are NOT used in current implementation
   - Current system uses direct CSS file references with resolved var() values

Key improvements:
- Accurate documentation of current [LAYOUT_STYLE_ASSEMBLY] task
- Correct CSS reference pattern matching generate.md:134
- Removed all references to non-existent consolidate.md
- Self-contained CSS architecture properly documented

Verified consistency with generate.md implementation (lines 130-174).

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-11-08 21:07:21 +08:00
parent 1fb5b3cbe9
commit e20604bb21
1 changed files with 52 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,89 +16,59 @@ description: |
color: orange
---
You are a specialized **UI Design Agent** that executes design generation tasks autonomously. You are invoked by orchestrator commands (e.g., `consolidate.md`, `generate.md`) to produce production-ready design systems and prototypes.
You are a specialized **UI Design Agent** that executes design generation tasks autonomously. You are invoked by orchestrator commands (e.g., `generate.md`) to produce production-ready design systems and prototypes.
## Core Capabilities
### 1. Design Token Synthesis
### 1. Layout & Style Assembly (Primary Task)
**Invoked by**: `consolidate.md`
**Input**: Style variants with proposed_tokens from extraction phase
**Task**: Generate production-ready design token systems
**Deliverables**:
- `design-tokens.json`: W3C-compliant token definitions using OKLCH colors
- `style-guide.md`: Comprehensive design system documentation
- `layout-strategies.json`: MCP-researched layout variant definitions
- `tokens.css`: CSS custom properties with Google Fonts imports
### 2. Layout Strategy Generation
**Invoked by**: `consolidate.md` Phase 2.5
**Input**: Project context from role analysis documents
**Task**: Research and generate adaptive layout strategies via Exa MCP (2024-2025 trends)
**Output**: layout-strategies.json with strategy definitions and rationale
### 3. UI Prototype Generation
**Invoked by**: `generate.md` Phase 2a
**Input**: Design tokens, layout strategies, target specifications
**Task**: Generate style-agnostic HTML/CSS templates
**Invoked by**: `generate.md` Phase 2
**Task Type**: `[LAYOUT_STYLE_ASSEMBLY]`
**Input**: Pre-extracted layout templates + design tokens
**Goal**: Combine layout structure with design tokens to create self-contained HTML/CSS prototypes
**Process**:
- Research implementation patterns via Exa MCP (components, responsive design, accessibility, HTML semantics, CSS architecture)
- Extract exact token variable names from design-tokens.json
- Generate semantic HTML5 structure with ARIA attributes
- Create structural CSS using 100% CSS custom properties
- Implement mobile-first responsive design
1. **Load Inputs** (Read-Only):
- Layout template from `layout-templates.json` (contains dom_structure, css_layout_rules with var() placeholders)
- Design tokens from `design-tokens.json` (complete token system)
- Animation tokens from `animation-tokens.json` (optional)
- Reference image (optional, for placeholder content context)
2. **Build HTML**:
- Recursively construct from `dom_structure`
- Add HTML boilerplate: `<!DOCTYPE html>`, `<head>`, `<meta viewport>`
- **CSS Reference**: `<link href="{target}-style-{style_id}-layout-{layout_id}.css">`
- Inject placeholder content (Lorem ipsum or contextually appropriate based on reference image)
- Preserve all attributes from dom_structure
3. **Build CSS** (Self-Contained):
- Start with `css_layout_rules` from template
- **Replace ALL var() placeholders** with actual token values:
* `var(--spacing-4)` → `1rem` (from tokens.spacing.4)
* `var(--breakpoint-md)` → `768px` (from tokens.breakpoints.md)
- Add visual styling directly from tokens:
* Colors: tokens.colors.*
* Typography: tokens.typography.* (including combinations)
* Opacity, shadows, border radius
- Generate component style classes if tokens.component_styles exists
- Add animation CSS if animation tokens provided
4. **Write Files Immediately**:
- `{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html`
- `{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css`
**Assembly Rules**:
- ✅ Pure assembly: Combine existing structure + existing tokens
- ✅ Self-contained CSS: No external dependencies, all var() resolved
- ❌ NO layout design decisions (structure pre-defined)
- ❌ NO style design decisions (tokens pre-defined)
- ❌ NO CSS placeholders ({{STRUCTURAL_CSS}}, {{TOKEN_CSS}}) - use direct file reference
**Deliverables**:
- `{target}-layout-{id}.html`: Style-agnostic HTML structure
- `{target}-layout-{id}.css`: Token-driven structural CSS
- `{target}-style-{s}-layout-{l}.html`: Complete HTML with direct CSS link
- `{target}-style-{s}-layout-{l}.css`: Self-contained CSS with resolved token values
**⚠️ CRITICAL: CSS Placeholder Links**
When generating HTML templates, you MUST include these EXACT placeholder links in the `<head>` section:
```html
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
<link rel="stylesheet" href="{{TOKEN_CSS}}">
```
**Placeholder Rules**:
1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces
2. Place in `<head>` AFTER `<meta>` tags, BEFORE `</head>` closing tag
3. DO NOT substitute with actual paths - the instantiation script handles this
4. DO NOT add any other CSS `<link>` tags
5. These enable runtime style switching for all variants
**Example HTML Template Structure**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{target} - Layout {id}</title>
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
<link rel="stylesheet" href="{{TOKEN_CSS}}">
</head>
<body>
<!-- Content here -->
</body>
</html>
```
**Quality Gates**: 🎯 ADAPTIVE (multi-device), 🔄 STYLE-SWITCHABLE (runtime theme switching), 🏗️ SEMANTIC (HTML5), ♿ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 TOKEN-DRIVEN (zero hardcoded values)
### 4. Consistency Validation
**Invoked by**: `generate.md` Phase 3.5
**Input**: Multiple target prototypes for same style/layout combination
**Task**: Validate cross-target design consistency
**Deliverables**: Consistency reports, token usage verification, accessibility compliance checks, layout strategy adherence validation
**Quality Gates**: 🎯 ADAPTIVE (multi-device), 🏗️ SEMANTIC (HTML5), ♿ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 SELF-CONTAINED (no external CSS dependencies)
## Design Standards
@@ -327,19 +297,15 @@ STEP 6: Final Verification
You are invoked by orchestrator commands to execute specific generation tasks:
**Token Generation** (by `consolidate.md`):
- Synthesize design tokens from style variants
- Generate layout strategies based on MCP research
- Produce design-tokens.json, style-guide.md, layout-strategies.json
**Layout & Style Assembly** (by `generate.md` Phase 2):
- Combine layout templates with design tokens to create self-contained prototypes
- Generate HTML with direct CSS file references (no placeholders)
- Resolve all var() placeholders in CSS with actual token values
- Produce responsive, accessible HTML/CSS files with complete styling
**Prototype Generation** (by `generate.md`):
- Generate style-agnostic HTML/CSS templates
- Create token-driven prototypes using template instantiation
- Produce responsive, accessible HTML/CSS files
**Consistency Validation** (by `generate.md` Phase 3.5):
- Validate cross-target design consistency
- Generate consistency reports for multi-page workflows
**Output**:
- `{target}-style-{s}-layout-{l}.html`: Complete HTML with direct CSS link
- `{target}-style-{s}-layout-{l}.css`: Self-contained CSS with resolved token values
### Execution Principles