#!/bin/bash # # UI Generate Preview v2.0 - Simplified Preview Generation # Purpose: Generate compare.html and index.html for style-centric prototypes # No template substitution - just preview generation # # Usage: ui-generate-preview-v2.sh # set -e # Color output RED='\033[0;31m' GREEN='\033[0;32m' YELLOW='\033[1;33m' NC='\033[0m' # No Color prototypes_dir="${1:-.}" 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 echo -e "${YELLOW}🎨 Generating compare.html...${NC}" cat > compare.html << 'EOF' UI Design Matrix - Style × Layout Comparison

🎨 UI Design Matrix Comparison

EOF # Replace placeholders with actual data sed -i "s/STYLES_PLACEHOLDER/[$(echo "$styles" | tr '\n' ',' | sed 's/,$//' | sed 's/\([0-9]\+\)/"\1"/g')]/" compare.html sed -i "s/LAYOUTS_PLACEHOLDER/[$(echo "$layouts" | tr '\n' ',' | sed 's/,$//' | sed 's/\([0-9]\+\)/"\1"/g')]/" compare.html sed -i "s/TARGETS_PLACEHOLDER/[$(echo "$targets" | tr '\n' ',' | sed 's/,$//' | sed 's/\(.*\)/"\1"/g')]/" compare.html echo -e "${GREEN} ✓ Generated compare.html${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} = $((S*L*T)) prototypes

📊 Interactive Comparison

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

Open Matrix View →

📂 All Prototypes

EOF # Generate index content for style in $styles; do echo "
" >> index.html echo "

Style ${style}

" >> index.html for target in $targets; do target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}" echo "
" >> index.html echo "

${target_capitalized}

" >> index.html echo "
" >> index.html for layout in $layouts; do html_file="${target}-style-${style}-layout-${layout}.html" if [[ -f "$html_file" ]]; then echo "" >> index.html echo "Layout ${layout}" >> index.html echo "↗" >> index.html echo "" >> index.html fi done echo "
" >> index.html done echo "
" >> index.html done cat >> index.html << EOF EOF 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 ### 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 $(for style in $styles; do for target in $targets; do for layout in $layouts; do echo "├── ${target}-style-${style}-layout-${layout}.html" echo "├── ${target}-style-${style}-layout-${layout}.css" done done done) \`\`\` ## 🎨 Style Variants $(for style in $styles; do echo "### Style ${style}" echo "" style_guide="../style-consolidation/style-${style}/style-guide.md" if [[ -f "$style_guide" ]]; then head -n 10 "$style_guide" | tail -n +2 || echo "Design philosophy and tokens" else echo "Design system ${style}" fi echo "" done) ## 📐 Layout Variants $(for layout in $layouts; do echo "### Layout ${layout}" echo "" for target in $targets; do layout_plan="_templates/${target}-layout-${layout}.json" if [[ -f "$layout_plan" ]]; then name=$(grep -o '"name":[[:space:]]*"[^"]*"' "$layout_plan" | head -1 | cut -d'"' -f4 || echo "Layout ${layout}") echo "- **${target}**: ${name}" fi done echo "" done) ## 🎯 Targets $(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" done) ## 💡 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. **Inspection**: Open browser DevTools to inspect HTML structure and CSS 4. **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. Provide feedback for refinement 4. Use selected designs for implementation --- Generated by /workflow:ui-design:generate-v2 (Style-Centric Architecture) EOF echo -e "${GREEN} ✓ Generated PREVIEW.md${NC}" 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}🌐 Open compare.html to view interactive matrix${NC}"