mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
docs: clarify UI preview system works without server
Updated README documentation to emphasize that index.html and compare.html can be opened directly in browser without requiring a local server. Reorganized preview instructions to highlight direct browser preview as the recommended approach, with local server as optional for advanced features. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
19
README.md
19
README.md
@@ -662,22 +662,26 @@ URL/Images → capture/explore-layers
|
||||
|
||||
#### Preview System
|
||||
|
||||
After running `ui-generate`, you get interactive preview tools:
|
||||
After running `ui-generate`, you get interactive preview tools that **work directly in the browser without requiring a server**:
|
||||
|
||||
**Quick Preview** (Direct Browser):
|
||||
**Direct Browser Preview** (Recommended - No Server Required):
|
||||
```bash
|
||||
# Navigate to prototypes directory
|
||||
cd .workflow/WFS-auth/.design/prototypes
|
||||
# Open index.html in browser (double-click or):
|
||||
|
||||
# Open in browser (double-click the file, or use command):
|
||||
open index.html # macOS
|
||||
start index.html # Windows
|
||||
xdg-open index.html # Linux
|
||||
|
||||
# Both index.html and compare.html work directly without a server
|
||||
open compare.html # Open comparison view directly
|
||||
```
|
||||
|
||||
**Full Preview** (Local Server - Recommended):
|
||||
**Optional: Local Server** (For advanced features):
|
||||
```bash
|
||||
cd .workflow/WFS-auth/.design/prototypes
|
||||
# Choose one:
|
||||
# Choose one if you need server-side features:
|
||||
python -m http.server 8080 # Python
|
||||
npx http-server -p 8080 # Node.js
|
||||
php -S localhost:8080 # PHP
|
||||
@@ -685,11 +689,12 @@ php -S localhost:8080 # PHP
|
||||
```
|
||||
|
||||
**Preview Features**:
|
||||
- `index.html`: Master navigation with all prototypes
|
||||
- `compare.html`: Side-by-side comparison with viewport controls (Desktop/Tablet/Mobile)
|
||||
- `index.html`: Master navigation with all prototypes (works offline)
|
||||
- `compare.html`: Side-by-side comparison with viewport controls (works offline)
|
||||
- Synchronized scrolling for layout comparison
|
||||
- Dynamic page switching
|
||||
- Real-time responsive testing
|
||||
- **No server required** - all features work by opening files directly in browser
|
||||
|
||||
#### 📦 Output Structure
|
||||
|
||||
|
||||
Reference in New Issue
Block a user