用 AI 做出来的应用有时看起来很业余,即使功能没问题——这背后是有原因的:它们没有设计系统。AI 自作主张生成的每一个页面都用着不同的颜色、不同的间距、不同的按钮——最后的结果看起来像是五个互相没商量过的人做出来的。解决办法不是给每个页面「多加点讲究」;而是一次性构建一个设计系统,并让 AI 始终遵循它。而最常见的错误,是把它留到最后:在做任何页面之前,你首先应该让你的 AI 做的,就是构建你的设计系统。在这份指南里,你会看到它应该包含哪些部分(和高端产品用的一样)、一个真正专业的设计系统长什么样,以及两个现成的提示词,让你的 AI——Claude、Codex、Cursor、v0——用硅谷水准帮你构建属于你的设计系统。
你让 AI 做一个页面,做得不错。你让它再做一个,它用了另一种紫色、另一种按钮尺寸、另一种间距。第三个页面里,又冒出一个前面从没出现过的阴影。每个页面单独看都没问题——但拼在一起,你的应用看起来就像是五个没达成共识的人做出来的。这正是让一个东西看起来业余的原因,哪怕它运行得完美无缺。
设计系统是一份唯一的文档,里面写着你产品的所有视觉规则:存在哪些颜色、各自用在哪里,文字有哪些尺寸,元素之间留多少间距,按钮、卡片、动画长什么样。AI 读了它之后,它生成的每一个页面都会保持一致——因为它不再自己发明,而是遵循规则。
这里有几乎所有人都会犯的错误:先要页面,把设计留到「以后有空再说」。等到那时候,你已经有了二十个不一致的页面,修它们就成了一场没完没了的打补丁。在做第一个页面之前,你首先应该让你的 AI 做的,就是构建你的设计系统。这样之后做出来的一切从一开始就是一致的。这是最能提升你产品成品感的一个决定,而且几乎不费成本。
一个正经的设计系统不是「一套配色」。它是详尽的。以下是企业级系统所具备的部分(和 Linear、Vercel 或 Raycast 这类产品用的一样),也是你的提示词应该要求的:
为了让你看到应该要求的细节程度,这里有一段我们用来构建高端产品的那类系统的片段。注意它的精确度——它不说「用紫色」,而是精确到在每种情况下用哪种紫色、用什么透明度:
品牌色(强调色)—— 只出现在可交互/激活的元素上,绝不用于装饰 Primary: #8B5CF6 · Light: #A78BFA (文字/图标) · Deep: #7C3AED (按下) 表面(5 个深度层级,而非「纯黑一块」): surface-1 #0A0A0A (背景) · surface-2 #0D0D0D (侧边栏) · surface-3 #111111 (卡片) surface-4 #1A1A1A (下拉菜单) · surface-5 #222222 (抬升层上的激活态) 文字(按透明度,而非按颜色): 主要 #FFFFFF · 次要 rgba(255,255,255,0.70) · 三级 0.45 · 弱化 0.28 排版 —— Inter · 基准 14px · 字重只用 400/500/600/700(绝不用 300/800/900) BODY 12px · TITLE 16px · HERO 24px · 大写标签的 letter-spacing 0.07em 间距 —— 8px 网格(4px 微调)。绝不用奇数(3、7、9、11px)。 RADIUS —— 输入框 8px · 卡片 12px · 模态框 16px(子元素永远小于父元素) 动画 —— 只用 opacity/transform/box-shadow · 悬停 scale 1.02–1.05 · 绝不动 width/height
如果你还没有定义好的品牌,就让 AI 提出审美并搭建完整的系统。复制它并粘贴给你的设计/代码智能体:
在构建任何页面之前,我想让我们先创建我产品的设计系统(SISTEMA DE DISEÑO),这样你之后生成的一切都是一致的。我的产品是:[描述你的应用以及它面向谁]。我喜欢的审美:[例如「Linear 风格的暗色高端」/「明亮友好」/「不知道,你来提议」]。 创建一份完整且详尽的设计系统文档,包含以下部分,每个部分都要有精确数值(不要近似值): 1. 理念/身份以及设计支柱。 2. 颜色:品牌色 + 按层级划分的表面/背景层级 + 按透明度划分的文字层级 + 边框 + 语义色(成功/错误/警告/信息) + 图表配色。 3. 排版:字体、精确的字号刻度、允许的字重、行高、字间距。 4. 间距与网格(基础单位和倍数)。 5. 按元素类型划分的 Border-radius。 6. 按层级划分的阴影/层级感。 7. 组件(按钮、卡片、输入框、模态框、徽章、提示框、下拉菜单)附其数值。 8. 动效/动画(时长、缓动、什么会动什么不动)。 9. 状态(静止、悬停、聚焦、激活、禁用、错误、成功)。 10. 图标、布局/网格、空状态以及一份反模式清单(绝不能做的事)。 重要:清楚地标出什么是灵活的(可调整的,如品牌色),什么是不可协商的(不能碰的精确数值)。目标:让成品看起来与硅谷的高端产品别无二致。保存这个系统,并在我们从现在起构建的每一个页面上都遵循它。
如果你已经有了颜色、logo 或一套身份识别,用这个提示词让 AI 在尊重它们的前提下搭建完整系统:
我想从我现有的品牌出发,在构建页面之前创建我产品的完整设计系统(SISTEMA DE DISEÑO)。我的品牌:颜色 [粘贴你的颜色/hex]、字体 [如果你有的话],以及这种风格/感觉 [描述:严肃、有趣、奢华等]。我的产品是 [描述它]。 从我的品牌出发,构建一份完整且详尽的设计系统,附精确数值,覆盖:理念、颜色(我的品牌 + 表面 + 文字 + 边框 + 语义色 + 图表)、排版(刻度、字重、行高)、间距/网格、border-radius、阴影、组件(按钮、卡片、输入框、模态框、徽章、提示框)、动效/动画、状态、图标、布局、空状态以及反模式。 规则:以我的品牌色为基础;从它们派生出各种变体(浅色、深色、透明度);标出什么是灵活的、什么是不可协商的;并让成品看起来高端。完成后,在我们构建的每一个页面上都遵循它。
为了让你不必从零开始,这里有一个完整且专业的设计系统——暗色高端审美,中性且通用。整个复制下来,粘贴给你的 AI,然后告诉它「遵循这个系统构建一切」。或者换掉品牌色(唯一灵活的部分),让它成为你自己的。它和硅谷产品用的严谨程度一样:每个数值都是精调过的,没有一处是随手来的。
遵循这个设计系统构建一切(TODO)。唯一灵活的是品牌色;其余都是精确数值,不要改动。 === 理念 === 暗色高端、极简且精准的界面(Linear/Vercel 风格)。用层次营造深度,而非平面。品牌色只出现在可交互/激活的元素上,绝不用作装饰。层级由尺寸+字重+透明度决定,而非颜色。 === 颜色 === 品牌色(灵活 —— 换成你自己的):Primary #8B5CF6 · Light #A78BFA (文字/图标) · Deep #7C3AED (按下)。 表面(5 个深度层级):surface-1 #0A0A0A (背景) · surface-2 #0D0D0D (侧边栏) · surface-3 #111111 (卡片) · surface-4 #1A1A1A (下拉菜单/提示框) · surface-5 #222222 (抬升层上的激活态)。绝不跳级。 文字(按白色透明度):主要 #FFFFFF · 次要 rgba(255,255,255,0.70) · 三级 0.45 · 四级 0.28 · 弱化 0.20。 边框(带透明度的白色):强 0.20 · 常规 0.10 · 细微 0.08 · 发丝线 0.06。 语义色:成功 #10B981 · 警告 #F59E0B · 错误 #EF4444 · 信息 #3B82F6(背景 0.07-0.10,边框 0.15-0.22,文字用纯色)。 === 排版 === 字体:Inter(可变),抗锯齿,数字用 tabular-nums。基准 14px。 刻度(px):micro 9 · caption 10 · small 11 · body 12 · base 13 · subhead 14 · title 16 · heading 18 · display 20 · hero 24。 字重只用:400(正文) · 500(标签/导航) · 600(标题/按钮) · 700(数字/KPI)。绝不用 300、800 或 900。 行高:标签/按钮 1.0-1.2 · 正文 1.55 · 代码 1.6。 大写标签:10-11px,字重 600-700,letter-spacing 0.07em,颜色透明度 0.28-0.40。正文绝不大写。 === 间距 === 8px 网格(4px 仅用于内部微间距)。数值:4·8·12·16·20·24·32·40·48·64。布局绝不用奇数(3、7、9、11px)。 === BORDER-RADIUS === 徽章 4-6px · 输入框/下拉项 8px · 卡片 12-14px · 模态框 16px · hero 20px · 圆形 50%。规则:子元素圆角永远小于父元素。 === 阴影 === 卡片:只用边框(无阴影) · 下拉菜单:0 8px 28px rgba(0,0,0,0.55) · 模态框:0 32px 80px rgba(0,0,0,0.75)。可交互卡片悬停时的品牌发光:0 0 0 1px rgba(品牌色,0.40), 0 8px 32px rgba(品牌色,0.16)。 === 组件(精确数值) === 标准按钮:padding 8px 16px,radius 8px,font 12px 字重 600。主要:bg rgba(品牌色,0.20),边框 rgba(品牌色,0.40),文字 Light。Ghost:bg rgba(255,255,255,0.05),边框 0.08,文字 0.45。 卡片:padding 12-16px,radius 12-14px,边框 rgba(255,255,255,0.05),bg rgba(255,255,255,0.02)。悬停:bg 0.045。 输入框:padding 8px 12px,radius 8px,bg rgba(255,255,255,0.04-0.06),边框 0.10。聚焦:边框 rgba(品牌色,0.40) + 阴影 0 0 0 3px rgba(品牌色,0.12)。 模态框:bg #111111,边框 0.10,radius 16px,遮罩 rgba(0,0,0,0.72)。徽章:9px 字重 700,padding 2px 6px,radius 4px。 导航项激活:bg rgba(品牌色,0.15),文字 Light,字重 600。静止:透明,文字 0.45,字重 400。 === 动效 === 只对 opacity、transform(scale/translate)和 box-shadow 做动画。绝不动 width/height/padding/margin(会引起重排)。 时长:tap 0.08s · tooltip 0.12s · 进入/退出 0.15s · 标准过渡 0.18-0.22s · 环境态(脉冲)2s+。 按钮悬停:scale 1.02-1.05 · tap:scale 0.93-0.97。标准缓动:cubic-bezier(0.16, 1, 0.3, 1)。 === 状态(每个可交互元素) === 静止 · 悬停(色调 + scale,80-180ms) · 聚焦(品牌边框 + 环) · 激活(scale 0.93-0.97) · 禁用(透明度 0.35-0.50,无指针) · 错误(红色边框 + 错误文字) · 成功(绿色闪现 1800ms)。 === 图标 / 布局 / 空状态 === 图标:lucide,标准 12-16px,颜色继承自文字。布局:侧边栏 64px(图标)或 176px(展开),面板 280-320px,内容 flex-1,最大 1440px。空状态:弱化图标 0.15 + 标题 0.35 + 副标题 0.20 + CTA ghost。 === 反模式(绝不) === 绝不在 UI 中用字重 300/800/900 · 绝不用带名字的灰色(用 rgba 白色) · 绝不用奇数间距 · 绝不对布局做动画 · 绝不用「transition: all」 · 品牌色绝不覆盖屏幕的 15-20% 以上 · 子元素绝不用与父元素相同(或更大)的圆角。 目标:让成品看起来与硅谷的高端产品别无二致。在每一个页面上都遵循这些数值。
#8B5CF6)换成你自己的。如果你想要更贴合自身的东西,用上面的提示词 1 或 2,让你的 AI 用同样的结构给你生成一个专属的。CLAUDE.md(或你智能体的指令文件)里,并且时不时让它检查是否有页面偏离了规则。这个习惯就是:任何新页面都必须遵循系统。这和 C-A-R 协议一样,只不过是针对设计的。Join 4,200+ builders. No credit card. Build your first app with AI in minutes.