sdesign-design
Installation
SKILL.md
SDesign — 去 AI 味设计系统库
用户要做"好看的东西"时,不要凭默认审美直接写(那会是 AI 烂味:居中大标题 + 三张一样的卡 + 紫蓝渐变 + emoji + 空话)。改走这套流程。本库以网页/落地页为主(token 是 CSS 单位)。
流程(三步)
- 选美学 —— 按用户的氛围词或他点名的大牌,从下表选一个家族,再进
aesthetics/<家族>/选一个设计系统(每族有多个,见目录)。- 用户说"科技感/开发者/暗色" →
tech-dark;说"像 Linear" →tech-dark/linear-app。 - 用户说"温暖/有人味/像 Claude" →
warm-humanist/claude。说"高级/像 Apple" →minimal-editorial/apple。 - 不确定就问一句,或默认挑该家族第一个设计系统。
- 用户说"科技感/开发者/暗色" →
- 读设计系统的
prompt.md——aesthetics/<家族>/<设计系统>/prompt.md。里面有精确 token + 本美学特别说明 + 内联的去AI味规则。严格照它的 token,一个强调色都不许改。 - 做 + 自检 —— 默认输出单文件 HTML + 内联 CSS(除非用户指定 React/Vue/Tailwind),加
<meta name="viewport">+ 基本 reset。做完可跑node scripts/audit.mjs <产出>查机械违规;主观品味对照该设计系统reference.png。
铁律(任何美学都遵守)
rules/anti-slop.md 是总规矩,已内联进每个 prompt。核心:只用 token 给的颜色、一个强调色、字体不可获取就换 Google Fonts 公开版、文案别空话、信息密度/CTA 按页面类型给、版式别东倒西歪。
⚠️ 规则凡与某美学冲突,以该设计系统
prompt.md里的「本美学特别说明」为准:大胆彩色可用 emoji/插画/硬边/故意"丑";数据密集可一屏多信息、多 CTA;暖色人文就该衬线大留白;电影暗调就该大尺度渐变 + 超大字。