sdesign-design

SDesign — De-AI-Flavor Design System Library

When the user wants to make "something good-looking,"do not just write based on default aesthetics(that would be crappy AI flavor: centered big headline + three identical cards + purple-blue gradient + emoji + empty talk). Instead, follow this process. This library focuses onwebpages/landing pages(tokens are in CSS units).

Process (three steps)

1. Choose aesthetic — based on the user's mood words or the big name they mention, choose one from the table belowfamily, then go into aesthetics/<家族>/ and choose onedesign system(each family has several, see the directory).
   • User says "tech feel/developer/dark" → tech-dark; says "like Linear" → tech-dark/linear-app。
   • User says "warm/human feel/like Claude" → warm-humanist/claude. Says "premium/like Apple" → minimal-editorial/apple。
   • If unsure, ask one question, or by default pick the first design system of that family.
2. Read the design system's prompt.md —— aesthetics/<家族>/<设计系统>/prompt.md. Inside are precise tokens + special notes for this aesthetic + inline de-AI-flavor rules.Strictly follow its tokens; not a single accent color may be changed.
3. Build + self-check — default outputsingle-file HTML + inline CSS(unless the user specifies React/Vue/Tailwind), add <meta name="viewport"> + basic reset. When done, you can run node scripts/audit.mjs <产出> to check mechanical violations; for subjective taste, compare against that design system's reference.png。

Iron rules (all aesthetics follow these)

rules/anti-slop.md is the overall rule, already inlined into every prompt. Core:Only use the colors given by the tokens, one accent color, if the font is unavailable switch to the public Google Fonts version, copy should not be empty talk, information density/CTA given according to page type, layout should not be crooked.

⚠️ If any rule conflicts with an aesthetic, the "special notes for this aesthetic" in that design system's prompt.md takes precedence: bold colormay be used emoji/illustration/hard edges/deliberately "ugly"; data-densemayhave multiple pieces of information and multiple CTAs on one screen; warm humanisticshouldserif with large whitespace; cinematic dark toneshouldlarge-scale gradients + super-large type.

Aesthetic family routing table (64 unique designs in total, the table below lists only representatives; see each directory or index.json)

family key	Chinese	number of design systems	what it feels like	representative design system
minimal-editorial	minimal whitespace	32	neutral colors + single accent color + large whitespace, born for reading	airbnb, stripe, notion
tech-dark	tech dark	15	dark background + high contrast + neon accent, developer temperament (including terminal monospace)	linear-app, supabase, warp
warm-humanist	warm humanistic	7	creamy warm colors + serif + large whitespace, human feel	claude, cursor, arc
cinematic-dark	cinematic dark tone	3	cinematic gradients + super-large type + dark colors, stunning and premium	raycast, spacex, runwayml
data-dense	data-dense	3	Chart-dominant + dark dashboard, high information density	binance, clickhouse, github
bold-playful	Bold colors	4	High saturation / illustration / hard-edged brutalism / oversized numbers, strongly eye-catching	duolingo, canva, huggingface

This libraryWebpages / landing pages first; for PPT/posters, borrow its color scheme + typographic character, and convert dimensions yourself.reference.html is a webpage template. Aesthetic materials curated from nexu-io/open-design (Apache-2.0); this library is not affiliated with any of the listed brands, and brand names only describe their publicly visible visual style.

Illustrations (a separate track, not the 7th family)

What the user wants isa hand-drawn-style illustration in the body text(to depict a judgment/process/state/metaphor), rather than a full-page layout → go to illustration/prompt.md: copy that prompt, replace the variables, and paste it into any image AI to generate the image. Pure white hand-drawn, one image one anchor point, black/orange/red/blue semantic colors, ≥35% whitespace — the sharpest cut to remove the AI feel. (Methodology absorbed from Ian Xiaohei Illustrations, MIT, see NOTICE。)