案例12：内容创作与媒体 — UI设计出图、切图 —

📑 目录

需求分析与设计方向确定
UI 设计稿生成（AI出图）
设计稿优化与迭代
切图与资源导出
图标与素材生成
批量素材生产管线
技能沉淀与工作流

步骤1：需求分析与设计方向确定

定义网站设计需求

在 OpenClaw 对话中输入：

请帮我规划以下网站的设计方向：

【网站信息】
- 网站类型：[企业官网 / 电商平台 / 后台管理系统 /  landing page / 作品集]
- 行业：[教育 / 医疗 / 科技 / 金融 / 电商 / 政府]
- 目标受众：[企业决策者 / 普通消费者 / 内部员工 / 投资者]
- 品牌色：[主色 / 辅色，如：#1890FF / #52C41A]
- 品牌调性：[专业严谨 / 年轻活力 / 温暖亲和 / 高端奢华]

【页面需求】
- 需要设计的页面：[首页 / 产品页 / 关于我们 / 联系我们 / 后台Dashboard]
- 参考网站：[列出1-3个参考网站的URL或描述]
- 不喜欢的风格：[列出要避免的风格]

【输出要求】
- 设计风格定义（现代/极简/扁平/拟物等）
- 配色方案（主色/辅色/背景色/文字色）
- 排版建议
- 组件风格（圆角/直角、阴影、边框等）

请生成完整的设计方案。

AI 分析竞品网站风格

# 让 AI 搜索和分析参考网站的设计风格

请搜索以下网站的设计风格并分析：

1. [参考网站1 URL]
2. [参考网站2 URL]
3. [参考网站3 URL]

对每个网站分析：
- 整体风格（极简/现代/科技感/商务等）
- 配色方案（主色、辅色、背景色）
- 字体风格
- 布局特点（网格/卡片/全屏等）
- 导航设计
- 按钮和组件风格
- 图片使用方式

总结共性特征，推荐最适合我们项目的设计方向。

生成设计规范文档

# 让 AI 生成完整的设计规范

请基于以上分析，生成网站设计规范文档：

文件保存为：./ui-design/[项目名]/design-spec.md

设计规范包含：
1. 品牌色彩体系
   - 主色、辅色、中性色、功能色
   - 色值（HEX + RGB）
   - 使用场景说明

2. 字体规范
   - 标题字体（字号、字重、行高）
   - 正文字体
   - 辅助文字

3. 布局规范
   - 栅格系统
   - 间距体系（8px 基准）
   - 页面最大宽度

4. 组件规范
   - 按钮样式（主按钮/次按钮/幽灵按钮）
   - 卡片样式
   - 输入框样式
   - 圆角标准

5. 图标规范
   - 图标尺寸
   - 图标风格（线性/面性）
   - 图标色彩

这份设计规范将用于指导后续所有出图和切图。

📌 说明：AI 出图前必须明确设计方向。描述越具体，生成结果越精准。

步骤2：UI 设计稿生成（AI出图）

生成首页设计稿

# 使用 OpenClaw 的 video_generate 或 image 工具生成设计稿

请基于以下设计规范生成网站首页设计稿：

设计规范：
- 风格：现代科技感，扁平化设计
- 主色：#1890FF（科技蓝）
- 布局：全屏Hero区 + 栅格内容区
- 页面宽度：1440px

生成参数：
- 尺寸：1440×900（桌面端首页）
- 画面比例：16:10
- 风格：现代、科技感、扁平化UI设计

画面描述（prompt）：
Modern website landing page design, technology company homepage,
clean flat UI design, blue primary color (#1890FF),
hero section with large headline and CTA button,
3-column feature grid below,
navigation bar at top with logo and menu items,
white background, professional and modern aesthetic,
high quality, detailed UI mockup, 1440x900 resolution

请生成设计稿并保存到 ./ui-design/[项目名]/mockups/

生成多页面设计稿

# 批量生成多个页面的设计稿

请为以下页面分别生成设计稿：

页面列表：
1. 首页（1440×900，桌面端）
2. 产品列表页（1440×900，桌面端）
3. 产品详情页（1440×900，桌面端）
4. 关于我们页（1440×900，桌面端）
5. 移动端首页（375×812，移动端）
6. 移动端产品详情页（375×812，移动端）

每个页面保持统一的设计风格：
- 科技蓝主色 #1890FF
- 白色背景
- 扁平化设计
- 8px圆角组件

分别保存到 ./ui-design/[项目名]/mockups/ 目录。

生成 UI 组件设计稿

# 生成具体 UI 组件的效果图

请生成以下 UI 组件的设计图：

1. 按钮组件（主按钮/次按钮/危险按钮/成功按钮）
   - 尺寸：1440×400
   - 展示各状态（默认/hover/active/disabled）

2. 卡片组件
   - 尺寸：1440×600
   - 展示3种卡片变体

3. 表单组件（输入框/下拉框/选择框）
   - 尺寸：1440×500
   - 展示各状态

4. 导航组件
   - 尺寸：1440×200
   - 展示顶部导航和侧边导航

保存到 ./ui-design/[项目名]/mockups/components/

生成多风格对比方案

# 同一页面，生成3种不同风格的方案供选择

请为网站首页生成3种不同风格的设计方案：

方案A — 科技感风格
- 深蓝色背景
- 渐变效果
- 数据可视化元素
- 未来感

方案B — 极简风格
- 白色背景
- 大量留白
- 黑色文字
- 极简线条

方案C — 活力风格
- 明亮渐变色
- 圆角卡片
- 插画元素
- 年轻化

每种方案 1440×900，保存到 ./ui-design/[项目名]/mockups/options/

请分别生成并展示，让我选择最终方向。

📌 说明：OpenClaw 支持通过 AI 图片生成工具产出设计稿效果图。适用于快速出方案、做提案、生成视觉参考。

步骤3：设计稿优化与迭代

基于反馈调整设计

# 上传已有设计稿，让 AI 分析并生成改进版

[上传设计稿图片]

请分析这张设计稿：

1. 整体评价（优点和不足）
2. 配色是否协调？
3. 排版是否合理？
4. 是否有信息层级不清晰的地方？
5. 哪些地方需要改进？

请给出具体的修改建议。

生成改进版设计稿

# 根据分析结果生成改进版

基于以上分析结果，请生成改进版设计稿：

改进要求：
1. [如：增大标题字号，增强视觉层级]
2. [如：调整按钮颜色为品牌主色]
3. [如：增加内容区域的留白]
4. [如：优化导航栏的布局]

保持原有的：
- 整体风格
- 配色体系
- 页面尺寸（1440×900）

生成新的设计稿并保存到改进版目录。

生成 HTML/CSS 原型

# 让 AI 根据设计稿生成可交互的 HTML 原型

请根据以上设计稿，生成对应的 HTML + CSS 代码：

要求：
1. 还原设计稿的视觉效果
2. 响应式布局（适配桌面和移动端）
3. 使用设计规范中定义的色彩和字体
4. 包含基本的交互效果（hover/点击）
5. 代码结构清晰，注释完整

保存到 ./ui-design/[项目名]/prototype/index.html

生成后请在浏览器中打开预览，让我确认效果。

步骤4：切图与资源导出

自动切图 — 使用 ImageMagick

# 将完整设计稿切割为各个组件/区块

请帮我编写一个脚本，将首页设计稿切分为以下区块：

原始设计稿：./ui-design/[项目名]/mockups/homepage.png

切分区域：
1. 导航栏：0,0 - 1440,80
2. Hero区：0,80 - 1440,600
3. 特性区：0,600 - 1440,1000
4. 案例区：0,1000 - 1440,1400
5. CTA区：0,1400 - 1440,1600
6. 页脚：0,1600 - 1440,1800

使用 ImageMagick crop 命令：

magick homepage.png -crop 1440x80+0+0    nav-bar.png
magick homepage.png -crop 1440x520+0+80  hero-section.png
magick homepage.png -crop 1440x400+0+600 features.png
magick homepage.png -crop 1440x400+0+1000 cases.png
magick homepage.png -crop 1440x200+0+1400 cta-section.png
magick homepage.png -crop 1440x200+0+1600 footer.png

所有切片保存到 ./ui-design/[项目名]/slices/

导出多倍率切图

# 为不同设备导出对应分辨率的切图

请为每个切图生成 @1x、@2x、@3x 三个版本：

原始尺寸：@1x（标准分辨率）
放大2倍：@2x（Retina/高清屏）
放大3倍：@3x（超高清屏）

使用 ImageMagick resize：

# @1x 原版
cp nav-bar.png nav-bar@1x.png

# @2x 放大2倍
magick nav-bar.png -resize 200% nav-bar@2x.png

# @3x 放大3倍
magick nav-bar.png -resize 300% nav-bar@3x.png

对所有切片执行相同操作。
保存到 ./ui-design/[项目名]/slices/ 目录。

请生成完整的批处理脚本并执行。

格式转换与压缩

# 将切图转为 Web 优化格式

请将所有切图转换为以下格式：

1. PNG（无损，用于图标/透明背景）
   - 保持 PNG 格式
   - 使用 pngquant 压缩

2. WebP（有损，用于照片/大图）
   magick input.png -quality 80 output.webp

3. SVG（矢量，用于图标/Logo）
   - 如有矢量源文件，转为 SVG
   - 或使用 potrace 将位图转为矢量

4. 压缩优化
   # 压缩 PNG
   pngquant --quality=65-80 --ext .png input.png

   # 压缩 WebP
   cwebp -q 80 input.png -o output.webp

保存到 ./ui-design/[项目名]/export/ 目录。

请生成批处理脚本并执行。

生成切图清单

# 生成完整的切图清单和引用说明

请生成切图清单文件：

文件：./ui-design/[项目名]/slices/ASSETS.md

格式：
# UI 切图清单

## 导航栏
| 文件名 | 尺寸 | 格式 | 用途 |
|---|---|---|---|
| logo@1x.png | 120×40 | PNG | 导航栏Logo |
| logo@2x.png | 240×80 | PNG | Retina屏Logo |
| nav-bg.png | 1440×80 | WebP | 导航栏背景 |

## Hero区
| 文件名 | 尺寸 | 格式 | 用途 |
|---|---|---|---|
| hero-bg.png | 1440×520 | WebP | Hero背景图 |
| hero-cta-btn.png | 200×48 | PNG | CTA按钮 |
...

## 文件统计
- 总文件数：[N]
- 总文件大小：[X]MB（优化后）
- 格式分布：PNG [N]个, WebP [N]个, SVG [N]个

请生成完整清单。

步骤5：图标与素材生成

生成图标集

# 批量生成网站所需的图标

请为以下功能生成配套的图标集：

图标列表（共12个）：
1. 首页
2. 产品
3. 解决方案
4. 客户案例
5. 关于我们
6. 联系我们
7. 搜索
8. 用户
9. 设置
10. 通知
11. 下载
12. 帮助

图标规格：
- 尺寸：24×24（标准）、32×32、48×48
- 风格：线性图标，2px描边
- 颜色：#1890FF（主色）、#333333（深色）、#FFFFFF（白色）
- 圆角端点
- 统一视觉风格

请逐个生成图标，保存到 ./ui-design/[项目名]/icons/

每个图标提供：
- SVG 格式（矢量）
- PNG 格式（@1x、@2x、@3x）

# 生成网站 Banner 图

请生成以下尺寸的 Banner 图：

1. 网站主页 Banner
   - 尺寸：1920×600
   - 内容：大标题 + 副标题 + CTA按钮
   - 风格：科技感，蓝色渐变背景

2. 二级页 Banner
   - 尺寸：1920×400
   - 内容：页面标题 + 面包屑导航

3. 活动 Banner
   - 尺寸：1920×500
   - 内容：活动标题 + 时间 + 报名入口

4. 社交媒体分享图
   - 尺寸：1200×630（Facebook/LinkedIn 分享尺寸）
   - 内容：标题 + 简述 + Logo

保存到 ./ui-design/[项目名]/banners/

生成背景图和纹理

# 生成网站背景图和装饰元素

请生成以下背景素材：

1. Hero区背景
   - 尺寸：1920×1080
   - 风格：抽象科技图案，蓝色调
   - 用途：首页大背景

2. 页面背景纹理
   - 尺寸：1920×1080（可无缝拼接）
   - 风格：点阵/网格/几何图案
   - 透明度：低

3. 装饰元素
   - 渐变光效
   - 抽象几何图形
   - 数据流线条

保存到 ./ui-design/[项目名]/assets/backgrounds/

所有背景图需要：
- 可无缝拼接（seamless）
- 文件大小控制在 200KB 以内
- WebP 格式

生成占位图和示例图片

# 生成网站中使用的占位图和示例图片

请生成以下占位素材：

1. 产品示例图
   - 尺寸：400×300（缩略图）
   - 尺寸：800×600（大图）
   - 数量：6张
   - 风格：科技产品相关

2. 团队成员头像
   - 尺寸：200×200
   - 数量：8个
   - 风格：统一、专业

3. 客户 Logo 占位
   - 尺寸：150×60
   - 数量：6个
   - 灰色调、简洁

保存到 ./ui-design/[项目名]/assets/placeholders/

这些素材用于开发阶段的页面搭建，
正式上线时替换为真实内容。

步骤6：批量素材生产管线

一键生成全套 UI 资源

# 一条指令完成所有 UI 资源生成

请帮我执行完整的 UI 设计资源生产流程：

项目：[项目名称]
设计规范：[引用之前生成的 design-spec.md]

需要生成：
1. 6个页面的设计稿（首页/产品页/详情页/关于我们/移动端首页/移动端详情页）
2. 4个 UI 组件设计稿（按钮/卡片/表单/导航）
3. 12个图标（@1x @2x @3x + SVG）
4. 4个 Banner 图
5. 3个背景图
6. 6张产品示例图
7. 8个团队成员头像
8. 6个客户 Logo 占位

执行切图：
9. 首页设计稿切分为6个区块
10. 每个切片生成 @1x @2x @3x
11. 格式转换（PNG/WebP/SVG）
12. 压缩优化

生成文档：
13. 切图清单（ASSETS.md）
14. 设计规范（design-spec.md）
15. 使用说明（README.md）

输出目录：
./ui-design/[项目名]/
├── mockups/          ← 设计稿
├── slices/           ← 切图
├── icons/            ← 图标
├── banners/          ← Banner
├── assets/           ← 背景/占位图
├── export/           ← 优化后的导出文件
├── prototype/        ← HTML原型
└── docs/             ← 文档

请逐项执行，每完成一类报告进度。

批量尺寸适配

# 将同一设计稿适配到多种屏幕尺寸

请为首页设计稿生成以下尺寸适配版本：

桌面端：
- 1920×1080（Full HD）
- 1440×900（标准桌面）
- 1280×800（小屏桌面）

平板端：
- 1024×768（iPad 横屏）
- 768×1024（iPad 竖屏）

移动端：
- 414×896（iPhone 11/12/13 Pro Max）
- 375×812（iPhone 12/13 mini）
- 360×640（Android 标准）

对每个尺寸：
- 保持设计元素的比例和层级
- 调整文字大小以适应屏幕
- 重新排列布局（如必要）

保存到 ./ui-design/[项目名]/mockups/responsive/

生成 CSS 变量文件

# 根据设计规范生成 CSS 变量文件

请基于设计规范文档，生成 CSS 变量文件：

文件：./ui-design/[项目名]/export/design-tokens.css

内容：
:root {
  /* 色彩体系 */
  --color-primary: #1890FF;
  --color-primary-light: #40A9FF;
  --color-primary-dark: #096DD9;
  --color-secondary: #52C41A;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-border: #D9D9D9;
  --color-success: #52C41A;
  --color-warning: #FAAD14;
  --color-error: #FF4D4F;

  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 24px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --line-height: 1.5;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* 圆角 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.2);
}

这份文件可以直接用于前端项目开发。

步骤7：技能沉淀与工作流

沉淀 UI 设计生产技能

请帮我创建技能文件 workspace/skills/ui-design/SKILL.md：

## 触发条件
用户要求生成网站设计稿/UI设计/切图/图标/Banner

## 输入参数
- 项目名称（必须）
- 网站类型（企业官网/电商/后台管理等）
- 行业（教育/医疗/科技/金融等）
- 品牌色（主色/辅色）
- 风格偏好

## 执行流程
1. 生成设计规范（配色/字体/布局/组件）
2. 生成页面设计稿（各页面）
3. 生成 UI 组件设计稿
4. 切图（自动切割 + 多倍率 + 格式转换）
5. 生成图标集
6. 生成 Banner 和背景素材
7. 生成 CSS 变量文件
8. 生成切图清单和使用文档

## 输出目录
./ui-design/[项目名]/
├── mockups/          ← 设计稿
├── slices/           ← 切图
├── icons/            ← 图标
├── banners/          ← Banner
├── assets/           ← 背景/占位图
├── export/           ← 优化后文件
├── prototype/        ← HTML原型
└── docs/             ← 文档

创建后，下次只需说：
"用UI设计技能，项目：[项目名]"
即可一键生成全套 UI 资源。

常用工具和命令速查

完整项目目录参考

ui-design/
├── [项目A]/
│   ├── mockups/                    ← 设计稿
│   │   ├── homepage@1x.png         ← 首页设计稿
│   │   ├── homepage@2x.png
│   │   ├── product-list.png
│   │   ├── product-detail.png
│   │   ├── about.png
│   │   ├── mobile-home.png
│   │   ├── mobile-product.png
│   │   └── components/             ← 组件设计稿
│   │       ├── buttons.png
│   │       ├── cards.png
│   │       ├── forms.png
│   │       └── navigation.png
│   ├── slices/                     ← 切图
│   │   ├── nav-bar@1x.png
│   │   ├── nav-bar@2x.png
│   │   ├── nav-bar@3x.png
│   │   ├── hero-section@1x.png
│   │   ├── hero-section@2x.png
│   │   ├── features.png
│   │   ├── cases.png
│   │   ├── cta.png
│   │   ├── footer.png
│   │   └── ASSETS.md               ← 切图清单
│   ├── icons/                      ← 图标集
│   │   ├── home.svg
│   │   ├── home@1x.png
│   │   ├── home@2x.png
│   │   ├── home@3x.png
│   │   ├── product.svg
│   │   └── ...
│   ├── banners/                    ← Banner图
│   │   ├── hero-banner.png
│   │   ├── sub-banner.png
│   │   ├── event-banner.png
│   │   └── social-share.png
│   ├── assets/                     ← 背景/占位图
│   │   ├── backgrounds/
│   │   │   ├── hero-bg.webp
│   │   │   ├── pattern-tile.webp
│   │   │   └── gradient-light.png
│   │   └── placeholders/
│   │       ├── product-01.png
│   │       ├── avatar-01.png
│   │       └── client-logo-01.png
│   ├── export/                     ← 优化后文件
│   │   ├── design-tokens.css       ← CSS变量
│   │   └── optimized/
│   ├── prototype/                  ← HTML原型
│   │   └── index.html
│   └── docs/                       ← 文档
│       ├── design-spec.md          ← 设计规范
│       └── README.md               ← 使用说明
└── [项目B]/
    └── ...

注意事项

**⚠️ AI 生成设计稿的边界：

AI 生成的是视觉参考图，不是可直接交付的开发文件（如 Figma/Sketch）

文字在生成的图片中是位图，不可编辑，需要开发人员手动还原为文字

精确的像素对齐需要开发人员在 HTML/CSS 中实现

品牌 Logo、真实产品截图等必须使用真实素材

AI 生成的图标可能不够精确，建议用专业图标库（如 Iconify、Ant Design Icons）**

**💡 最佳实践：

AI 出图用于快速出方案和视觉方向确认，不是替代专业设计工具

切图用于开发参考，开发人员应按设计规范还原，而非直接切图拼页面

CSS 变量文件和设计规范文档是最重要的交付物，确保开发与设计一致

所有 AI 生成的素材标注来源，避免版权问题**

📑 目录

步骤1：需求分析与设计方向确定

定义网站设计需求

AI 分析竞品网站风格

生成设计规范文档

步骤2：UI 设计稿生成（AI出图）

生成首页设计稿

生成多页面设计稿

生成 UI 组件设计稿

生成多风格对比方案

步骤3：设计稿优化与迭代

基于反馈调整设计

生成改进版设计稿

生成 HTML/CSS 原型

步骤4：切图与资源导出

自动切图 — 使用 ImageMagick

导出多倍率切图

格式转换与压缩

生成切图清单

步骤5：图标与素材生成

生成图标集

生成 Banner 图

生成背景图和纹理

生成占位图和示例图片

步骤6：批量素材生产管线

一键生成全套 UI 资源

批量尺寸适配

生成 CSS 变量文件

步骤7：技能沉淀与工作流

沉淀 UI 设计生产技能

常用工具和命令速查

完整项目目录参考

注意事项