maestro-flow 0.3.48 → 0.3.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/.claude/agents/impeccable-agent.md +99 -0
  2. package/.claude/commands/maestro-analyze.md +2 -2
  3. package/.claude/commands/maestro-brainstorm.md +116 -112
  4. package/.claude/commands/maestro-composer.md +5 -0
  5. package/.claude/commands/maestro-impeccable.md +46 -9
  6. package/.claude/commands/maestro-merge.md +3 -0
  7. package/.claude/commands/maestro-roadmap.md +5 -1
  8. package/.claude/commands/maestro-ui-craft.md +56 -4
  9. package/.claude/commands/maestro.md +1 -1
  10. package/.claude/commands/manage-issue-discover.md +4 -0
  11. package/.claude/commands/quality-refactor.md +3 -0
  12. package/.claude/skills/maestro-help/index/catalog.json +1 -1
  13. package/.claude/skills/maestro-help/phases/01-parse-intent.md +1 -1
  14. package/.claude/skills/maestro-impeccable/SKILL.md +3 -1
  15. package/.codex/skills/maestro/SKILL.md +3 -3
  16. package/.codex/skills/maestro-brainstorm/SKILL.md +19 -2
  17. package/.codex/skills/maestro-composer/SKILL.md +5 -0
  18. package/.codex/skills/maestro-help/catalog.json +1 -1
  19. package/.codex/skills/maestro-impeccable/SKILL.md +24 -5
  20. package/.codex/skills/maestro-merge/SKILL.md +3 -0
  21. package/.codex/skills/maestro-milestone-audit/SKILL.md +64 -7
  22. package/.codex/skills/maestro-quick/SKILL.md +1 -1
  23. package/.codex/skills/maestro-roadmap/SKILL.md +1 -1
  24. package/.codex/skills/maestro-tools-execute/SKILL.md +1 -1
  25. package/.codex/skills/maestro-tools-register/SKILL.md +1 -1
  26. package/.codex/skills/maestro-ui-craft/SKILL.md +51 -6
  27. package/.codex/skills/quality-refactor/SKILL.md +114 -22
  28. package/chains/_intent-map.json +1 -1
  29. package/chains/singles/ui-design.json +4 -4
  30. package/chains/{ui-design-driven.json → ui-craft-build.json} +8 -8
  31. package/dashboard/dist-server/dashboard/src/server/coordinator/chain-map.js +3 -3
  32. package/dashboard/dist-server/dashboard/src/server/coordinator/chain-map.js.map +1 -1
  33. package/dist/src/commands/delegate.d.ts.map +1 -1
  34. package/dist/src/commands/delegate.js +12 -7
  35. package/dist/src/commands/delegate.js.map +1 -1
  36. package/dist/src/commands/impeccable.d.ts +2 -1
  37. package/dist/src/commands/impeccable.d.ts.map +1 -1
  38. package/dist/src/commands/impeccable.js +80 -1
  39. package/dist/src/commands/impeccable.js.map +1 -1
  40. package/package.json +1 -1
  41. package/templates/planning-roles/ui-designer.md +86 -99
  42. package/templates/workflows/specs/node-catalog.md +1 -1
  43. package/workflows/brainstorm.md +26 -0
  44. package/workflows/cli-tools-usage.md +9 -26
  45. package/workflows/delegate-usage.md +301 -343
  46. package/workflows/impeccable/design.md +462 -0
  47. package/workflows/impeccable/explore.md +157 -0
  48. package/workflows/impeccable/shape.md +4 -0
  49. package/workflows/impeccable/ui-search/__pycache__/core.cpython-313.pyc +0 -0
  50. package/workflows/impeccable/ui-search/__pycache__/design_system.cpython-313.pyc +0 -0
  51. package/workflows/impeccable/ui-search/core.py +262 -0
  52. package/workflows/impeccable/ui-search/data/app-interface.csv +31 -0
  53. package/workflows/impeccable/ui-search/data/charts.csv +26 -0
  54. package/workflows/impeccable/ui-search/data/colors.csv +162 -0
  55. package/workflows/impeccable/ui-search/data/design.csv +1776 -0
  56. package/workflows/impeccable/ui-search/data/draft.csv +1779 -0
  57. package/workflows/impeccable/ui-search/data/google-fonts.csv +1924 -0
  58. package/workflows/impeccable/ui-search/data/icons.csv +106 -0
  59. package/workflows/impeccable/ui-search/data/landing.csv +35 -0
  60. package/workflows/impeccable/ui-search/data/products.csv +162 -0
  61. package/workflows/impeccable/ui-search/data/react-performance.csv +45 -0
  62. package/workflows/impeccable/ui-search/data/stacks/angular.csv +51 -0
  63. package/workflows/impeccable/ui-search/data/stacks/astro.csv +54 -0
  64. package/workflows/impeccable/ui-search/data/stacks/flutter.csv +53 -0
  65. package/workflows/impeccable/ui-search/data/stacks/html-tailwind.csv +56 -0
  66. package/workflows/impeccable/ui-search/data/stacks/jetpack-compose.csv +53 -0
  67. package/workflows/impeccable/ui-search/data/stacks/laravel.csv +51 -0
  68. package/workflows/impeccable/ui-search/data/stacks/nextjs.csv +53 -0
  69. package/workflows/impeccable/ui-search/data/stacks/nuxt-ui.csv +51 -0
  70. package/workflows/impeccable/ui-search/data/stacks/nuxtjs.csv +59 -0
  71. package/workflows/impeccable/ui-search/data/stacks/react-native.csv +52 -0
  72. package/workflows/impeccable/ui-search/data/stacks/react.csv +54 -0
  73. package/workflows/impeccable/ui-search/data/stacks/shadcn.csv +61 -0
  74. package/workflows/impeccable/ui-search/data/stacks/svelte.csv +54 -0
  75. package/workflows/impeccable/ui-search/data/stacks/swiftui.csv +51 -0
  76. package/workflows/impeccable/ui-search/data/stacks/threejs.csv +54 -0
  77. package/workflows/impeccable/ui-search/data/stacks/vue.csv +50 -0
  78. package/workflows/impeccable/ui-search/data/styles.csv +85 -0
  79. package/workflows/impeccable/ui-search/data/typography.csv +74 -0
  80. package/workflows/impeccable/ui-search/data/ui-reasoning.csv +162 -0
  81. package/workflows/impeccable/ui-search/data/ux-guidelines.csv +100 -0
  82. package/workflows/impeccable/ui-search/design_system.py +1148 -0
  83. package/workflows/impeccable/ui-search/prototype-template.html +511 -0
  84. package/workflows/impeccable/ui-search/render-prototype.js +208 -0
  85. package/workflows/impeccable/ui-search/search.py +114 -0
  86. package/workflows/maestro-chain-execute.md +2 -2
  87. package/workflows/maestro.codex.md +3 -3
  88. package/workflows/maestro.md +5 -5
  89. package/workflows/plan.md +1 -1
  90. package/workflows/ui-design.md +1 -1
  91. package/workflows/ui-style.md +1 -1
  92. package/.claude/commands/maestro-ui-design.md +0 -104
  93. package/.codex/skills/maestro-ui-design/SKILL.md +0 -242
@@ -0,0 +1,462 @@
1
+ # Design Stage + Bridge
2
+
3
+ Design system generation via ui-search (BM25 search engine + CSV knowledge base), **visual prototype comparison**, and bridge conversion to Google Stitch DESIGN.md format. Loaded as deferred reading by maestro-ui-craft when build chain enters S_DESIGN_EXPLORE or S_BRIDGE states.
4
+
5
+ ## Architecture
6
+
7
+ ```
8
+ PRODUCT.md → A1 Extract → A2 Keywords → A3 Generate MASTER_{A,B,C}.md
9
+ → A3.1 Render HTML prototypes → A4 Visualize (/compare)
10
+ → A4.1 User Review (Approve / Mix / Redo) → A4.2 Mix (optional)
11
+ → A5 Persist → Phase B Bridge → DESIGN.md
12
+ ```
13
+
14
+ ## Phase A: Design System Generation
15
+
16
+ Generate a design system recommendation using the local ui-search tooling, then let the user select from multiple contrasting variants.
17
+
18
+ ### Prerequisites
19
+
20
+ - `.workflow/impeccable/PRODUCT.md` exists (from teach step)
21
+ - Python 3 available
22
+ - `workflows/impeccable/ui-search/search.py` exists
23
+
24
+ ### A1. Extract Query Context from PRODUCT.md
25
+
26
+ Read `.workflow/impeccable/PRODUCT.md` and extract:
27
+
28
+ | Field | Source in PRODUCT.md | Use |
29
+ |-------|---------------------|-----|
30
+ | register | `## Register` value (brand\|product) | Query direction: brand → expressive keywords, product → functional keywords |
31
+ | personality | `## Brand Personality` | Primary query keywords |
32
+ | anti_references | `## Anti-references` | Negative constraints (exclude matching styles) |
33
+ | industry | Inferred from `## Product Purpose` + `## Users` | Industry keyword for search |
34
+ | project_name | `# Product` title or inferred | `-p` flag value |
35
+
36
+ ### A2. Build Variant Keyword Sets
37
+
38
+ Generate `styles_count` (default 3, range 2-5 via `--styles`) contrasting keyword sets from the extracted context:
39
+
40
+ ```
41
+ variant_1: "${industry} ${personality} conservative clean"
42
+ variant_2: "${industry} ${personality} expressive bold"
43
+ variant_3: "${industry} ${personality} premium refined"
44
+ ```
45
+
46
+ Adjust keywords to ensure variants diverge meaningfully. If register is `brand`, lean toward visual keywords; if `product`, lean toward functional keywords.
47
+
48
+ ### A3. Generate Variants
49
+
50
+ Resolve the script path relative to the maestro installation:
51
+
52
+ ```bash
53
+ # Find the script — prefer project-local, fallback to installed
54
+ SCRIPT_PATH="workflows/impeccable/ui-search/search.py"
55
+ if [ ! -f "$SCRIPT_PATH" ]; then
56
+ SCRIPT_PATH="$HOME/.maestro/workflows/impeccable/ui-search/search.py"
57
+ fi
58
+ ```
59
+
60
+ For each variant, call:
61
+
62
+ ```bash
63
+ python search.py "${variant_keywords}" --design-system -p "${project_name}" -f markdown
64
+ ```
65
+
66
+ Save each output to a temporary directory as `MASTER_A.md`, `MASTER_B.md`, `MASTER_C.md` etc.
67
+
68
+ Optionally gather supplementary context:
69
+
70
+ ```bash
71
+ # Stack guidelines (if --stack flag provided)
72
+ python search.py "layout responsive component" --stack ${stack}
73
+
74
+ # Domain supplements
75
+ python search.py "${industry}" --domain color
76
+ python search.py "${personality}" --domain typography
77
+ ```
78
+
79
+ ### A3.1. Render HTML Prototypes
80
+
81
+ For each generated `MASTER_{N}.md`, render a visual HTML prototype using the render script:
82
+
83
+ ```bash
84
+ # Resolve render script — same search order as search.py
85
+ RENDER_PATH="workflows/impeccable/ui-search/render-prototype.js"
86
+ if [ ! -f "$RENDER_PATH" ]; then
87
+ RENDER_PATH="$HOME/.maestro/workflows/impeccable/ui-search/render-prototype.js"
88
+ fi
89
+
90
+ # Render all variants at once
91
+ node "$RENDER_PATH" MASTER_A.md MASTER_B.md MASTER_C.md \
92
+ --output "{temp_dir}/prototypes" --project "${project_name}"
93
+ ```
94
+
95
+ This produces:
96
+ ```
97
+ {temp_dir}/prototypes/
98
+ ├── prototype_A.html ← self-contained, all CSS inline
99
+ ├── prototype_B.html
100
+ ├── prototype_C.html
101
+ └── manifest.json ← metadata for downstream tools
102
+ ```
103
+
104
+ Each prototype shows the design system's visual language: color palette swatches, typography hierarchy, card grid, form inputs, buttons, stats, and layout rhythm. It does NOT contain business logic or real data.
105
+
106
+ If `node` is not available or rendering fails → W008, fall back to A4 text-only comparison.
107
+
108
+ ### A4. Present Variants for Comparison
109
+
110
+ **Visual mode** (prototypes rendered successfully):
111
+
112
+ 1. Start the visualize server:
113
+ ```bash
114
+ maestro brainstorm-visualize start --dir "{temp_dir}/prototypes/"
115
+ ```
116
+ Save `execId` and `url`.
117
+
118
+ 2. Direct user to the compare view:
119
+ ```
120
+ ▸ Design variants ready for comparison:
121
+ {url}/compare?files=prototype_A.html,prototype_B.html,prototype_C.html
122
+
123
+ [A] {style_name_A} — {font_heading_A}/{font_body_A}
124
+ [B] {style_name_B} — {font_heading_B}/{font_body_B}
125
+ [C] {style_name_C} — {font_heading_C}/{font_body_C}
126
+ ```
127
+
128
+ 3. Collect user decision via AskUserQuestion:
129
+ - **Approve [A/B/C]** — adopt this variant directly
130
+ - **Mix** — enter mix protocol (A4.1)
131
+ - **Redo** — adjust keywords and regenerate (back to A2, max 3 redo rounds)
132
+
133
+ 4. Stop server after decision:
134
+ ```bash
135
+ maestro brainstorm-visualize stop {execId}
136
+ ```
137
+
138
+ **Text-only fallback** (no Node.js, CI/headless, or rendering failed):
139
+
140
+ Display each variant summary showing: style name, color palette, typography, effects, anti-patterns.
141
+ If `-y` flag: auto-select variant 1.
142
+ Otherwise: ask user to pick [1-N | "redo"].
143
+
144
+ ### A4.1. Mix Protocol (Optional)
145
+
146
+ When user selects "Mix", enter the dimension-based mixing flow:
147
+
148
+ 1. AskUserQuestion with dimension selection:
149
+ ```
150
+ Which dimensions from which variant?
151
+ Colors: [A] / [B] / [C]
152
+ Typography: [A] / [B] / [C]
153
+ Spacing: [A] / [B] / [C]
154
+ Shadows: [A] / [B] / [C]
155
+ ```
156
+
157
+ 2. Extract sections by Markdown heading from each selected variant:
158
+ | Dimension | MASTER.md Section |
159
+ |-----------|-------------------|
160
+ | Colors | `### Color Palette` (up to next `###`) |
161
+ | Typography | `### Typography` (up to next `###`) |
162
+ | Spacing | `### Spacing Variables` (up to next `###`) |
163
+ | Shadows | `### Shadow Depths` (up to next `###`) |
164
+
165
+ 3. Assemble new MASTER.md:
166
+ - Take selected dimension blocks from their respective variants
167
+ - Take remaining sections (Component Specs, Style Guidelines, Anti-Patterns, Checklist) from the variant with the most selected dimensions (primary variant)
168
+ - Regenerate Component Specs CSS using the mixed color values
169
+
170
+ 4. Re-render HTML prototype of the mixed result:
171
+ ```bash
172
+ node "$RENDER_PATH" MASTER_mixed.md --output "{temp_dir}/prototypes" --project "${project_name}"
173
+ ```
174
+
175
+ 5. Show mixed prototype to user for final confirmation:
176
+ - **Approve** → proceed to A5
177
+ - **Redo mix** → back to step 1 (max 2 re-mix rounds)
178
+
179
+ ### A4.2. Harvest Rejected Variants
180
+
181
+ After selection, archive rejected variants for knowledge accumulation:
182
+
183
+ 1. Move rejected `MASTER_{N}.md` files to `.workflow/impeccable/design-system/harvest/rejected-variants/`
184
+ 2. Append rejection metadata as YAML frontmatter:
185
+ ```yaml
186
+ ---
187
+ status: rejected
188
+ date: "{ISO-8601}"
189
+ selected_variant: "{winner_label}"
190
+ user_feedback: "{reason if provided, else 'not selected'}"
191
+ ---
192
+ ```
193
+ 3. On next design-explore invocation, scan `harvest/rejected-variants/` for `user_feedback` entries and append as supplementary anti-references to the keyword generation (A2), making the system learn from past rejections.
194
+
195
+ ### A5. Persist Selected Variant
196
+
197
+ ```bash
198
+ python search.py "${selected_keywords}" --design-system --persist \
199
+ -p "${project_name}" --output-dir ".workflow/impeccable"
200
+ ```
201
+
202
+ If the selected variant was directly approved (not mixed), copy the already-generated `MASTER_{N}.md` instead of re-running search.py:
203
+
204
+ ```bash
205
+ cp "{temp_dir}/MASTER_{selected}.md" ".workflow/impeccable/design-system/{project-slug}/MASTER.md"
206
+ ```
207
+
208
+ If the variant was mixed, write the assembled `MASTER_mixed.md` as the final MASTER.md.
209
+
210
+ This creates:
211
+ ```
212
+ .workflow/impeccable/design-system/{project-slug}/MASTER.md
213
+ ```
214
+
215
+ Record selection metadata for status.json:
216
+ ```json
217
+ {
218
+ "selected_variant": "A",
219
+ "variant_name": "{style_name}",
220
+ "keywords": "{selected_keywords}",
221
+ "mix_config": null | { "colors": "A", "typography": "B", "spacing": "C", "shadows": "A" },
222
+ "redo_count": 0,
223
+ "rejected_variants": ["B", "C"],
224
+ "selected_at": "ISO-8601"
225
+ }
226
+ ```
227
+
228
+ ---
229
+
230
+ ## Phase B: Bridge (MASTER.md to DESIGN.md)
231
+
232
+ Transform the persisted MASTER.md into `.workflow/impeccable/DESIGN.md` following the Google Stitch DESIGN.md format that `design-parser.ts` expects.
233
+
234
+ ### Input
235
+
236
+ Read `.workflow/impeccable/design-system/{project-slug}/MASTER.md`.
237
+
238
+ The MASTER.md contains these sections:
239
+ - **Color Palette** table: 10 roles (Primary, On Primary, Secondary, Accent, Background, Foreground, Muted, Muted Foreground, Border, Destructive, Ring) with hex values and CSS vars
240
+ - **Typography**: heading font, body font, mood, Google Fonts URL, CSS import
241
+ - **Spacing Variables**: 7 tokens (--space-xs to --space-3xl) with px values
242
+ - **Shadow Depths**: 4 levels (--shadow-sm to --shadow-xl) with RGBA values
243
+ - **Component Specs**: CSS blocks for .btn-primary, .btn-secondary, .card, .input, .modal
244
+ - **Style Guidelines**: style name, keywords, best-for, key effects
245
+ - **Anti-Patterns**: list of patterns to avoid
246
+ - **Pre-Delivery Checklist**: quality checks
247
+
248
+ ### Output: DESIGN.md
249
+
250
+ Write `.workflow/impeccable/DESIGN.md` with two layers:
251
+
252
+ #### Layer 1: YAML Frontmatter
253
+
254
+ ```yaml
255
+ ---
256
+ name: "{project_name}"
257
+ description: "{style_name} design system for {industry}"
258
+ colors:
259
+ primary: "{Primary hex from table}"
260
+ on-primary: "{On Primary hex}"
261
+ secondary: "{Secondary hex}"
262
+ accent: "{Accent hex}"
263
+ background: "{Background hex}"
264
+ foreground: "{Foreground hex}"
265
+ muted: "{Muted hex}"
266
+ border: "{Border hex}"
267
+ destructive: "{Destructive hex}"
268
+ ring: "{Ring hex}"
269
+ typography:
270
+ display:
271
+ fontFamily: "{Heading Font}"
272
+ fontWeight: 700
273
+ lineHeight: 1.1
274
+ body:
275
+ fontFamily: "{Body Font}"
276
+ fontWeight: 400
277
+ lineHeight: 1.6
278
+ rounded:
279
+ sm: "4px"
280
+ md: "8px"
281
+ lg: "12px"
282
+ spacing:
283
+ xs: "{--space-xs value}"
284
+ sm: "{--space-sm value}"
285
+ md: "{--space-md value}"
286
+ lg: "{--space-lg value}"
287
+ xl: "{--space-xl value}"
288
+ components:
289
+ button-primary:
290
+ backgroundColor: "{colors.accent}"
291
+ textColor: "white"
292
+ rounded: "{rounded.md}"
293
+ padding: "{from .btn-primary CSS}"
294
+ card:
295
+ backgroundColor: "{colors.background}"
296
+ rounded: "{rounded.lg}"
297
+ padding: "{from .card CSS}"
298
+ input:
299
+ textColor: "{colors.foreground}"
300
+ rounded: "{rounded.md}"
301
+ padding: "{from .input CSS}"
302
+ ---
303
+ ```
304
+
305
+ Rules:
306
+ - Use hex values (not OKLCH) in frontmatter for Stitch parser compatibility
307
+ - Component tokens use `{path.to.token}` references where possible
308
+ - Only 8 allowed component props: backgroundColor, textColor, typography, rounded, padding, size, height, width
309
+
310
+ #### Layer 2: Markdown Body (6 Canonical Sections)
311
+
312
+ Section headers MUST contain the canonical keyword (case-insensitive). Numbered prefixes are allowed.
313
+
314
+ **## Overview**
315
+
316
+ ```markdown
317
+ ## Overview
318
+
319
+ **Creative North Star: "{synthesized metaphor from style name + keywords}"**
320
+
321
+ {2-3 paragraphs describing the design philosophy, derived from style guidelines section}
322
+
323
+ **Key Characteristics:**
324
+ - {characteristic from keywords}
325
+ - {characteristic from best-for}
326
+ - {characteristic from effects}
327
+ ```
328
+
329
+ Synthesize the Creative North Star from style name + keywords. Example: style "Bento Box Grid" → "The Modular Canvas — asymmetric rhythm, breathing whitespace, Apple-caliber precision."
330
+
331
+ **## Colors**
332
+
333
+ ```markdown
334
+ ## Colors
335
+
336
+ ### Primary
337
+ - **{Descriptive name}** ({Primary hex}): Main brand color, used for primary actions and key UI anchors
338
+ - **On Primary** ({On Primary hex}): Text/icons on primary color surfaces
339
+
340
+ ### Secondary
341
+ - **{Descriptive name}** ({Secondary hex}): Supporting color for secondary actions and accents
342
+
343
+ ### Tertiary
344
+ - **{Descriptive name}** ({Accent hex}): Accent color for highlights, CTAs, and interactive elements
345
+
346
+ ### Neutral
347
+ - **Background** ({Background hex}): Page and section backgrounds
348
+ - **Foreground** ({Foreground hex}): Primary text color
349
+ - **Muted** ({Muted hex}): Muted surfaces, secondary backgrounds
350
+ - **Border** ({Border hex}): Dividers, input borders, card edges
351
+
352
+ ### Semantic
353
+ - **Destructive** ({Destructive hex}): Error states, delete actions, warnings
354
+ - **Ring** ({Ring hex}): Focus rings, selection indicators
355
+ ```
356
+
357
+ Generate descriptive color names from hex hue analysis (e.g., #2563EB → "Signal Blue", #F97316 → "Warm Amber").
358
+
359
+ **## Typography**
360
+
361
+ ```markdown
362
+ ## Typography
363
+
364
+ **Display Font:** {Heading Font} (with system-ui fallback)
365
+ **Body Font:** {Body Font} (with system-ui fallback)
366
+ **Character:** {Mood from typography section}
367
+
368
+ **Hierarchy:**
369
+ - **Display** (700, clamp(2.5rem, 5vw, 4rem), 1.1): Hero headlines, landing page titles
370
+ - **Headline** (700, 2rem, 1.2): Section headers, page titles
371
+ - **Title** (600, 1.25rem, 1.3): Card titles, subsection headers
372
+ - **Body** (400, 1rem, 1.6): Running text, descriptions — max 65-75ch line length
373
+ - **Label** (500, 0.875rem, 1.4): Buttons, badges, metadata, navigation items
374
+
375
+ Google Fonts: {Google Fonts URL}
376
+ ```
377
+
378
+ **## Elevation**
379
+
380
+ ```markdown
381
+ ## Elevation
382
+
383
+ {Philosophy paragraph — infer from style type:
384
+ - Flat/Minimal → "Flat by default. Shadows appear only on state changes (hover, focus, active) to reinforce interaction feedback."
385
+ - Layered/Cards → "Progressive depth through shadow scale. Cards float above the surface; modals command attention with deeper shadows."
386
+ }
387
+
388
+ - **Subtle** ({--shadow-sm value}): Resting state for cards and containers
389
+ - **Medium** ({--shadow-md value}): Hover state, dropdown menus, popovers
390
+ - **Elevated** ({--shadow-lg value}): Modals, drawers, floating action elements
391
+ - **Prominent** ({--shadow-xl value}): Hero sections, featured content, overlays
392
+ ```
393
+
394
+ **## Components**
395
+
396
+ ```markdown
397
+ ## Components
398
+
399
+ ### Buttons
400
+ - **Shape:** Rounded corners ({border-radius from .btn-primary CSS})
401
+ - **Primary:** {background} + {color} + {padding} from .btn-primary CSS
402
+ - **Primary Hover:** {hover transition/transform from CSS}
403
+ - **Secondary:** {border} + {color} from .btn-secondary CSS
404
+
405
+ ### Cards
406
+ - **Corner Radius:** {border-radius from .card CSS}
407
+ - **Background:** {background from .card CSS}
408
+ - **Shadow:** References Elevation "Subtle" at rest, "Medium" on hover
409
+ - **Padding:** {padding from .card CSS}
410
+ - **Hover:** {transition from .card CSS}
411
+
412
+ ### Inputs
413
+ - **Border:** {border from .input CSS}
414
+ - **Border Radius:** {border-radius from .input CSS}
415
+ - **Focus:** {border-color and box-shadow from .input:focus CSS}
416
+ - **Padding:** {padding from .input CSS}
417
+
418
+ ### Modals
419
+ - **Overlay:** {background and backdrop-filter from .modal-overlay CSS}
420
+ - **Panel:** {border-radius, padding, box-shadow from .modal CSS}
421
+ ```
422
+
423
+ **## Do's and Don'ts**
424
+
425
+ ```markdown
426
+ ## Do's and Don'ts
427
+
428
+ ### Do
429
+ - Use SVG icons (Heroicons, Lucide) — never emojis as structural icons
430
+ - Add cursor:pointer to all clickable elements
431
+ - Include smooth hover transitions (150-300ms, ease-out)
432
+ - Maintain 4.5:1 contrast ratio for all text
433
+ - Test on mobile viewport (375px) before shipping
434
+ - {additional Do items from Pre-Delivery Checklist}
435
+
436
+ ### Don't
437
+ - {each anti-pattern from MASTER.md, converted to imperative}
438
+ - {additional forbidden patterns from MASTER.md}
439
+ ```
440
+
441
+ ### Post-Bridge Actions
442
+
443
+ After writing DESIGN.md:
444
+
445
+ 1. Register in spec system:
446
+ ```bash
447
+ maestro spec add ui "Design System: {project_name}" "{style_name} — {color_strategy}" \
448
+ --keywords "design,colors,typography,{style_name}" \
449
+ --ref ".workflow/impeccable/DESIGN.md"
450
+ ```
451
+
452
+ 2. Refresh context:
453
+ ```bash
454
+ maestro impeccable load-context
455
+ ```
456
+
457
+ 3. Announce to conversation:
458
+ ```
459
+ ✓ Design system bridged: {style_name}
460
+ DESIGN.md written with {N} colors, {heading_font}/{body_font}, {shadow_count} elevation levels
461
+ Shape will use this as visual baseline — skipping color/theme/anchor questions
462
+ ```
@@ -0,0 +1,157 @@
1
+ # Explore Flow
2
+
3
+ Generate multiple design system variants, render HTML prototypes for visual comparison, and let the user select, mix, or redo until the visual direction is locked.
4
+
5
+ **Output**: `.workflow/impeccable/design-system/{project}/MASTER.md` (selected variant) + `.workflow/impeccable/DESIGN.md` (bridged, if bridge succeeds)
6
+
7
+ **Position in pipeline**: After `teach` (PRODUCT.md exists), before `shape` (visual direction locked). Can be called standalone or as part of `ui-craft` build chain.
8
+
9
+ ## Prerequisites
10
+
11
+ - `.workflow/impeccable/PRODUCT.md` exists (run `teach` first if not)
12
+ - Python 3 available (for `search.py`)
13
+ - Node.js available (for `render-prototype.js`; optional — falls back to text comparison)
14
+
15
+ ## Step 1: Extract Context from PRODUCT.md
16
+
17
+ Read `.workflow/impeccable/PRODUCT.md` and extract:
18
+
19
+ | Field | Source | Use |
20
+ |-------|--------|-----|
21
+ | register | `## Register` | brand → expressive keywords, product → functional keywords |
22
+ | personality | `## Brand Personality` | Primary query keywords |
23
+ | anti_references | `## Anti-references` | Exclude matching styles |
24
+ | industry | Inferred from `## Product Purpose` + `## Users` | Industry keyword |
25
+ | project_name | `# Product` title | `-p` flag value |
26
+
27
+ Also scan `.workflow/impeccable/design-system/harvest/rejected-variants/` for prior rejection feedback — append to anti_references if found.
28
+
29
+ ## Step 2: Build Variant Keyword Sets
30
+
31
+ Generate `styles_count` (default 3, range 2-5 via `--styles` flag) contrasting keyword sets:
32
+
33
+ ```
34
+ variant_1: "${industry} ${personality} conservative clean"
35
+ variant_2: "${industry} ${personality} expressive bold"
36
+ variant_3: "${industry} ${personality} premium refined"
37
+ ```
38
+
39
+ Adjust keywords to ensure variants diverge meaningfully. If register is `brand`, lean toward visual keywords; if `product`, lean toward functional keywords.
40
+
41
+ ## Step 3: Generate Variants
42
+
43
+ Resolve script path (project-local → installed fallback):
44
+
45
+ ```bash
46
+ SCRIPT_PATH="workflows/impeccable/ui-search/search.py"
47
+ [ ! -f "$SCRIPT_PATH" ] && SCRIPT_PATH="$HOME/.maestro/workflows/impeccable/ui-search/search.py"
48
+ ```
49
+
50
+ For each variant:
51
+
52
+ ```bash
53
+ python "$SCRIPT_PATH" "${variant_keywords}" --design-system -p "${project_name}" -f markdown
54
+ ```
55
+
56
+ Save output as `MASTER_A.md`, `MASTER_B.md`, `MASTER_C.md` in a temp directory.
57
+
58
+ ## Step 4: Render HTML Prototypes
59
+
60
+ Resolve render script:
61
+
62
+ ```bash
63
+ RENDER_PATH="workflows/impeccable/ui-search/render-prototype.js"
64
+ [ ! -f "$RENDER_PATH" ] && RENDER_PATH="$HOME/.maestro/workflows/impeccable/ui-search/render-prototype.js"
65
+ ```
66
+
67
+ ```bash
68
+ node "$RENDER_PATH" MASTER_A.md MASTER_B.md MASTER_C.md \
69
+ --output "{temp_dir}/prototypes" --project "${project_name}"
70
+ ```
71
+
72
+ Produces `prototype_A.html`, `prototype_B.html`, `prototype_C.html` + `manifest.json`.
73
+
74
+ If Node.js unavailable → W008, skip to Step 5 text-only mode.
75
+
76
+ ## Step 5: Present for Comparison
77
+
78
+ **Visual mode** (prototypes rendered):
79
+
80
+ 1. Start visualize server:
81
+ ```bash
82
+ maestro brainstorm-visualize start --dir "{temp_dir}/prototypes/"
83
+ ```
84
+ 2. Direct user to compare view:
85
+ ```
86
+ Design variants ready:
87
+ {url}/compare?files=prototype_A.html,prototype_B.html,prototype_C.html
88
+
89
+ [A] {style_A} — {font_heading_A}/{font_body_A}
90
+ [B] {style_B} — {font_heading_B}/{font_body_B}
91
+ [C] {style_C} — {font_heading_C}/{font_body_C}
92
+ ```
93
+ 3. AskUserQuestion: **Approve [A/B/C]** | **Mix** | **Redo**
94
+ 4. Stop server after decision.
95
+
96
+ **Text-only fallback**: Display style name, color palette, typography, effects for each variant. AskUserQuestion: pick [1-N] | redo.
97
+
98
+ **Auto mode** (`-y`): Select variant 1 without asking.
99
+
100
+ ## Step 6: Mix Protocol (if selected)
101
+
102
+ 1. AskUserQuestion — dimension selection:
103
+ ```
104
+ Which dimensions from which variant?
105
+ Colors: [A] / [B] / [C]
106
+ Typography: [A] / [B] / [C]
107
+ Spacing: [A] / [B] / [C]
108
+ Shadows: [A] / [B] / [C]
109
+ ```
110
+
111
+ 2. Extract sections by Markdown heading from each variant:
112
+ - Colors → `### Color Palette`
113
+ - Typography → `### Typography`
114
+ - Spacing → `### Spacing Variables`
115
+ - Shadows → `### Shadow Depths`
116
+
117
+ 3. Assemble new MASTER.md: selected blocks + remaining sections from primary variant.
118
+
119
+ 4. Re-render mixed prototype and show for confirmation. **Approve** → Step 7. **Redo mix** → back to step 1 (max 2 rounds).
120
+
121
+ ## Step 7: Persist & Harvest
122
+
123
+ **Persist selected variant**:
124
+
125
+ ```
126
+ .workflow/impeccable/design-system/{project-slug}/MASTER.md
127
+ ```
128
+
129
+ Copy directly if approved, or write assembled content if mixed.
130
+
131
+ **Harvest rejected variants**: Move rejected `MASTER_{N}.md` to `.workflow/impeccable/design-system/harvest/rejected-variants/` with YAML frontmatter:
132
+
133
+ ```yaml
134
+ ---
135
+ status: rejected
136
+ date: "{ISO-8601}"
137
+ selected_variant: "{winner}"
138
+ user_feedback: "{reason if provided}"
139
+ ---
140
+ ```
141
+
142
+ ## Step 8: Bridge to DESIGN.md
143
+
144
+ After MASTER.md is persisted, automatically run the bridge transformation:
145
+
146
+ 1. Read deferred: `~/.maestro/workflows/impeccable/design.md` Phase B
147
+ 2. Transform MASTER.md → `.workflow/impeccable/DESIGN.md`
148
+ 3. Register: `maestro spec add ui "Design System: {project}" "{style}" --keywords design,colors,typography --ref .workflow/impeccable/DESIGN.md`
149
+ 4. Refresh: `maestro impeccable load-context`
150
+
151
+ If bridge fails → W005, MASTER.md still available for manual conversion.
152
+
153
+ ```
154
+ Explore complete: {style_name}
155
+ DESIGN.md: {N} colors, {heading}/{body}, {shadow_count} elevations
156
+ Variants compared: {total} | Selected: {winner} | Rejected: {rejected_count}
157
+ ```
@@ -44,6 +44,8 @@ Discovery includes at least one user-answer round unless PRODUCT.md, DESIGN.md,
44
44
 
45
45
  Force a visual decision on three fronts. Skip anything PRODUCT.md or DESIGN.md already answers; ask only what's missing.
46
46
 
47
+ **Lite Mode**: When DESIGN.md exists (typically produced by design-explore → bridge), the visual direction is already locked. **Skip all three questions below** — the design system has already decided color strategy, theme, and visual anchors. Announce once: *"Visual direction inherited from DESIGN.md ({style_name}), skipping color/theme/anchor questions."* Proceed directly to Scope.
48
+
47
49
  - **Color strategy for this surface.** Pick one: Restrained / Committed / Full palette / Drenched. Can override the project default if the surface earns it (e.g. a drenched hero inside an otherwise Restrained product).
48
50
  - **Theme via scene sentence.** Write one sentence of physical context for this surface: who uses it, where, under what ambient light, in what mood. The sentence forces dark vs light. If it doesn't, add detail until it does.
49
51
  - **Two or three named anchor references.** Specific products, brands, objects. Not adjectives like "modern" or "clean."
@@ -71,6 +73,8 @@ Scope answers are task-scoped. Don't write them to PRODUCT.md or DESIGN.md; carr
71
73
 
72
74
  ## Phase 1.5: Visual Direction Probe (Capability-Gated)
73
75
 
76
+ **Skip condition**: If DESIGN.md exists (visual baseline already locked by design-explore), **skip Phase 1.5 entirely**. The design system prototypes have already been compared and approved — generating additional visual probes would be redundant. Announce: *"Phase 1.5 skipped — visual direction locked by design-explore."* Proceed to Phase 2: Design Brief.
77
+
74
78
  After the discovery interview, generate a small set of visual direction probes **before** writing the final brief when all of these are true:
75
79
 
76
80
  - The work is **net-new** or directionally ambiguous enough that visual exploration will clarify the brief.