mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
7c8e75f363
## 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>
392 lines
11 KiB
Bash
392 lines
11 KiB
Bash
#!/bin/bash
|
||
#
|
||
# UI Generate Preview v2.0 - Template-Based Preview Generation
|
||
# Purpose: Generate compare.html and index.html using template substitution
|
||
# Template: ~/.claude/workflows/_template-compare-matrix.html
|
||
#
|
||
# Usage: ui-generate-preview.sh <prototypes_dir> [--template <path>]
|
||
#
|
||
|
||
set -e
|
||
|
||
# Color output
|
||
RED='\033[0;31m'
|
||
GREEN='\033[0;32m'
|
||
YELLOW='\033[1;33m'
|
||
NC='\033[0m' # No Color
|
||
|
||
# Default template path
|
||
TEMPLATE_PATH="$HOME/.claude/workflows/_template-compare-matrix.html"
|
||
|
||
# Parse arguments
|
||
prototypes_dir="${1:-.}"
|
||
shift || true
|
||
|
||
while [[ $# -gt 0 ]]; do
|
||
case $1 in
|
||
--template)
|
||
TEMPLATE_PATH="$2"
|
||
shift 2
|
||
;;
|
||
*)
|
||
echo -e "${RED}Unknown option: $1${NC}"
|
||
exit 1
|
||
;;
|
||
esac
|
||
done
|
||
|
||
if [[ ! -d "$prototypes_dir" ]]; then
|
||
echo -e "${RED}Error: Directory not found: $prototypes_dir${NC}"
|
||
exit 1
|
||
fi
|
||
|
||
cd "$prototypes_dir" || exit 1
|
||
|
||
echo -e "${GREEN}📊 Auto-detecting matrix dimensions...${NC}"
|
||
|
||
# Auto-detect styles, layouts, targets from file patterns
|
||
# Pattern: {target}-style-{s}-layout-{l}.html
|
||
styles=$(find . -maxdepth 1 -name "*-style-*-layout-*.html" | \
|
||
sed 's/.*-style-\([0-9]\+\)-.*/\1/' | sort -un)
|
||
layouts=$(find . -maxdepth 1 -name "*-style-*-layout-*.html" | \
|
||
sed 's/.*-layout-\([0-9]\+\)\.html/\1/' | sort -un)
|
||
targets=$(find . -maxdepth 1 -name "*-style-*-layout-*.html" | \
|
||
sed 's/\.\///; s/-style-.*//' | sort -u)
|
||
|
||
S=$(echo "$styles" | wc -l)
|
||
L=$(echo "$layouts" | wc -l)
|
||
T=$(echo "$targets" | wc -l)
|
||
|
||
echo -e " Detected: ${GREEN}${S}${NC} styles × ${GREEN}${L}${NC} layouts × ${GREEN}${T}${NC} targets"
|
||
|
||
if [[ $S -eq 0 ]] || [[ $L -eq 0 ]] || [[ $T -eq 0 ]]; then
|
||
echo -e "${RED}Error: No prototype files found matching pattern {target}-style-{s}-layout-{l}.html${NC}"
|
||
exit 1
|
||
fi
|
||
|
||
# ============================================================================
|
||
# Generate compare.html from template
|
||
# ============================================================================
|
||
|
||
echo -e "${YELLOW}🎨 Generating compare.html from template...${NC}"
|
||
|
||
if [[ ! -f "$TEMPLATE_PATH" ]]; then
|
||
echo -e "${RED}Error: Template not found: $TEMPLATE_PATH${NC}"
|
||
exit 1
|
||
fi
|
||
|
||
# Build pages/targets JSON array
|
||
PAGES_JSON="["
|
||
first=true
|
||
for target in $targets; do
|
||
if [[ "$first" == true ]]; then
|
||
first=false
|
||
else
|
||
PAGES_JSON+=", "
|
||
fi
|
||
PAGES_JSON+="\"$target\""
|
||
done
|
||
PAGES_JSON+="]"
|
||
|
||
# Generate metadata
|
||
RUN_ID="run-$(date +%Y%m%d-%H%M%S)"
|
||
SESSION_ID="standalone"
|
||
TIMESTAMP=$(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +"%Y-%m-%d")
|
||
|
||
# Replace placeholders in template
|
||
cat "$TEMPLATE_PATH" | \
|
||
sed "s|{{run_id}}|${RUN_ID}|g" | \
|
||
sed "s|{{session_id}}|${SESSION_ID}|g" | \
|
||
sed "s|{{timestamp}}|${TIMESTAMP}|g" | \
|
||
sed "s|{{style_variants}}|${S}|g" | \
|
||
sed "s|{{layout_variants}}|${L}|g" | \
|
||
sed "s|{{pages_json}}|${PAGES_JSON}|g" \
|
||
> compare.html
|
||
|
||
echo -e "${GREEN} ✓ Generated compare.html from template${NC}"
|
||
|
||
# ============================================================================
|
||
# Generate index.html
|
||
# ============================================================================
|
||
|
||
echo -e "${YELLOW}📋 Generating index.html...${NC}"
|
||
|
||
cat > index.html << 'EOF'
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>UI Prototypes Index</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
h1 { margin-bottom: 10px; color: #333; }
|
||
.subtitle { color: #666; margin-bottom: 30px; }
|
||
.cta {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
}
|
||
.cta h2 { margin-bottom: 10px; }
|
||
.cta a {
|
||
display: inline-block;
|
||
background: white;
|
||
color: #667eea;
|
||
padding: 10px 20px;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
margin-top: 10px;
|
||
}
|
||
.cta a:hover { background: #f8f9fa; }
|
||
.style-section {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.style-section h2 {
|
||
color: #495057;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #e9ecef;
|
||
}
|
||
.target-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.target-group h3 {
|
||
color: #6c757d;
|
||
font-size: 16px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.link-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
.prototype-link {
|
||
padding: 12px 16px;
|
||
background: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
color: #495057;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
transition: all 0.2s;
|
||
}
|
||
.prototype-link:hover {
|
||
background: #e9ecef;
|
||
border-color: #667eea;
|
||
transform: translateX(2px);
|
||
}
|
||
.prototype-link .label { font-weight: 500; }
|
||
.prototype-link .icon { color: #667eea; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🎨 UI Prototypes Index</h1>
|
||
<p class="subtitle">Generated __S__×__L__×__T__ = __TOTAL__ prototypes</p>
|
||
|
||
<div class="cta">
|
||
<h2>📊 Interactive Comparison</h2>
|
||
<p>View all styles and layouts side-by-side in an interactive matrix</p>
|
||
<a href="compare.html">Open Matrix View →</a>
|
||
</div>
|
||
|
||
<h2>📂 All Prototypes</h2>
|
||
__CONTENT__
|
||
</body>
|
||
</html>
|
||
EOF
|
||
|
||
# Build content HTML
|
||
CONTENT=""
|
||
for style in $styles; do
|
||
CONTENT+="<div class='style-section'>"$'\n'
|
||
CONTENT+="<h2>Style ${style}</h2>"$'\n'
|
||
|
||
for target in $targets; do
|
||
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
|
||
CONTENT+="<div class='target-group'>"$'\n'
|
||
CONTENT+="<h3>${target_capitalized}</h3>"$'\n'
|
||
CONTENT+="<div class='link-grid'>"$'\n'
|
||
|
||
for layout in $layouts; do
|
||
html_file="${target}-style-${style}-layout-${layout}.html"
|
||
if [[ -f "$html_file" ]]; then
|
||
CONTENT+="<a href='${html_file}' class='prototype-link' target='_blank'>"$'\n'
|
||
CONTENT+="<span class='label'>Layout ${layout}</span>"$'\n'
|
||
CONTENT+="<span class='icon'>↗</span>"$'\n'
|
||
CONTENT+="</a>"$'\n'
|
||
fi
|
||
done
|
||
|
||
CONTENT+="</div></div>"$'\n'
|
||
done
|
||
|
||
CONTENT+="</div>"$'\n'
|
||
done
|
||
|
||
# Calculate total
|
||
TOTAL_PROTOTYPES=$((S * L * T))
|
||
|
||
# Replace placeholders (using a temp file for complex replacement)
|
||
{
|
||
echo "$CONTENT" > /tmp/content_tmp.txt
|
||
sed "s|__S__|${S}|g" index.html | \
|
||
sed "s|__L__|${L}|g" | \
|
||
sed "s|__T__|${T}|g" | \
|
||
sed "s|__TOTAL__|${TOTAL_PROTOTYPES}|g" | \
|
||
sed -e "/__CONTENT__/r /tmp/content_tmp.txt" -e "/__CONTENT__/d" > /tmp/index_tmp.html
|
||
mv /tmp/index_tmp.html index.html
|
||
rm -f /tmp/content_tmp.txt
|
||
}
|
||
|
||
echo -e "${GREEN} ✓ Generated index.html${NC}"
|
||
|
||
# ============================================================================
|
||
# Generate PREVIEW.md
|
||
# ============================================================================
|
||
|
||
echo -e "${YELLOW}📝 Generating PREVIEW.md...${NC}"
|
||
|
||
cat > PREVIEW.md << EOF
|
||
# UI Prototypes Preview Guide
|
||
|
||
Generated: $(date +"%Y-%m-%d %H:%M:%S")
|
||
|
||
## 📊 Matrix Dimensions
|
||
|
||
- **Styles**: ${S}
|
||
- **Layouts**: ${L}
|
||
- **Targets**: ${T}
|
||
- **Total Prototypes**: $((S*L*T))
|
||
|
||
## 🌐 How to View
|
||
|
||
### Option 1: Interactive Matrix (Recommended)
|
||
|
||
Open \`compare.html\` in your browser to see all prototypes in an interactive matrix view.
|
||
|
||
**Features**:
|
||
- Side-by-side comparison of all styles and layouts
|
||
- Switch between targets using the dropdown
|
||
- Adjust grid columns for better viewing
|
||
- Direct links to full-page views
|
||
- Selection system with export to JSON
|
||
- Fullscreen mode for detailed inspection
|
||
|
||
### Option 2: Simple Index
|
||
|
||
Open \`index.html\` for a simple list of all prototypes with direct links.
|
||
|
||
### Option 3: Direct File Access
|
||
|
||
Each prototype can be opened directly:
|
||
- Pattern: \`{target}-style-{s}-layout-{l}.html\`
|
||
- Example: \`dashboard-style-1-layout-1.html\`
|
||
|
||
## 📁 File Structure
|
||
|
||
\`\`\`
|
||
prototypes/
|
||
├── compare.html # Interactive matrix view
|
||
├── index.html # Simple navigation index
|
||
├── PREVIEW.md # This file
|
||
EOF
|
||
|
||
for style in $styles; do
|
||
for target in $targets; do
|
||
for layout in $layouts; do
|
||
echo "├── ${target}-style-${style}-layout-${layout}.html" >> PREVIEW.md
|
||
echo "├── ${target}-style-${style}-layout-${layout}.css" >> PREVIEW.md
|
||
done
|
||
done
|
||
done
|
||
|
||
cat >> PREVIEW.md << 'EOF2'
|
||
```
|
||
|
||
## 🎨 Style Variants
|
||
|
||
EOF2
|
||
|
||
for style in $styles; do
|
||
cat >> PREVIEW.md << EOF3
|
||
### Style ${style}
|
||
|
||
EOF3
|
||
style_guide="../style-consolidation/style-${style}/style-guide.md"
|
||
if [[ -f "$style_guide" ]]; then
|
||
head -n 10 "$style_guide" | tail -n +2 >> PREVIEW.md 2>/dev/null || echo "Design philosophy and tokens" >> PREVIEW.md
|
||
else
|
||
echo "Design system ${style}" >> PREVIEW.md
|
||
fi
|
||
echo "" >> PREVIEW.md
|
||
done
|
||
|
||
cat >> PREVIEW.md << 'EOF4'
|
||
|
||
## 🎯 Targets
|
||
|
||
EOF4
|
||
|
||
for target in $targets; do
|
||
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
|
||
echo "- **${target_capitalized}**: ${L} layouts × ${S} styles = $((L*S)) variations" >> PREVIEW.md
|
||
done
|
||
|
||
cat >> PREVIEW.md << 'EOF5'
|
||
|
||
## 💡 Tips
|
||
|
||
1. **Comparison**: Use compare.html to see how different styles affect the same layout
|
||
2. **Navigation**: Use index.html for quick access to specific prototypes
|
||
3. **Selection**: Mark favorites in compare.html using star icons
|
||
4. **Export**: Download selection JSON for implementation planning
|
||
5. **Inspection**: Open browser DevTools to inspect HTML structure and CSS
|
||
6. **Sharing**: All files are standalone - can be shared or deployed directly
|
||
|
||
## 📝 Next Steps
|
||
|
||
1. Review prototypes in compare.html
|
||
2. Select preferred style × layout combinations
|
||
3. Export selections as JSON
|
||
4. Provide feedback for refinement
|
||
5. Use selected designs for implementation
|
||
|
||
---
|
||
|
||
Generated by /workflow:ui-design:generate-v2 (Style-Centric Architecture)
|
||
EOF5
|
||
|
||
echo -e "${GREEN} ✓ Generated PREVIEW.md${NC}"
|
||
|
||
# ============================================================================
|
||
# Completion Summary
|
||
# ============================================================================
|
||
|
||
echo ""
|
||
echo -e "${GREEN}✅ Preview generation complete!${NC}"
|
||
echo -e " Files created: compare.html, index.html, PREVIEW.md"
|
||
echo -e " Matrix: ${S} styles × ${L} layouts × ${T} targets = $((S*L*T)) prototypes"
|
||
echo ""
|
||
echo -e "${YELLOW}🌐 Next Steps:${NC}"
|
||
echo -e " 1. Open compare.html for interactive matrix view"
|
||
echo -e " 2. Open index.html for simple navigation"
|
||
echo -e " 3. Read PREVIEW.md for detailed usage guide"
|
||
echo ""
|