feat(design-consultation): font procedure, role-scoped overused list, color strategies

The proposal section stops handing out a font menu. "Choosing faces: a
procedure, not a menu" names the subject's world, shortlists per role,
strikes the overused list for that role, verifies availability in-session,
and states the loading strategy. {{OVERUSED_FONTS}} renders the role-scoped
lists from lib/design-catalog.ts: overused as display (the detector's
overused-font set plus the training-data defaults), fine as body/UI on an
Operate or Read surface, mono for data and code, banned in any role, and a
short verified-free list with its verification date. Color approaches become
Restrained / Committed / Full palette / Drenched. The anti-convergence
directive drops light-vs-dark as a dial (it comes from the use scene) and the
three-looks calibration sits under Your Design Knowledge. The slop list is
{{DESIGN_SLOP_BULLETS}}: prose from the catalog, no rule ids, polish-level
tells omitted.

design-html's "Never include (AI slop blacklist)" list keeps its literal
(carve guard) and each line now carries a trailing <!-- id --> naming a
catalog entry, pinned by test/design-catalog.test.ts so the last surviving
duplicate is derived-by-test. Both resolvers are registered and listed in
ARCHITECTURE.md. No carve-guard or budget re-baseline needed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-09-08 15:45:58 +00:00
co-authored by Claude Fable 5.1
parent 9825bfdbb7
commit 71505f8374
9 changed files with 156 additions and 78 deletions
+12 -10
View File
@@ -690,16 +690,18 @@ For framework output, save to:
- Real content extracted from the mockup (never lorem ipsum)
**Never include (AI slop blacklist):**
- Purple/blue gradients as default
- Generic 3-column feature grids
- Center-everything layouts with no visual hierarchy
- Decorative blobs, waves, or geometric patterns not in the mockup
- Stock photo placeholder divs
- "Get Started" / "Learn More" generic CTAs not from the mockup
- Rounded-corner cards with drop shadows as the default component
- Emoji as visual elements
- Generic testimonial sections
- Cookie-cutter hero sections with left-text right-image
- Purple/blue gradients as default <!-- ai-color-palette -->
- Generic 3-column feature grids <!-- feature-grid-3col -->
- Center-everything layouts with no visual hierarchy <!-- centered-everything -->
- Decorative blobs, waves, or geometric patterns not in the mockup <!-- decorative-blobs -->
- 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 -->
- Emoji as visual elements <!-- emoji-decoration -->
- 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.
---
+12 -10
View File
@@ -276,16 +276,18 @@ For framework output, save to:
- Real content extracted from the mockup (never lorem ipsum)
**Never include (AI slop blacklist):**
- Purple/blue gradients as default
- Generic 3-column feature grids
- Center-everything layouts with no visual hierarchy
- Decorative blobs, waves, or geometric patterns not in the mockup
- Stock photo placeholder divs
- "Get Started" / "Learn More" generic CTAs not from the mockup
- Rounded-corner cards with drop shadows as the default component
- Emoji as visual elements
- Generic testimonial sections
- Cookie-cutter hero sections with left-text right-image
- Purple/blue gradients as default <!-- ai-color-palette -->
- Generic 3-column feature grids <!-- feature-grid-3col -->
- Center-everything layouts with no visual hierarchy <!-- centered-everything -->
- Decorative blobs, waves, or geometric patterns not in the mockup <!-- decorative-blobs -->
- 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 -->
- Emoji as visual elements <!-- emoji-decoration -->
- 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.
---