让 AI 做网页，需求里只写“简洁、高级、像某个品牌”，很容易得到一张看似完整、细节却各行其是的页面。Awesome DESIGN.md 收集了品牌网站风格的设计分析文档，把配色、字体、按钮、卡片和布局写成可读取的规则，供你在制作网页原型或产品官网时确定视觉方向。
本站为这份资料补充了中文目录，方便按用途查找。以 2026 年 10 月 14 日核对的本地文件为准，资料包含 84 份 DESIGN.md，修正后的中文目录也覆盖全部 84 项，并提供 Markdown、CSV 两种形式及中文使用说明。设计文档正文仍以英文为主；中文目录负责导航和选用，不是整套文档的全文汉化。
DESIGN.md 里到底写了什么
这里的 DESIGN.md 可以理解为一份“页面该怎么长”的说明书。部分文件开头列出结构化参数，后面再解释它们如何用在页面中；另一些直接采用分节的 Markdown。它们提供的是设计参考，需要由 AI 或开发者转成项目里的代码。
- 颜色及用途：区分背景、卡片表面、正文、主按钮和状态提示，避免把强调色到处铺满。
- 文字层级：说明标题、正文、按钮和代码的字体、字号、字重、行高或字距。
- 组件与布局：描述按钮形状、卡片边框、间距、内容宽度及部分组件的交互状态。
- 风格限制：列出适合保留的特点和应避免的做法；部分文档另有响应式规则、迭代说明与已知缺口。
例如本地 Linear 文档采用 #010102 的近黑画布、四级深灰表面，以及 #5e6ad2 的薰衣草蓝强调色。蓝色主要用于品牌标记、主操作、焦点和链接强调；主按钮按 8px 圆角处理。它还明确要求避免额外的鲜艳强调色、氛围渐变和胶囊形主按钮。这比一句“做成 Linear 风格”给出的限制具体得多。
它把网站的视觉关系整理成文字规范，方便反复读取。先确定颜色、文字和组件规则，再生成页面，后续修改时也有同一份依据可以对照。
先按页面用途选风格
知名品牌的名字容易识别，但名字并不能替你判断适不适合当前任务。先想清楚页面主要承载产品影像、长文阅读、技术内容还是功能介绍，再挑一种主要风格。
| 页面方向 | 可以先看的文档 | 本地文档中的特点 |
|---|---|---|
| 温暖的 AI 产品或阅读型页面 | Claude、Lovable | 奶油或暖纸色背景，文字层级清楚，按钮与表面较柔和 |
| 浅色开发者产品官网 | Cursor、Expo | 浅色画布、代码或设备展示；Cursor 使用橙色操作强调 |
| 深色工程或协作工具官网 | Linear、VoltAgent | 深色表面承载产品界面，以稀少的蓝紫或绿色强调建立主次 |
| 编辑型媒体与长文内容 | WIRED | 白底黑字，衬线标题和正文承担阅读层级，元信息用无衬线文字 |
| 怀旧网页或复古游戏活动 | Dell 1996、Nintendo 2001 | 色块和贴纸，或金属面板、发光导航等早期互联网视觉元素 |
挑选时要看具体文档：本地 Cursor 描述的是暖奶油色官网，ElevenLabs 也是浅色编辑型页面，不能看到 AI 工具名称就默认套深色霓虹。本站目录已经按实际 DESIGN.md 修正这些旧简介，也补齐了 Jobright、DJI、Mercury、Oracle 等漏项。表里的适合场景属于选用建议，不代表对应后台、业务流程或功能已经实现。
把选好的规范交给 AI
开始前，需要一个前端项目，以及能读取项目文件或接收参考文本的 AI 编码工具。查看这些 Markdown 文件本身不需要安装项目依赖；网页生成所需的软件、账号、费用和框架，取决于你原本使用的工具与目标项目。
- 打开中文目录。查看
DESIGN_MD_中文目录.md，或用 Excel、WPS 等表格软件打开同名 CSV，按分类和场景初选。 - 找到实际文件。例如选择 Linear，进入
design-md/linear.app/，打开DESIGN.md查看颜色、组件与限制。不要用只有线上入口的子目录 README 代替它。 - 复制到自己的项目。将选中的文件放在项目最外层，命名为
DESIGN.md。已有同名规范时先保留备份，再合并需要的内容。 - 明确要求 AI 读取。在对话中指定文件，并给出页面用途、内容和技术栈。若工具不能读本地文件，就通过它支持的参考资料入口提供文档内容。
下面是一段基于 Linear 文档整理的提示词示例，尚未用它生成成品：
请先读取项目根目录的 DESIGN.md，列出你将采用的背景层级、主操作颜色、按钮形状和字体规则。
然后沿用项目现有技术栈，为一个轻量项目管理工具制作中文产品官网，包含首屏、功能介绍、产品截图占位和价格展示。
采用文档中的近黑画布、深灰表面和薰衣草蓝强调色；主按钮使用 8px 圆角。
为中文文字选择适合阅读且已具备使用条件的字体，保留标题与正文层级。
品牌名称、文案和素材使用本项目内容。页面需要适配手机；产品截图暂无素材时使用明确的占位区域。AI 复述出正确规则，说明它读到了参考；页面是否做好，还要看生成结果。先看主按钮和强调色是否统一、卡片有没有保留深灰层级，再检查手机上的导航、标题和中文排版。不满意时指出具体组件，例如“主按钮保留 8px 圆角，去掉额外的蓝色光晕”，比重新发一句“再高级一点”更容易定位问题。
这份资料不必放进 AI 工具的 skills 目录，也没有一套需要在本次使用中安装的 Skill 流程。后续迭代仍可要求 AI 读取同一份规范，并把本项目确认采用的规则写回自己的 DESIGN.md。需要撤销时恢复项目备份、调整后续提示词；删除文档不会自动撤回已经生成的代码。
字体、素材与业务功能需要另行处理
规范里出现的字体名称、品牌形象或产品截图，帮助描述目标风格，但本地文件并未附带这些素材。制作中文页面时，要给标题和正文选好实际可用的中文字体；品牌专用字体、Logo、摄影和截图不能因为在分析文档中出现，就视为已经取得使用授权。
项目采用 MIT 许可，允许使用、修改和再分发项目文档，需保留版权与许可声明。项目也明确说明不主张拥有被分析网站的视觉身份。这份许可不能替代第三方字体、图片和品牌素材的独立授权。复用时可以借鉴配色关系、排版和组件规则，再换成本项目的名称、内容与素材。
部分文档主要分析营销官网，覆盖范围与登录后的实际产品界面不同。设计规范也不会替项目完成登录、支付、数据保存或表单校验。需要这些功能时，仍要在实际代码中实现，并检查相应的界面状态。
本站整理包与项目入口
本站整理包在项目设计文档之外，附有 DESIGN_MD_中文目录.md、DESIGN_MD_中文目录.csv 和 使用说明_中文.md，分别用于阅读查找、表格筛选和首次复用。
需要本站整理包的读者，可在文章资源区查看付费下载说明。具体价格和下载条件以资源区说明为准。
本站的收费对象是附有中文目录和使用说明的整理包及其下载服务。上游项目仍按 MIT 许可提供，原始文件可从作者仓库获取。
项目原始入口：https://github.com/voltagent/awesome-design-md
本地快照没有 README 中提到的 preview.html 和 preview-dark.html，因此本文不提供“双击预览文件”的操作。上述份数及文件说明来自本地资料快照。本地资料未附可核验的提交记录，不能据目录名判断其与当前 main 一致，也不将它标为最新版或正式发行版。
暂无评论内容