feat: anti-slop design constraints + delete duplicate constants

Tightens design-consultation and design-shotgun to push back on the
convergence traps every AI design tool falls into.

Changes:
- scripts/resolvers/constants.ts: add "system-ui as primary font" to
  AI_SLOP_BLACKLIST. Document Space Grotesk as the new "safe alternative
  to Inter" convergence trap alongside the existing overused fonts.
- scripts/gen-skill-docs.ts: delete duplicate AI slop constants block
  (dead code — scripts/resolvers/constants.ts is the live source).
  Prevents drift between the two definitions.
- design-consultation/SKILL.md.tmpl: add Space Grotesk + system-ui to
  overused/slop lists. Add "anti-convergence directive" — vary across
  generations in the same project. Add Phase 1 "memorable-thing forcing
  question" (what's the one thing someone will remember?). Add Phase 5
  "would a human designer be embarrassed by this?" self-gate before
  presenting variants.
- design-shotgun/SKILL.md.tmpl: anti-convergence directive — each
  variant must use a different font, palette, and layout. If two
  variants look like siblings, one of them failed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-04-17 05:53:32 +08:00
parent eade4a4fe1
commit 1825a7f267
8 changed files with 88 additions and 41 deletions

View File

@@ -736,6 +736,15 @@ Ask the user a single question that covers everything you need to know. Pre-fill
If the README or office-hours output gives you enough context, pre-fill and confirm: *"From what I can see, this is [X] for [Y] in the [Z] space. Sound right? And would you like me to research what's out there in this space, or should I work from what I know?"*
**Memorable-thing forcing question.** Before moving on, ask the user: *"What's the one
thing you want someone to remember after they see this product for the first time?"*
One sentence answer. Could be a feeling ("this is serious software for serious work"),
a visual ("the blue that's almost black"), a claim ("faster than anything else"), or
a posture ("for builders, not managers"). Write it down. Every subsequent design
decision should serve this memorable thing. Design that tries to be memorable for
everything is memorable for nothing.
---
## Phase 2: Research (only if user said yes)
@@ -919,7 +928,17 @@ The SAFE/RISK breakdown is critical. Design coherence is table stakes — every
Papyrus, Comic Sans, Lobster, Impact, Jokerman, Bleeding Cowboys, Permanent Marker, Bradley Hand, Brush Script, Hobo, Trajan, Raleway, Clash Display, Courier New (for body)
**Overused fonts** (never recommend as primary — use only if user specifically requests):
Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins
Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins, Space Grotesk.
Space Grotesk is on the list specifically because every AI design tool converges on it
as "the safe alternative to Inter." That's the convergence trap. Treat it the same as
Inter: only use if the user asks for it by name.
**Anti-convergence directive:** Across multiple generations in the same project, VARY
light/dark, fonts, and aesthetic directions. Never propose the same choices twice
without explicit justification. If the user's prior session used Geist + dark + editorial,
propose something different this time (or explicitly acknowledge you're doubling down
because it fits the brief). Convergence across generations is slop.
**AI slop anti-patterns** (never include in your recommendations):
- Purple/violet gradients as default accent
@@ -928,6 +947,7 @@ Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins
- Uniform bubbly border-radius on all elements
- Gradient buttons as the primary CTA pattern
- Generic stock-photo-style hero sections
- system-ui / -apple-system as the primary display or body font (the "I gave up on typography" signal)
- "Built for X" / "Designed for Y" marketing copy patterns
### Coherence Validation
@@ -983,6 +1003,13 @@ $D check --image "$_DESIGN_DIR/variant-A.png" --brief "<the original brief>"
Show each variant inline (Read tool on each PNG) for instant preview.
**Before presenting to the user, self-gate:** For each variant, ask yourself: *"Would
a human designer be embarrassed to put their name on this?"* If yes, discard the
variant and regenerate. This is a hard gate. A mediocre AI mockup is worse than no
mockup. Embarrassment triggers include: purple gradient hero, 3-column SaaS grid,
centered-everything, Inter body text, generic stock-photo vibe, system-ui font,
gradient CTA button, bubble-radius everything. Any of those = reject and regenerate.
Tell the user: "I've generated 3 visual directions applying your design system to a realistic [product type] screen. Pick your favorite in the comparison board that just opened in your browser. You can also remix elements across variants."
### Comparison Board + Feedback Loop

View File

@@ -93,6 +93,15 @@ Ask the user a single question that covers everything you need to know. Pre-fill
If the README or office-hours output gives you enough context, pre-fill and confirm: *"From what I can see, this is [X] for [Y] in the [Z] space. Sound right? And would you like me to research what's out there in this space, or should I work from what I know?"*
**Memorable-thing forcing question.** Before moving on, ask the user: *"What's the one
thing you want someone to remember after they see this product for the first time?"*
One sentence answer. Could be a feeling ("this is serious software for serious work"),
a visual ("the blue that's almost black"), a claim ("faster than anything else"), or
a posture ("for builders, not managers"). Write it down. Every subsequent design
decision should serve this memorable thing. Design that tries to be memorable for
everything is memorable for nothing.
---
## Phase 2: Research (only if user said yes)
@@ -212,7 +221,17 @@ The SAFE/RISK breakdown is critical. Design coherence is table stakes — every
Papyrus, Comic Sans, Lobster, Impact, Jokerman, Bleeding Cowboys, Permanent Marker, Bradley Hand, Brush Script, Hobo, Trajan, Raleway, Clash Display, Courier New (for body)
**Overused fonts** (never recommend as primary — use only if user specifically requests):
Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins
Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins, Space Grotesk.
Space Grotesk is on the list specifically because every AI design tool converges on it
as "the safe alternative to Inter." That's the convergence trap. Treat it the same as
Inter: only use if the user asks for it by name.
**Anti-convergence directive:** Across multiple generations in the same project, VARY
light/dark, fonts, and aesthetic directions. Never propose the same choices twice
without explicit justification. If the user's prior session used Geist + dark + editorial,
propose something different this time (or explicitly acknowledge you're doubling down
because it fits the brief). Convergence across generations is slop.
**AI slop anti-patterns** (never include in your recommendations):
- Purple/violet gradients as default accent
@@ -221,6 +240,7 @@ Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins
- Uniform bubbly border-radius on all elements
- Gradient buttons as the primary CTA pattern
- Generic stock-photo-style hero sections
- system-ui / -apple-system as the primary display or body font (the "I gave up on typography" signal)
- "Built for X" / "Designed for Y" marketing copy patterns
### Coherence Validation
@@ -276,6 +296,13 @@ $D check --image "$_DESIGN_DIR/variant-A.png" --brief "<the original brief>"
Show each variant inline (Read tool on each PNG) for instant preview.
**Before presenting to the user, self-gate:** For each variant, ask yourself: *"Would
a human designer be embarrassed to put their name on this?"* If yes, discard the
variant and regenerate. This is a hard gate. A mediocre AI mockup is worse than no
mockup. Embarrassment triggers include: purple gradient hero, 3-column SaaS grid,
centered-everything, Inter body text, generic stock-photo vibe, system-ui font,
gradient CTA button, bubble-radius everything. Any of those = reject and regenerate.
Tell the user: "I've generated 3 visual directions applying your design system to a realistic [product type] screen. Pick your favorite in the comparison board that just opened in your browser. You can also remix elements across variants."
{{DESIGN_SHOTGUN_LOOP}}