别再为AI味设计而苦恼了

1. 前言

在正式进入教程之前，我想先给大家看一组对比。

同样的项目、同样的 AI 编程工具，仅仅通过增加一些规则约束，就能让最终生成的 UI 效果产生比较明显的变化。

第一版：直接通过 AI 一句话生成项目。

第二版：通过 AGENTS.md + DESIGN.md 约束 AI 的开发和设计行为。

对比之后，相信大部分人都能感受到第二版的变化：整体看起来更加清爽，信息层级更加清晰，视觉上也更加舒适。

经常用AI的都知道，第一版一眼就能看出是AI制作的，第二版看上去人工调整的比较多一点。

如果你还没有发现其中的问题，不妨仔细分析一下第一版存在的问题。

第一版 UI 存在哪些问题？

1. 页面文案冗余，营销化、口语化表达过多。

AI 很喜欢在界面中生成一些看似有设计感，实际上没有太大信息价值的文案。

例如第一版图中的文案：

• 常用模板会自动排在前面
• 拖入图片，开启你的设计
• 一张图片，无限可能
• 一点灵感，很多可能
• 让你的产品，值得被看见
• 灵感在这里发生

2. 字体过小，可读性较差。

为了让页面看起来更加紧凑，AI 经常会使用过小的字号，长时间使用很容易产生视觉疲劳。

3. 文字颜色过浅，对比度不足。

部分辅助文字使用了过浅的灰色，导致文字与背景之间缺乏足够的对比度。

当然，类似的问题还有很多，这里就不一一列举了。

那么，这些问题应该怎么解决？

我相信不少开发者在使用 AI 编程工具时都遇到过类似的问题。

通常会采用下面几种解决方案：

方案一：直接在 Agent 对话中提出要求。

例如：

页面字体太小了，调整一下字号。不要生成口号式文案，整体设计简洁一些。

这种方式当然有效，但有一个非常明显的问题：

每次开启新的对话，都需要重新告诉 AI 一遍。

如果项目比较复杂，开发过程中需要不断提醒 AI 遵守相同的规范，体验就会非常糟糕。

方案二：把规则写进 README.md。

这样也可以，但我个人并不推荐。

README.md 的主要职责是介绍项目，例如项目简介、技术栈、安装方式、使用方法等。

如果把大量 Agent 执行规范、UI 设计规范全部塞进去，不仅会让 README 变得臃肿，也不利于后续维护。

而且，随着 Agent 对话上下文不断增长，单纯依赖对话中的要求也不够可靠。

所以，有没有一种更合理的方式？

答案是：AGENTS.md + DESIGN.md。

2. 解决方案：AGENTS.md + DESIGN.md

这两个文件分别解决不同的问题。

• AGENTS.md：约束 AI 应该如何工作。
• DESIGN.md：约束 AI 应该如何设计产品界面。

简单来说，一个负责开发行为，一个负责设计标准。

2.1 AGENTS.md 是什么？

AGENTS.md 是一种面向 AI 编程 Agent 的项目级指令文件。

支持该规范的 Agent 可以自动发现并读取项目中的 AGENTS.md，从而了解项目的开发要求、代码规范和协作约定。

通常可以将文件放在项目根目录：

这样，Agent 在处理项目任务时，就能够根据文件中的要求开展工作，而不需要我们每次都重复输入相同的指令。

当然，不同 AI 编程工具对 AGENTS.md 的支持方式和读取层级可能有所不同，具体需要参考对应工具的文档。

AGENTS.md 应该写什么？

它更像是整个项目的 AI 协作说明书，可以从以下几个方面约束 AI：

1. 开发行为约束

• 优先使用项目已有的组件和工具。
• 不要擅自修改核心架构。
• 不要进行与当前任务无关的重构。

2. UI 文案约束

禁止 AI 随意生成口语化、营销化、口号式文案。

3. 字体与可读性约束

• 正文和主要操作文字原则上不低于 14px。
• 辅助信息原则上不低于 12px。
• 建立明确的字体层级。
• 避免文字颜色过浅。
• 不得通过缩小字体解决响应式布局问题。

4. 信息布局约束

• 避免堆砌无意义的说明文字。
• 删除不必要的装饰性文案。
• 合理划分页面信息层级。
• 优先通过布局解决信息表达问题，而不是不断增加提示文字。

这里我准备了一套自己正在使用的 AGENTS.md 规则，可以直接拿去参考，根据自己的项目进行修改。

# Agent 执行与协作规范

本文件维护 Agent 的执行要求和写作规范。开始修改前请阅读相关贡献指南、架构设计与源码，以当前任务和实际实现为依据。

> **核心只读约束**：核心架构/设计文档（如 `DESIGN.md`）仅供只读参考，**严禁**由 AI 新增、删除、改写、翻译或格式化。

---

## 1. 核心设计与协作原则

- **三方体验平衡**：每次修改必须同时兼顾**用户体验 (UX)**、**开发体验 (DX)** 与 **AI Agent 的使用体验**。三者必须协同优化，且**严禁破坏现有功能**。
- **聚焦当前任务**：确认现有实现和工作区改动，保留用户未提交的内容。围绕当前任务进行修改，**不附带无关重构、依赖升级或格式化**。
- **合理默认值**：常规、可逆且已授权的工作直接完成；信息不影响实现时，采用与项目一致的合理默认值。
- **文档维护规范**：
  - **`README.md`**：按标准开源项目首页组织，维护项目简介、功能特性、技术栈、环境要求、安装、快速开始及相关入口；功能与技术栈使用表格呈现。**禁止**写入修改日志、实施过程、测试结果、交付总结或 Agent 规范。只在项目信息实际变化时更新。
  - **规范维护**：协作与写作规范维护于本文档，详细开发约定维护于项目贡献指南中。

---

## 2. 禁止生成项目报告文档

**AI 不得在项目中生成任何形式的 AI 项目报告或结果说明文档。**

- 不得将开发工作的分析、计划、进度、实现过程、测试结果、验收结论或交付总结保存为本地文档（无论 Markdown、TXT、JSON、HTML、PDF 格式）。
- 不得通过更换文件名、创建报告目录，或向现有文档追加内容来变相保存报告。所有完成内容与验证结果**仅在对话中简短说明**。

---

## 3. 界面文案与交互规范

界面必须保持极致简洁，交互自解释，**严禁生成“说明书式”与“官僚自卫式”文案**：

- **禁止口语化与网络化表达**：界面文案统一使用简洁、准确、克制的书面语。禁止口头禅、语气词、网络梗、俚语、卖萌表达及夸张营销措辞（如“搞定啦”、“点这里哦”、“一键起飞”、“超好用”）；不得用表情符号、重复标点或感叹句渲染情绪。
- **禁止拟人化与情绪化表达**：直接描述功能、状态与操作，不得模拟聊天、替用户表达情绪或赋予系统人格（如“我来帮你”、“我们懂你”、“终于等到你”）。使用“保存成功”、“暂无数据”、“加载失败”等明确表述，避免寒暄、赞美与安慰性套话。
- **术语与措辞一致**：同一概念、状态和操作使用统一名称；按钮使用明确的动作词，标题与标签直接命名对象。禁止随意切换近义词、中英文混用或堆砌专业术语；书面语不得演变为公文腔与冗长客套。
- **极致精简与布局重构**：坚决删掉多余的标语、说明文字和次要标签。**如果删完界面就看不懂，说明布局本身存在问题，必须直接重新设计布局**，而不是靠堆砌说明文字来掩盖结构缺陷。
- **禁止免责声明与隐私自辩**：不得在 UI 中编写技术免责文字（如“不上传数据”、“仅静态分析”、“非 AI 推断”、“不会覆盖/保存”、“仅在本地存储”等）。
- **禁止暴露底层算法与统计口径**：不得向用户解释实现逻辑（如“可能重叠”、“按中位数估算”、“样本需满 X 天”、“已去重”等）。指标只展现最终数据，空状态仅提供简短提示。
- **禁止教导式操作废话**：不得说明常规交互常识（如“可从列表多选”、“输入后按回车添加”、“绿色勾号表示成功”等）。输入框与按钮必须凭 label 和 placeholder 实现自解释。
- **禁止滥用规则折叠框**：严禁在 `<details>` 或面板中塞入“统计说明”、“计时规则”、“提醒规则”等多条列表。
- **极简原则**：提示语能省则省，必要提示控制在一句话内，禁止说教与长篇说明。

### 4. 界面字体与可读性规范

AI 生成或修改界面时，必须保证字体具有良好的可读性，避免字号过小、层级混乱及视觉疲劳。

- **合理字号**：正文、表格内容、表单标签、按钮文字等必须使用适合阅读的字号。禁止为了追求紧凑布局而过度缩小字体。
- **明确字号层级**：建立统一的字体层级，区分页面标题、区块标题、正文、辅助信息及次要标签，避免不同层级字号随意设置。
- **限制最小字号**：常规桌面端界面正文原则上不低于 14px，核心操作文字、表单内容及主要数据建议不低于 14px，辅助信息原则上不低于 12px。禁止大面积使用 10px、11px 等难以阅读的字号。
- **避免字体过度密集**：合理设置行高、字重、字间距及内容间距，避免文字拥挤、行距过窄或信息堆叠。
- **响应式可读性**：不同屏幕尺寸下必须保持合理的字体大小，不得在移动端或小屏幕设备上通过缩小字体解决布局溢出问题，应优先调整布局和内容结构。
- **统一设计规范**：优先使用项目现有的字体变量、字号 Token 和设计系统，避免同一页面出现大量无规律的字号与字重。
- **实际视觉检查**：完成界面修改后，检查页面标题、正文、表格、表单、按钮及辅助信息的实际显示效果，确保文字清晰、层级明确，不存在需要刻意放大才能阅读的内容。

2.2 DESIGN.md 是什么？

说完 AGENTS.md，再来看 DESIGN.md。

从名字基本就能看出来，它主要负责项目的 UI/UX 设计规范。

如果说 AGENTS.md 告诉 AI 应该怎么工作，那么 DESIGN.md 就是告诉 AI 应该按照什么标准设计界面。

这个文件同样是放在项目的根目录下

例如，我们可以在 DESIGN.md 中定义：

颜色规范

• 主色调使用什么颜色。
• 背景色、卡片颜色如何搭配。
• 正文、辅助文字分别使用什么颜色。
• 成功、警告、错误状态使用什么颜色。
• 文字与背景需要保持足够的对比度。

字体规范

• 页面标题使用多大字号。
• 区块标题使用多大字号。
• 正文和辅助信息使用多大字号。
• 不同层级的字体粗细如何设置。

布局规范

• 页面最大宽度。
• 页面内边距。
• 卡片间距。
• 栅格布局。
• 不同屏幕尺寸下的响应式规则。

组件规范

• 按钮的尺寸、圆角和状态。
• 输入框的样式。
• 卡片的边框和阴影。
• 弹窗、下拉菜单、表格的设计。
• 悬停、点击、禁用等交互状态。

这些规则确定之后，AI 就不需要每次都凭自己的理解重新设计一套 UI。

DESIGN.md 从哪里获取？

如果你没有自己的设计规范，也不需要从零开始编写。

目前有不少网站提供现成的 UI 设计规范，可以根据自己的项目需求进行选择。

我整理了几个可以参考的网站：

具体资源的下载方式、格式以及免费或付费情况，以网站当前提供的内容为准。

一般来说，我们需要关注两类文件：

第一类：DESIGN.md

主要用于描述设计理念、颜色、字体、间距、组件样式以及整体布局规则。

第二类：Design Tokens

例如：

• Tailwind CSS 配置
• CSS Variables
• 颜色变量
• 字体变量
• 间距变量
• 圆角变量

这些 Token 可以帮助我们把设计规范真正落实到项目代码中。

例如：

:root {
  /* Colors */
  --color-lavender-paper: #ece0ff;
  --color-pure-white: #ffffff;
  --color-ash-gray: #cfcfcf;
  --color-onyx: #121212;
  --color-graphite: #616161;
  --color-fog: #8c8c8c;
  --color-ethereum-violet: #6c24e0;
  --color-deep-iris: #41128c;
  --color-hot-magenta: #f60e9d;
  --color-sapphire: #3d4ceb;
  --color-mint: #0f9972;
  --color-lilac-wash: #9357f4;
  --gradient-lilac-wash: radial-gradient(127.67% 82.36% at 50% -30.36%, rgba(147, 87, 244, 0.08) 0%, rgba(147, 87, 244, 0.24) 33%, rgba(67, 113, 239, 0.08) 66%, rgba(0, 0, 0, 0) 100%);

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

如果网站提供了不同技术栈的设计资源，可以根据项目实际使用的技术选择对应版本。

例如：

• React + Tailwind CSS 项目，优先选择对应的 Tailwind 资源。
• Vue + CSS Variables 项目，优先选择 CSS Variables。
• 其他技术栈，则选择能够适配当前项目的资源。

当然，如果你已经有自己的设计稿，也可以直接把设计稿交给 AI，让它分析设计风格、颜色、字体、间距和组件规则，最终整理成 DESIGN.md。

这样就不需要完全依赖现成的设计模板了。

顺便说一下上面例子中第二版的DESIGN模板用的是这个

https://ui.gradientdeck.com/styles/ethereum-org#export

3. 总结

AI 编程工具确实能够大幅提高开发效率，但直接让 AI 根据一句话生成完整产品，往往很难保证最终效果。

尤其是 UI 设计，AI 很容易出现文案冗余、字体过小、颜色对比度不足、布局混乱等问题。

而 AGENTS.md + DESIGN.md 提供了一种相对简单、可复用的解决方案。

与其每次开发都反复告诉 AI 应该怎么做，不如提前建立一套规则，让 AI 在整个项目开发过程中始终有明确的参考标准。

这也是我认为 AI 辅助开发中非常值得养成的一个习惯。