DESIGN SYSTEMS
给 AI agent 用的设计系统。
为你的网站或 App 挑一整套设计系统（浅色和深色模式下的配色、字体、字号阶梯、圆角和间距），一步交给 Codex 或 Claude Code：用 DESIGN.md 文件、shadcn 主题，或者一句提示词。
平台
风格
用途
24 套设计系统
- Paper网页安静、克制、易读，像一页排版讲究的书。标题字体 Source Serif 4
- Swiss网页黑、白和一个信号红，放在严格的网格上。标题字体 Archivo
- Ledger网页为数字而生的紧凑深色界面，配一个终端琥珀色强调色。标题字体 IBM Plex Sans
- Mono网页干净的白底、Geist 字体和一个钴蓝色，为文档和开发者工具设计。标题字体 Geist
- Atelier网页象牙白、墨黑和精致的衬线字，像一本时装品牌画册。标题字体 Cormorant Garamond
- Noir网页黑色、骨白色和超大衬线字，作品本身就是唯一的颜色。标题字体 Instrument Serif
- Harbor网页藏青、留白和稳重的结构，为严肃的 B2B 产品设计。标题字体 Plus Jakarta Sans
- Nordic网页低饱和的蓝、柔和的灰和安静的自信，为效率工具设计。标题字体 Manrope
- Clinic网页沉稳的青绿色、清晰的字体和直白的语言，为医疗网站设计。标题字体 Source Sans 3
- Terra网页苔绿、亚麻和陶土色，为贴近土地的品牌设计。标题字体 DM Serif Display
- Chalk网页明亮、圆润、给人鼓励，像一间好教室。标题字体 Nunito
- Pop网页粗黑描边、硬投影和柠檬黄，故意做得很大声。标题字体 Unbounded
- StrideApp大号窄体数字和充满活力的橙色，为运动类 App 设计。标题字体 Barlow Condensed
- PantryApp温暖、亲切、有食欲，为外卖和点餐 App 设计。标题字体 Bricolage Grotesque
- CalmApp柔和的鼠尾草绿、温柔的衬线字和充足的呼吸感。标题字体 Newsreader
- WalletApp清楚的余额、安心的绿色和值得信赖的数字。标题字体 Manrope
- FocusApp一张白纸和一个蓝色，你和任务之间再无其他。标题字体 Instrument Sans
- ChatterApp圆润的气泡、亲切的青色，让对话始终居中。标题字体 Plus Jakarta Sans
- VoyageApp通栏大图、海洋蓝和一款像明信片的衬线字。标题字体 DM Serif Display
- BoutiqueApp通屏商品图、Bodoni 衬线字和黑白配色，像一扇橱窗。标题字体 Bodoni Moda
- QuestApp连胜、经验值和厚实的按钮，让练习像玩游戏一样。标题字体 Nunito
- CareApp每屏只做一件清楚的事，给只想把事办完的患者。标题字体 Source Sans 3
- VinylApp封面优先、一个亮粉色播放键，和一间适合听歌的暗房。标题字体 Syne
- HearthApp深色安静的主屏上，亮着一盏暖琥珀色的灯。标题字体 Outfit
每套设计系统包含什么
- 浅色和深色模式的配色，按 shadcn 和 Tailwind 的方式命名：background、primary、muted、border、ring，以及五个图表色。所有文字颜色和背景的对比度都符合 WCAG 标准。
- 字体和字号阶梯，全部来自 Google Fonts，从大标题到小字都有字号、行高和字距。
- 圆角、间距和阴影；网站还有网格规范，App 则有触控尺寸、底部标签栏和页面边距。
- 使用规则：适合什么产品、该做哪些组件、要避免什么，让 agent 做出符合这套系统的选择。
三种用法
- 复制提示词，粘贴到 Codex 或 Claude Code。提示词会让 agent 读取这套系统的 DESIGN.md 原文，保存到你的项目里，之后每个界面都照着做。
- 下载 DESIGN.md，自己放到项目根目录。见 DESIGN.md 是什么，怎么用。
- 一行命令安装 shadcn 主题，或者把
globals.css粘贴到 Tailwind v4 项目里。
全部 24 套设计系统也放在了 GitHub 上，包括 DESIGN.md 文件和 shadcn 主题：ummydev/design-md。
网站和 App 两类
网站类适合落地页、官网、文档和后台。App 类为手机屏幕设计：更大的触控区域、底部标签栏，以及在 iOS 和 Android 上都清晰易读的字号。每套系统都有自己的风格，刻意避开紫色渐变、毛玻璃这类让 AI 做的界面千篇一律的套路。
常见问题
这些设计系统免费吗？
免费。每套设计系统都可以免费复制、下载，用在你自己的项目里。
除了 Codex 和 Claude Code，其他 AI 工具能用吗？
能用。DESIGN.md 是普通的 Markdown 文件，任何能读取项目文件的 agent 都能照着做；shadcn 主题在任何 shadcn 或 Tailwind 项目里都能用。
可以修改设计系统吗？
可以。直接改 DESIGN.md 或 CSS 变量，或者让 agent 帮你改，比如把主色换成你的品牌色。