feat(design): catalog never-lines in the mockup prompt

Ten catalog ids carry `mockupNever` (kicker-above-heading, icon-tile-stack,
gradient-text, ai-color-palette, cream-palette, nested-cards, dark-glow,
pulsing-dot, identical-cards, hero-metrics) and lib/design-catalog.ts exports
their deduped plain-English names as MOCKUP_NEVER_NAMES. briefToPrompt() in
the design binary appends "Never: <names>." before its fixed tail, so `$D
generate | variants | evolve` stop reaching for purple gradients, icon tiles,
and cream defaults before the comparison board opens. The binary still
bundles (`bun build --compile design/src/cli.ts`); ./setup rebuilds it.

design-html's Never-include list now covers every mockupNever id (kicker /
icon tile, hero metric rows, gradient text, cream palette, nested and
identical cards, glow and pulsing dots), each line tagged with its catalog
ids; test/design-catalog.test.ts pins the exact ten flags, the deduped names,
and that the template list is a superset. New design/test/brief.test.ts pins
the prompt shape.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-09-08 16:15:57 +00:00
co-authored by Claude Fable 5.1
parent 3522073ef0
commit d3c3ea27b9
6 changed files with 125 additions and 13 deletions
+7 -1
View File
@@ -699,9 +699,15 @@ For framework output, save to:
**Never include (AI slop blacklist):**
- Purple/blue gradients as default <!-- ai-color-palette -->
- Cream-and-serif default palette <!-- cream-palette -->
- Gradient text <!-- gradient-text -->
- Generic 3-column feature grids <!-- feature-grid-3col -->
- Identical card grids, nested cards <!-- identical-cards --> <!-- nested-cards -->
- Center-everything layouts with no visual hierarchy <!-- centered-everything -->
- Kickers or icon tiles above headings <!-- kicker-above-heading --> <!-- icon-tile-stack -->
- Hero metric rows ("10k+ users") <!-- hero-metrics -->
- Decorative blobs, waves, or geometric patterns not in the mockup <!-- decorative-blobs -->
- Glowing edges or pulsing status dots <!-- dark-glow --> <!-- pulsing-dot -->
- Stock photo placeholder divs <!-- stock-photo-hero -->
- "Get Started" / "Learn More" generic CTAs not from the mockup <!-- generic-cta-copy -->
- Rounded-corner cards with drop shadows as the default component <!-- card-default-component -->
@@ -709,7 +715,7 @@ For framework output, save to:
- Generic testimonial sections <!-- generic-testimonials -->
- Cookie-cutter hero sections with left-text right-image <!-- split-hero-template -->
The comment on each line is the pattern's id in gstack's design catalog (`lib/design-catalog.ts`); the catalog is the authoritative name for these, and the same ids come back from the design detector.
Each `<!-- id -->` is the pattern's id in `lib/design-catalog.ts`; the design detector reports the same ids.
---
+7 -1
View File
@@ -279,9 +279,15 @@ For framework output, save to:
**Never include (AI slop blacklist):**
- Purple/blue gradients as default <!-- ai-color-palette -->
- Cream-and-serif default palette <!-- cream-palette -->
- Gradient text <!-- gradient-text -->
- Generic 3-column feature grids <!-- feature-grid-3col -->
- Identical card grids, nested cards <!-- identical-cards --> <!-- nested-cards -->
- Center-everything layouts with no visual hierarchy <!-- centered-everything -->
- Kickers or icon tiles above headings <!-- kicker-above-heading --> <!-- icon-tile-stack -->
- Hero metric rows ("10k+ users") <!-- hero-metrics -->
- Decorative blobs, waves, or geometric patterns not in the mockup <!-- decorative-blobs -->
- Glowing edges or pulsing status dots <!-- dark-glow --> <!-- pulsing-dot -->
- Stock photo placeholder divs <!-- stock-photo-hero -->
- "Get Started" / "Learn More" generic CTAs not from the mockup <!-- generic-cta-copy -->
- Rounded-corner cards with drop shadows as the default component <!-- card-default-component -->
@@ -289,7 +295,7 @@ For framework output, save to:
- Generic testimonial sections <!-- generic-testimonials -->
- Cookie-cutter hero sections with left-text right-image <!-- split-hero-template -->
The comment on each line is the pattern's id in gstack's design catalog (`lib/design-catalog.ts`); the catalog is the authoritative name for these, and the same ids come back from the design detector.
Each `<!-- id -->` is the pattern's id in `lib/design-catalog.ts`; the design detector reports the same ids.
---