客户要高级感AI却给土豪金，换方法10分钟搞定及分享全过程
客户要的是高级感，AI 给我的是土豪金。
我于提示词里头添加了简约，添加了克制，添加了留白，甚至还贴上了Apple官网的链接。
结果呢？
AI生成了一个东西，这个东西看起来像“2010年县城婚庆公司官网”，是这样的情况。
那一刻，我陷入了崩溃的状态，并非是由于AI欠缺足够的聪明程度，而是在于我察觉到，不管我将提示词进行何种程度的优化，AI都无法领会我所提及的高级感究竟是怎样的一种存在。
在那之后，我更改了一种方式，仅仅花费了十分钟的时间，便将其完成了。客户在看完之后，直接表明：这才是正确的 。
今天，我把这个方法写出来，同时，我把另外两个真实项目的完整过程也写出来。
要是你同样碰到过 AI 不依从的状况，这篇文章能够为你节省下数目众多的加班夜间时段。
为什么 AI 总是不听话？
先说个残酷的真相。
不是 AI 不听话，是你说的话，AI 根本听不懂。
你说高级感，AI 理解的可能是：
但你心里想的高级感，可能是：
同一个词，在你脑子里是画面，在 AI 脑子里是随机数。
2025 年的一份设计师调研显示：
问题出在哪？
出在沟通方式上。
你在用形容词和 AI 沟通，而 AI 需要的是设计规范。
仿佛你不会向设计师表述我要那种大气的感觉，你会给予他一份品牌设计指南，
AI 也一样。
这便是.json 文件所拥有的价值，它能够将你脑海之中的形容词，转化为 AI 能够领会的设计规范。
接下来，我用 3 个真实项目，手把手教你怎么做。
项目一：企业官网改版 - 从“土豪金”到“高级灰”翻车现场
客户是一家从事 B2B SaaS 业务的公司，这家公司打算进行官网改版，这款改版的需求较为简单，那就是要具备高级感，千万不要做成类似小作坊那样风格。
我第一版用的是传统方法，写了一大堆提示词：
请设计一个现代、高级、简约的企业官网，
风格要像Apple那样有科技感和品质感。
配色要克制，布局要有呼吸感。AI 生成出来的效果？
深蓝色背景+金色标题+大理石纹理+衬线字体。
典型的土豪金审美。
客户看了直摇头：“这不对，太老气了。”
转折点：3 步搞定
而后我转变了一种思考的方向，相较于使 AI去猜测我所需要的事物，倒不如径直给予它一份设计方面的指南。
第 1 步：找到参考网站（2 分钟）
我打开了 的官网（一个项目管理工具）。
为什么选它？因为它的风格正好是我理解的B2B 高级感：
我截了一张全屏长图。
第 2 步：提取设计规范（3 分钟）
我把截图发给 ，用了这个提示词：
分析这个截图里的设计规范内容，从而生成一个名为design.json的文件。
包含：配色方案、字体系统、间距规则、圆角阴影等。
目标是让AI能精准复现这种视觉风格。20 秒后，AI 给了我这个：
{
"colors": {
"primary": "#5E6AD2",
"secondary": "#8B92B0",
"background": "#FFFFFF",
"text": "#16192C"
},
"typography": {
字体家族为，Inter，无衬线字体，
"fontSize": {
"h1": "56px",
"h2": "40px",
"body": "18px"
}
},
"spacing": {
"sm": "16px",
"md": "32px",
"lg": "64px",
"xl": "96px"
}
}第 3 步：约束式生成（5 分钟）
现在，我重新生成页面，但这次加上了这句话：
请依照design.json里设定的配色，按照design.json里规定的字体，依据design.json里提供的间距，来设计一个B2B SaaS官网。
包含Hero区、产品功能介绍、客户案例和底部CTA。
一定要采用在design.json里所界定的全部数值，绝对不可以自己去进行修改句号
然后把刚才的 .json 一起粘贴进去。
结果
这次生成的页面：
配色：紫蓝色系+白色背景（ 同款）
字体：Inter 字体+清晰的层级感
布局：左对齐+大量留白
间距：宽松、舒展、有呼吸感
客户看完直接说：对，就是这种感觉！
从 17 次失败到一次通过，用时 10 分钟。
项目二：SaaS 落地页 - 如何“借鉴而不抄袭”背景
我自己在做一个小项目，需要一个产品落地页。
我对于官网呈现出的那种渐变紫与深色背景相结合所营造出的高级感，怀有极度的喜爱之情，但却又不希望将其制作得与官网完全相同。
核心问题：如何“借鉴而不抄袭”？
方法：混搭式设计
我采用了一种更为高级之玩法，此玩法乃是从不相一致之网站提取各异之元素，进而将其组合成别具一格之风格 。
具体操作：
第 1 步：分别提取三个网站的 .json
我将Apple的首页进行分别截图，之后让AI去生成三份.json文件。
第 2 步：手动合并成一个“混搭版”
{
"colors": {
“primary”，其值为“#6366F1”，此乃源自Stripe 。
“secondary”，其值为“#86868B”，此乃来自Apple 。
"背景": "#0A0A0A" ，这 来 自 Stripe 。
},
"typography": {
"fontFamily"，是"SF Pro Display"，而此乃来自Apple的 。
},
"layout": {
“cardStyle”的值为“elevated”，这是来自Notion的
"borderRadius": "12px"
}
}第 3 步：用混搭版 .json 生成页面
我把这个混搭版设计规范发给 AI，生成落地页。
结果
生成的页面：
有 的高级感配色
有 Apple 的优雅字体
有 的功能性布局
但整体风格是独一无二的
几个朋友看完都说：这个设计挺有辨识度。
没人说“你这不就是抄 吗”。
代表配色的 A，加上体现字体的 B，再加上关乎布局的 C，等于属于你的原创风格。
项目三：个人品牌网站 - 1 小时出 3 版方案背景
一个做独立开发者的朋友找我，想做个个人品牌网站。
需求：
以往这般需求，我或许要耗2至3天时候，各自去设计3个版本页面。
现在？1 个小时搞定。
方法：.json 资产库
之前我积累了与设计系统相关的资产库，该资产库专门用于存放文件，这些文件是不同风格的.json格式的文件。
my-design-systems/
其中包含一个被称作apple - style.json的文件，该文件呈现出极简风格。
───有一个名为stripe - style.json的文件，它属于金融科技风格的范畴。
具有生产力工具风格的，名为notion - style.json的文件，它被放置到了某个路径下，在这个路径中，有一个目录结构，其中有一个名为notion - style.json的文件，里面所呈现的是生产力工具风格，它位于特定的位置，该位置处于一个层级结构里，这个层级结构有一个分支，分支下有一个名为notion - style.json的文件，其体现的正是生产力工具风格，此文件处于特定的文件集合中，该集合有一定的目录划分，这种目录划分是一种层级形式，在这个层级形式里，有一个名为notion - style.json的文件，它所展现的是生产力工具风格，这个文件存在于某个具体的文件夹路径下，此路径具有特定的排列方式，在这种排列方式里，有一个名为notion - style.json的文件，它呈现出生产力工具风格，该文件处于一个特定的存储单元中，这个存储单元有其自身的组织架构，在这个组织架构里，有一个名为notion - style.json的文件，它具现的是生产力工具风格。
其下，有一个名为 linear - style.json 的文件，此文件用于表示项目管理风格，句号。
└── ...第 1 步：选 3 个风格模板（5 分钟）
我根据朋友的气质，选了三个方向：
第 2 步：批量生成 3 版页面（45 分钟）
我将三个.json 文件，分别发送给 AI，其中内容需求是相同的 。
设计一个个人品牌网站，该网站专为独立开发者，依据design.json来进行设计。
包含：个人介绍、项目展示、博客列表、联系方式。每个方案生成时间：10-15 分钟。
第 3 步：让朋友选择（10 分钟）
我把 3 版方案发给他，他一眼就选中了方案 B（ 风格）。
他说：这个最符合我的调性，专业又不失个性。
结果
最为关键的洞察是，.json属于你的设计系统资产，积累的数量越多，效率便会越高。 .
实战问题速查表：10 个最常见的翻车场景
做了这么多项目，我总结了 10 个最常见的问题和解决方案。
1. AI 没有完全遵守 .json 怎么办？
症状：你给了.json，然而 AI 依然使用了它自身的配色，或者是字体。
解决方案：
2. 生成的页面“AI 味”太重怎么办？
症状：布局中规中矩，配色安全但无趣，一眼就能看出是模板。
解决方案： 在提示词中加入：
避免完全居中对齐，尝试左对齐或不规则布局。
加入一些**意外元素**（如斜切角、重叠图层）。
字体大小对比要强烈（标题很大，正文适中）。3. 截图质量不高，AI 理解不准怎么办？
症状：生成的 .json 配色偏差大，或者字体识别错误。
解决方案：
4. 找不到合适的参考网站怎么办？
症状：想要赛博朋克、新中式等小众风格，找不到参考。
解决方案：
5. 客户说的“参考网站”和他的“真实需求”不一致怎么办？
症状是，那客户表示要Apple风格，然而实际上所期望的是，更具温暖之感、更带有人情味的设计。
解决方案： 先深入沟通：
根据沟通结果，选择真正合适的参考网站。
6. .json 太复杂，生成的页面反而乱了怎么办？
情况是这样的，在.json 的文件之中，定义了二十种颜色，还定义了十种字体，最终呈现出来的页面，是那种花里胡哨的样子。
解决方案： 简化 .json，只保留核心元素：
遵循“少即是多”原则。
7. 移动端显示效果不好怎么办？
症状：桌面版看起来很好，但移动端布局乱、字体太小。
解决方案： 在 .json 中加入响应式规则：
"responsive": {
"mobile": {
字体大小，其中h1为32像素，正文为16像素。
“spacing”，其中“md”对应的值是“16px”，“lg”对应的值是“32px”，
}
}8. 想微调某个元素，但不想重新生成整个页面怎么办？
症状表现为，整体呈现出来的效果令人感到满意，然而，按钮的圆角部分，想要从原本的8px进行更改，改成16px 。
解决方案： 用局部修改提示词：
保持现有设计不变，只修改以下内容：
- 按钮圆角从8px改为16px
- 主标题字重从600改为7009. 配色看起来“不和谐”怎么办？
症状：各个颜色单独看都不错，但放在一起就很怪。
解决方案：
想在好多不同项目里复用.json，然而品牌呈现出来的颜色不一样要怎么处理呢？
症状是，项目 A 采用蓝色，项目 B 采用绿色，然而布局以及字体要保持一致。
应对办法：构建一个基础的模板.json，每一个项目仅仅改动其中的一部分，
"colors": {
"primary": "#YOUR_BRAND_COLOR", 这是一个关于某种属性的设定, 其中 "primary" 表示主要的, 而 "#YOUR_BRAND_COLOR" 代表你的品牌颜色。
}快速上手清单
最后，给你一个 5 分钟上手的操作清单：
首次运用，时长为十分钟，后续运用，时长是五分钟，从与人工智能较劲儿的状态到能够掌控人工智能的状态 。
半年前，我每次让 AI 生成页面，都像在赌博。
倘若运气不错的情形容况下，会生成一个有着70分的页面，而后再通过手动的方式去进行修整改动。要是运气欠佳的情形容况下，便会生成一个仅有30分的质量糟糕的东西，接着就得推翻原来的，重新开始了。
那时候我觉得，AI 不靠谱。
但现在我知道，不是 AI 不靠谱，是我用错了方法。
AI 不是魔法，它是工具。工具好不好用，取决于你怎么用。
你以形容词奉养它，它予你含混的回应，你以设计规范供养它，它给你精确的成果。
.json，就是那个翻译器。
它把你脑子里的画面，翻译成 AI 能理解的语言。
从此以后：
不用再纠结为什么 AI 给的配色这么丑
不用再一遍遍重新生成页面
不用再对着屏幕骂 AI 不听话
你只需要：
寻得参考网站，截图片以使AI生成，用.json对AI生成页面加以约束。
10 分钟，搞定。
在2025年,W3C已然发布了标准规范,Figma等主流设计工具均在推动设计系统的标准化工作。
这说明什么？
说明.json 这套方法，不是野路子，是行业标准。
未来的设计师，不是会 PS 的人，而是会管理设计系统的人。
掌握 .json，你就掌握了 AI 时代的设计话语权。
现在就打开你最喜欢的网站：
通过截图，生成你个人的首个 .json 文件，借助这个文件去约束 AI 生成页面。
10 分钟后，你会发现——驯服 AI，就是这么简单。
当你借助 AI 去生成页面之际，是否遭遇过某些“状况百出”的经历呢？欢迎在评论区展开交流。
欢迎 你 发表评论: