mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-05 05:05:08 +02:00
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
@@ -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
|
||||
|
||||
@@ -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}}
|
||||
|
||||
@@ -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 <accent>`)
|
||||
- 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 <accent>`)
|
||||
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.
|
||||
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -1211,6 +1211,7 @@ FIX TO 10: Rewrite vague UI descriptions with specific alternatives.
|
||||
8. Colored left-border on cards (`border-left: 3px solid <accent>`)
|
||||
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?
|
||||
|
||||
@@ -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 <accent>`)',
|
||||
'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 ───────────────────────────────────
|
||||
|
||||
|
||||
@@ -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 <accent>`)',
|
||||
'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) */
|
||||
|
||||
Reference in New Issue
Block a user