AI Agent 辅助 UI 设计：从线框到高保真

在 OpenClaw 中输入你的品牌信息和设计偏好：

请为我的产品生成完整的设计规范：

品牌名：龙虾商城
行业：电商
风格：简洁、信任感、偏暖色调
目标用户：25-40 岁都市白领
参考品牌：小红书、网易严选

请输出：
1. 色彩系统（主色、辅色、语义色、中性色，含 HEX 值）
2. 字体系统（标题/正文/辅助，含字号和行高）
3. 间距系统（4px 基准，列出 8 个档位）
4. 圆角系统（小/中/大/全圆）
5. 阴影系统（3 个层级）
6. 响应式断点

AI 会输出一份可直接导入 Figma 的 Design Token JSON。

在 Cursor 中描述你想要的页面布局：

请生成一个电商首页的 HTML 结构：

1. 顶部导航栏：Logo + 搜索框 + 购物车 + 用户头像
2. Hero Banner：全宽轮播图，3 张
3. 分类导航：8 个品类图标，2 行 4 列
4. 限时秒杀：倒计时 + 横向滚动商品卡
5. 猜你喜欢：瀑布流，3 列
6. 底部 Tab：首页/分类/购物车/我的

要求：
- 使用 CSS Grid 布局
- 所有间距使用上一步的 Design Token
- 组件命名使用 BEM 规范
- 移动端优先，响应式适配

Cursor 会生成完整的 HTML + CSS，直接在浏览器预览效果。

对 AI 生成的布局中不满意的组件，逐个细化：

请重新设计"商品卡片"组件：

当前问题：信息密度太低，一行只能放 2 个
改进方向：
- 卡片宽度压缩到 160px
- 图片占比如下：60%
- 标题最多 2 行，超出省略
- 价格用红色突出，原价划线
- 右下角加"加购"图标按钮
- hover 时卡片上移 2px + 加阴影

请只修改商品卡片相关的 HTML 和 CSS。

把截图上传到 KimiClaw，让 AI 检查设计问题：

请对这个页面做设计走查，检查以下维度：

1. 视觉一致性：同类元素样式是否统一？
2. 对比度：文字与背景的对比度是否达到 WCAG AA？
3. 间距节奏：间距是否遵循 4px/8px 基准？
4. 信息层级：用户第一眼看到的是最重要的内容吗？
5. 移动端适配：小屏幕下是否有溢出或遮挡？
6. 交互提示：可点击元素是否有明确的视觉暗示？

对每个问题给出：位置描述 → 问题描述 → 修复建议

根据走查结果，让 Cursor 自动修复：

根据设计走查结果，修复以下问题：

1. 次要按钮的文字颜色 #999 与背景 #f5f5f5 对比度不足
   → 改为 #666

2. 商品列表间距不统一，有的 12px 有的 16px
   → 统一使用 var(--space-3)

3. 搜索框在 375px 宽度下被截断
   → 添加 min-width: 0 并使用 flex-shrink

4. 移动端导航栏图标无点击态
   → 添加 :active 伪类缩放效果

请逐一修复并说明改了什么。

让 AI 从 HTML/CSS 中提取标注信息：

请从以下 HTML/CSS 代码中提取开发标注：

1. 每个组件的尺寸（宽 × 高）
2. 间距值（margin / padding）
3. 字体信息（family / size / weight / line-height / color）
4. 边框和圆角
5. 过渡动画参数
6. 响应式断点下的变化

输出格式：按组件分组，每个属性标注 Design Token 变量名。

最后一步，生成可维护的组件文档：

请为本页面的所有组件生成文档：

每个组件包含：
- 组件名（中英文）
- 用途说明
- Props / 参数列表
- 使用示例（HTML 代码）
- 变体说明（默认/悬停/激活/禁用）
- 设计注意事项

格式：Markdown，按原子/分子/有机体分层。

⏱️ 30 分钟出图时间表：

00-05  📋 用 AI 生成设计规范 → Design Token
05-15  🏗️ 用自然语言生成页面骨架 → HTML+CSS
15-22  🔧 逐个细化组件 → 调整至满意
22-26  🔍 AI 设计走查 → 自动修复问题
26-30  📦 生成标注 + 组件文档 → 交付前端

传统流程：4-6 小时
AI 辅助流程：30 分钟
效率提升：8-12 倍

关键心法：
1. AI 生成的第一版只是起点，不是终点
2. 把重复性工作交给 AI，把审美判断留给自己
3. 每次微调都要说清楚"为什么改"，AI 会越调越准