CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-05-02 11:45:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace broken file:// polling with {{DESIGN_SHOTGUN_LOOP}}

Browse Source 
plan-design-review and design-consultation templates previously used
$B goto file:// + $B eval polling for the comparison board feedback loop.
This was broken (browse blocks file:// URLs). Both templates now use
{{DESIGN_SHOTGUN_LOOP}} which serves via HTTP, handles regeneration in
the same browser tab, and falls back to AskUserQuestion.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-27 08:37:58 -06:00
parent 6d23551abd
commit 33d03b655a
2 changed files with 10 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design-consultation/SKILL.md.tmpl
+4 -11
View File
@@ -272,23 +272,16 @@ Run quality check on each variant:
$D check --image "$_DESIGN_DIR/variant-A.png" --brief "<the original brief>"
```
Create a comparison board and open it:
Show each variant inline (Read tool on each PNG) for instant preview.
```bash
$D compare --images "$_DESIGN_DIR/variant-A.png,$_DESIGN_DIR/variant-B.png,$_DESIGN_DIR/variant-C.png" --output "$_DESIGN_DIR/design-board.html"
$B goto "file://$_DESIGN_DIR/design-board.html"
```
Tell the user: "I've generated 3 visual directions applying your design system to a realistic [product type] screen. Pick your favorite in the comparison board that just opened in your browser. You can also remix elements across variants."
Tell the user: "I've generated 3 visual directions applying your design system to a realistic [product type] screen. Pick your favorite — I'll use it to refine the design system and extract exact tokens for DESIGN.md."
{{DESIGN_SHOTGUN_LOOP}}
After the user picks a direction:
- Use `$D extract --image "$_DESIGN_DIR/variant-<CHOSEN>.png"` to analyze the approved mockup and extract design tokens (colors, typography, spacing) that will populate DESIGN.md in Phase 6. This grounds the design system in what was actually approved visually, not just what was described in text.
- If the user wants to iterate: `$D iterate --feedback "<user's feedback>" --output "$_DESIGN_DIR/refined.png"`
- Write an `approved.json` to record the choice:
```bash
echo '{"approved_variant":"<VARIANT>","feedback":"<USER_FEEDBACK>","date":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","screen":"design-system","branch":"'$(git branch --show-current 2>/dev/null)'"}' > "$_DESIGN_DIR/approved.json"
```
- If the user wants to iterate further: `$D iterate --feedback "<user's feedback>" --output "$_DESIGN_DIR/refined.png"`
**Plan mode vs. implementation mode:**
- **If in plan mode:** Add the approved mockup path (the full `$_DESIGN_DIR` path) and extracted tokens to the plan file under an "## Approved Design Direction" section. The design system gets written to DESIGN.md when the plan is implemented.
plan-design-review/SKILL.md.tmpl
+6 -60
View File
@@ -205,69 +205,15 @@ $D check --image "$_DESIGN_DIR/variant-A.png" --brief "<the original brief>"
Flag any variants that fail the quality check. Offer to regenerate failures.
Create a comparison board and open it for review:
Show each variant inline (Read tool on each PNG) so the user sees them immediately.
```bash
$D compare --images "$_DESIGN_DIR/variant-A.png,$_DESIGN_DIR/variant-B.png,$_DESIGN_DIR/variant-C.png" --output "$_DESIGN_DIR/design-board.html"
```
Tell the user: "I've generated design directions. Take a look at the variants above,
then use the comparison board that just opened in your browser to pick your favorite,
rate the others, remix elements, and click Submit when you're done."
Open the comparison board for the user. If `$B` is available (BROWSE_READY was printed
during setup), use it. Otherwise fall back to `open` which works on macOS:
{{DESIGN_SHOTGUN_LOOP}}
```bash
if [ -x "$B" ]; then
$B goto "file://$_DESIGN_DIR/design-board.html"
else
open "$_DESIGN_DIR/design-board.html"
fi
```
Tell the user: "I've generated design directions and opened the comparison board. Pick your favorite, rate the others, and click Submit when you're done."
**Poll for user feedback from the comparison board.**
The comparison board has a Submit button that writes structured JSON to hidden DOM
elements. Poll for the user's submission:
```bash
$B eval document.getElementById('status').textContent
```
- If empty: user hasn't submitted yet. Wait 10 seconds and poll again.
- If `"submitted"`: read the feedback below.
- If `"regenerate"`: user wants new variants. Read the regeneration request from
`feedback-result`, generate new variants with the updated brief using `$D variants`
or `$D iterate`, update the comparison board, and resume polling.
When status is `"submitted"`, read the structured feedback:
```bash
$B eval document.getElementById('feedback-result').textContent
```
This returns JSON like:
```json
{
"preferred": "A",
"ratings": { "A": 4, "B": 3, "C": 2 },
"comments": { "A": "Love the spacing", "B": "Too busy", "C": "Wrong mood" },
"overall": "Go with A, make the CTA bigger",
"regenerated": false
}
```
**If `$B` is not available** (BROWSE_NOT_AVAILABLE): the board was opened with `open`
and you cannot poll the DOM. In this case, send a text message asking the user to
describe their choice (which variant, what to change). Do NOT use AskUserQuestion —
their feedback may combine elements across variants. Wait for free-form response.
Note which direction was approved — this becomes the visual reference for all subsequent review passes.
After the user picks a direction, write an `approved.json` to record the choice:
```bash
echo '{"approved_variant":"<VARIANT>","feedback":"<USER_FEEDBACK>","date":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","screen":"<SCREEN_NAME>","branch":"'$(git branch --show-current 2>/dev/null)'"}' > "$_DESIGN_DIR/approved.json"
```
Note which direction was approved. This becomes the visual reference for all subsequent review passes.
**Multiple variants/screens:** If the user asked for multiple variants (e.g., "5 versions of the homepage"), generate ALL as separate variant sets with their own comparison boards. Each screen/variant set gets its own subdirectory under `designs/`. Complete all mockup generation and user selection before starting review passes.