用 Harness Engineering 思维建立 UI 设计规范打通产品、设计、前端的一条流水线AI 能写 UI 代码了但写出来的代码经常和设计师的稿子对不上。颜色偏了、间距不对、组件风格混乱——每次 AI 生成的界面都需要人工调整效率反而更低。问题不在 AI在于没有给它设计好约束环境。Harness Engineering 的核心思想是用规范和验证层约束 AI Agent 产出可靠代码。把这个思路应用到 UI 设计上就是建立一套可执行的 UI 规范体系让产品原型、设计稿和前端代码共用同一套标准。问题产品、设计、前端三条线各走各的传统工作流是这样的1 产品经理写 PRD → 设计师出设计稿 → 前端开发按稿实现看起来清晰实际运行中有几个断层断层一规范不统一产品经理用 Figma 原型设计师用 Sketch 或 PS前端用 Tailwind 或自定义 CSS。三方对「主色调是什么、字号标准是几号、间距用多少」没有共识。断层二设计稿和代码脱节设计师出的是像素稿前端拿到的是视觉参考。间距、颜色、圆角、阴影这些细节AI 生成时只能猜猜完再人工改。断层三缺乏验证层设计稿上线后没有人系统性地验证代码是否还原。出了问题才发现返工成本高。这些断层的根本原因没有一套统一的、可执行的 UI 规范让三个角色都能读取和遵守。解决方案用 Harness 六层模型建立 UI 规范Harness Engineering 有六层规范层、上下文层、执行层、验证层、部署层、审查层。每一层都可以映射到 UI 规范体系中。第一层规范层Specification产出物UI Design Tokens 文件Design Tokens 是 UI 规范的基础设施。它把设计规范编码成结构化数据人和 AI 都能读取。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 { color : { primary : #3B82F6 , secondary : #10B981 , danger : #EF4444 , text : { primary : #111827 , secondary : #6B7280 } } , spacing : { xs : 4px , sm : 8px , md : 16px , lg : 24px , xl : 32px } , borderRadius : { sm : 4px , md : 8px , lg : 12px } , typography : { heading1 : { fontSize : 24px , fontWeight : 700 , lineHeight : 1.2 } , body : { fontSize : 14px , fontWeight : 400 , lineHeight : 1.5 } } }这份文件的作用产品经理在 Figma 原型里引用这些 token保证和设计师一致设计师在 Figma/Sketch 里定义组件时引用这些 token前端在代码里 import 这些 token而不是写魔法数字AI Agent 在生成 UI 时读取这些 token保证风格统一对应 Harness 理论这就是 AGENTS.md 或 。cursorrules 的 UI 版本。AI 每次工作前读取就能在正确约束内生成代码。第二层上下文层Context Engineering产出物组件库文档 UI 规范文档 UI 组件规范光有 token 不够AI 还需要知道「怎么用」这些 token以及「用什么组件」。CLAUDE.md 或 。cursorrules 中新增 UI 章节1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ## UI 规范 ### 组件使用规则 - 所有按钮必须使用 Button 组件不要自己写 button 标签 - 表单必须使用 Form 组件包裹保证统一间距和校验逻辑 - 列表项必须使用 ListItem 组件不要自己拼 div ### 布局规则 - 页面外层容器 padding 使用 spacing.lg24px - 卡片之间间距使用 spacing.md16px - 标题和正文间距使用 spacing.sm8px ### 颜色使用规则 - 主操作按钮用 color.primary - 成功状态用 color.secondary - 错误状态用 color.danger - 不要自己写颜色值必须引用 token ### 禁止事项 - 禁止在组件外写内联样式 - 禁止使用硬编码的像素值 - 禁止覆盖组件库的默认样式必须通过 props 调整UI 组件规范组件规范是 design.md 的核心部分定义了项目中所有可复用组件的标准。AI 生成 UI 时必须严格遵守这些规范。基础组件规范1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 ## Button 按钮 ### Props - variant: primary | secondary | danger | ghost - size: sm | md | lg - disabled: boolean - loading: boolean - icon: ReactNode ### 样式规范 - 高度sm32px, md36px, lg40px - 圆角8px - 内边距12px 24pxmd - 字体14pxfontWeight 500 ### 颜色规范 - primary背景 color.primary文字白色 - secondary背景白色边框 color.primary文字 color.primary - danger背景 color.danger文字白色 - ghost背景透明文字 color.primary ### 状态规范 - hover背景色加深 10% - active背景色加深 20% - disabled透明度 0.5cursor not-allowed - loading显示加载动画禁止点击 ### 使用场景 - primary页面主操作提交、保存、确认 - secondary次要操作取消、返回 - danger危险操作删除、移除 - ghost文本型按钮查看详情、更多操作 --- ## Input 输入框 ### Props - placeholder: string - value: string - onChange: (value: string) void - error: boolean - disabled: boolean - type: text | password | number | email ### 样式规范 - 高度36px - 圆角6px - 边框1px solid color.border - 内边距8px 12px - 字体14px ### 状态规范 - focus边框 color.primary阴影 0 0 0 2px rgba(59, 130, 246, 0.1) - error边框 color.danger - disabled背景 color.background透明度 0.6 --- ## Card 卡片 ### Props - title?: string - children: ReactNode - bordered?: boolean默认 true - shadow?: none | sm | md ### 样式规范 - 圆角12px - 内边距24px - 边框1px solid color.borderborderedtrue - 阴影shadow-sm0 1px 2px rgba(0,0,0,0.05) ### 使用场景 - 内容分组展示 - 列表项容器 - 详情页主体复合组件规范1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ## Form 表单 ### 布局规则 - 表单项之间间距20px - label 宽度固定 100px右对齐 - input 宽度根据父容器自适应 - 错误提示在 input 下方12pxcolor.danger ### 校验规则 - 必填项label 后加红色星号 - 实时校验input blur 时触发 - 提交校验点击提交按钮时触发所有字段校验 ### 提交按钮 - 位置表单底部右对齐 - 状态校验失败时 disabled加载中时显示 loading --- ## Modal 弹窗 ### 样式规范 - 宽度480px小、640px中、800px大 - 圆角12px - 遮罩rgba(0,0,0,0.5) - 内边距24px ### 结构规范 - 头部标题 关闭按钮右上角 - 内容children - 底部操作按钮右对齐主按钮在右 ### 使用场景 - 确认操作 - 表单填写 - 详情查看状态组件规范1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ## Loading 加载状态 ### 页面加载 - 全屏遮罩居中显示加载动画 - 动画旋转圆圈颜色 color.primary ### 局部加载 - 组件内部显示加载动画 - 禁用交互透明度 0.6 ### 按钮加载 - 按钮内显示加载动画 - 文字变为「加载中...」 - 禁止点击 --- ## Empty 空状态 ### 样式规范 - 图标64px颜色 color.textSecondary - 标题16pxcolor.textSecondary - 描述14pxcolor.textTertiary - 操作按钮可选主按钮样式 ### 使用场景 - 列表为空 - 搜索无结果 - 数据加载失败组件规范文件组织1 2 3 4 5 6 7 8 9 10 11 12 13 components/ ├── Button/ │ ├── index.tsx # 组件实现 │ ├── Button.types.ts # Props 类型定义 │ └── Button.md # 组件文档含规范 ├── Input/ │ ├── index.tsx │ ├── Input.types.ts │ └── Input.md └── Card/ ├── index.tsx ├── Card.types.ts └── Card.md每个组件目录下都有一个.md文件记录该组件的完整规范。AI 在生成 UI 时会读取这些文档确保生成的代码符合规范。对应 Harness 理论这是上下文层。AI 读取这些文档后知道项目里有哪些组件、怎么用、什么场景下用哪个。第三层执行层Execution产出物Design Tokens 自动同步管道规范写完还要确保三方用的是同一份数据。Figma → Token → 代码的自动同步1 2 3 4 5 6 7 设计师在 Figma 里更新 Design Token ↓ Figma Token 插件导出 JSON 文件 ↓ CI 自动将 token 文件同步到代码仓库 ↓ 前端 import 最新 token无需手动复制关键工具Figma Tokens 插件从 Figma 导出 tokenStyle Dictionary将 token 转换为 CSS 变量 / SCSS 变量 / JSONGitHub Actions自动同步 token 文件对应 Harness 理论这是执行层。确保 AI 和人类开发者拿到的 token 文件是最新的不会用过时数据。第四层验证层Verification产出物视觉回归测试 Lint 规则AI 生成的 UI 代码可能不符合规范。需要自动验证。视觉回归测试1 2 3 4 5 6 7 8 9 10 11 12 13 # GitHub Actions 示例 name: Visual Regression Test on: [ pull_request ] jobs: visual-test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Build Storybook run: npm run build-storybook - name: Run Percy Visual Test run: npx percy storybook ./storybook-staticUI Lint 规则用 ESLint 插件检查代码是否遵守 UI 规范禁止硬编码颜色值禁止硬编码像素值必须使用组件库的组件禁止内联样式对应 Harness 理论这是验证层。AI 生成的代码必须通过视觉回归测试和 Lint 检查才能合并。第五层部署层Deployment产出物Design Token 版本化 组件库发布Token 版本化每次 token 更新打 tag前端 lock 版本避免意外升级重大变更通过 Breaking Change 流程组件库发布组件库独立 npm 包版本化管理变更日志记录每次改动对应 Harness 理论这是部署层。确保 token 和组件库以可控方式发布不会导致线上问题。第六层审查层Review Feedback产出物设计规范迭代反馈机制用户反馈收集设计师使用组件库时遇到的问题前端开发在实现中发现的 token 缺陷AI 生成代码中反复出现的错误模式周复盘每周统计AI 生成代码的 lint 错误率每月统计视觉回归测试的失败率迭代优化 token 和组件库反馈回流lint 错误 → 优化 。cursorrules 中的 UI 章节视觉回归失败 → 优化组件库文档或使用说明设计师反馈 → 补充缺失的 token 或组件对应 Harness 理论这是审查层。形成闭环规范持续优化。完整工作流打通之后的工作流是这样的1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 1. 产品需求确定 ↓ 2. 设计师在 Figma 里设计组件引用 Design Token ↓ 3. Figma Token 插件导出 JSON ↓ 4. CI 自动同步 token 到代码仓库 ↓ 5. 产品经理在 Figma 原型里引用同一套 token保证和设计师一致 ↓ 6. AI Agent 读取 token 文件和组件库文档 ↓ 7. AI 生成 UI 代码引用 token 和组件 ↓ 8. 代码通过 Lint 和视觉回归测试 ↓ 9. 上线收集反馈 ↓ 10. 反馈回流到 token 和组件库持续优化三方共用的标准产品经理在原型里引用 token保证设计方向一致设计师在 Figma 里定义 token保证视觉规范统一前端/AI在代码里 import token保证实现和视觉稿一致踩坑提示Token 粒度不要太细也不要太粗。color.primary够用color.button.hover.background太细了。组件库覆盖覆盖 80% 的常见场景就够了。剩下 20% 的定制需求不要强行组件化。AI 上下文长度.cursorrules 里的 UI 章节不要太长。AI 读不完反而忽略关键信息。版本同步Figma 和代码仓库的 token 版本要一致。不同步会导致「设计稿和代码对不上」的老问题。总结UI 设计规范不是设计师的事是产品、设计、前端三方共用的基础设施。Harness Engineering 的六层模型给出了一个清晰的框架规范层定义 token上下文层提供使用指南执行层保证同步验证层保证质量部署层控制变更审查层形成闭环。AI 时代这套体系的价值更明显。AI Agent 需要明确的约束才能产出可靠的 UI 代码。没有规范的 AI 生成 UI就像没有设计稿的前端开发——每次都要猜每次都猜错。用规范约束 AI用验证保证质量用反馈持续优化。这是打通产品、设计、前端的一条流水线。学AI大模型的正确顺序千万不要搞错了2026年AI风口已来各行各业的AI渗透肉眼可见超多公司要么转型做AI相关产品要么高薪挖AI技术人才机遇直接摆在眼前有往AI方向发展或者本身有后端编程基础的朋友直接冲AI大模型应用开发转岗超合适就算暂时不打算转岗了解大模型、RAG、Prompt、Agent这些热门概念能上手做简单项目也绝对是求职加分王给大家整理了超全最新的AI大模型应用开发学习清单和资料手把手帮你快速入门学习路线:✅大模型基础认知—大模型核心原理、发展历程、主流模型GPT、文心一言等特点解析✅核心技术模块—RAG检索增强生成、Prompt工程实战、Agent智能体开发逻辑✅开发基础能力—Python进阶、API接口调用、大模型开发框架LangChain等实操✅应用场景开发—智能问答系统、企业知识库、AIGC内容生成工具、行业定制化大模型应用✅项目落地流程—需求拆解、技术选型、模型调优、测试上线、运维迭代✅面试求职冲刺—岗位JD解析、简历AI项目包装、高频面试题汇总、模拟面经以上6大模块看似清晰好上手实则每个部分都有扎实的核心内容需要吃透我把大模型的学习全流程已经整理好了抓住AI时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】
