AI 原生设计
工作流方法论
从需求分析到 Skill 沉淀 — 用 Agent 思维重构设计流程，让 AI 成为设计团队的核心生产力
为什么需要 AI 设计工作流？
传统设计流程中，AI 只是画图工具。设计师面临的核心矛盾：经验无法沉淀、规范无法注入、流程无法自动化。
需求模糊就动手
接到需求就画图，缺乏结构化分析。业务目标、用户动机、设计策略未对齐，方案反复推翻。
规范散落在脑中
品牌色、字体、间距、动效参数散落在设计师记忆里，AI 无法感知，每次对话都要重新对齐。
经验随项目流失
每个项目从零开始，试错经验无法沉淀为可复用资产。换个项目、换个 AI 对话，一切重来。
协作链断裂
设计→开发交接靠口头，规范丢失在传递链中。上游决策无法自动传递到下游执行。
"我想要的是：让 AI 理解项目上下文、遵守设计规范、在步骤之间流畅交接。不是让 AI 画图，而是让 AI 像一个有经验的设计师一样思考。"
— 设计方法论的核心诉求
三层架构：Skill · Constraint · Workflow
核心理念：Skill 是「怎么做」，Constraint 是「不能做什么」，Workflow 是「先做什么再做什么」。三者协同，AI 才能产出符合品牌规范的设计方案。
Skill 资产层
设计方法论的可执行单元
约束文档层
项目规范的注入机制 — 系统提示自动加载
工作流层
从接需求到交付的完整链路
5 个可复用 Skill，覆盖设计全流程
每个 Skill 都是一个独立的方法论单元：有明确的触发条件、输入输出、交接协议。经过 4 轮迭代优化，从通用方法论进化为感知项目上下文的设计系统。
Design Step One
需求分析与方案选择
- 画线框图前必答 5 问（业务目的→用户动机→设计策略）
- 需求分诊机制：IA/流程/视觉/需求分析四路分流
- 改版诊断模式：现有设计问题定位
- 项目上下文自动感知：扫描已有文档，增量/补全/完整三种模式
Design Step Two
信息架构与流程设计
- IA 设计四步法：功能清单→分组→层级→导航
- 导航模式选择器：顶部导航/单页滚动/全屏沉浸
- 展示型网站适配：IA→Next.js 路由映射
- Step 交接协议：接收表+传递表+前置条件守卫
Design Step Three
视觉排版与交互文档
- 视觉心理学六大原则：接近性/相似性/封闭性/连续性/对称性/图底关系
- 排版决策工具表：间距/宽度/网格/比例/断点
- 品牌一致性约束：强制 Tailwind token，禁用硬编码色值
- Web 响应式专项：替代 iOS/Android 多平台内容
Portfolio Page Designer
作品集页面设计
- 需求理解四步法：项目背景→设计约束→输出期望→成功标准
- 三种设计方向变体：保守/创新/混合
- 前端美学指南：排版/色彩/动效/背景/纹理
- 质量验证检查清单：5 维度评分体系
Figma Use
Figma MCP 集成操作
Skill 进化日志
错误模式识别
识别 7 个核心问题（P01-P07），建立错误模式表
系统性修复
统一项目上下文感知 + Step 交接协议
产品类型扩展
展示型网站适配 + Web 响应式专项
结构规范化
统一 SKILL.md + YAML frontmatter + 子目录
20+ 条规则，注入系统永不丢失
约束文档通过系统提示注入，每次对话自动加载。Agent 无法忽略，也无法绕过。
.trae/rules/project_rules.md → 系统注入层
架构约束
- 分层依赖：Types → Config → Components → Pages（单向）
- 组件间通过 Props 通信，禁止跨层访问
编码约束
- export function 命名导出，禁用 export default
- 先定义 interface，禁用 any
- 移动优先，再扩展桌面端
样式约束
- 使用 Tailwind token，禁用硬编码色值
- 动画仅用 transform + opacity
- 图片用 next/image，首屏加 priority
性能约束
- SSG 优先，大型组件动态导入
- LCP < 2.5s, CLS < 0.1, Lighthouse > 90
质量评分体系（1-5分，< 3 分需返工）
文档索引
从 JD 到交付：完整工作流演示
以「自建房作品集」项目为例，展示从收到模糊需求到高质量交付的完整链路。
需求分诊
收到模糊需求 → 5 个分诊问题 → 判断问题层级
上下文感知
扫描项目文档 → 提取已有决策 → 标记已确认/待分析
Skill 执行
按分诊结果调用对应 Skill → Step One/Two/Three
约束校验
输出对照 project_rules → 品牌一致性检查
迭代进化
记录试错 → 更新 evolution-log → 沉淀新 Skill
- 设计师接到需求就画图 → 方案反复推翻
- 规范靠记忆 → 每次重新对齐
- 经验随项目流失 → 换个项目重来
- 设计→开发交接靠口头 → 规范丢失
- 分诊→感知→执行→校验→进化 → 方案一次过审
- 约束文档自动注入 → 规范零漂移
- Skill 资产沉淀 → 经验变可复用资产
- AGENTS.md 知识库 → 新人即刻上手
4 轮迭代，从方法论搬运到系统工程
每次迭代都有明确的问题定义、修复方案、验证结果。不是拍脑袋优化，是数据驱动的系统改进。
错误模式识别
portfolio-page-designer 优化
问题
通用方法论与项目约束脱节
方案
识别 7 个核心错误模式（P01-P07）
结果
建立错误模式表，确定 P01+P02 优先级
系统性修复
portfolio-page-designer 再优化
问题
P01 项目上下文感知 + P02 交接链断裂
方案
统一上下文感知模块 + Step 交接协议
结果
增量/补全/完整三种感知模式
产品类型扩展
design-step 系列系统性优化
问题
缺少展示型网站和 Web 响应式
方案
补充展示型网站模式 + 排版决策工具
结果
IA→Next.js 路由映射 + 5 项排版参数
结构规范化
文件结构规范化
问题
SKILL.md 位置不一致
方案
统一 SKILL.md + YAML frontmatter + 子目录
结果
所有 skill 统一结构，支持自动发现
AI 工作流带来的设计提效
可复用
Skill 资产跨项目复用，不再从零开始
可验证
约束文档自动校验，质量有据可查
可进化
迭代日志记录每次改进，持续优化
可传承
新人读 AGENTS.md 即可恢复完整上下文