DESIGN.md 示例：免费的网站和 App 模板。

写好一份 DESIGN.md 最快的办法，是从一份完整的开始改。这里有 24 个免费示例：12 个用于网站和后台，12 个用于手机 App。每个都包含浅色和深色模式的配色、字体、字号阶梯、圆角、间距和使用规则，而且都是 agent 可以通过网址直接读取的纯 Markdown 文件。

更新于 2026年11月6日 · 阅读约 5 分钟

一份完整的 DESIGN.md 长什么样

DESIGN.md 开头是写着设计 token 的 YAML 前言，后面是说明怎么使用它们的章节。下面是 Swiss 示例的精简版：

---
version: alpha
name: 'Swiss'
colors:
  primary: '#D70015'
  on-primary: '#FFFFFF'
  surface: '#FFFFFF'
  on-surface: '#0A0A0A'
typography:
  headline-lg:
    fontFamily: 'Archivo'
    fontSize: 56px
    fontWeight: 700
rounded:
  md: 0px
---

## Overview

Swiss follows the International Typographic Style: big grotesque type,
a strict grid, square corners and lots of white.

## Do's and Don'ts

- Do make the headline the biggest thing on the page.
- Don't round corners or add shadows.

完整文件里还有辅助色、从大标题到小字的字号阶梯、间距、组件和版式规则。格式本身的说明见 DESIGN.md 是什么，怎么用。

网站和后台的 DESIGN.md 示例

Paper，杂志风：安静、克制、易读，像一页排版讲究的书。DESIGN.md
Swiss，瑞士极简网格：黑、白和一个信号红，放在严格的网格上。DESIGN.md
Ledger，深色 SaaS 后台：为数字而生的紧凑深色界面，配一个终端琥珀色强调色。DESIGN.md
Mono，开发者文档：干净的白底、Geist 字体和一个钴蓝色，为文档和开发者工具设计。DESIGN.md
Atelier，奢侈品时尚风：象牙白、墨黑和精致的衬线字，像一本时装品牌画册。DESIGN.md
Noir，深色作品集：黑色、骨白色和超大衬线字，作品本身就是唯一的颜色。DESIGN.md
Harbor，企业级 B2B 官网：藏青、留白和稳重的结构，为严肃的 B2B 产品设计。DESIGN.md
Nordic，北欧风 SaaS：低饱和的蓝、柔和的灰和安静的自信，为效率工具设计。DESIGN.md
Clinic，医疗健康官网：沉稳的青绿色、清晰的字体和直白的语言，为医疗网站设计。DESIGN.md
Terra，大地色环保品牌：苔绿、亚麻和陶土色，为贴近土地的品牌设计。DESIGN.md
Chalk，教育课程：明亮、圆润、给人鼓励，像一间好教室。DESIGN.md
Pop，新野兽派：粗黑描边、硬投影和柠檬黄，故意做得很大声。DESIGN.md

手机 App 的 DESIGN.md 示例

App 示例额外加上了手机屏幕需要的规则：触控尺寸、底部标签栏、页面边距，以及数字怎么排。

Stride，健身跑步 App：大号窄体数字和充满活力的橙色，为运动类 App 设计。DESIGN.md
Pantry，外卖点餐 App：温暖、亲切、有食欲，为外卖和点餐 App 设计。DESIGN.md
Calm，冥想健康 App：柔和的鼠尾草绿、温柔的衬线字和充足的呼吸感。DESIGN.md
Wallet，记账理财 App：清楚的余额、安心的绿色和值得信赖的数字。DESIGN.md
Focus，待办任务 App：一张白纸和一个蓝色，你和任务之间再无其他。DESIGN.md
Chatter，聊天社交 App：圆润的气泡、亲切的青色，让对话始终居中。DESIGN.md
Voyage，旅行预订 App：通栏大图、海洋蓝和一款像明信片的衬线字。DESIGN.md
Boutique，时尚电商 App：通屏商品图、Bodoni 衬线字和黑白配色，像一扇橱窗。DESIGN.md
Quest，游戏化学习 App：连胜、经验值和厚实的按钮，让练习像玩游戏一样。DESIGN.md
Care，医疗预约 App：每屏只做一件清楚的事，给只想把事办完的患者。DESIGN.md
Vinyl，音乐播客 App：封面优先、一个亮粉色播放键，和一间适合听歌的暗房。DESIGN.md
Hearth，智能家居 App：深色安静的主屏上，亮着一盏暖琥珀色的灯。DESIGN.md

每个名字链接到浅色和深色模式的实时预览；每个 DESIGN.md 链接打开纯文本文件。

怎么使用这些示例

复制系统页面上的提示词，粘贴到 Codex 或 Claude Code。它会让 agent 把文件保存为项目里的 DESIGN.md，之后每个界面都照着做。
或者下载文件，自己放到项目根目录。Codex 会自动读取 AGENTS.md，但不会自动读取 DESIGN.md，所以要在 AGENTS.md 里加一行指向它。
按需修改。 把主色换成你的品牌色，或者让 agent 调整字体，其他部分保持不变。

DESIGN.md 是纯文本格式，同一个文件在其他能读取它的工具里也能用，比如 Google Stitch。

常见问题

这些 DESIGN.md 模板免费吗？

免费。每个示例都可以免费复制，用在你自己的项目里。

有手机 App 的 DESIGN.md 示例吗？

有。其中 12 个专为手机 App 设计，从运动健身、外卖点餐到记账、聊天和智能家居都有。

可以自己做一份 DESIGN.md 吗？

可以。用 DESIGN.md 生成器，根据你自己的颜色、字体、圆角和间距生成一份。