julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
146 lines
3.9 KiB
Markdown
146 lines
3.9 KiB
Markdown
---
|
|
name: stitch-generation
|
|
description: AI-assisted UI design using Google Stitch from specifications and sketches
|
|
---
|
|
|
|
# Stitch UI Generation
|
|
|
|
**Goal:** Generate production-quality UI designs using Google Stitch AI
|
|
|
|
**Your Role:** Guide the user through preparing inputs and creating a Stitch generation dialog
|
|
|
|
---
|
|
|
|
## INITIALIZATION
|
|
|
|
### Design Log
|
|
Read `{output_folder}/_progress/00-design-log.md`. Check Current and Backlog for context.
|
|
|
|
|
|
## OVERVIEW
|
|
|
|
Google Stitch transforms text prompts, sketches, and reference images into responsive interfaces.
|
|
|
|
**Input Formula:**
|
|
```
|
|
Visual Reference + Sketch + Specification = Stitch Generation
|
|
```
|
|
|
|
**Output:** UI designs exportable to Figma or HTML/CSS
|
|
|
|
---
|
|
|
|
## WHEN TO USE
|
|
|
|
**Use Stitch when:**
|
|
- New page with detailed specification ready
|
|
- Have a visual reference (existing design or screenshot)
|
|
- Have a sketch showing layout structure
|
|
- Want rapid visual design iteration
|
|
|
|
**Skip when:**
|
|
- Building design system components (use tokens instead)
|
|
- Minor updates to existing designs
|
|
- No specification exists yet (write spec first)
|
|
|
|
---
|
|
|
|
## PREREQUISITES
|
|
|
|
1. **Specification exists** for the screen(s) to generate
|
|
2. **Visual reference available** (screenshot or approved design)
|
|
3. **Sketch available** showing layout structure
|
|
|
|
---
|
|
|
|
## WORKFLOW
|
|
|
|
### Step 1: Create Generation Log
|
|
|
|
Create a Stitch generation log in the agent experiences folder.
|
|
|
|
**Location:** `{output_folder}/_progress/agent-experiences/{YYYY-MM-DD}-stitch-{feature}.md`
|
|
|
|
### Step 2: Pre-Generation Questions
|
|
|
|
For each potential screen, decide:
|
|
|
|
| Question | Columns |
|
|
|----------|---------|
|
|
| Generate in Stitch? | Screen, Has Code?, Has Sketch?, Generate?, Why |
|
|
| What reference? | Screen, Reference, Source |
|
|
|
|
### Step 3: Gather Inputs
|
|
|
|
| Input | Action |
|
|
|-------|--------|
|
|
| **Visual Reference** | Take screenshot OR locate existing design |
|
|
| **Sketch** | Locate in spec's `Sketches/` folder |
|
|
| **Prompt** | Prepare using template below |
|
|
|
|
### Step 3a: Prepare the Prompt
|
|
|
|
**DO NOT paste raw specifications into Stitch.** Use the prompt template instead.
|
|
|
|
**Template:** `templates/stitch-prompt.template.md`
|
|
|
|
Include: Project Context, Design System, Component Styles, Screen Content (ONE language, no Object IDs), Current State Notes.
|
|
|
|
### Step 4: Generate in Stitch
|
|
|
|
1. Go to [stitch.withgoogle.com](https://stitch.withgoogle.com)
|
|
2. Upload visual reference and sketch images
|
|
3. Paste prepared prompt
|
|
4. Generate 2-3 variants
|
|
5. Select best result
|
|
|
|
**Settings:** Standard Mode (quick) or Pro Mode (higher fidelity). Viewport: Mobile 390px or Desktop 1440px.
|
|
|
|
### Step 5: Review Against Spec
|
|
|
|
| Check | Pass? |
|
|
|-------|-------|
|
|
| Content/copy matches spec | |
|
|
| Layout follows sketch | |
|
|
| Visual style matches reference | |
|
|
| All key elements present | |
|
|
|
|
If issues: Re-prompt with specific corrections or edit in Stitch.
|
|
|
|
### Step 6: Export & Store
|
|
|
|
| Format | When | Destination |
|
|
|--------|------|-------------|
|
|
| **Figma** | Team collaboration | Figma project |
|
|
| **HTML/CSS** | Code reference | `{spec-folder}/Visual-Design/` |
|
|
| **Screenshot** | Documentation | `{spec-folder}/Visual-Design/` |
|
|
|
|
**Naming:** `{screen-name}-stitch-v{#}.{ext}`
|
|
|
|
### Step 7: Update Specification
|
|
|
|
Add Visual Design section to specification referencing the Stitch output.
|
|
|
|
---
|
|
|
|
## STITCH CAPABILITIES & LIMITS
|
|
|
|
**Does well:** Single screen generation, style matching, responsive layouts, clean HTML/CSS export, Figma-compatible output.
|
|
|
|
**Limitations:** Best with 2-3 screens at a time, layouts can be generic, no built-in design system awareness, free tier limits (350 standard + 200 pro/month).
|
|
|
|
---
|
|
|
|
## PROMPT TIPS
|
|
|
|
Effective prompts include: App type, Context, Visual direction, Key elements, Actual content/text, Mood/tone, Viewport.
|
|
|
|
**Template:** See `templates/stitch-prompt.template.md` for complete structure and example.
|
|
|
|
---
|
|
|
|
## AFTER COMPLETION
|
|
|
|
1. Update design log
|
|
2. Suggest next action (implementation or further iteration)
|