From 1825a7f2670a2f2d13117366d05d2ae5ea7fb33c Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Fri, 17 Apr 2026 05:53:32 +0800 Subject: [PATCH] feat: anti-slop design constraints + delete duplicate constants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- design-consultation/SKILL.md | 29 +++++++++++++++++++++- design-consultation/SKILL.md.tmpl | 29 +++++++++++++++++++++- design-review/SKILL.md | 2 ++ design-shotgun/SKILL.md | 9 +++++++ design-shotgun/SKILL.md.tmpl | 9 +++++++ plan-design-review/SKILL.md | 1 + scripts/gen-skill-docs.ts | 40 ++----------------------------- scripts/resolvers/constants.ts | 10 +++++++- 8 files changed, 88 insertions(+), 41 deletions(-) diff --git a/design-consultation/SKILL.md b/design-consultation/SKILL.md index 68e48879..f717625a 100644 --- a/design-consultation/SKILL.md +++ b/design-consultation/SKILL.md @@ -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 "" 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 diff --git a/design-consultation/SKILL.md.tmpl b/design-consultation/SKILL.md.tmpl index 247b63e2..b0e66c47 100644 --- a/design-consultation/SKILL.md.tmpl +++ b/design-consultation/SKILL.md.tmpl @@ -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 "" 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}} diff --git a/design-review/SKILL.md b/design-review/SKILL.md index b87c509d..9c404a23 100644 --- a/design-review/SKILL.md +++ b/design-review/SKILL.md @@ -1097,6 +1097,7 @@ The test: would a human designer at a respected studio ever ship this? - Colored left-border on cards (`border-left: 3px solid `) - Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...") - Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height) +- system-ui or `-apple-system` as the PRIMARY display/body font — the "I gave up on typography" signal. Pick a real typeface. **10. Performance as Design** (6 items) - LCP < 2.0s (web apps), < 1.5s (informational sites) @@ -1293,6 +1294,7 @@ Tie everything to user goals and product objectives. Always suggest specific imp 8. Colored left-border on cards (`border-left: 3px solid `) 9. Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...") 10. Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height) +11. system-ui or `-apple-system` as the PRIMARY display/body font — the "I gave up on typography" signal. Pick a real typeface. Source: [OpenAI "Designing Delightful Frontends with GPT-5.4"](https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4) (Mar 2026) + gstack design methodology. diff --git a/design-shotgun/SKILL.md b/design-shotgun/SKILL.md index d254d9d2..95d5bab2 100644 --- a/design-shotgun/SKILL.md +++ b/design-shotgun/SKILL.md @@ -716,6 +716,15 @@ C) "Name" — one-line visual description of this direction Draw on DESIGN.md, taste memory, and the user's request to make each concept distinct. +**Anti-convergence directive (hard requirement):** Each variant MUST use a different +font family, color palette, and layout approach. If two variants look like siblings +— same typographic feel, overlapping color temperature, comparable layout rhythm — +one of them failed. Regenerate the weaker one with a deliberately different direction. + +Concrete test: if someone could swap the headline text between two variants without +noticing, they're too similar. Variants should feel like they came from three +different design teams, not the same team at three different coffee levels. + ### Step 3b: Concept Confirmation Use AskUserQuestion to confirm before spending API credits: diff --git a/design-shotgun/SKILL.md.tmpl b/design-shotgun/SKILL.md.tmpl index 2542c7e8..c0be886e 100644 --- a/design-shotgun/SKILL.md.tmpl +++ b/design-shotgun/SKILL.md.tmpl @@ -161,6 +161,15 @@ C) "Name" — one-line visual description of this direction Draw on DESIGN.md, taste memory, and the user's request to make each concept distinct. +**Anti-convergence directive (hard requirement):** Each variant MUST use a different +font family, color palette, and layout approach. If two variants look like siblings +— same typographic feel, overlapping color temperature, comparable layout rhythm — +one of them failed. Regenerate the weaker one with a deliberately different direction. + +Concrete test: if someone could swap the headline text between two variants without +noticing, they're too similar. Variants should feel like they came from three +different design teams, not the same team at three different coffee levels. + ### Step 3b: Concept Confirmation Use AskUserQuestion to confirm before spending API credits: diff --git a/plan-design-review/SKILL.md b/plan-design-review/SKILL.md index bc9a1d16..6003e81f 100644 --- a/plan-design-review/SKILL.md +++ b/plan-design-review/SKILL.md @@ -1211,6 +1211,7 @@ FIX TO 10: Rewrite vague UI descriptions with specific alternatives. 8. Colored left-border on cards (`border-left: 3px solid `) 9. Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...") 10. Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height) +11. system-ui or `-apple-system` as the PRIMARY display/body font — the "I gave up on typography" signal. Pick a real typeface. Source: [OpenAI "Designing Delightful Frontends with GPT-5.4"](https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4) (Mar 2026) + gstack design methodology. - "Cards with icons" → what differentiates these from every SaaS template? diff --git a/scripts/gen-skill-docs.ts b/scripts/gen-skill-docs.ts index 4da9203f..16cae42b 100644 --- a/scripts/gen-skill-docs.ts +++ b/scripts/gen-skill-docs.ts @@ -44,44 +44,8 @@ const HOST_ARG_VAL: HostArg = (() => { let HOST: Host = HOST_ARG_VAL === 'all' ? 'claude' : HOST_ARG_VAL; // HostPaths, HOST_PATHS, and TemplateContext imported from ./resolvers/types (line 7-8) - -// ─── Shared Design Constants ──────────────────────────────── - -/** gstack's 10 AI slop anti-patterns — shared between DESIGN_METHODOLOGY and DESIGN_HARD_RULES */ -const AI_SLOP_BLACKLIST = [ - 'Purple/violet/indigo gradient backgrounds or blue-to-purple color schemes', - '**The 3-column feature grid:** icon-in-colored-circle + bold title + 2-line description, repeated 3x symmetrically. THE most recognizable AI layout.', - 'Icons in colored circles as section decoration (SaaS starter template look)', - 'Centered everything (`text-align: center` on all headings, descriptions, cards)', - 'Uniform bubbly border-radius on every element (same large radius on everything)', - 'Decorative blobs, floating circles, wavy SVG dividers (if a section feels empty, it needs better content, not decoration)', - 'Emoji as design elements (rockets in headings, emoji as bullet points)', - 'Colored left-border on cards (`border-left: 3px solid `)', - 'Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...")', - 'Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height)', -]; - -/** OpenAI hard rejection criteria (from "Designing Delightful Frontends with GPT-5.4", Mar 2026) */ -const OPENAI_HARD_REJECTIONS = [ - 'Generic SaaS card grid as first impression', - 'Beautiful image with weak brand', - 'Strong headline with no clear action', - 'Busy imagery behind text', - 'Sections repeating same mood statement', - 'Carousel with no narrative purpose', - 'App UI made of stacked cards instead of layout', -]; - -/** OpenAI litmus checks — 7 yes/no tests for cross-model consensus scoring */ -const OPENAI_LITMUS_CHECKS = [ - 'Brand/product unmistakable in first screen?', - 'One strong visual anchor present?', - 'Page understandable by scanning headlines only?', - 'Each section has one job?', - 'Are cards actually necessary?', - 'Does motion improve hierarchy or atmosphere?', - 'Would design feel premium with all decorative shadows removed?', -]; +// Design constants (AI_SLOP_BLACKLIST, OPENAI_HARD_REJECTIONS, OPENAI_LITMUS_CHECKS) +// live in ./resolvers/constants and are consumed by resolvers directly. // ─── External Host Helpers ─────────────────────────────────── diff --git a/scripts/resolvers/constants.ts b/scripts/resolvers/constants.ts index fa720931..b02d68b0 100644 --- a/scripts/resolvers/constants.ts +++ b/scripts/resolvers/constants.ts @@ -1,6 +1,13 @@ // ─── Shared Design Constants ──────────────────────────────── -/** gstack's 10 AI slop anti-patterns — shared between DESIGN_METHODOLOGY and DESIGN_HARD_RULES */ +/** + * gstack's AI slop anti-patterns — shared between DESIGN_METHODOLOGY and DESIGN_HARD_RULES. + * + * Overused fonts worth calling out in templates (not a pattern to blacklist, but a + * convergence risk): Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, + * Poppins, and increasingly Space Grotesk. Every AI design tool picks one of these. + * Design prompts should bias toward less-common display faces. + */ export const AI_SLOP_BLACKLIST = [ 'Purple/violet/indigo gradient backgrounds or blue-to-purple color schemes', '**The 3-column feature grid:** icon-in-colored-circle + bold title + 2-line description, repeated 3x symmetrically. THE most recognizable AI layout.', @@ -12,6 +19,7 @@ export const AI_SLOP_BLACKLIST = [ 'Colored left-border on cards (`border-left: 3px solid `)', 'Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...")', 'Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height)', + 'system-ui or `-apple-system` as the PRIMARY display/body font — the "I gave up on typography" signal. Pick a real typeface.', ]; /** OpenAI hard rejection criteria (from "Designing Delightful Frontends with GPT-5.4", Mar 2026) */