很多人以为把设计需求丢给AI，让它“画个登录页”“来一版首页”就是在用AI做设计了。实际用过几次你就会发现，这种零散的问法产出的东西基本是模板感拉满的通用货，离“能用”“专业”差得很远。我自己折腾了大半年，把一套叫UI-UX Pro Max Skill的完整技能包跑通之后，才真正体会到什么叫做“让AI成为专业设计助手”——它本质上是把设计经验、平台规范、用户思维全部结构化地注入AI工作流，打造出一个可以稳定输出跨平台UI/UX方案的智能设计引擎。这篇教程我会从零开始，把我正在用的这套Skill的方法论、完整配置和落地流程全部拆开讲，零基础也能跟着搭起来。
1. 先拆解思路：为什么要做一套“AI设计引擎”
1.1 从“让AI画画”到“让AI做设计”的思维转变
我在带新人设计师的时候经常说一句话：会操作软件的人满大街都是，真正稀缺的是知道自己要什么、并且能把要的东西说清楚的人。和AI协作设计也是同一个道理。现在市面上的AI设计辅助工具很多，你让它生成图片、生成图标、生成页面骨架，它都能做到，但前提是你得喂给它足够清晰、足够结构化的信息。
大多数人卡住的地方就在这里。你直接告诉AI“帮我做个记账App的界面”，它确实会给你一版东西，但那版东西大概率没有产品逻辑，没有层级关系，也没有平台适配概念。因为AI在那一刻不知道你的目标用户是谁、不知道核心使用场景、更不知道iOS和Android在交互习惯上的差异，它只是在拼凑一个“看起来像记账App”的答案。
真正的智能设计引擎解决的就是这个问题。它不是一个简单的提示词模板，而是一整套“角色设定 + 设计规范 + 平台规则 + 检查清单”的组合。当你把这套东西完整地配置好，AI就不再是那个“你问一句它答一句”的被动工具，而是一个自带设计判断力的协作伙伴，它会在动手之前先理解需求，在设计过程中自动应用规范，在输出之后自己检查错漏。这套体系，就是我说的UI-UX Pro Max Skill的核心。
1.2 智能设计引擎的核心：三层架构
为了让大家理解起来不那么抽象，我把这套Skill拆成三层架构。
角色层解决的是“AI以什么身份思考”的问题。如果你只是让它“扮演设计师”，它输出的东西还是很泛。但如果你告诉它“你是一位拥有8年经验、专注于移动端和Web端产品设计的资深UI/UX设计师，主导过日活百万级的工具类产品设计”，AI的输出风格、侧重点和细节关注度会立刻变得不同。
规则层解决的是“按照什么标准做设计”的问题。这里面包含颜色体系、间距单位、字体层级、圆角阴影的使用规则、可访问性要求等等。规则层是整套引擎最核心的部分，因为AI本身不是设计师，它不会天生知道“按钮高度不能低于44pt”“正文和标题的字号对比要达到什么程度才清晰”这类常识，这些必须全部显式地写给它。
输出层解决的是“产出什么格式、适配什么平台”的问题。同样一个功能页面，在iOS上可能适合用底部标签栏，在Android上更适合用顶部Tab或侧边导航，在Web端逻辑又不一样。输出层负责让AI在出方案的时候，先确认自己在为哪个平台设计，再按照对应的平台规范输出。
三层架构缺一不可。缺少角色层，AI的产出没有审美倾向和判断力；缺少规则层，产出的东西细节经不起推敲；缺少输出层，就算设计稿再好看，也没法直接落到不同平台上去用。
1.3 适用场景与能力边界
这套UI-UX Pro Max Skill并不是万能的，我在实际使用中慢慢摸清了它的能力边界。
它特别擅长的事情有这些：产品概念稿的快速产出、设计系统初稿的搭建、跨平台适配方案的推演、交互说明文档的撰写、以及设计走查清单的生成。对于零基础入门者来说，它可以把你从“不知道从何下手”直接带到“有一版有逻辑、有规范的初稿可以做评审”的阶段，这个价值是非常大的。
但它也有明显做不到的事情。比如需要深度品牌创意的主视觉设计、复杂动效的设计、依赖真实用户反馈的可用性测试方案，这些AI目前很难独立完成。你让AI给你一个登录页的布局，它能做得又快又好；你让AI给你设计一个能代表品牌灵魂的视觉符号，它大概率会给你一个平庸的答案。
搞清楚边界的好处是，你不会对AI产生不切实际的期待，也不会在它输出不佳的时候直接判定这套方法不可用。正确的心态是：把AI当成一个高效的执行者和校对者，把真正的创意判断和用户洞察留在自己手里。
2. 核心细节：Skill内容怎么设计才能让AI变得“专业”
2.1 角色设定不是一句“你是设计师”那么简单
我见过很多人写提示词，角色设定就一句话：“你是一个UI设计师。”这句话给了和没给差不多。AI对“设计师”这个身份的理解是一个平均值，可能是画插画的，可能是做品牌VI的，也可能是做三维的，它并不知道你需要的是哪一种。
在我自己打磨的这套Skill里，角色设定部分我会写得很细，给大家一个可以参考的模板：
你是一位拥有8年以上产品设计经验的资深UI/UX设计师，专注于移动应用与Web端产品的交互设计。你服务过电商、效率工具、社交内容等多类产品，熟悉iOS人机界面指南、Material Design规范以及Web响应式设计原则。你在设计时优先考虑用户目标和使用场景，遵循清晰的视觉层级和一致的设计语言，擅长用最少的设计元素解决最核心的使用问题。
这段角色描述里藏着几个关键信息：经验年限、专注领域、服务过的产品类型、掌握的设计规范、设计价值观。AI拿到这段描述之后，它对“设计师”这个身份的建模会从平均值收敛到“跨平台产品设计师”这个具体方向，输出的东西自然会往这个方向靠。
角色设定不是写一次就结束了。在后续的每一轮对话里，如果AI的输出开始变得松散，我会把角色描述重新贴一遍，或者在回复里提醒它“请以跨平台产品设计师的身份重新审视这个方案”。这个小小的习惯，能让AI在长对话里保持稳定的输出质量。
2.2 设计规范要写成AI能执行的“规则”
很多人在配置设计规范的时候，喜欢把市面上设计规范的内容整段复制给AI，比如“遵循8pt网格系统”“使用适度的留白”“保证对比度”等等。这些内容本质上是在给AI做知识普及，但对实际产出的约束力很弱。
真正有效的方式，是把规范改写成“检查项”。AI不是一个会自觉遵守规范的生命体，它更像一个容易遗忘的执行者，你给它一条可量化的规则，它才能在执行的时候去逐项对照。我举几个我在Skill里的实际规则例子：
- 所有页面边距、间距、内边距必须使用4的倍数，基准间距为8pt，次级间距为4pt、12pt、16pt、24pt。
- 可点击元素的最小尺寸：iOS平台为44x44pt，Android平台为48x48dp，Web端为32x32px起，且触控目标中心点之间间距不小于8pt。
- 颜色使用必须遵循语义化命名：主色仅用于主要操作按钮与选中状态，辅助色用于链接与次级操作，语义色（成功、警告、错误）仅用于对应状态反馈。
- 字体层级固定为四级：大标题（20pt/600）、标题（17pt/600）、正文（15pt/400）、辅助文字（13pt/400），行高分别为24pt、22pt、20pt、18pt。
每条规则都必须是“判断式”的，AI拿到之后能明确地检查“这个按钮高度是48，符合要求；那个按钮高度是41，不符合”。我在实际使用中发现，把规则改写成可检查的形式之后，AI出生方案的规范度提升是非常明显的。
还有一个容易踩坑的地方：规则文件不要塞得太长。AI的记忆和注意力是有限的，规则文件超过一定长度后，它会在输出过程中逐渐遗忘前面的内容。我一般把规则按主题拆分，比如色彩规则一个文件、间距规则一个文件、字体规则一个文件，每个文件控制在10条以内，然后在不同的设计阶段告诉AI“现在请重点参考这几个规则文件”。
2.3 平台差异的显式注入
跨平台设计是这套Skill的重头戏，也是AI最容易翻车的地方。默认情况下，AI产出的设计方案往往带着强烈的单一平台风格，要么全部是iOS风格，要么是Android风格，几乎没有主动适配的意识。
解决这个问题的办法，是把平台差异做成一张显式的对照表放进规则层。我在Skill里维护了这样一张表：
| 设计维度 | iOS | Android（Material Design） | Web（响应式） |
|---|---|---|---|
| 主导航结构 | 底部Tab Bar为主 | 底部导航或Navigation Rail，视设备类型 | 侧边导航栏或顶部导航 |
| 返回操作 | 左上角返回按钮 + 侧滑手势 | 顶部返回键 + 系统级返回手势 | 浏览器前进/后退 + 面包屑 |
| 字体偏好 | SF Pro，强调字重和层级 | Roboto，支持更大范围的字体缩放 | 常用系统字体栈，需考虑流式布局 |
| 圆角风格 | 大圆角（12-16px） | 中圆角（4-12px），不同组件规范不同 | 取决于品牌风格，一般适中 |
| 阴影深度 | 阴影柔和且层级多用透明度表达 | 阴影层级用海拔高度表达 | 少用阴影，多用描边和渐变 |
| 按钮风格 | 填充按钮为主，强调渐变和材质 | 填充与描边按钮并存，强调状态切换 | 强调hover、focus、disabled等交互状态 |
这张表写进Skill之后，AI在输出跨平台方案时会主动做一层“平台检查”，它会自己判断这个设计在iOS上拿得出手，在Android上是否也符合习惯。我会在流程中特别要求它在输出每个平台方案前，先明确说出“当前平台是XXX，本方案在导航、返回方式、触控目标尺寸上做了如下适配”，逼它把平台意识转为显式输出。
3. 实操过程：从零搭建并运行这套AI设计引擎
3.1 第一步：搭建Skill的目录与核心文件
我开始做这套Skill的时候，最先做的不是写提示词，而是先把文件目录结构搭起来。一套好用的Skill必须模块化，不然你写成一个巨大的提示词文本，后期维护起来会让人崩溃。
参考我当时搭建的目录结构：
uiux-skill/ ├── SKILL.md # 技能入口，写角色设定与整体工作流程 ├── rules/ │ ├── design-tokens.md # 色彩、间距、字体、圆角等基础设计规范 │ ├── platform-adaptation.md # iOS / Android / Web 平台差异对照规则 │ └── accessibility.md # 无障碍设计规则 ├── templates/ │ ├── page-spec.md # 页面规格文档模板 │ └── review-report.md # 设计走查报告模板 └── checklists/ └── ui-checklist.md # 通用UI设计检查清单SKILL.md是整个技能的入口文件，AI在调用这个Skill的时候会优先读取它。我的SKILL.md内容包含两个部分：第一部分是完整的角色设定，上面已经给过模板；第二部分是核心工作流程的定义，告诉AI接到一个设计任务之后应该按照什么顺序来推进工作。
rules目录下的文件是规则层，负责把设计规范和平台差异注入到AI的判断体系里。需要注意的是，这些规则文件不应该让AI一次性全部读取，否则它会信息过载。更好的做法是在不同阶段按需引用，比如做视觉细化的时候主要参考design-tokens.md，做多平台适配的时候主要参考platform-adaptation.md。
templates目录提供的是交付物模板，负责规范AI的输出形式。没有模板的时候，AI每次输出的结构都不一样，有了模板之后，AI产出的文档会形成一个固定的体例，不管是自己阅读还是交给团队评审，都会顺畅很多。
checklists目录提供的是质检清单。AI在设计任务结束后会被要求按照这份清单逐项自查，相当于给输出加了一道质量关卡。
3.2 第二步：写一套覆盖全流程的引导指令
目录搭好之后，接下来要做的就是把整套工作流程的引导指令写出来。这套引导指令是给AI的“任务分解说明”，它会告诉AI接到一个需求后，先做什么、再做什么、每步输出什么。
我目前使用的启动指令大致是这样的：
请以资深跨平台UI/UX设计师的身份，开始执行以下设计任务。 第一步，需求拆解：请提取本次设计任务的用户画像、核心使用场景、核心任务流，并用3-5句话概括设计目标。 第二步，信息架构设计：输出本次设计的页面/功能模块清单、页面之间的跳转关系，并说明每个页面的核心任务。 第三步，交互线框设计：为每个核心页面输出线框结构，用文字描述各区域的布局、元素类型、信息层级和间距关系。 第四步，视觉设计：在交互线框基础上，应用rules/design-tokens.md中的设计规范，输出高保真UI设计的完整描述，包括颜色、字体、间距、圆角、阴影的使用。 第五步，跨平台适配：分别针对iOS、Android、Web三个平台，输出适配调整方案，重点说明导航结构、返回方式、触控尺寸、响应式断点等差异点的处理方案。 第六步，设计走查：按照checklists/ui-checklist.md的内容逐项检查本次设计，输出检查结果和修改建议。 注意：在每一步输出时，请先说明你当前正在执行的是哪一步，以及这一步需要参考哪些规则文件。这段引导指令的设计思路，核心是把设计流程从“黑箱”变成“白箱”。AI接到指令后，每一步都会明确输出，你可以清楚地看到它是如何思考的，也能在任意一步发现问题并及时纠正，而不是等它一股脑输出一个大而全的方案才发现方向就偏了。
3.3 第三步：用一个真实案例跑通全流程
光写指令还不够，我拿一个实际做过的案例来演示整套流程跑通的样子。假设需求是设计一款旅行账单分摊App，目标用户是经常和朋友结伴出游的年轻人，核心场景是旅行中快速记账、行程结束后一键分摊费用。
AI在第一步会做需求拆解，大概会输出这样的内容：
目标用户：22-35岁，喜欢结伴旅行，习惯移动支付，对账单透明度有较高需求。 核心场景：旅途消费时快速记一笔；行程结束时自动计算每个人应付/应收金额。 核心任务流：新建账单 → 选择同行人 → 录入消费 → 设置分摊方式 → 查看结算结果。
信息架构阶段，AI会输出页面清单：首页（旅行列表）、账单详情页、记账编辑页、结算结果页、个人中心。线框设计阶段，AI会描述首页的布局：顶部是当前进行中的旅行卡片，中间是最近的账单记录列表，底部是快速记账的悬浮按钮。视觉设计阶段，AI会应用design-tokens.md里的规则，把主色定为一个偏活力的蓝绿色，并给出每个页面的字体层级、间距关系和按钮状态的完整描述。
到了跨平台适配这步，AI会根据平台差异表输出不同方案：iOS版本采用底部Tab Bar放三个主要入口，记账悬浮按钮独立在右下角；Android版本采用底部导航但按钮形态和阴影层级跟随Material规范，返回依赖系统级手势；Web版本则改成左侧侧边栏导航，页面宽度上限设为1200px居中显示，账单列表改用表格形式更利于信息密度。
整个案例跑完大概会生成一份三千字以上的设计规格文档，从需求到高保真描述再到多平台适配全部涵盖。对于零基础入门者来说，这份文档就是可以拿去做评审、找开发沟通的设计基础稿。
3.4 第四步：把AI产出变成可交付的开发文档
很多人拿到AI生成的界面描述之后不知道该怎么用，直接丢给开发，开发看了更是一头雾水。AI输出的内容毕竟是文字描述，要变成开发能理解、能排期的交付物，还需要一层加工。
我一般会把AI产出的内容整理成两份文档。第一份是页面规格表，用表格记录每个页面的名称、核心功能模块、页面间距、按钮和文字信息。第二份是设计tokens汇总表，把颜色、字体、间距、圆角、阴影这些设计变量集中成一张表。
页面规格表示例：
| 页面 | 模块 | 关键元素 | 间距 | 交互状态 |
|---|---|---|---|---|
| 首页 | 旅行卡片 | 旅行名、日期、参与人数、人均金额 | 卡片内边距16pt，卡片间距12pt | 点击进入账单详情 |
| 首页 | 账单列表 | 支出项目、金额、记账人、时间 | 列表项高度72pt，头像间距8pt | 滑动可删除、点击进入编辑 |
| 记账页 | 金额输入 | 大号金额数字、数字键盘 | 金额字号34pt，输入区上下边距24pt | 输入时键盘弹出，按钮置灰逻辑 |
这份表格整理出来，页面规格相关的信息开发基本可以直接看到并确认。再配合设计tokens表，视觉层面的信息也就闭环了。我在实际操作中的体会是，花半小时把AI产出的内容整理成这两份文档，比丢给开发一段AI原文要高效得多，也省掉了后续大量的沟通成本。
4. 常见问题与排查技巧：AI设计落地踩过的坑
4.1 AI产出“看起来对但细节全错”怎么办
这是我在使用这套Skill时最先遇到的坑。AI在早期版本的输出里，页面结构、文案描述都挺像那么回事，但一检查细节，问题就全冒出来了：首页和详情页的间距对不上、按钮高度一会儿是44一会儿是36、同一个操作在三个页面里有三种不同的颜色表达。
后来我总结出原因：规则虽然写进了Skill，但AI在长段输出过程中会逐渐偏离初始规则，尤其当输出内容特别长的时候，后半段的规则约束力会明显下降。
针对这个问题，我现在的处理方式有两个。第一，把设计tokens文件在每次视觉设计开始之前重新贴给AI，并明确要求“所有视觉输出必须严格遵循该文件中的数值规则”。第二，在所有设计输出结束后，让AI自己启动一次走查流程，对照checklists里的内容逐项检查，这一步相当于给最终产物上了一次质检线。
这个组合拳下来，AI输出里的细节错误减少了非常多。走查这一步尤其值得安利，因为它不只是帮我纠错，还会反过来指出AI自己发现的问题，比如“深色模式下的辅助文字对比度不足，建议换一个色值”，这些提示往往能倒逼我去检查那些我自己都忽略了的细节。
4.2 跨平台适配做得“水土不服”
另一个高频问题，是AI嘴上说适配了，实际产出的还是iOS一套打天下。比如我让它做一个Web端的页面，它给出的导航还是底部Tab Bar，完全没有切换到侧边栏的思路；或者在Android版本里保留了iOS特有的大圆角和大阴影。
这个问题的根源在于平台差异规则没有被真正激活。AI很容易把“跨平台”理解成“同一套设计换个尺寸”，而不是“每个平台按各自交互习惯重做一层适配”。
我的修正办法，是在适配阶段给AI设置一个“声明前置”的规则。要求它在输出某个平台的方案之前，必须先写出这句话：“当前设计目标平台为XXX，本方案遵循该平台以下设计习惯：……”用这种强制声明的机制，逼着AI先回忆平台规则再动笔。只要它能把平台差异说清楚，产出的适配方案质量就会立刻上一个台阶。
我还做过一个更笨但很有效的事：把iOS、Material Design、Web三种平台官方有明确差异的交互组件截图整理成文件夹，在需要AI生成某平台方案时，把对应截图文件夹的描述贴给AI，让它先观察再输出。虽然AI看不了本地图片，但我会把关键差异点写成文字摘要放在platform-adaptation.md的前排，确保它在一开始读取规则时就先看到。
4.3 提示词一次写太长，AI开始“糊弄”输出
关于提示词长度的问题，我踩过一个大坑。一开始我以为规则写得越全越好，把设计规范、平台差异、可访问性、走查清单全部塞进一条启动指令里，结果AI的输出质量并没有变好，反而开始大量出现重复、模糊的表达，很多深层规则根本不被执行。
后来我意识到，AI的工作记忆是有限的。当提示词超过一定长度，它虽然“看”到了所有内容，但在实际执行时只会优先关注开头和结尾的部分，中间的内容就逐渐被模糊化了。
我目前的处理策略是分阶段对话，每次对话只专注一个设计阶段。需求拆解阶段只聊需求，线框设计阶段只聊结构和布局，视觉设计阶段才引入design-tokens.md，适配阶段才引入platform-adaptation.md，走查阶段才引入ui-checklist.md。规则文件按需加载，每次只给AI当前阶段需要的那部分规则，这个问题的改善非常明显。
4.4 让这套引擎“越用越准”的迭代技巧
UI-UX Pro Max Skill不是一套写完就固定不变的东西，它更像是一个需要持续迭代的生活习惯。我在用了两周之后，开始给这套Skill加一个“反馈日志”机制：每次设计结果出来，如果我对某一部分不满意，我会把不满意的原因和修正建议写进一个feedback-log.md文件，然后定时将这个文件的内容补充到对应的规则文件里去。
举个例子。有一段时间我发现AI生成的空状态页面总是很单薄，就一张插画配一句文案。我就在反馈日志里写了一条：“空状态页面不应只包含插画和文案，还需要提供明确的下一步行动引导，比如一个‘去创建’按钮。”这条反馈被收进规则文件之后，后面所有空状态页面的设计都自动带上了操作引导。
我用一个简单的公式来总结这个迭代过程：失败案例 → 原因分析 → 规则修改 → 回归测试。每轮设计流程跑完，都做一次这样的收尾动作，一个月之后你会发现AI的产出精度会有一个质的飞跃。这个迭代的过程，本质上也是你对设计理解加深的过程，它会反过来锻炼你提出好问题的能力。
写在最后的几点体会
这套UI-UX Pro Max Skill用到现在，我最深的体会是：AI设计工具的价值上限，取决于使用者把问题定义得有多清楚。Skill本质上是帮你把“模糊的设计直觉”翻译成“AI能执行的明确指令”的中间层，它最终训练的不是AI，而是你自己的结构化表达能力。
我个人现在每次让AI出设计稿之前，一定会先逼自己写清楚三件事：给谁设计、在哪个平台、核心任务是什么。顺序一旦反了，上来就聊风格聊配色，后面基本都会返工。这个习惯看着简单，实际能避免掉大量无效沟通。零基础的朋友如果只记一条，我建议就先记住这个。
