mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
refactor(ui-design): remove placeholder mechanism and simplify CSS generation workflow
- Agent now directly generates HTML with final CSS references (no placeholders) - Remove tokens.css dependency - agents create self-contained CSS from design-tokens.json - Simplify ui-generate-preview-v2.sh (no placeholder replacement logic) - Update Phase 2.5 validation to check actual href attributes - Remove Phase 1.6 (token conversion step) - Improve agent instructions with direct CSS value usage from design tokens Benefits: - Simpler workflow with fewer intermediate steps - More flexible CSS generation - agents can adapt token values based on design_attributes - Better style differentiation across variants - Reduced dependencies and potential error points 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -1,10 +1,10 @@
|
||||
#!/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
|
||||
# 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-v2.sh <prototypes_dir>
|
||||
# Usage: ui-generate-preview-v2.sh <prototypes_dir> [--template <path>]
|
||||
#
|
||||
|
||||
set -e
|
||||
@@ -15,7 +15,25 @@ 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}"
|
||||
@@ -42,264 +60,58 @@ 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}"
|
||||
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}"
|
||||
# ============================================================================
|
||||
# Generate compare.html from template
|
||||
# ============================================================================
|
||||
|
||||
cat > compare.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 Design Matrix - Style × Layout Comparison</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.header h1 { margin-bottom: 10px; color: #333; }
|
||||
.header .stats { color: #666; font-size: 14px; }
|
||||
.controls {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.controls label { margin-right: 10px; font-weight: 500; }
|
||||
.controls select {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.matrix-container { margin-bottom: 40px; }
|
||||
.matrix-title {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.matrix {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.cell {
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.cell:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.cell-header {
|
||||
padding: 12px 15px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cell-header .badge {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.iframe-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 75%; /* 4:3 aspect ratio */
|
||||
background: white;
|
||||
}
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
.cell-footer {
|
||||
padding: 10px 15px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
text-align: center;
|
||||
}
|
||||
.cell-footer a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.cell-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>🎨 UI Design Matrix Comparison</h1>
|
||||
<div class="stats">
|
||||
<span id="matrix-stats"></span>
|
||||
</div>
|
||||
</div>
|
||||
echo -e "${YELLOW}🎨 Generating compare.html from template...${NC}"
|
||||
|
||||
<div class="controls">
|
||||
<label for="target-selector">Target:</label>
|
||||
<select id="target-selector"></select>
|
||||
if [[ ! -f "$TEMPLATE_PATH" ]]; then
|
||||
echo -e "${RED}Error: Template not found: $TEMPLATE_PATH${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
<label for="layout-cols">Columns:</label>
|
||||
<select id="layout-cols">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
# 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+="]"
|
||||
|
||||
<div id="matrices-container"></div>
|
||||
# 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")
|
||||
|
||||
<script>
|
||||
// Data from script
|
||||
const styles = STYLES_PLACEHOLDER;
|
||||
const layouts = LAYOUTS_PLACEHOLDER;
|
||||
const targets = TARGETS_PLACEHOLDER;
|
||||
# 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
|
||||
|
||||
// Update stats
|
||||
document.getElementById('matrix-stats').textContent =
|
||||
`${styles.length} styles × ${layouts.length} layouts × ${targets.length} targets = ${styles.length * layouts.length * targets.length} prototypes`;
|
||||
|
||||
// Populate target selector
|
||||
const targetSelector = document.getElementById('target-selector');
|
||||
targets.forEach((target, index) => {
|
||||
const option = document.createElement('option');
|
||||
option.value = target;
|
||||
option.textContent = target.charAt(0).toUpperCase() + target.slice(1);
|
||||
if (index === 0) option.selected = true;
|
||||
targetSelector.appendChild(option);
|
||||
});
|
||||
|
||||
// Generate matrices
|
||||
function renderMatrices(target) {
|
||||
const container = document.getElementById('matrices-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
styles.forEach(styleId => {
|
||||
const matrixContainer = document.createElement('div');
|
||||
matrixContainer.className = 'matrix-container';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'matrix-title';
|
||||
title.textContent = `Style ${styleId} - ${target.charAt(0).toUpperCase() + target.slice(1)}`;
|
||||
|
||||
const matrix = document.createElement('div');
|
||||
matrix.className = 'matrix';
|
||||
matrix.id = `matrix-style-${styleId}`;
|
||||
|
||||
layouts.forEach(layoutId => {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'cell';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'cell-header';
|
||||
header.innerHTML = `
|
||||
<span>Layout ${layoutId}</span>
|
||||
<span class="badge">S${styleId}L${layoutId}</span>
|
||||
`;
|
||||
|
||||
const iframeWrapper = document.createElement('div');
|
||||
iframeWrapper.className = 'iframe-wrapper';
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `./${target}-style-${styleId}-layout-${layoutId}.html`;
|
||||
iframe.loading = 'lazy';
|
||||
|
||||
const footer = document.createElement('div');
|
||||
footer.className = 'cell-footer';
|
||||
footer.innerHTML = `
|
||||
<a href="./${target}-style-${styleId}-layout-${layoutId}.html" target="_blank">Open ↗</a>
|
||||
<a href="./${target}-style-${styleId}-layout-${layoutId}.css" target="_blank">CSS</a>
|
||||
`;
|
||||
|
||||
iframeWrapper.appendChild(iframe);
|
||||
cell.appendChild(header);
|
||||
cell.appendChild(iframeWrapper);
|
||||
cell.appendChild(footer);
|
||||
matrix.appendChild(cell);
|
||||
});
|
||||
|
||||
matrixContainer.appendChild(title);
|
||||
matrixContainer.appendChild(matrix);
|
||||
container.appendChild(matrixContainer);
|
||||
});
|
||||
|
||||
updateGridColumns();
|
||||
}
|
||||
|
||||
function updateGridColumns() {
|
||||
const cols = document.getElementById('layout-cols').value;
|
||||
styles.forEach(styleId => {
|
||||
const matrix = document.getElementById(`matrix-style-${styleId}`);
|
||||
if (matrix) {
|
||||
matrix.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
targetSelector.addEventListener('change', (e) => {
|
||||
renderMatrices(e.target.value);
|
||||
});
|
||||
|
||||
document.getElementById('layout-cols').addEventListener('change', updateGridColumns);
|
||||
|
||||
// Initial render
|
||||
renderMatrices(targets[0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
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}"
|
||||
echo -e "${GREEN} ✓ Generated compare.html from template${NC}"
|
||||
|
||||
# ============================================================================
|
||||
# Generate index.html
|
||||
# ============================================================================
|
||||
|
||||
echo -e "${YELLOW}📋 Generating index.html...${NC}"
|
||||
|
||||
cat > index.html << EOF
|
||||
cat > index.html << 'EOF'
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -386,7 +198,7 @@ cat > index.html << EOF
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎨 UI Prototypes Index</h1>
|
||||
<p class="subtitle">Generated ${S}×${L}×${T} = $((S*L*T)) prototypes</p>
|
||||
<p class="subtitle">Generated __S__×__L__×__T__ = __TOTAL__ prototypes</p>
|
||||
|
||||
<div class="cta">
|
||||
<h2>📊 Interactive Comparison</h2>
|
||||
@@ -395,43 +207,60 @@ cat > index.html << EOF
|
||||
</div>
|
||||
|
||||
<h2>📂 All Prototypes</h2>
|
||||
EOF
|
||||
|
||||
# Generate index content
|
||||
for style in $styles; do
|
||||
echo "<div class='style-section'>" >> index.html
|
||||
echo "<h2>Style ${style}</h2>" >> index.html
|
||||
|
||||
for target in $targets; do
|
||||
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
|
||||
echo "<div class='target-group'>" >> index.html
|
||||
echo "<h3>${target_capitalized}</h3>" >> index.html
|
||||
echo "<div class='link-grid'>" >> index.html
|
||||
|
||||
for layout in $layouts; do
|
||||
html_file="${target}-style-${style}-layout-${layout}.html"
|
||||
if [[ -f "$html_file" ]]; then
|
||||
echo "<a href='${html_file}' class='prototype-link' target='_blank'>" >> index.html
|
||||
echo "<span class='label'>Layout ${layout}</span>" >> index.html
|
||||
echo "<span class='icon'>↗</span>" >> index.html
|
||||
echo "</a>" >> index.html
|
||||
fi
|
||||
done
|
||||
|
||||
echo "</div></div>" >> index.html
|
||||
done
|
||||
|
||||
echo "</div>" >> index.html
|
||||
done
|
||||
|
||||
cat >> index.html << EOF
|
||||
__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
|
||||
@@ -457,6 +286,8 @@ Open \`compare.html\` in your browser to see all prototypes in an interactive ma
|
||||
- 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
|
||||
|
||||
@@ -475,76 +306,86 @@ prototypes/
|
||||
├── compare.html # Interactive matrix view
|
||||
├── index.html # Simple navigation index
|
||||
├── PREVIEW.md # This file
|
||||
$(for style in $styles; do
|
||||
EOF
|
||||
|
||||
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"
|
||||
echo "├── ${target}-style-${style}-layout-${layout}.html" >> PREVIEW.md
|
||||
echo "├── ${target}-style-${style}-layout-${layout}.css" >> PREVIEW.md
|
||||
done
|
||||
done
|
||||
done)
|
||||
\`\`\`
|
||||
done
|
||||
|
||||
cat >> PREVIEW.md << 'EOF2'
|
||||
```
|
||||
|
||||
## 🎨 Style Variants
|
||||
|
||||
$(for style in $styles; do
|
||||
echo "### Style ${style}"
|
||||
echo ""
|
||||
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 || echo "Design philosophy and tokens"
|
||||
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}"
|
||||
echo "Design system ${style}" >> PREVIEW.md
|
||||
fi
|
||||
echo ""
|
||||
done)
|
||||
echo "" >> PREVIEW.md
|
||||
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)
|
||||
cat >> PREVIEW.md << 'EOF4'
|
||||
|
||||
## 🎯 Targets
|
||||
|
||||
$(for target in $targets; do
|
||||
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"
|
||||
done)
|
||||
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. **Inspection**: Open browser DevTools to inspect HTML structure and CSS
|
||||
4. **Sharing**: All files are standalone - can be shared or deployed directly
|
||||
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. Provide feedback for refinement
|
||||
4. Use selected designs for implementation
|
||||
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)
|
||||
EOF
|
||||
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}🌐 Open compare.html to view interactive matrix${NC}"
|
||||
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 ""
|
||||
|
||||
Reference in New Issue
Block a user