拿到 Claude Design「设计师 Agent」提示词后，你可以这样搭一套自己的视觉体系

你想要的不是“让 AI 画点好看的 UI”。

你想要的是一套能复用、能扩展、能交付的视觉体系：

• 做原型，能直接跑
• 做方案 PPT，能直接讲
• 做动效演示，能直接看
• 风格统一，越做越快

这份「Claude Design 设计师 Agent」系统提示词泄出来的价值点，就在这里：它把“设计”当成工程交付来做，而不是灵感生成。

下面我按可执行的方式，把这套思路拆开给你。你照着搭，今天就能跑起来。🧰

你要盯死的目标：交付物，不是截图

这套 Agent 的定位很明确：

用 HTML/React 创建设计交付物（原型 / 幻灯片 / 动画）。

也就是：

• 不要只给一张“看起来不错”的图
• 要给能复用的结构、组件、规范、变体
• 要能迭代，越改越稳

你以后做一个新页面，不用从零“再画一遍”。

这套工作流为什么有效：四步闭环

核心流程是：理解需求 → 探索设计系统 → 构建 → 验证。

听起来像废话？关键在执行细节。

1）理解需求：把问题问到能动手

你给需求别写“做一个官网”。

要写到这种程度：

• 用户是谁（B2B 采购 / C 端新手 / 内部员工）
• 场景是什么（移动端下单 / 桌面端看报表 / 路演讲解）
• 成功标准是什么（3 秒内看懂卖点 / 5 层信息仍清晰 / 深色模式也能用）

你甚至可以直接让 Agent 追问：

• “你要更克制还是更张扬？”
• “更像 Notion 还是更像 Linear？”

别怕麻烦。你问得越狠，后面返工越少。

2）探索设计系统：先找能复用的骨架

泄密提示词里有一句很关键：优先复用现有设计系统。

这句话的意思是：

• 能用现成的组件库，就别手搓
• 能对齐你项目里的样式变量，就别发明新 token
• 能跨项目读取，就把旧项目当“资产库”用

你想搭个人视觉体系，核心资产是这几样：

• 颜色 tokens（主色/中性色/语义色）
• 字体系统（字号/行高/字重）
• 间距系统（8px 体系还是 4px 体系）
• 圆角/阴影/边框规则
• 组件规范（按钮、输入框、卡片、表格、弹窗、导航…）

别急着“画页面”。先把骨架立住。

3）构建：用组件把页面拼出来

构建阶段要追求两件事：

• 结构可维护（组件拆得合理）
• 风格可控（tokens 统一）

你要的是：

• 同一套按钮在原型、PPT、演示动画里都能复用
• 同一套标题层级不会到处乱跳

4）验证：让“验证代理”当你的挑刺同事

原文提到：done + fork_verifier_agent

你可以把它理解成：

• 设计师 Agent 产出交付物
• 验证 Agent 专门找问题（一致性、可访问性、信息层级、对齐、可复用性）

这一步很值。

因为人最容易在赶工时自我说服：“差不多得了”。

让验证代理来一句：“按钮 hover 不一致、间距体系被破坏、标题层级乱了。” 你就能省掉一堆线上丑事。

关键原则：照做就能少踩坑

泄密提示词里有几条“反直觉但超实用”的规矩。

规矩 A：别走 AI 套路（真的丑）

明确写了：避免 AI 套路（渐变 / emoji / 圆角容器）。

你肯定见过：

• 满屏渐变玻璃拟态
• 卡片全是大圆角
• 到处塞 emoji 装活泼

结果就是：看起来像模板站，像“AI 生成”。

更好的做法：

• 用中性色打底，主色只负责强调
• 圆角克制，统一一个尺度（例如 8）
• 图标用一套风格一致的 icon set

规矩 B：一次给 3+ 变体，再给 Tweaks

这里是效率爆点。

别让 Agent 给你“一稿定生死”。

你要它一次吐出：

• Variant A：更克制、偏信息密度
• Variant B：更品牌化、偏视觉冲击
• Variant C：更工程友好、偏组件复用

然后加一段 Tweaks（微调开关）：

• 主色改成 #5B8CFF / #00A870
• 字体换成 Inter / 思源黑体
• 密度切换：紧凑 / 标准 / 宽松
• 圆角：4 / 8 / 12

你就能像调旋钮一样实时收敛风格。

规矩 C：不添加填充内容

很多人让 AI 出稿，最烦的就是“编故事”：

• 编一堆假数据
• 编一堆假用户
• 编一堆假文案

这套提示词直接禁止。

你应该要求：

• 文案用占位符，但结构真实（例如：{product_tagline}）
• 数据用明确标注（例如：TODO: replace with real metrics）

不然你会在评审会上被人追着问：“这 32% 提升哪来的？”

直接可用：一个「设计师 Agent」Prompt 模板（建议你收藏）

把下面这段当成你自己的系统提示词/项目提示词都行。你也可以把它拆进 Cursor、Claude、ChatGPT 的项目规则里。

你只需要把 [] 里的内容换成你的项目即可。

你是一个资深产品设计师 + 前端交付设计工程师。
目标：用 HTML/React 产出可交付的设计稿（原型/幻灯片/动效演示），可运行、可复用、可维护。

工作方式：
- 先澄清需求，缺信息就提问，不要脑补业务数据
- 先探索并复用现有设计系统/组件库/样式变量
- 用组件化方式构建交付物
- 输出后自检一致性与可访问性

硬性规则：
- 避免 AI 视觉套路：禁止滥用渐变、emoji、夸张大圆角卡片
- 不要添加填充内容：不编造数据/案例/用户；需要占位就显式标注
- 每个需求至少给 3 个设计变体（A/B/C），并提供 Tweaks（颜色/排版/密度/圆角/阴影）供快速迭代
- 优先复用项目已有组件与 tokens；若没有，先建立最小可用 tokens

交付要求（按需选择）：
- React：提供组件结构、tokens（CSS variables 或 Tailwind config）、页面布局
- 幻灯片：提供 16:9 布局规范、标题层级、版式组件（封面/目录/数据页/对比页/总结页）
- 动效：提供关键帧/过渡规则，避免花哨

完成后：
- 输出 done
- 再以“验证者”身份列出 10 条以内问题清单（对齐、层级、间距、可访问性、复用性、边界情况），并给修复建议

项目信息：
- 产品类型：[B2B SaaS / C 端 App / 官网]
- 目标用户：[填写]
- 品牌关键词：[克制/专业/年轻/科技感…]
- 技术栈：[React + Tailwind / Next.js + CSS Modules…]
- 可参考风格：[Linear / Stripe / Notion…]

一个落地场景：做一套“产品介绍 + 定价”页面（可直接跑）

你跟 Agent 这么说，会更容易拿到能用的东西：

• 页面结构：Hero、功能卡片、客户案例、FAQ、Footer
• 目标：用户 10 秒内看懂卖点，CTA 明确
• 风格：克制、偏 B2B
• 交付：React 组件 + tokens
• 变体：A 信息密度高、B 品牌感强、C 极简
• Tweaks：主色、圆角、密度

然后你要求输出格式：

• tokens.css（CSS Variables）
• components/（Button、Card、Section、PricingTable…）
• pages/landing.tsx

这样你拿到的不是“参考图”，是可用代码骨架。

一个落地场景：用同一套视觉体系出路演 PPT

这套泄密提示词强调“幻灯片”交付物。

你可以要求它提供：

• 16:9 网格（比如 12 栅格）
• 字号层级（封面/一级标题/正文/注释）
• 版式组件（封面、问题、方案、数据、对比、时间线、报价、总结）

重点是：PPT 也组件化。

你以后每次写方案，不用从头调对齐调字号，直接套模板就能讲。

避坑清单：这几种输出你要当场打回去

拿到结果后，看到下面情况就别客气：

• 满屏渐变、玻璃、霓虹光晕：让它回到克制风格，按 tokens 走
• 卡片圆角各不相同：强制统一圆角尺度
• 文案和数据“编得很真”：要求全部改成占位符，并标注 TODO
• 组件不可复用：要求拆分 Button、Card、Section、Typography
• 间距没有体系：要求使用 4/8 的 spacing scale，并全局替换
• 只给一稿：要求补齐 A/B/C 变体 + Tweaks

你真正要建立的“个人视觉体系”，长这样

别把视觉体系想成“一个好看的配色”。

它更像你的私家工具箱：

• 一套 tokens
• 一套组件
• 一套版式（网页 + 幻灯片）
• 一套验证流程（挑刺清单）

以后你做新项目，复制过去，改 3 个颜色变量，就能开工。

如果你愿意，我也可以按你的产品类型（B2B/C 端/官网）帮你把 tokens 和组件最小集列出来，直接开一个可跑的 React 模板。你告诉我技术栈和你喜欢的参考风格就行。