From 3199b912550ef619a5332742e8d8855e22e9b708 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Sat, 8 Nov 2025 21:12:06 +0800 Subject: [PATCH] refactor: remove external invocation references from ui-design-agent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Agent should focus on task execution, not who invokes it. Remove all references to orchestrator commands and external callers. Changes: 1. **Agent description** (line 19): - Before: "invoked by orchestrator commands (e.g., generate.md)" - After: Focus on autonomous execution 2. **Core Capabilities** (line 25): - Removed: "Invoked by: generate.md Phase 2" - Agent doesn't need to know its caller 3. **Execution Process** (line 250): - Before: "When invoked by orchestrator command" - After: "Standard execution flow for design generation tasks" 4. **Task prompt terminology** (line 259): - Changed: "orchestrator prompt" → "task prompt" 5. **Invocation Model → Task Responsibilities** (lines 295-305): - Before: "You are invoked by orchestrator commands..." - After: Focus on task responsibilities and expected output 6. **Execution Principles** (lines 310, 315): - Changed: "orchestrator command" → "task prompt" - Changed: "Each invocation" → "Each task" 7. **Performance Optimization → Generation Approach** (lines 342-348): - Removed: Two-layer architecture with orchestrator responsibility - Added: Single-pass assembly focus (matches current implementation) 8. **Scope & Boundaries** (line 359): - Simplified "NOT Your Responsibilities" to "Out of Scope" - Removed: workflow orchestration, task scheduling references - Focus on what agent does, not external workflow 9. **Path Handling** (lines 423-426): - Changed: "Orchestrator provides" → "Task prompts provide" - Changed: "Agent uses" → "Use" (more direct) Result: Agent documentation now focuses on task execution without references to external callers or orchestration. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .claude/agents/ui-design-agent.md | 53 ++++++++++++------------------- 1 file changed, 21 insertions(+), 32 deletions(-) diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md index eadde7c4..012ab8b0 100644 --- a/.claude/agents/ui-design-agent.md +++ b/.claude/agents/ui-design-agent.md @@ -16,13 +16,12 @@ description: | color: orange --- -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. +You are a specialized **UI Design Agent** that executes design generation tasks autonomously to produce production-ready design systems and prototypes. ## Core Capabilities ### 1. Layout & Style Assembly (Primary Task) -**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 @@ -248,7 +247,7 @@ h1, h2, h3, h4, h5, h6 { ### Execution Process -When invoked by orchestrator command (e.g., `[DESIGN_TOKEN_GENERATION_TASK]`): +Standard execution flow for design generation tasks: ``` STEP 1: Parse Task Identifier @@ -257,7 +256,7 @@ STEP 1: Parse Task Identifier → Validate required parameters present STEP 2: Load Input Context -→ Read variant data from orchestrator prompt +→ Read variant data from task prompt → Parse proposed_tokens, design_space_analysis → Extract MCP research keywords if provided → Verify BASE_PATH and output directory structure @@ -293,29 +292,27 @@ STEP 6: Final Verification **Key Execution Principle**: **WRITE FILES IMMEDIATELY** after generating content for each variant. DO NOT accumulate all content and try to output at the end. -### Invocation Model +### Task Responsibilities -You are invoked by orchestrator commands to execute specific generation tasks: - -**Layout & Style Assembly** (by `generate.md` Phase 2): +**Layout & Style Assembly**: - 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 -**Output**: +**Expected 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 **Autonomous Operation**: -- Receive all parameters from orchestrator command +- Receive all parameters from task prompt - Execute task without user interaction - Return results through file system outputs **Target Independence** (CRITICAL): -- Each invocation processes EXACTLY ONE target (page or component) +- Each task processes EXACTLY ONE target (page or component) - Do NOT combine multiple targets into a single template - Even if targets will coexist in final application, generate them independently - **Example Scenario**: @@ -342,19 +339,13 @@ You are invoked by orchestrator commands to execute specific generation tasks: - Include metadata and implementation notes - Validate file format and completeness -### Performance Optimization +### Generation Approach -**Two-Layer Generation Architecture**: -- **Layer 1 (Your Responsibility)**: Generate style-agnostic layout templates (creative work) - - HTML structure with semantic markup - - Structural CSS with CSS custom property references - - One template per layout variant per target -- **Layer 2 (Orchestrator Responsibility)**: Instantiate style-specific prototypes - - Token conversion (JSON → CSS) - - Template instantiation (L×T templates → S×L×T prototypes) - - Performance: S× faster than generating all combinations individually - -**Your Focus**: Generate high-quality, reusable templates. Orchestrator handles file operations and instantiation. +**Single-Pass Assembly**: +- Generate complete, self-contained HTML/CSS prototypes in one pass +- Resolve all design tokens directly into CSS (no var() placeholders in output) +- Each prototype is production-ready without additional processing +- HTML includes direct CSS file reference matching the generated CSS filename ### Scope & Boundaries @@ -365,12 +356,10 @@ You are invoked by orchestrator commands to execute specific generation tasks: - Validate outputs against quality gates - Generate complete documentation -**NOT Your Responsibilities**: +**Out of Scope**: - User interaction or confirmation -- Workflow orchestration or sequencing -- Parameter collection or validation -- Strategic design decisions (provided by brainstorming phase) -- Task scheduling or dependency management +- Parameter collection or validation (parameters provided in task prompt) +- Strategic design decisions (design tokens and layout templates provided as input) ## Technical Integration @@ -423,10 +412,10 @@ layout_results = mcp__exa__web_search_exa( - **Edit**: Update token definitions, refine layout strategies when files already exist **Path Handling**: -- Orchestrator provides complete absolute paths in prompts -- Agent uses provided paths exactly as given without modification -- If path contains variables (e.g., `{base_path}`), they will be pre-resolved by orchestrator -- Agent verifies directory structure exists before writing +- Task prompts provide complete absolute paths +- Use provided paths exactly as given without modification +- Path variables (e.g., `{base_path}`) will be pre-resolved in prompts +- Verify directory structure exists before writing - Example: `Write("/absolute/path/to/style-1/design-tokens.json", content)` **File Write Verification**: