SDesign

网站介绍

SDesign 是独立开发者 Simon 林（Simon Lin）做的一套设计系统库，README 标注版本 v2.1，站点页脚写明「纯分享免费 · 素材策展自 open-design」，关于页留了邮箱 [email protected] 与抖音号 Simon林，并说明作者另接企业级页面设计和 AI 落地咨询。首页标语直白：「让你的 AI 做出不像 AI 做的网页 / 落地页」——它要治的是模型默认审美：居中大标题、三张一模一样的卡、紫蓝渐变、emoji 和一串营销套话。

站点是中文优先的中英双语单页应用，React + Vite + Tailwind CSS 构建，动效走 GSAP，字体用 Archivo Black、Space Grotesk 与 Noto Sans SC。全部 64 套设计的数据打包在前端脚本里，不需要登录、不需要后端请求，点开即看；每套在 /skins/<家族>/<设计>.png 下有一张 1440×1600 的范本页长图。

6 个美学家族，64 套不重样的设计

家族按数量分布是：极简留白 32 套、科技暗黑 15 套、暖色人文 7 套、电影暗调 3 套、数据密集 3 套、大胆彩色 4 套。首页是可横向拖拽、也可用左右箭头滑动的家族卡片，每张写着描述和套数，例如极简留白是「大面积留白 + 中性色 + 单一强调色；克制、为阅读而生」，数据密集则是「图表/表格/指标为主 + 紧间距 + 暗色仪表盘」。点「查看全部」进入该家族的 16:11 图卡网格，鼠标悬停时竖长范本图会从顶部缓缓滚到底部；再点开是左侧大图、右侧提示词与「复制提示词」按钮，复制成功显示「已复制 ✓」。

具体设计以真实产品的公开视觉风格命名：极简留白里有 Airbnb、Stripe、Notion、Apple、Vercel、Figma、小红书、微信；科技暗黑里有 Linear、Supabase、Warp、Nvidia、Perplexity；暖色人文里有 Claude、Cursor、Arc、Mistral AI；电影暗调是 Raycast、SpaceX、Runway；数据密集是 Binance、ClickHouse、GitHub；大胆彩色是 Duolingo、Canva、Hugging Face、Wise。README 附了品牌中立声明：这些品牌名只用于描述公开视觉风格，项目与它们无关联，也非官方资产。

每套提示词里到底写了什么

一套设计 = 一段自包含提示词，分四段：精确设计 token、本美学特别说明、内联的去 AI 味硬规则、任务说明。token 是硬值，写明「必须用这些精确值，不准自创别的颜色」，例如 Loom 是 #ffffff 背景、#f7f7f8 卡片、#e4e4e7 边框、#625df5 唯一强调色、卡片 8px / 按钮 6px 圆角、Inter 字体栈、正文行高 1.5 / 标题 1.20；Linear 换成 #08090a 底、#191a1b 卡面、#5e6ad2、12px / 8px；Claude 走 #f5f4ed 羊皮纸底、#c96442 陶土色、Anthropic Serif 衬线、16px / 12px；Duolingo 是 #58cc02 配 Feather Bold 与 Mona Sans；Binance 是 #f0b90b 与 24px 卡片圆角；GitHub 是 #0969da 与 6px 按钮。

硬规则是一份机械可执行的纪律：色彩只用给定 token、强调色只准一个、别加与美学无关的渐变霓虹玻璃质感；字体栈里若有私有或拿不到的字体（Anthropic Serif、SF Pro、商业版 Inter Variable），要换成 Google Fonts 里最接近的公开字体并用 @import 真正加载；默认不用 emoji；文案禁用营销套话与 Lorem ipsum；正文字号 16–20px、行高足够；信息密度与 CTA 数量按页面类型给（落地页通常一个主 CTA，定价 / 仪表盘类可以多个）；别把三张一模一样的卡硬挤一行；中文内容要求中英文之间加空格、标点用全角、标题不用斜体、避免行首孤字。规则与本美学冲突时以「本美学特别说明」为准——大胆彩色明确允许 emoji、插画、硬边与故意不精致；数据密集允许一屏多图表多 CTA；暖色人文就该衬线大留白；电影暗调就该大尺度渐变与超大字。

任务段默认要求输出单文件 HTML + 内联 CSS（除非用户指定 React / Vue / Tailwind），带 viewport 与基本 reset，保证手机不崩。作者也说明这套库以网页 / 落地页为主，token 是 CSS 单位；做 PPT 或海报时借它的配色、字体气质和纪律即可，尺寸自行换算。

三条使用路径与自检

最省事的是零门槛路径：到 aesthetics/<家族>/<设计>/ 打开 prompt.md，复制整段粘给任意 AI（README 点名 Claude / ChatGPT / Codex），后面接一句「给我做个 XXX 页面」。第二条是让 Agent 自动选：仓库里的 SKILL.md 与 rules/anti-slop.md 组成 sdesign-design Skill，可用 npx skills add https://github.com/simonlin1212/sdesign --skill sdesign-design 装进 Claude Code，流程固定为三步——按氛围词或点名的大牌选家族（如「像 Linear」→ tech-dark/linear-app，「温暖有人味」→ warm-humanist/claude）→ 读对应 prompt.md 严格照 token → 产出并自检。第三条是工程化：改 scripts/skins.json 后跑 node scripts/fetch-from-od.mjs 与 node scripts/build-prompts.mjs 重新生成全部 prompt.md 与 index.json；产出可跑 node scripts/audit.mjs 你的产出.html 查机械违规，主观品味则对照该设计的 reference.png。仓库另有 illustration/ 支线，给中文正文配手绘风草图，走的是「反精致 AI 配图」这条思路。

为什么是 64 而不是 150+

README 的对比表写得很直接：网上设计资源合集常有几百条但真伪难辨；上游 nexu-io/open-design 原库标称 150+，作者逐张看图后发现约一半是同一模板换色凑数，于是全部删掉，只留 64 个彼此真不一样的设计。差异点还有三处：提示词一键自包含而非自己拼、去 AI 味规则按美学分条件而非通用建议、形态是一个能塞给编码 Agent 的 skill 而非桌面 app 加 MCP。作者称实测 Claude 级与小米 MiMo 级模型都能遵守这套规则。

价格与协议

站点纯分享免费，零安装、不登录，浏览家族、看范本图、复制提示词都不设门槛。仓库代码与文档采用 MIT，视觉素材策展自 nexu-io/open-design（Apache-2.0）并在 NOTICE 中致谢。站点首页的 GitHub 入口指向 simonlin1212/SDesign，截至 2026 年 11 月该地址已无法访问，可查阅的是同名镜像仓库 fisher0627/SDesign，README、SKILL.md 与 64 套 reference.png 在其中完整保留。

适用人群

• 用 AI 写落地页但总觉得出图一个样：直接拿一套提示词锁死配色、字体与版式纪律
• 给客户做官网、活动页：按品牌调性从 6 个家族里挑一个，产出的页面有明确出处
• Claude Code 等编码 Agent 用户：把 Skill 放进项目，让 Agent 自己选美学并跑 audit 自检
• 想研究真实产品配色与字体栈的人：64 份 tokens.json 与 reference.html 可直接对照