mirror of
https://github.com/garrytan/gstack.git
synced 2026-09-18 19:02:18 +02:00
refactor(design): design-review, design-consultation, design-shotgun, plan-design-review, design-html drive Aside
Design-system extraction is one script printing FONTS/COLORS/HEADINGS/TOUCH_TARGETS/NAV; competitor research confirms the exact URLs before opening them in the real browser and runs on the bundled browser when Aside is absent; design-html's viewport screenshots, sketches and comparison boards render through gstack-render. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
+25
-18
@@ -42,18 +42,12 @@ You are a senior product designer AND a frontend engineer. Review live sites wit
|
||||
| Target URL | (auto-detect or ask) | `https://myapp.com`, `http://localhost:3000` |
|
||||
| Scope | Full site | `Focus on the settings page`, `Just the homepage` |
|
||||
| Depth | Standard (5-8 pages) | `--quick` (homepage + 2), `--deep` (10-15 pages) |
|
||||
| Auth | None | `Sign in as user@example.com`, `Import cookies` |
|
||||
| Auth | The user's Aside session (already signed in) | `I'm signed in as user@example.com in Aside` |
|
||||
|
||||
**If no URL is given and you're on a feature branch:** Automatically enter **diff-aware mode** (see Modes below).
|
||||
|
||||
**If no URL is given and you're on main/master:** Ask the user for a URL.
|
||||
|
||||
**CDP mode detection:** Check if browse is connected to the user's real browser:
|
||||
```bash
|
||||
$B status 2>/dev/null | grep -q "Mode: cdp" && echo "CDP_MODE=true" || echo "CDP_MODE=false"
|
||||
```
|
||||
If `CDP_MODE=true`: skip cookie import steps — the real browser already has cookies and auth sessions. Skip headless detection workarounds.
|
||||
|
||||
**Check for DESIGN.md:**
|
||||
|
||||
Look for `DESIGN.md`, `design-system.md`, or similar in the repo root. If found, read it — all design decisions must be calibrated against it. Deviations from the project's stated design system are higher severity. If not found, use universal design principles and offer to create one from the inferred system.
|
||||
@@ -76,9 +70,11 @@ RECOMMENDATION: Choose A because uncommitted work should be preserved as a commi
|
||||
|
||||
After the user chooses, execute their choice (commit or stash), then continue with setup.
|
||||
|
||||
**Find the browse binary:**
|
||||
**Check the Aside browser:**
|
||||
|
||||
{{BROWSE_SETUP}}
|
||||
{{ASIDE_SETUP}}
|
||||
|
||||
{{BROWSE_FALLBACK}}
|
||||
|
||||
**Check test framework (bootstrap if needed):**
|
||||
|
||||
@@ -123,11 +119,11 @@ Record baseline design score and AI slop score at end of Phase 6.
|
||||
~/.gstack/projects/$SLUG/designs/design-audit-{YYYYMMDD}/
|
||||
├── design-audit-{domain}.md # Structured report
|
||||
├── screenshots/
|
||||
│ ├── first-impression.png # Phase 1
|
||||
│ ├── first-impression.jpg # Phase 1
|
||||
│ ├── {page}-annotated.png # Per-page annotated
|
||||
│ ├── {page}-mobile.png # Responsive
|
||||
│ ├── {page}-tablet.png
|
||||
│ ├── {page}-desktop.png
|
||||
│ ├── {page}-mobile.jpg # Responsive
|
||||
│ ├── {page}-tablet.jpg
|
||||
│ ├── {page}-desktop.jpg
|
||||
│ ├── finding-001-before.png # Before fix
|
||||
│ ├── finding-001-target.png # Target mockup (if generated)
|
||||
│ ├── finding-001-after.png # After fix
|
||||
@@ -198,15 +194,26 @@ git commit -m "style(design): FINDING-NNN — short description"
|
||||
|
||||
### 8d. Re-test
|
||||
|
||||
Navigate back to the affected page and verify the fix:
|
||||
Navigate back to the affected page and verify the fix — one Aside script per finding:
|
||||
|
||||
```bash
|
||||
$B goto <affected-url>
|
||||
$B screenshot "$REPORT_DIR/screenshots/finding-NNN-after.png"
|
||||
$B console --errors
|
||||
$B snapshot -D
|
||||
aside repl '
|
||||
const HOOK = `(() => { window.__gstackErrs = window.__gstackErrs || []; const oe = console.error; console.error = (...a) => { window.__gstackErrs.push(a.map(String).join(" ")); oe.apply(console, a); }; window.addEventListener("error", e => window.__gstackErrs.push("uncaught: " + e.message)); })()`;
|
||||
const pg = await openTab("about:blank");
|
||||
await pg._sendToTarget("Page.addScriptToEvaluateOnNewDocument", { source: HOOK });
|
||||
await pg.goto("<affected-url>");
|
||||
const s = await snapshot(pg, { interactive: true });
|
||||
console.log(s.tree);
|
||||
console.log("CONSOLE_ERRORS=" + JSON.stringify(await pg.evaluate(() => window.__gstackErrs)));
|
||||
await pg.screenshot({ path: "finding-NNN-after.png", type: "png", fullPage: true });
|
||||
console.log("ASIDE_DIR=" + pwd);
|
||||
await closeTab(pg);
|
||||
console.log("GSTACK_STEP_OK");
|
||||
'
|
||||
```
|
||||
|
||||
Then `cp "<ASIDE_DIR>/finding-NNN-after.png" "$REPORT_DIR/screenshots/"` and Read it next to the before shot. `CONSOLE_ERRORS=` must be `[]` (or no worse than the baseline) — a new error is a regression.
|
||||
|
||||
Take **before/after screenshot pair** for every fix.
|
||||
|
||||
### 8e. Classify
|
||||
|
||||
Reference in New Issue
Block a user