mirror of
https://github.com/garrytan/gstack.git
synced 2026-06-04 17:18:11 +02:00
chore: regenerate SKILL.md files for design-shotgun + resolver changes
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
+37
-61
@@ -808,87 +808,63 @@ D=""
|
||||
|
||||
Generating visual mockups of the proposed design... (say "skip" if you don't need visuals)
|
||||
|
||||
**Step 1: Construct the design brief**
|
||||
**Step 1: Set up the design directory**
|
||||
|
||||
```bash
|
||||
eval "$(~/.claude/skills/gstack/bin/gstack-slug 2>/dev/null)"
|
||||
_DESIGN_DIR=~/.gstack/projects/$SLUG/designs/mockup-$(date +%Y%m%d)
|
||||
mkdir -p "$_DESIGN_DIR"
|
||||
echo "DESIGN_DIR: $_DESIGN_DIR"
|
||||
```
|
||||
|
||||
**Step 2: Construct the design brief**
|
||||
|
||||
Read DESIGN.md if it exists — use it to constrain the visual style. If no DESIGN.md,
|
||||
explore wide across diverse directions.
|
||||
|
||||
Assemble a structured brief as a JSON file:
|
||||
```bash
|
||||
cat > /tmp/gstack-design-brief.json << 'BRIEF_EOF'
|
||||
{
|
||||
"goal": "<what this screen/page does>",
|
||||
"audience": "<who uses it>",
|
||||
"style": "<visual style from DESIGN.md or from the user's description>",
|
||||
"elements": ["<list>", "<of>", "<key UI elements>"],
|
||||
"constraints": "<any size/layout constraints>",
|
||||
"screenType": "<desktop-dashboard|mobile-app|landing-page|settings|etc>"
|
||||
}
|
||||
BRIEF_EOF
|
||||
```
|
||||
|
||||
**Step 2: Generate 3 variants**
|
||||
**Step 3: Generate 3 variants**
|
||||
|
||||
```bash
|
||||
$D variants --brief-file /tmp/gstack-design-brief.json --count 3 --output-dir /tmp/gstack-mockups/
|
||||
$D variants --brief "<assembled brief>" --count 3 --output-dir "$_DESIGN_DIR/"
|
||||
```
|
||||
|
||||
This generates 3 style variations of the same brief (~40 seconds total).
|
||||
|
||||
**Step 3: Show the comparison board**
|
||||
**Step 4: Show variants inline, then open comparison board**
|
||||
|
||||
Show each variant to the user inline first (read the PNGs with Read tool), then
|
||||
create and serve the comparison board:
|
||||
|
||||
```bash
|
||||
$D compare --images "/tmp/gstack-mockups/variant-A.png,/tmp/gstack-mockups/variant-B.png,/tmp/gstack-mockups/variant-C.png" --output /tmp/gstack-design-board.html
|
||||
$D compare --images "$_DESIGN_DIR/variant-A.png,$_DESIGN_DIR/variant-B.png,$_DESIGN_DIR/variant-C.png" --output "$_DESIGN_DIR/design-board.html" --serve
|
||||
```
|
||||
|
||||
Open the comparison board in headed Chrome for user review:
|
||||
This opens the board in the user's default browser and blocks until feedback is
|
||||
received. Read stdout for the structured JSON result. No polling needed.
|
||||
|
||||
If `$D serve` is not available or fails, fall back to AskUserQuestion:
|
||||
"I've opened the design board. Which variant do you prefer? Any feedback?"
|
||||
|
||||
**Step 5: Handle feedback**
|
||||
|
||||
If the JSON contains `"regenerated": true`:
|
||||
1. Read `regenerateAction` (or `remixSpec` for remix requests)
|
||||
2. Generate new variants with `$D iterate` or `$D variants` using updated brief
|
||||
3. Create new board with `$D compare`
|
||||
4. POST the new HTML to the running server via `curl -X POST http://localhost:PORT/api/reload -H 'Content-Type: application/json' -d '{"html":"$_DESIGN_DIR/design-board.html"}'`
|
||||
(parse the port from stderr: look for `SERVE_STARTED: port=XXXXX`)
|
||||
5. Board auto-refreshes in the same tab
|
||||
|
||||
If `"regenerated": false`: proceed with the approved variant.
|
||||
|
||||
**Step 6: Save approved choice**
|
||||
|
||||
```bash
|
||||
$B goto file:///tmp/gstack-design-board.html
|
||||
```
|
||||
|
||||
Tell the user: "I've generated 3 design directions and opened them in Chrome.
|
||||
Pick your favorite, rate the others, and click Submit when you're done."
|
||||
|
||||
**Step 4: Poll for user feedback**
|
||||
|
||||
Poll the page 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.
|
||||
- If "regenerate": user wants new variants. Read the regeneration request,
|
||||
generate new variants with the updated brief, and refresh the comparison board.
|
||||
|
||||
When status is "submitted", read the structured feedback:
|
||||
|
||||
```bash
|
||||
$B eval document.getElementById('feedback-result').textContent
|
||||
```
|
||||
|
||||
This returns JSON with the user's preferred variant, star ratings, comments,
|
||||
and overall direction.
|
||||
|
||||
**Step 5: Save approved mockup**
|
||||
|
||||
Copy the user's preferred variant to `docs/designs/` (create if needed):
|
||||
|
||||
```bash
|
||||
mkdir -p docs/designs
|
||||
cp /tmp/gstack-mockups/variant-<PREFERRED>.png docs/designs/<skill>-<description>-$(date +%Y%m%d).png
|
||||
echo '{"approved_variant":"<VARIANT>","feedback":"<FEEDBACK>","date":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","screen":"mockup","branch":"'$(git branch --show-current 2>/dev/null)'"}' > "$_DESIGN_DIR/approved.json"
|
||||
```
|
||||
|
||||
Reference the saved mockup in the design doc or plan.
|
||||
|
||||
**Step 6: Generate HTML wireframe**
|
||||
|
||||
After the mockup is approved, generate an HTML wireframe matching the approved
|
||||
direction using the existing DESIGN_SKETCH approach. The wireframe is what the
|
||||
agent implements from — the mockup is what the human approved.
|
||||
|
||||
## Visual Sketch (UI ideas only)
|
||||
|
||||
If the chosen approach involves user-facing UI (screens, pages, forms, dashboards,
|
||||
|
||||
Reference in New Issue
Block a user