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
+2 -38
View File
@@ -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 ───────────────────────────────────
+9 -1
View File
@@ -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) */