DongVPS导语
使用 Cursor、Windsurf、Claude Code 或 Antigravity 等 AI 编程助手开发前端时，许多开发者常常陷入同一个尴尬局面：AI 生成的业务逻辑和算法完全没毛病，但渲染出来的页面却充满了一股浓浓的“AI 塑料感”（AI Slop）。
高饱和度的红绿蓝纯色、千篇一律的粗暴圆角卡片、毫无层级的生硬字体、以及缺乏任何 hover 状态的死板交互……如何让 AI Agent 做出审美在线、质感拉满且风格统一的现代化界面？
Google 正式推出的开源 DESIGN.md 设计标准给出了业界目前最为优雅的工程化答案。本文将全面拆解 DESIGN.md 的核心理念、规范结构，并提供一套可在 AI Agent 中直接落地的“高质量提示词心法与实战指令”。
一、 什么是 DESIGN.md？
在传统软件开发中，我们通常有以下认知分工：
– README.md：给人看的项目概览与入门指南。
– AGENTS.md / CLAUDE.md：给 AI Agent 看的工程架构指令（如何运行测试、代码组织风格、CLI 命令）。
而 DESIGN.md 则是专门为 AI Coding Agent 打造的 “机器可读的视觉与交互宪法（Design Source of Truth）”。
graph TD
A["开发者 / 设计师"] -->|"制定视觉准则"| B["DESIGN.md"]
C["AGENTS.md (工程与构建逻辑)"] --> D["AI Coding Agent<br/>(Cursor / Claude / Antigravity)"]
B -->|"注入视觉约束与质感基调"| D
D -->|"生成设计系统一致的高品质代码"| E["现代化 Web 界面<br/>(字体/色彩/光影/微动效统一)"]
为什么不是 Figma Token 或复杂 JSON？
- Token 经济性极高：纯 Markdown 对大语言模型的上下文窗口极其友好，解析消耗小、遵循度远高于复杂嵌套的 JSON 描述。
- 语意（Rationale）丰富：不仅包含数值，还包含“为什么要这样设计”的自然语言设计哲学，Agent 能够根据设计意图进行合理外推，而不是机械死板地套用变量。
- 工具无关（Tool-Agnostic）：无需额外插件或商业软件，任何基于文本的 AI IDE 都能直接读取。
二、 DESIGN.md 必须包含的五大核心维度
一个高标准的 DESIGN.md 绝不是简单地列举几个十六进制色值，它通常涵盖以下五个维度的严格约定：
1. 视觉基调与设计哲学（Visual Tone & Philosophy）
用极其精确的工业级设计术语定义界面气质。
– 禁止使用：“界面要好看、美观、大气”（Agent 根本无法理解这种主观词汇）。
– 必须使用：“Dark Cyberpunk 赛博暗黑流、Glassmorphism 微透高斯模糊、Bento Grid 便当盒排版、极简冷色工业质感”。
2. 语义化色彩令牌（Semantic Color Tokens）
严禁 Agent 在组件代码中直接硬编码 #1e293b 等原始色值，必须映射到语义令牌：
– Surface / Background：定义不同景深层级的背景灰度（Base, Card, Popover）。
– Primary / Accent：经过调校的品牌强调色（通常使用 HSL 空间，便于统一明暗与饱和度）。
– Border / Outline：低透明度边缘光晕（如 rgba(255, 255, 255, 0.08)），营造高端边缘细节。
3. 现代字体与排版阶梯（Typography Hierarchy）
- 弃用系统默认无衬线字体，指明引入现代化 Google Fonts（如用于标题的
Outfit、Plus Jakarta Sans，用于正文的Inter，用于代码的JetBrains Mono）。 - 规定严格的字阶（Scale）与行高步长，杜绝行间距塌陷。
4. 空间与景深系统（Elevation, Shadows & Borders）
高级界面的核心秘诀在于“光影与分层”：
– 多重弥散柔和阴影（Ambient Shadow + Key Light Shadow）。
– 磨砂玻璃质感（Backdrop-filter blur）。
– 微拟态发光（Subtle Rim Glow）。
5. 交互与微动效（Micro-interactions & Motion）
- 按钮、卡片在
:hover与:active下的细腻反馈（位移 -2px、微光泽扫过、平滑阴影延展）。 - 规定标准贝塞尔曲线（如
cubic-bezier(0.16, 1, 0.3, 1)），杜绝生硬突兀的机械跳变。
三、 开箱即用：一份标准的 DESIGN.md 模版
你可以直接在项目根目录下创建 DESIGN.md，供你的 AI 助手随时读取：
# Visual Design System Specification (DESIGN.md)
## 1. Visual Philosophy
- **Aesthetic**: Premium Dark Mode with subtle glassmorphism and refined glowing accents.
- **Atmosphere**: Professional, elegant, restrained yet high-tech.
- **Rules**: Zero plain primary colors (no raw red, green, blue). Every surface must have deliberate depth.
## 2. Color Tokens (Tailored HSL)
- **Background Base**: `hsl(224, 71%, 4%)`
- **Surface Level 1 (Card)**: `hsl(222, 47%, 9%)` (Border: `hsl(217, 33%, 17%)`)
- **Surface Level 2 (Hover/Active)**: `hsl(217, 33%, 14%)`
- **Primary Accent**: `hsl(250, 95%, 68%)` (Electric Indigo)
- **Secondary Accent**: `hsl(180, 85%, 55%)` (Cyan Ray)
- **Text Main**: `hsl(210, 40%, 98%)`
- **Text Muted**: `hsl(215, 20%, 65%)`
## 3. Typography
- **Heading Font**: 'Outfit', sans-serif (Weights: 600, 700)
- **Body Font**: 'Inter', -apple-system, sans-serif (Weights: 400, 500)
- **Monospace Font**: 'JetBrains Mono', monospace
- **Scale**:
- H1: 2.5rem (40px) / Line-height: 1.2
- H2: 1.75rem (28px) / Line-height: 1.3
- Body: 1rem (16px) / Line-height: 1.6
- Caption: 0.875rem (14px) / Line-height: 1.5
## 4. Components & Elevation
- **Cards**: Background: `Surface Level 1`, Border: 1px solid `Border`, Border-radius: 12px, Backdrop-filter: blur(12px).
- **Buttons**:
- Primary: Gradient from Primary to Cyan with subtle glow (`box-shadow: 0 0 20px rgba(120, 80, 255, 0.35)`).
- Hover: transform: translateY(-2px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1).
- **Inputs**: Transparent background, focus ring with 2px accent outline.
## 5. Negative Rules (Strictly Prohibited)
- NEVER use browser default fonts or unstyled tables.
- NEVER use pure `#000000` or `#ffffff` for major layout blocks.
- NEVER present static cards without hover states.
- NO dummy placeholder images—use styled SVG icons or CSS gradients instead.
四、 如何在 Agent 中下达正确的指令？
有了 DESIGN.md 还不够，你与 AI 对话时的 Prompt 策略 直接决定了它执行时的严谨度。
1. 反面教材 vs 正面范式
| 提示词类型 | 典型错误指令（翻车率 90%） | 正确实战指令（质感拉满） |
|---|---|---|
| 整体诉求 | “帮我写一个后台仪表盘，界面要好看一点，现代一点” | “遵循根目录下的 DESIGN.md，构建具有沉浸式暗黑风格的仪表盘，严格使用定义的语义色彩令牌和 Outfit 字体” |
| 组件开发 | “加三个数据展示卡片” | “按照 DESIGN.md 的 Bento Grid 规范实现 3 个数据卡片，增加微质感磨砂边框，并在 hover 时实现 -2px 抬升动效与光晕过渡” |
| 色彩选择 | “按钮背景改成蓝色” | “使用 DESIGN.md 中的 Primary Accent 令牌渲染按钮，保持电光紫到青色的微渐变与光晕反馈” |
2. Agent 提示词的三大实战心法
心法一：强绑定参考锚点（Grounding & File Mention）
在提示词中显式引用设计标准，强制让 Agent 在写代码前将其作为上下文：
实战指令模板：
“在编写任何 CSS 或 HTML 之前，请首先阅读并对齐根目录下的@DESIGN.md。必须优先提取其中定义的 CSS 变量（Custom Properties）并在index.css中建立全局设计令牌，严禁使用非标色彩或随意硬编码样式。”
心法二：设立负向禁令（Negative Constraints）
AI 在没有负向约束时极易退化回训练集中的通用垃圾代码（Tailwind 默认预设）：
实战指令模板：
“严格禁止以下行为：
1. 禁止使用浏览器原生红蓝绿；
2. 禁止出现未定义:hover状态的静态可点击元素；
3. 禁止在容器周围留出死板的单像素黑灰线，必须使用半透明光晕描边；
4. 若需要图标，优先使用标准 Feather/Lucide SVG，严禁放占位图空白方块。”
心法三：按阶段切分交付（Staged Execution）
不要一次性让 Agent 把“结构 + 样式 + 业务逻辑 + 接口”全写完。分三步交付，效果最为惊艳：
- 第一步（设计系统落地）：
“根据DESIGN.md，在index.css中创建完整的:root变量、排版基准类与阴影公用类。” - 第二步（纯视觉骨架评审）：
“基于设计系统，构建核心组件的静态视觉形态（包含卡片、按钮、输入框），并在不同状态（hover/active/disabled）下进行视觉校验。” - 第三步（业务拼装与动效打磨）：
“将视觉组件组装为完整页面，并补充入场渐变（Fade In）与滚动微动效。”
结语
从过去的 “Design in Figma”，到如今的 “Design in Markdown”，前端开发的范式正在被 AI 彻底重塑。
Google DESIGN.md 的核心精髓不在于 Markdown 这种格式本身，而在于将模糊的“审美偏好”转化为 AI 能够无损执行的“工程级确定性约束”。
在项目中维护一份精细打磨的 DESIGN.md，并在 Agent 工作流中严格锚定，你会发现：AI 不再是一个只会堆砌死板样式的代码机器，而是真正化身为一个对色彩、排版与微交互都有极高审美的资深前端设计师。