mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
Merge branch 'main' of https://github.com/catlog22/Claude-Code-Workflow
This commit is contained in:
catlog22
652
.claude/commands/workflow/lite-fix.md
Normal file
652
.claude/commands/workflow/lite-fix.md
Normal file
@@ -0,0 +1,652 @@
|
||||
---
|
||||
name: lite-fix
|
||||
description: Lightweight bug diagnosis and fix workflow with intelligent severity assessment and optional hotfix mode for production incidents
|
||||
argument-hint: "[--hotfix] \"bug description or issue reference\""
|
||||
allowed-tools: TodoWrite(*), Task(*), SlashCommand(*), AskUserQuestion(*), Read(*), Bash(*)
|
||||
---
|
||||
|
||||
# Workflow Lite-Fix Command (/workflow:lite-fix)
|
||||
|
||||
## Overview
|
||||
|
||||
Fast-track bug fixing workflow optimized for quick diagnosis, targeted fixes, and streamlined verification. Automatically adjusts process complexity based on impact assessment.
|
||||
|
||||
**Core capabilities:**
|
||||
- Rapid root cause diagnosis with intelligent code search
|
||||
- Automatic severity assessment and adaptive workflow
|
||||
- Fix strategy selection (immediate patch vs comprehensive refactor)
|
||||
- Risk-aware verification (smoke tests to full suite)
|
||||
- Optional hotfix mode for production incidents with branch management
|
||||
- Automatic follow-up task generation for hotfixes
|
||||
|
||||
## Usage
|
||||
|
||||
### Command Syntax
|
||||
```bash
|
||||
/workflow:lite-fix [FLAGS] <BUG_DESCRIPTION>
|
||||
|
||||
# Flags
|
||||
--hotfix, -h Production hotfix mode (creates hotfix branch, auto follow-up)
|
||||
|
||||
# Arguments
|
||||
<bug-description> Bug description or issue reference (required)
|
||||
```
|
||||
|
||||
### Modes
|
||||
|
||||
| Mode | Time Budget | Use Case | Workflow Characteristics |
|
||||
|------|-------------|----------|--------------------------|
|
||||
| **Default** | Auto-adapt (15min-4h) | All standard bugs | Intelligent severity assessment + adaptive process |
|
||||
| **Hotfix** (`--hotfix`) | 15-30 min | Production outage | Minimal diagnosis + hotfix branch + auto follow-up |
|
||||
|
||||
### Examples
|
||||
|
||||
```bash
|
||||
# Default mode: Automatically adjusts based on impact
|
||||
/workflow:lite-fix "User avatar upload fails with 413 error"
|
||||
/workflow:lite-fix "Shopping cart randomly loses items at checkout"
|
||||
|
||||
# Hotfix mode: Production incident
|
||||
/workflow:lite-fix --hotfix "Payment gateway 5xx errors"
|
||||
```
|
||||
|
||||
## Execution Process
|
||||
|
||||
### Workflow Overview
|
||||
|
||||
```
|
||||
Bug Input → Diagnosis (Phase 1) → Impact Assessment (Phase 2)
|
||||
↓
|
||||
Severity Auto-Detection → Fix Planning (Phase 3)
|
||||
↓
|
||||
Verification Strategy (Phase 4) → User Confirmation (Phase 5) → Execution (Phase 6)
|
||||
```
|
||||
|
||||
### Phase Summary
|
||||
|
||||
| Phase | Default Mode | Hotfix Mode |
|
||||
|-------|--------------|-------------|
|
||||
| 1. Diagnosis | Adaptive search depth | Minimal (known issue) |
|
||||
| 2. Impact Assessment | Full risk scoring | Critical path only |
|
||||
| 3. Fix Planning | Strategy options based on complexity | Single surgical fix |
|
||||
| 4. Verification | Test level matches risk score | Smoke tests only |
|
||||
| 5. User Confirmation | 3 dimensions | 2 dimensions |
|
||||
| 6. Execution | Via lite-execute | Via lite-execute + monitoring |
|
||||
|
||||
---
|
||||
|
||||
## Detailed Phase Execution
|
||||
|
||||
### Phase 1: Diagnosis & Root Cause Analysis
|
||||
|
||||
**Goal**: Identify root cause and affected code paths
|
||||
|
||||
**Execution Strategy**:
|
||||
|
||||
**Default Mode** - Adaptive search:
|
||||
- **High confidence keywords** (e.g., specific error messages): Direct grep search (5min)
|
||||
- **Medium confidence**: cli-explore-agent with focused search (10-15min)
|
||||
- **Low confidence** (vague symptoms): cli-explore-agent with broad search (20min)
|
||||
|
||||
```javascript
|
||||
// Confidence-based strategy selection
|
||||
if (has_specific_error_message || has_file_path_hint) {
|
||||
// Quick targeted search
|
||||
grep -r '${error_message}' src/ --include='*.ts' -n | head -10
|
||||
git log --oneline --since='1 week ago' -- '*affected*'
|
||||
} else {
|
||||
// Deep exploration
|
||||
Task(subagent_type="cli-explore-agent", prompt=`
|
||||
Bug: ${bug_description}
|
||||
Execute diagnostic search:
|
||||
1. Search error patterns and similar issues
|
||||
2. Trace execution path in affected modules
|
||||
3. Check recent changes
|
||||
Return: Root cause hypothesis, affected paths, reproduction steps
|
||||
`)
|
||||
}
|
||||
```
|
||||
|
||||
**Hotfix Mode** - Minimal search:
|
||||
```bash
|
||||
Read(suspected_file) # User typically knows the file
|
||||
git blame ${suspected_file}
|
||||
```
|
||||
|
||||
**Output Structure**:
|
||||
```javascript
|
||||
{
|
||||
root_cause: {
|
||||
file: "src/auth/tokenValidator.ts",
|
||||
line_range: "45-52",
|
||||
issue: "Token expiration check uses wrong comparison",
|
||||
introduced_by: "commit abc123"
|
||||
},
|
||||
reproduction_steps: ["Login", "Wait 15min", "Access protected route"],
|
||||
affected_scope: {
|
||||
users: "All authenticated users",
|
||||
features: ["login", "API access"],
|
||||
data_risk: "none"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**TodoWrite**: Mark Phase 1 completed, Phase 2 in_progress
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Impact Assessment & Severity Auto-Detection
|
||||
|
||||
**Goal**: Quantify blast radius and auto-determine severity
|
||||
|
||||
**Risk Score Calculation**:
|
||||
```javascript
|
||||
risk_score = (user_impact × 0.4) + (system_risk × 0.3) + (business_impact × 0.3)
|
||||
|
||||
// Auto-severity mapping
|
||||
if (risk_score >= 8.0) severity = "critical"
|
||||
else if (risk_score >= 5.0) severity = "high"
|
||||
else if (risk_score >= 3.0) severity = "medium"
|
||||
else severity = "low"
|
||||
|
||||
// Workflow adaptation
|
||||
if (severity >= "high") {
|
||||
diagnosis_depth = "focused"
|
||||
test_strategy = "smoke_and_critical"
|
||||
review_optional = true
|
||||
} else {
|
||||
diagnosis_depth = "comprehensive"
|
||||
test_strategy = "full_suite"
|
||||
review_optional = false
|
||||
}
|
||||
```
|
||||
|
||||
**Assessment Output**:
|
||||
```javascript
|
||||
{
|
||||
affected_users: {
|
||||
count: "5000 active users (100%)",
|
||||
severity: "high"
|
||||
},
|
||||
system_risk: {
|
||||
availability: "degraded_30%",
|
||||
cascading_failures: "possible_logout_storm"
|
||||
},
|
||||
business_impact: {
|
||||
revenue: "medium",
|
||||
reputation: "high",
|
||||
sla_breach: "yes"
|
||||
},
|
||||
risk_score: 7.1,
|
||||
severity: "high",
|
||||
workflow_adaptation: {
|
||||
test_strategy: "focused_integration",
|
||||
review_required: false,
|
||||
time_budget: "1_hour"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Hotfix Mode**: Skip detailed assessment, assume critical
|
||||
|
||||
**TodoWrite**: Mark Phase 2 completed, Phase 3 in_progress
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Fix Planning & Strategy Selection
|
||||
|
||||
**Goal**: Generate fix options with trade-off analysis
|
||||
|
||||
**Strategy Generation**:
|
||||
|
||||
**Default Mode** - Complexity-adaptive:
|
||||
- **Low risk score (<5.0)**: Generate 2-3 strategy options for user selection
|
||||
- **High risk score (≥5.0)**: Generate single best strategy for speed
|
||||
|
||||
```javascript
|
||||
strategies = generateFixStrategies(root_cause, risk_score)
|
||||
|
||||
if (risk_score >= 5.0 || mode === "hotfix") {
|
||||
// Single best strategy
|
||||
return strategies[0] // Fastest viable fix
|
||||
} else {
|
||||
// Multiple options with trade-offs
|
||||
return strategies // Let user choose
|
||||
}
|
||||
```
|
||||
|
||||
**Example Strategies**:
|
||||
```javascript
|
||||
// Low risk: Multiple options
|
||||
[
|
||||
{
|
||||
strategy: "immediate_patch",
|
||||
description: "Fix comparison operator",
|
||||
estimated_time: "15 minutes",
|
||||
risk: "low",
|
||||
pros: ["Quick fix"],
|
||||
cons: ["Doesn't address underlying issue"]
|
||||
},
|
||||
{
|
||||
strategy: "comprehensive_fix",
|
||||
description: "Refactor token validation logic",
|
||||
estimated_time: "2 hours",
|
||||
risk: "medium",
|
||||
pros: ["Addresses root cause"],
|
||||
cons: ["Longer implementation"]
|
||||
}
|
||||
]
|
||||
|
||||
// High risk or hotfix: Single option
|
||||
{
|
||||
strategy: "surgical_fix",
|
||||
description: "Minimal change to fix comparison",
|
||||
files: ["src/auth/tokenValidator.ts:47"],
|
||||
estimated_time: "5 minutes",
|
||||
risk: "minimal"
|
||||
}
|
||||
```
|
||||
|
||||
**Complexity Assessment**:
|
||||
```javascript
|
||||
if (complexity === "high" && risk_score < 5.0) {
|
||||
suggestCommand("/workflow:plan --mode bugfix")
|
||||
return // Escalate to full planning
|
||||
}
|
||||
```
|
||||
|
||||
**TodoWrite**: Mark Phase 3 completed, Phase 4 in_progress
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Verification Strategy
|
||||
|
||||
**Goal**: Define testing approach based on severity
|
||||
|
||||
**Adaptive Test Strategy**:
|
||||
|
||||
| Risk Score | Test Scope | Duration | Automation |
|
||||
|------------|------------|----------|------------|
|
||||
| **< 3.0** (Low) | Full test suite | 15-20 min | `npm test` |
|
||||
| **3.0-5.0** (Medium) | Focused integration | 8-12 min | `npm test -- affected-module.test.ts` |
|
||||
| **5.0-8.0** (High) | Smoke + critical | 5-8 min | `npm test -- critical.smoke.test.ts` |
|
||||
| **≥ 8.0** (Critical) | Smoke only | 2-5 min | `npm test -- smoke.test.ts` |
|
||||
| **Hotfix** | Production smoke | 2-3 min | `npm test -- production.smoke.test.ts` |
|
||||
|
||||
**Branch Strategy**:
|
||||
|
||||
**Default Mode**:
|
||||
```javascript
|
||||
{
|
||||
type: "feature_branch",
|
||||
base: "main",
|
||||
name: "fix/token-expiration-edge-case",
|
||||
merge_target: "main"
|
||||
}
|
||||
```
|
||||
|
||||
**Hotfix Mode**:
|
||||
```javascript
|
||||
{
|
||||
type: "hotfix_branch",
|
||||
base: "production_tag_v2.3.1", // ⚠️ From production tag
|
||||
name: "hotfix/token-validation-fix",
|
||||
merge_target: ["main", "production"] // Dual merge
|
||||
}
|
||||
```
|
||||
|
||||
**TodoWrite**: Mark Phase 4 completed, Phase 5 in_progress
|
||||
|
||||
---
|
||||
|
||||
### Phase 5: User Confirmation & Execution Selection
|
||||
|
||||
**Adaptive Confirmation Dimensions**:
|
||||
|
||||
**Default Mode** - 3 dimensions (adapted by risk score):
|
||||
|
||||
```javascript
|
||||
dimensions = [
|
||||
{
|
||||
question: "Confirm fix approach?",
|
||||
options: ["Proceed", "Modify", "Escalate to /workflow:plan"]
|
||||
},
|
||||
{
|
||||
question: "Execution method:",
|
||||
options: ["Agent", "CLI Tool (Codex/Gemini)", "Manual (plan only)"]
|
||||
},
|
||||
{
|
||||
question: "Verification level:",
|
||||
options: adaptedByRiskScore() // Auto-suggest based on Phase 2
|
||||
}
|
||||
]
|
||||
|
||||
// If risk_score >= 5.0, auto-skip code review dimension
|
||||
// If risk_score < 5.0, add optional code review dimension
|
||||
if (risk_score < 5.0) {
|
||||
dimensions.push({
|
||||
question: "Post-fix review:",
|
||||
options: ["Gemini", "Skip"]
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**Hotfix Mode** - 2 dimensions (minimal):
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
question: "Confirm hotfix deployment:",
|
||||
options: ["Deploy", "Stage First", "Abort"]
|
||||
},
|
||||
{
|
||||
question: "Post-deployment monitoring:",
|
||||
options: ["Real-time (15 min)", "Passive (alerts only)"]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**TodoWrite**: Mark Phase 5 completed, Phase 6 in_progress
|
||||
|
||||
---
|
||||
|
||||
### Phase 6: Execution Dispatch & Follow-up
|
||||
|
||||
**Dispatch to lite-execute**:
|
||||
|
||||
```javascript
|
||||
executionContext = {
|
||||
mode: "bugfix",
|
||||
severity: auto_detected_severity, // From Phase 2
|
||||
planObject: plan,
|
||||
diagnosisContext: diagnosis,
|
||||
impactContext: impact_assessment,
|
||||
verificationStrategy: test_strategy,
|
||||
branchStrategy: branch_strategy,
|
||||
executionMethod: user_selection.execution_method
|
||||
}
|
||||
|
||||
SlashCommand("/workflow:lite-execute --in-memory --mode bugfix")
|
||||
```
|
||||
|
||||
**Hotfix Auto Follow-up**:
|
||||
|
||||
```javascript
|
||||
if (mode === "hotfix") {
|
||||
follow_up_tasks = [
|
||||
{
|
||||
id: `FOLLOWUP-${taskId}-comprehensive`,
|
||||
title: "Replace hotfix with comprehensive fix",
|
||||
priority: "high",
|
||||
due_date: "within_3_days",
|
||||
description: "Refactor quick hotfix into proper solution with full test coverage"
|
||||
},
|
||||
{
|
||||
id: `FOLLOWUP-${taskId}-postmortem`,
|
||||
title: "Incident postmortem",
|
||||
priority: "medium",
|
||||
due_date: "within_1_week",
|
||||
sections: ["Timeline", "Root cause", "Prevention measures"]
|
||||
}
|
||||
]
|
||||
|
||||
Write(`.workflow/lite-fixes/${taskId}-followup.json`, follow_up_tasks)
|
||||
|
||||
console.log(`
|
||||
⚠️ Hotfix follow-up tasks generated:
|
||||
- Comprehensive fix: ${follow_up_tasks[0].id} (due in 3 days)
|
||||
- Postmortem: ${follow_up_tasks[1].id} (due in 1 week)
|
||||
`)
|
||||
}
|
||||
```
|
||||
|
||||
**TodoWrite**: Mark Phase 6 completed
|
||||
|
||||
---
|
||||
|
||||
## Data Structures
|
||||
|
||||
### diagnosisContext
|
||||
```javascript
|
||||
{
|
||||
symptom: string,
|
||||
error_message: string | null,
|
||||
keywords: string[],
|
||||
confidence_level: "high" | "medium" | "low", // Search confidence
|
||||
root_cause: {
|
||||
file: string,
|
||||
line_range: string,
|
||||
issue: string,
|
||||
introduced_by: string
|
||||
},
|
||||
reproduction_steps: string[],
|
||||
affected_scope: {...}
|
||||
}
|
||||
```
|
||||
|
||||
### impactContext
|
||||
```javascript
|
||||
{
|
||||
affected_users: { count: string, severity: string },
|
||||
system_risk: { availability: string, cascading_failures: string },
|
||||
business_impact: { revenue: string, reputation: string, sla_breach: string },
|
||||
risk_score: number, // 0-10
|
||||
severity: "low" | "medium" | "high" | "critical",
|
||||
workflow_adaptation: {
|
||||
diagnosis_depth: string,
|
||||
test_strategy: string,
|
||||
review_optional: boolean,
|
||||
time_budget: string
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### fixPlan
|
||||
```javascript
|
||||
{
|
||||
strategy: string,
|
||||
summary: string,
|
||||
tasks: [{
|
||||
title: string,
|
||||
file: string,
|
||||
action: "Update" | "Create" | "Delete",
|
||||
implementation: string[],
|
||||
verification: string[]
|
||||
}],
|
||||
estimated_time: string,
|
||||
recommended_execution: "Agent" | "CLI" | "Manual"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### When to Use Default Mode
|
||||
|
||||
**Use for all standard bugs:**
|
||||
- Automatically adapts to severity (no manual mode selection needed)
|
||||
- Risk score determines workflow complexity
|
||||
- Handles 90% of bug fixing scenarios
|
||||
|
||||
**Typical scenarios:**
|
||||
- UI bugs, logic errors, edge cases
|
||||
- Performance issues (non-critical)
|
||||
- Integration failures
|
||||
- Data validation bugs
|
||||
|
||||
### When to Use Hotfix Mode
|
||||
|
||||
**Only use for production incidents:**
|
||||
- Production is down or critically degraded
|
||||
- Revenue/reputation at immediate risk
|
||||
- SLA breach occurring
|
||||
- Issue is well-understood (minimal diagnosis needed)
|
||||
|
||||
**Hotfix characteristics:**
|
||||
- Creates hotfix branch from production tag
|
||||
- Minimal diagnosis (assumes known issue)
|
||||
- Smoke tests only
|
||||
- Auto-generates follow-up tasks
|
||||
- Requires incident tracking
|
||||
|
||||
### Branching Strategy
|
||||
|
||||
**Default Mode (feature branch)**:
|
||||
```bash
|
||||
# Standard feature branch workflow
|
||||
git checkout -b fix/issue-description main
|
||||
# ... implement fix
|
||||
git checkout main && git merge fix/issue-description
|
||||
```
|
||||
|
||||
**Hotfix Mode (dual merge)**:
|
||||
```bash
|
||||
# ✅ Correct: Branch from production tag
|
||||
git checkout -b hotfix/fix-name v2.3.1
|
||||
|
||||
# Merge to both targets
|
||||
git checkout main && git merge hotfix/fix-name
|
||||
git checkout production && git merge hotfix/fix-name
|
||||
git tag v2.3.2
|
||||
|
||||
# ❌ Wrong: Branch from main
|
||||
git checkout -b hotfix/fix-name main # Contains unreleased code!
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Error | Cause | Resolution |
|
||||
|-------|-------|------------|
|
||||
| Root cause unclear | Vague symptoms | Extend diagnosis time or use /cli:mode:bug-diagnosis |
|
||||
| Multiple potential causes | Complex interaction | Use /cli:discuss-plan for analysis |
|
||||
| Fix too complex | High-risk refactor | Escalate to /workflow:plan --mode bugfix |
|
||||
| High risk score but unsure | Uncertain severity | Default mode will adapt, proceed normally |
|
||||
|
||||
---
|
||||
|
||||
## Output Routing
|
||||
|
||||
**Lite-fix directory**:
|
||||
```
|
||||
.workflow/lite-fixes/
|
||||
├── BUGFIX-2024-10-20T14-30-00.json # Task JSON
|
||||
├── BUGFIX-2024-10-20T14-30-00-followup.json # Follow-up (hotfix only)
|
||||
└── diagnosis-cache/ # Cached diagnoses
|
||||
└── ${bug_hash}.json
|
||||
```
|
||||
|
||||
**Session-based** (if active session):
|
||||
```
|
||||
.workflow/active/WFS-feature/
|
||||
├── .bugfixes/
|
||||
│ ├── BUGFIX-001.json
|
||||
│ └── BUGFIX-001-followup.json
|
||||
└── .summaries/
|
||||
└── BUGFIX-001-summary.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### 1. Intelligent Diagnosis Caching
|
||||
|
||||
Reuse diagnosis for similar bugs:
|
||||
```javascript
|
||||
cache_key = hash(bug_keywords + recent_changes_hash)
|
||||
if (cache_exists && cache_age < 7_days && similarity > 0.8) {
|
||||
diagnosis = load_from_cache()
|
||||
console.log("Using cached diagnosis (similar issue found)")
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Auto-Severity Suggestion
|
||||
|
||||
Detect urgency from keywords:
|
||||
```javascript
|
||||
urgency_keywords = ["production", "down", "outage", "critical", "urgent"]
|
||||
if (bug_description.includes(urgency_keywords) && !mode_specified) {
|
||||
console.log("💡 Tip: Consider --hotfix flag for production issues")
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Adaptive Workflow Intelligence
|
||||
|
||||
Real-time workflow adjustment:
|
||||
```javascript
|
||||
// During Phase 2, if risk score suddenly increases
|
||||
if (new_risk_score > initial_estimate * 1.5) {
|
||||
console.log("⚠️ Severity increased, adjusting workflow...")
|
||||
test_strategy = "more_comprehensive"
|
||||
review_required = true
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Related Commands
|
||||
|
||||
**Diagnostic Commands**:
|
||||
- `/cli:mode:bug-diagnosis` - Detailed root cause analysis (use before lite-fix if unclear)
|
||||
|
||||
**Fix Execution**:
|
||||
- `/workflow:lite-execute --in-memory` - Execute fix plan (automatically called)
|
||||
|
||||
**Planning Commands**:
|
||||
- `/workflow:plan --mode bugfix` - Complex bugs requiring comprehensive planning
|
||||
|
||||
**Review Commands**:
|
||||
- `/workflow:review --type quality` - Post-fix quality review
|
||||
|
||||
---
|
||||
|
||||
## Comparison with Other Commands
|
||||
|
||||
| Command | Use Case | Modes | Adaptation | Output |
|
||||
|---------|----------|-------|------------|--------|
|
||||
| `/workflow:lite-fix` | Bug fixes | 2 (default + hotfix) | Auto-adaptive | In-memory + JSON |
|
||||
| `/workflow:lite-plan` | New features | 1 + explore flag | Manual | In-memory + JSON |
|
||||
| `/workflow:plan` | Complex features | Multiple | Manual | Persistent session |
|
||||
| `/cli:mode:bug-diagnosis` | Analysis only | 1 | N/A | Report only |
|
||||
|
||||
---
|
||||
|
||||
## Quality Gates
|
||||
|
||||
**Before execution** (auto-checked):
|
||||
- [ ] Root cause identified (>70% confidence for default, >90% for hotfix)
|
||||
- [ ] Impact scope defined
|
||||
- [ ] Fix strategy reviewed
|
||||
- [ ] Verification plan matches risk level
|
||||
|
||||
**Hotfix-specific**:
|
||||
- [ ] Production tag identified
|
||||
- [ ] Rollback plan documented
|
||||
- [ ] Follow-up tasks generated
|
||||
- [ ] Monitoring configured
|
||||
|
||||
---
|
||||
|
||||
## When to Use lite-fix
|
||||
|
||||
✅ **Perfect for:**
|
||||
- Any bug with clear symptoms
|
||||
- Localized fixes (1-5 files)
|
||||
- Known technology stack
|
||||
- Time-sensitive but not catastrophic (default mode adapts)
|
||||
- Production incidents (use --hotfix)
|
||||
|
||||
❌ **Not suitable for:**
|
||||
- Root cause completely unclear → use `/cli:mode:bug-diagnosis` first
|
||||
- Requires architectural changes → use `/workflow:plan`
|
||||
- Complex legacy code without tests → use `/workflow:plan --legacy-refactor`
|
||||
- Performance deep-dive → use `/workflow:plan --performance-optimization`
|
||||
- Data migration → use `/workflow:plan --data-migration`
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-11-20
|
||||
**Version**: 2.0.0
|
||||
**Status**: Design Document (Simplified)
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: layout-extract
|
||||
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: [--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive] [--refine]
|
||||
description: Extract structural layout information from reference images or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: [--design-id <id>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive] [--refine]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
---
|
||||
|
||||
@@ -9,7 +9,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestio
|
||||
|
||||
## Overview
|
||||
|
||||
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. Supports two modes:
|
||||
Extract structural layout information from reference images or text prompts using AI analysis. Supports two modes:
|
||||
1. **Exploration Mode** (default): Generate multiple contrasting layout variants
|
||||
2. **Refinement Mode** (`--refine`): Refine a single existing layout through detailed adjustments
|
||||
|
||||
@@ -29,23 +29,7 @@ This command separates the "scaffolding" (HTML structure and CSS layout) from th
|
||||
|
||||
```bash
|
||||
# Detect input source
|
||||
# Priority: --urls + --images → hybrid | --urls → url | --images → image | --prompt → text
|
||||
|
||||
# Parse URLs if provided (format: "target:url,target:url,...")
|
||||
IF --urls:
|
||||
url_list = []
|
||||
FOR pair IN split(--urls, ","):
|
||||
IF ":" IN pair:
|
||||
target, url = pair.split(":", 1)
|
||||
url_list.append({target: target.strip(), url: url.strip()})
|
||||
ELSE:
|
||||
# Single URL without target
|
||||
url_list.append({target: "page", url: pair.strip()})
|
||||
|
||||
has_urls = true
|
||||
ELSE:
|
||||
has_urls = false
|
||||
url_list = []
|
||||
# Priority: --images → image | --prompt → text
|
||||
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
@@ -62,11 +46,9 @@ ELSE:
|
||||
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting layout concepts per target"
|
||||
|
||||
# Resolve targets
|
||||
# Priority: --targets → url_list targets → prompt analysis → default ["page"]
|
||||
# Priority: --targets → prompt analysis → default ["page"]
|
||||
IF --targets:
|
||||
targets = split(--targets, ",")
|
||||
ELSE IF has_urls:
|
||||
targets = [url_info.target for url_info in url_list]
|
||||
ELSE IF --prompt:
|
||||
# Extract targets from prompt using pattern matching
|
||||
# Looks for keywords: "page names", target descriptors (login, dashboard, etc.)
|
||||
@@ -107,10 +89,6 @@ bash(echo "✓ Base path: $base_path")
|
||||
bash(ls {images_pattern}) # Expand glob pattern
|
||||
Read({image_path}) # Load each image
|
||||
|
||||
# For URL mode
|
||||
# Parse URL list format: "target:url,target:url"
|
||||
# Validate URLs are accessible
|
||||
|
||||
# For text mode
|
||||
# Validate --prompt is non-empty
|
||||
|
||||
@@ -118,97 +96,6 @@ Read({image_path}) # Load each image
|
||||
bash(mkdir -p {base_path}/layout-extraction)
|
||||
```
|
||||
|
||||
### Step 2.5: Extract DOM Structure (URL Mode - Auto-Trigger)
|
||||
```bash
|
||||
# AUTO-TRIGGER: If URLs are available (from --urls parameter), automatically extract real DOM structure
|
||||
# This provides accurate layout data to supplement visual analysis
|
||||
|
||||
# Check if URLs provided via --urls parameter
|
||||
IF --urls AND url_list:
|
||||
REPORT: "🔍 Auto-triggering URL mode: Extracting DOM structure"
|
||||
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis)
|
||||
|
||||
# For each URL in url_list:
|
||||
FOR url_info IN url_list:
|
||||
target = url_info.target
|
||||
url = url_info.url
|
||||
|
||||
IF mcp_chrome_devtools_available:
|
||||
REPORT: " Processing: {target} ({url})"
|
||||
|
||||
# Read extraction script
|
||||
script_content = Read(~/.claude/scripts/extract-layout-structure.js)
|
||||
|
||||
# Open page in Chrome DevTools
|
||||
mcp__chrome-devtools__navigate_page(url=url)
|
||||
|
||||
# Execute layout extraction script
|
||||
result = mcp__chrome-devtools__evaluate_script(function=script_content)
|
||||
|
||||
# Save DOM structure for this target (intermediate file)
|
||||
Write({base_path}/.intermediates/layout-analysis/dom-structure-{target}.json, result)
|
||||
|
||||
REPORT: " ✅ DOM structure extracted for '{target}'"
|
||||
ELSE:
|
||||
REPORT: " ⚠️ Chrome DevTools MCP not available, falling back to visual analysis"
|
||||
BREAK
|
||||
|
||||
dom_structure_available = mcp_chrome_devtools_available
|
||||
ELSE:
|
||||
dom_structure_available = false
|
||||
```
|
||||
|
||||
**Extraction Script Reference**: `~/.claude/scripts/extract-layout-structure.js`
|
||||
|
||||
**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
|
||||
|
||||
**Script returns**:
|
||||
- `metadata`: Extraction timestamp, URL, method, version
|
||||
- `patterns`: Layout pattern statistics (flexColumn, flexRow, grid counts)
|
||||
- `structure`: Hierarchical DOM tree with layout properties
|
||||
- `exploration`: (Optional) Progressive exploration results when standard selectors fail
|
||||
|
||||
**Benefits**:
|
||||
- ✅ Real flex/grid configuration (justifyContent, alignItems, gap, etc.)
|
||||
- ✅ Accurate element bounds (x, y, width, height)
|
||||
- ✅ Structural hierarchy with depth control
|
||||
- ✅ Layout pattern identification (flex-row, flex-column, grid-NCol)
|
||||
- ✅ Progressive exploration: Auto-discovers missing selectors
|
||||
|
||||
**Progressive Exploration Strategy** (v2.2.0+):
|
||||
|
||||
When script finds <3 main containers, it automatically:
|
||||
1. **Scans** all large visible containers (≥500×300px)
|
||||
2. **Extracts** class patterns matching: `main|content|wrapper|container|page|layout|app`
|
||||
3. **Suggests** new selectors to add to script
|
||||
4. **Returns** exploration data in `result.exploration`:
|
||||
```json
|
||||
{
|
||||
"triggered": true,
|
||||
"discoveredCandidates": [{classes, bounds, display}],
|
||||
"suggestedSelectors": [".wrapper", ".page-index"],
|
||||
"recommendation": ".wrapper, .page-index, .app-container"
|
||||
}
|
||||
```
|
||||
|
||||
**Using Exploration Results**:
|
||||
```javascript
|
||||
// After extraction, check for suggestions
|
||||
IF result.exploration?.triggered:
|
||||
REPORT: result.exploration.warning
|
||||
REPORT: "Suggested selectors: " + result.exploration.recommendation
|
||||
|
||||
// Update script by adding to commonClassSelectors array
|
||||
// Then re-run extraction for better coverage
|
||||
```
|
||||
|
||||
**Selector Update Workflow**:
|
||||
1. Run extraction on unfamiliar site
|
||||
2. Check `result.exploration.suggestedSelectors`
|
||||
3. Add relevant selectors to script's `commonClassSelectors`
|
||||
4. Re-run extraction → improved container detection
|
||||
|
||||
### Step 3: Memory Check
|
||||
```bash
|
||||
# 1. Check if inputs cached in session memory
|
||||
@@ -711,13 +598,6 @@ Configuration:
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets.join(", ")}
|
||||
- Total Templates: {total_tasks} ({targets.length} targets with multi-selection)
|
||||
{IF has_urls AND dom_structure_available:
|
||||
- 🔍 URL Mode: DOM structure extracted from {len(url_list)} URL(s)
|
||||
- Accuracy: Real flex/grid properties from live pages
|
||||
}
|
||||
{IF has_urls AND NOT dom_structure_available:
|
||||
- ⚠️ URL Mode: Chrome DevTools unavailable, used visual analysis fallback
|
||||
}
|
||||
|
||||
User Selections:
|
||||
{FOR each target in targets:
|
||||
@@ -734,10 +614,7 @@ Generated Templates:
|
||||
|
||||
Intermediate Files:
|
||||
- {base_path}/.intermediates/layout-analysis/
|
||||
├── analysis-options.json (concept proposals + user selections embedded)
|
||||
{IF dom_structure_available:
|
||||
├── dom-structure-*.json ({len(url_list)} DOM extracts)
|
||||
}
|
||||
└── analysis-options.json (concept proposals + user selections embedded)
|
||||
|
||||
Next: /workflow:ui-design:generate will combine these structural templates with design systems to produce final prototypes.
|
||||
```
|
||||
@@ -867,15 +744,11 @@ ERROR: MCP search failed
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Auto-Trigger URL Mode** - Automatically extracts DOM structure when --urls provided (no manual flag needed)
|
||||
- **Hybrid Extraction Strategy** - Combines real DOM structure data with AI visual analysis
|
||||
- **Accurate Layout Properties** - Chrome DevTools extracts real flex/grid configurations, bounds, and hierarchy
|
||||
- **Separation of Concerns** - Decouples layout (structure) from style (visuals)
|
||||
- **Multi-Selection Workflow** - Generate N concepts → User selects multiple → Parallel template generation
|
||||
- **Structural Exploration** - Enables A/B testing of different layouts through multi-selection
|
||||
- **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation
|
||||
- **Device-Specific** - Tailored structures for different screen sizes
|
||||
- **Graceful Fallback** - Falls back to visual analysis if Chrome DevTools unavailable
|
||||
- **Foundation for Assembly** - Provides structural blueprint for prototype generation
|
||||
- **Agent-Powered** - Deep structural analysis with AI
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive] [--refine]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>] [--interactive] [--refine]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
@@ -24,23 +24,7 @@ Extract design style from reference images or text prompts using Claude's built-
|
||||
### Step 1: Detect Input Mode, Extraction Mode & Base Path
|
||||
```bash
|
||||
# Detect input source
|
||||
# Priority: --urls + --images + --prompt → hybrid-url | --urls + --images → url-image | --urls → url | --images + --prompt → hybrid | --images → image | --prompt → text
|
||||
|
||||
# Parse URLs if provided (format: "target:url,target:url,...")
|
||||
IF --urls:
|
||||
url_list = []
|
||||
FOR pair IN split(--urls, ","):
|
||||
IF ":" IN pair:
|
||||
target, url = pair.split(":", 1)
|
||||
url_list.append({target: target.strip(), url: url.strip()})
|
||||
ELSE:
|
||||
# Single URL without target
|
||||
url_list.append({target: "page", url: pair.strip()})
|
||||
|
||||
has_urls = true
|
||||
primary_url = url_list[0].url # First URL as primary source
|
||||
ELSE:
|
||||
has_urls = false
|
||||
# Priority: --images + --prompt → hybrid | --images → image | --prompt → text
|
||||
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
@@ -79,64 +63,7 @@ base_path=$(cd "$relative_path" && pwd)
|
||||
bash(echo "✓ Base path: $base_path")
|
||||
```
|
||||
|
||||
### Step 2: Extract Computed Styles (URL Mode - Auto-Trigger)
|
||||
```bash
|
||||
# AUTO-TRIGGER: If URLs are available (from --urls parameter or capture metadata), automatically extract real CSS values
|
||||
# This provides accurate design tokens to supplement visual analysis
|
||||
|
||||
# Priority 1: Check for --urls parameter
|
||||
IF has_urls:
|
||||
url_to_extract = primary_url
|
||||
url_source = "--urls parameter"
|
||||
|
||||
# Priority 2: Check for URL metadata from capture phase
|
||||
ELSE IF exists({base_path}/.metadata/capture-urls.json):
|
||||
capture_urls = Read({base_path}/.metadata/capture-urls.json)
|
||||
url_to_extract = capture_urls[0] # Use first URL
|
||||
url_source = "capture metadata"
|
||||
ELSE:
|
||||
url_to_extract = null
|
||||
|
||||
# Execute extraction if URL available
|
||||
IF url_to_extract AND mcp_chrome_devtools_available:
|
||||
REPORT: "🔍 Auto-triggering URL mode: Extracting computed styles from {url_source}"
|
||||
REPORT: " URL: {url_to_extract}"
|
||||
|
||||
# Read extraction script
|
||||
script_content = Read(~/.claude/scripts/extract-computed-styles.js)
|
||||
|
||||
# Open page in Chrome DevTools
|
||||
mcp__chrome-devtools__navigate_page(url=url_to_extract)
|
||||
|
||||
# Execute extraction script directly
|
||||
result = mcp__chrome-devtools__evaluate_script(function=script_content)
|
||||
|
||||
# Save computed styles to intermediates directory
|
||||
bash(mkdir -p {base_path}/.intermediates/style-analysis)
|
||||
Write({base_path}/.intermediates/style-analysis/computed-styles.json, result)
|
||||
|
||||
computed_styles_available = true
|
||||
REPORT: " ✅ Computed styles extracted and saved"
|
||||
ELSE:
|
||||
computed_styles_available = false
|
||||
IF url_to_extract:
|
||||
REPORT: "⚠️ Chrome DevTools MCP not available, falling back to visual analysis"
|
||||
```
|
||||
|
||||
**Extraction Script Reference**: `~/.claude/scripts/extract-computed-styles.js`
|
||||
|
||||
**Usage**: Read the script file and use content directly in `mcp__chrome-devtools__evaluate_script()`
|
||||
|
||||
**Script returns**:
|
||||
- `metadata`: Extraction timestamp, URL, method
|
||||
- `tokens`: Organized design tokens (colors, borderRadii, shadows, fontSizes, fontWeights, spacing)
|
||||
|
||||
**Benefits**:
|
||||
- ✅ Pixel-perfect accuracy for border-radius, box-shadow, padding, etc.
|
||||
- ✅ Eliminates guessing from visual analysis
|
||||
- ✅ Provides ground truth for design tokens
|
||||
|
||||
### Step 3: Load Inputs
|
||||
### Step 2: Load Inputs
|
||||
```bash
|
||||
# For image mode
|
||||
bash(ls {images_pattern}) # Expand glob pattern
|
||||
@@ -161,7 +88,7 @@ IF exists: SKIP to completion
|
||||
|
||||
---
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`
|
||||
|
||||
## Phase 1: Design Direction or Refinement Options Generation
|
||||
|
||||
@@ -571,9 +498,8 @@ FOR variant_index IN 1..actual_variants_count:
|
||||
- Preview Border Radius: ${selected_direction.preview.border_radius_base}
|
||||
|
||||
## Input Analysis
|
||||
- Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
|
||||
- Input mode: {input_mode} (image/text/hybrid)
|
||||
- Visual references: {loaded_images OR prompt_guidance}
|
||||
${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
|
||||
|
||||
## Generation Rules
|
||||
- Develop the selected design direction into a complete design system
|
||||
@@ -587,7 +513,7 @@ FOR variant_index IN 1..actual_variants_count:
|
||||
* innovation → token naming, experimental values
|
||||
- Honor search_keywords for design inspiration
|
||||
- Avoid anti_keywords patterns
|
||||
- All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
|
||||
- All colors in OKLCH format
|
||||
- WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
|
||||
|
||||
## Generate
|
||||
@@ -656,16 +582,9 @@ TodoWrite({todos: [
|
||||
Configuration:
|
||||
- Session: {session_id}
|
||||
- Extraction Mode: {extraction_mode} (imitate/explore)
|
||||
- Input Mode: {input_mode} (image/text/hybrid{"/url" if has_urls else ""})
|
||||
- Input Mode: {input_mode} (image/text/hybrid)
|
||||
- Variants: {variants_count}
|
||||
- Production-Ready: Complete design systems generated
|
||||
{IF has_urls AND computed_styles_available:
|
||||
- 🔍 URL Mode: Computed styles extracted from {len(url_list)} URL(s)
|
||||
- Accuracy: Pixel-perfect design tokens from DOM
|
||||
}
|
||||
{IF has_urls AND NOT computed_styles_available:
|
||||
- ⚠️ URL Mode: Chrome DevTools unavailable, used visual analysis fallback
|
||||
}
|
||||
|
||||
{IF extraction_mode == "explore":
|
||||
Design Direction Selection:
|
||||
@@ -676,11 +595,6 @@ Design Direction Selection:
|
||||
Generated Files:
|
||||
{base_path}/style-extraction/
|
||||
└── style-1/design-tokens.json
|
||||
|
||||
{IF computed_styles_available:
|
||||
Intermediate Analysis:
|
||||
{base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url})
|
||||
}
|
||||
{IF extraction_mode == "explore":
|
||||
{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options + user selection)
|
||||
}
|
||||
@@ -811,15 +725,11 @@ ERROR: Claude JSON parsing error
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Auto-Trigger URL Mode** - Automatically extracts computed styles when --urls provided (no manual flag needed)
|
||||
- **Direct Design System Generation** - Complete design-tokens.json + style-guide.md in one step
|
||||
- **Hybrid Extraction Strategy** - Combines computed CSS values (ground truth) with AI visual analysis
|
||||
- **Pixel-Perfect Accuracy** - Chrome DevTools extracts exact border-radius, shadows, spacing values
|
||||
- **AI-Driven Design Space Exploration** - 6D attribute space analysis for maximum contrast
|
||||
- **Variant-Specific Directions** - Each variant has unique philosophy, keywords, anti-patterns
|
||||
- **Maximum Contrast Guarantee** - Variants maximally distant in attribute space
|
||||
- **Flexible Input** - Images, text, URLs, or hybrid mode
|
||||
- **Graceful Fallback** - Falls back to pure visual inference if Chrome DevTools unavailable
|
||||
- **Flexible Input** - Images, text, or hybrid mode
|
||||
- **Production-Ready** - OKLCH colors, WCAG AA compliance, semantic naming
|
||||
- **Agent-Driven** - Autonomous multi-file generation with ui-design-agent
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ The UI Design Workflow System is a comprehensive suite of 11 autonomous commands
|
||||
These commands automate end-to-end processes by chaining specialized sub-commands.
|
||||
|
||||
- **`/workflow:ui-design:explore-auto`**: For creating *new* designs. Generates multiple style and layout variants from a prompt to explore design directions.
|
||||
- **`/workflow:ui-design:imitate-auto`**: For *replicating* existing designs. High-fidelity cloning of target URLs into a reusable design system.
|
||||
- **`/workflow:ui-design:imitate-auto`**: For *replicating* existing designs. Creates design systems from local reference files (images, code) or text prompts.
|
||||
|
||||
### 2. Core Extractors (Specialized Analysis)
|
||||
|
||||
@@ -98,31 +98,35 @@ Tools for combining components and integrating results.
|
||||
|
||||
### Workflow B: Design Replication (Imitation)
|
||||
|
||||
**Goal:** Create a design system and prototypes based on existing reference sites.
|
||||
**Goal:** Create a design system and prototypes based on existing local references.
|
||||
|
||||
**Primary Command:** `imitate-auto`
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. **Initiate**: User runs `/workflow:ui-design:imitate-auto --url-map "home:https://example.com, pricing:https://example.com/pricing"`
|
||||
2. **Capture**: System screenshots all provided URLs.
|
||||
3. **Extraction**: System extracts a unified design system (style, layout, animation) from the primary URL.
|
||||
4. **Assembly**: System recreates all target pages using the extracted system.
|
||||
1. **Initiate**: User runs `/workflow:ui-design:imitate-auto --input "design-refs/*.png"` with local reference files
|
||||
2. **Input Detection**: System detects input type (images, code files, or text)
|
||||
3. **Extraction**: System extracts a unified design system (style, layout, animation) from the references.
|
||||
4. **Assembly**: System creates prototypes using the extracted system.
|
||||
|
||||
**Example:**
|
||||
|
||||
```bash
|
||||
# Using reference images
|
||||
/workflow:ui-design:imitate-auto \
|
||||
--url-map "landing:https://stripe.com, pricing:https://stripe.com/pricing, docs:https://stripe.com/docs" \
|
||||
--capture-mode batch \
|
||||
--input "design-refs/*.png" \
|
||||
--session WFS-002
|
||||
|
||||
# Or importing from existing code
|
||||
/workflow:ui-design:imitate-auto \
|
||||
--input "./src/components" \
|
||||
--session WFS-002
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Screenshots of all URLs
|
||||
- `design-tokens.json` (unified style system)
|
||||
- `layout-templates.json` (page structures)
|
||||
- 3 HTML prototypes matching the captured pages
|
||||
- HTML prototypes based on the input references
|
||||
|
||||
---
|
||||
|
||||
@@ -204,10 +208,10 @@ For high-volume generation:
|
||||
- Specify the *targets* (e.g., "dashboard, settings page")
|
||||
- Include functional requirements (e.g., "responsive, mobile-first")
|
||||
|
||||
**For URL Mapping:**
|
||||
- First URL is treated as primary source of truth
|
||||
- Use descriptive keys in `--url-map`
|
||||
- Ensure URLs are accessible (no authentication walls)
|
||||
**For Local References:**
|
||||
- Use high-quality reference images (PNG, JPG)
|
||||
- Organize files in accessible directories
|
||||
- For code imports, ensure files are properly structured (CSS, JS, HTML)
|
||||
|
||||
---
|
||||
|
||||
@@ -233,8 +237,8 @@ You can run UI design workflows within an existing workflow session:
|
||||
**Example: Imitation + Custom Extraction**
|
||||
|
||||
```bash
|
||||
# 1. Replicate existing design
|
||||
/workflow:ui-design:imitate-auto --url-map "ref:https://example.com"
|
||||
# 1. Import design from local references
|
||||
/workflow:ui-design:imitate-auto --input "design-refs/*.png"
|
||||
|
||||
# 2. Extract additional layouts and generate prototypes
|
||||
/workflow:ui-design:layout-extract --targets "new-page-1,new-page-2"
|
||||
|
||||
Reference in New Issue
Block a user