#!/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 [--template ] # 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' UI Prototypes Index

🎨 UI Prototypes Index

Generated __S__×__L__×__T__ = __TOTAL__ prototypes

📊 Interactive Comparison

View all styles and layouts side-by-side in an interactive matrix

Open Matrix View →

📂 All Prototypes

__CONTENT__ EOF # Build content HTML CONTENT="" for style in $styles; do CONTENT+="

"$'\n' CONTENT+="

Style ${style}

"$'\n' for target in $targets; do target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}" CONTENT+="

"$'\n' CONTENT+="

${target_capitalized}

"$'\n' CONTENT+="

"$'\n' for layout in $layouts; do html_file="${target}-style-${style}-layout-${layout}.html" if [[ -f "$html_file" ]]; then CONTENT+=""$'\n' CONTENT+="Layout ${layout}"$'\n' CONTENT+="↗"$'\n' CONTENT+=""$'\n' fi done CONTENT+="

"$'\n' done CONTENT+="

"$'\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-extraction/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 ""