catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-12 02:37:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add interactive preview system for UI prototypes

Browse Source 
🌐 Preview Enhancement System
- Auto-generate index.html for master navigation
- Auto-generate compare.html for side-by-side comparison
- Auto-generate PREVIEW.md with setup instructions

📊 Preview Features
- Master navigation with grid layout of all prototypes
- Side-by-side comparison with iframe-based variants
- Responsive viewport toggles (Desktop/Tablet/Mobile 100%/768px/375px)
- Synchronized scrolling for layout comparison
- Dynamic page switching dropdown
- Quick links to implementation notes

🛠️ Preview Options
- Direct browser opening (simplest - double-click index.html)
- Local server (recommended - Python/Node.js/PHP/VS Code Live Server)
- Complete standalone prototypes with no external dependencies

📚 Documentation Updates
- Add detailed UI design commands section to README.md
- Add Chinese UI design commands section to README_CN.md
- Update CHANGELOG.md with comprehensive preview system documentation
- Add usage examples and preview workflow guide
- Update ui-generate.md with preview file templates

🎯 Integration
- Phase 4 in ui-generate command generates all preview files
- Updated TodoWrite to track preview file generation
- Updated output structure to show new preview files
- Enhanced "Next Steps" section with preview instructions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-06 00:13:33 +08:00
parent 25951ac9b0
commit 0e16c6ba4b
4 changed files with 594 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
.claude/commands/workflow/design/ui-generate.md
View File

@@ -150,27 +150,56 @@ For each page in {page_list}:
"
```
### Phase 4: Gemini Variant Suggestions (Optional)
### Phase 4: Generate Preview Enhancement Files
**Direct Execution**: Create preview index and comparison view
```bash
# Generate preview index page
Write(.workflow/WFS-{session}/.design/prototypes/index.html):
- List all generated prototypes with thumbnails
- Quick navigation to individual variants
- Metadata: page name, variant count, generation timestamp
- Direct links to HTML files
# Generate side-by-side comparison view
Write(.workflow/WFS-{session}/.design/prototypes/compare.html):
- Iframe-based comparison for all variants of same page
- Responsive viewport toggles (mobile, tablet, desktop)
- Synchronized scrolling option
- Variant labels and quick switching
# Generate preview server instructions
Write(.workflow/WFS-{session}/.design/prototypes/PREVIEW.md):
- How to open files directly in browser
- Local server setup commands (Python, Node.js, PHP)
- Port and access instructions
- Browser compatibility notes
```
**Output**:
- `index.html`: Master index page for all prototypes
- `compare.html`: Side-by-side comparison view
- `PREVIEW.md`: Preview instructions and server setup guide
### Phase 5: Gemini Variant Suggestions (Optional)
**Conditional Execution**: Only if --variants > 1
```bash
IF variants_count > 1:
Task(conceptual-planning-agent): "
Generate semantic layout variation suggestions using Gemini
TASK: Analyze synthesis-specification.md and suggest {variants_count} layout approaches
CONTEXT: synthesis-specification.md, ui-designer/analysis.md
OUTPUT: variant-suggestions.md with layout rationale for each variant
Use Gemini to explore:
- Different information hierarchy approaches
- Alternative component compositions
- Varied user flow emphasis
- Diverse layout patterns (sidebar, top-nav, card-grid, list-detail)
"
bash(cd .workflow/WFS-{session}/.design/prototypes && \
~/.claude/scripts/gemini-wrapper -p "
PURPOSE: Generate semantic layout variation rationale
TASK: Analyze synthesis-specification.md and explain {variants_count} layout approaches
MODE: analysis
CONTEXT: @{../../.brainstorming/synthesis-specification.md,../../.brainstorming/ui-designer/analysis.md}
EXPECTED: variant-suggestions.md with layout rationale for each variant
RULES: Focus on information hierarchy, component composition, user flow emphasis, layout patterns
")
```
### Phase 5: TodoWrite Integration
**Output**: `variant-suggestions.md` with Gemini's layout rationale
### Phase 6: TodoWrite Integration
```javascript
TodoWrite({
todos: [
@@ -189,6 +218,11 @@ TodoWrite({
status: "completed",
activeForm: "Generating UI prototypes"
},
{
content: "Generate preview enhancement files (index, compare, instructions)",
status: "completed",
activeForm: "Generating preview files"
},
{
content: "Generate layout variant suggestions using Gemini (optional)",
status: "completed",
@@ -207,6 +241,9 @@ TodoWrite({
```
.workflow/WFS-{session}/.design/prototypes/
├── index.html # 🆕 Preview index page (master navigation)
├── compare.html # 🆕 Side-by-side comparison view
├── PREVIEW.md # 🆕 Preview instructions and server setup
├── dashboard-variant-1.html
├── dashboard-variant-1.css
├── dashboard-variant-1-notes.md
@@ -277,6 +314,247 @@ TodoWrite({
}
```
### Preview Index Page Template (index.html)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Prototypes Preview - WFS-{session}</title>
<style>
body { font-family: system-ui; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
h1 { color: #2563eb; }
.prototype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.prototype-card { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; transition: box-shadow 0.2s; }
.prototype-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.prototype-card h3 { margin: 0 0 0.5rem; color: #1f2937; }
.prototype-card .meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem; }
.prototype-card a { display: inline-block; margin-right: 0.5rem; color: #2563eb; text-decoration: none; }
.prototype-card a:hover { text-decoration: underline; }
.actions { margin-top: 2rem; padding: 1rem; background: #f3f4f6; border-radius: 0.5rem; }
.actions a { margin-right: 1rem; color: #2563eb; }
</style>
</head>
<body>
<h1>🎨 UI Prototypes Preview</h1>
<p><strong>Session:</strong> WFS-{session} | <strong>Generated:</strong> {timestamp}</p>
<div class="actions">
<a href="compare.html">📊 Compare All Variants</a>
<a href="PREVIEW.md">📖 Preview Instructions</a>
</div>
<div class="prototype-grid">
<!-- Auto-generated for each page-variant -->
<div class="prototype-card">
<h3>Dashboard - Variant 1</h3>
<div class="meta">Generated: {timestamp}</div>
<a href="dashboard-variant-1.html" target="_blank">View Prototype →</a>
<a href="dashboard-variant-1-notes.md">Implementation Notes</a>
</div>
</div>
</body>
</html>
```
### Comparison View Template (compare.html)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-by-Side Comparison - WFS-{session}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui; }
.header { background: #1f2937; color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.controls { display: flex; gap: 1rem; align-items: center; }
select, button { padding: 0.5rem 1rem; border-radius: 0.25rem; border: 1px solid #d1d5db; background: white; cursor: pointer; }
button:hover { background: #f3f4f6; }
.comparison-container { display: flex; height: calc(100vh - 60px); }
.variant-panel { flex: 1; border-right: 2px solid #e5e7eb; position: relative; }
.variant-panel:last-child { border-right: none; }
.variant-label { position: absolute; top: 0; left: 0; right: 0; background: rgba(37,99,235,0.9); color: white; padding: 0.5rem; text-align: center; z-index: 10; font-weight: 600; }
iframe { width: 100%; height: 100%; border: none; padding-top: 2.5rem; }
.viewport-toggle { display: flex; gap: 0.5rem; }
.viewport-btn { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.viewport-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
</style>
</head>
<body>
<div class="header">
<h1>📊 Side-by-Side Comparison</h1>
<div class="controls">
<div class="viewport-toggle">
<button class="viewport-btn active" data-width="100%">Desktop</button>
<button class="viewport-btn" data-width="768px">Tablet</button>
<button class="viewport-btn" data-width="375px">Mobile</button>
</div>
<select id="page-select">
<option value="dashboard">Dashboard</option>
<option value="auth">Auth</option>
</select>
<label><input type="checkbox" id="sync-scroll"> Sync Scroll</label>
<a href="index.html" style="color: white;">← Back to Index</a>
</div>
</div>
<div class="comparison-container">
<div class="variant-panel">
<div class="variant-label">Variant 1</div>
<iframe id="frame1" src="dashboard-variant-1.html"></iframe>
</div>
<div class="variant-panel">
<div class="variant-label">Variant 2</div>
<iframe id="frame2" src="dashboard-variant-2.html"></iframe>
</div>
</div>
<script>
// Viewport switching
document.querySelectorAll('.viewport-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.viewport-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const width = btn.dataset.width;
document.querySelectorAll('iframe').forEach(frame => {
frame.style.width = width;
frame.style.margin = width === '100%' ? '0' : '0 auto';
});
});
});
// Synchronized scrolling
const syncCheckbox = document.getElementById('sync-scroll');
const frames = [document.getElementById('frame1'), document.getElementById('frame2')];
syncCheckbox.addEventListener('change', () => {
if (syncCheckbox.checked) {
frames.forEach(frame => {
frame.contentWindow.addEventListener('scroll', () => {
const scrollTop = frame.contentWindow.scrollY;
frames.forEach(f => {
if (f !== frame) f.contentWindow.scrollTo(0, scrollTop);
});
});
});
}
});
// Page switching
document.getElementById('page-select').addEventListener('change', (e) => {
const page = e.target.value;
document.getElementById('frame1').src = `${page}-variant-1.html`;
document.getElementById('frame2').src = `${page}-variant-2.html`;
});
</script>
</body>
</html>
```
### Preview Instructions Template (PREVIEW.md)
```markdown
# UI Prototypes Preview Guide
## Session Information
- **Session ID**: WFS-{session}
- **Generated**: {timestamp}
- **Pages**: {page_list}
- **Variants per page**: {variants_count}
## Quick Preview Options
### Option 1: Direct Browser Opening (Simplest)
1. Navigate to `.workflow/WFS-{session}/.design/prototypes/`
2. Double-click `index.html` to open the preview index
3. Click any prototype link to view in browser
### Option 2: Local Development Server (Recommended)
#### Python (Built-in)
```bash
cd .workflow/WFS-{session}/.design/prototypes
python -m http.server 8080
# Visit: http://localhost:8080
```
#### Node.js (npx)
```bash
cd .workflow/WFS-{session}/.design/prototypes
npx http-server -p 8080
# Visit: http://localhost:8080
```
#### PHP (Built-in)
```bash
cd .workflow/WFS-{session}/.design/prototypes
php -S localhost:8080
# Visit: http://localhost:8080
```
#### VS Code Live Server
1. Install "Live Server" extension
2. Right-click `index.html`
3. Select "Open with Live Server"
## Preview Features
### Index Page (`index.html`)
- **Master navigation** for all prototypes
- **Quick links** to individual variants
- **Metadata display**: timestamps, page info
- **Direct access** to implementation notes
### Comparison View (`compare.html`)
- **Side-by-side** variant comparison
- **Viewport toggles**: Desktop (100%), Tablet (768px), Mobile (375px)
- **Synchronized scrolling** option
- **Page switching** dropdown
- **Real-time** comparison
## Browser Compatibility
- ✅ Chrome/Edge (Recommended)
- ✅ Firefox
- ✅ Safari
- ⚠️ Some CSS features may require modern browsers (OKLCH colors)
## Files Overview
```
prototypes/
├── index.html ← Start here
├── compare.html ← Side-by-side comparison
├── PREVIEW.md ← This file
├── {page}-variant-{n}.html ← Individual prototypes
├── {page}-variant-{n}.css ← Styles (token-driven)
├── design-tokens.css ← CSS custom properties
└── {page}-variant-{n}-notes.md ← Implementation guidance
```
## Next Steps
1. **Review prototypes**: Open index.html
2. **Compare variants**: Use compare.html for side-by-side view
3. **Select preferred**: Note variant IDs for design-update command
4. **Continue workflow**: Run design-update with selected prototypes
## Troubleshooting
**Styles not loading?**
- Ensure `design-tokens.css` is in the same directory
- Check browser console for CSS errors
- Verify file paths in HTML `<link>` tags
**OKLCH colors not displaying?**
- Use Chrome/Edge 111+ or Firefox 113+
- Fallback colors should work in older browsers
**Local server CORS issues?**
- Use one of the recommended local servers
- Avoid opening HTML files with `file://` protocol for best results
```
## Error Handling
- **No design tokens found**: Run `/workflow:design:style-consolidate` first
- **Invalid page names**: List available pages from synthesis-specification.md
@@ -300,17 +578,35 @@ After generation, verify:
## Next Steps
After successful generation:
```
UI prototypes generated for session: WFS-{session}
✅ UI prototypes generated for session: WFS-{session}
Pages: {page_list}
Variants per page: {variants_count}
Generated files:
- {count} HTML prototypes
- {count} HTML prototypes (complete, standalone)
- {count} CSS files (token-driven)
- {count} implementation notes
- 🆕 index.html (preview navigation)
- 🆕 compare.html (side-by-side comparison)
- 🆕 PREVIEW.md (preview instructions)
Review prototypes and select preferred variants:
Location: .workflow/WFS-{session}/.design/prototypes/
📂 Location: .workflow/WFS-{session}/.design/prototypes/
Next: /workflow:design:design-update --session WFS-{session}
🌐 Preview Options:
1. Quick: Open index.html in browser
2. Full: Start local server and visit http://localhost:8080
- Python: cd prototypes && python -m http.server 8080
- Node.js: cd prototypes && npx http-server -p 8080
📊 Compare Variants:
- Open compare.html for side-by-side view
- Toggle viewports: Desktop / Tablet / Mobile
- Switch between pages dynamically
- Synchronized scrolling option
Review prototypes and select preferred variants, then run:
/workflow:design:design-update --session WFS-{session} --selected-prototypes "{page-variant-ids}"
Example:
/workflow:design:design-update --session WFS-{session} --selected-prototypes "dashboard-variant-1,auth-variant-2"
```