图像与设计工作台
一套覆盖图像与设计全链路的实操工作台。本文件每个模块都给出可直接执行的提示词模板、处理步骤与脚本命令，Agent 拿到即可产出真实设计产物，而不是泛泛而谈。
关于水印（重要）：图形图像类产物（信息图 / 封面 / 贴纸 / 令牌 / 潮玩概念图 / Logo）全部由本技能内置的本地脚本（Pillow / ffmpeg / puppeteer）生成，不通过任何文生图 / 图生图接口，因此绝无水印。生视频与配音使用 WorkBuddy 内置原生 VideoGen / TTS（平台自带能力，非任何第三方插件）。
> 本技能不提供文生图 / 图生图功能：平台生图接口会强制附带水印且无法去除，故已从能力中移除，所有图像均走本地脚本生成路径。
何时使用（触发词）
- 信息图 / 数据可视化 / 小红书干货图 / 知识长图
- UI 设计 / 网页设计 / 设计系统 / 配色 / 组件库 / 响应式
- 文生视频 / 图生视频 / 配音 TTS
- 自媒体封面 / HTML 转图片 / 小红书封面 / 公众号配图 / B站封面
- 图像识别 / OCR / 图表数据提取 / UI 审查
- 落地页 / 演示文稿 / 销售素材 / 单页摘要
- 设计评审 / mockup 审查
- GIF 贴纸 / 表情包 / 照片转动画
- 用户研究 / 访谈提纲 / 可用性测试 / 问卷
- 设计交付文档 / handoff / 开发标注
- UX 文案 / 微文案 / 错误提示 / 空状态
- 无障碍 / WCAG / 对比度检查
- 潮玩设计 / AI 展览 / 方案投票
- 品牌资产包 / 多平台自适应 / 设计一致性检查（独有）
能力总览
| 模块 | 能力 | 核心交付物 |
|---|---|---|
| A | 信息图与数据可视化 | 小红书干货长图（本地绘制卡 + 合并） |
| B | UI/UX 设计系统 | 配色 / 字体层级 / 间距 / 组件库 / 设计令牌 |
| C | 多模态生成（生视频 / 配音） | 文生视频 / 图生视频 / 配音 |
| D | 自媒体封面 | HTML→多平台尺寸封面图 |
| E | 视觉分析 | 描述 / OCR / 图表提取 / UI 审查 |
| F | 销售与营销素材 | 落地页 / 演示稿 / 单页摘要 |
| G | 设计评审 | 五维评分 + 可操作反馈 |
| H | GIF 贴纸 / 表情包 | 照片→多动作 GIF + 字幕 |
| I | 用户研究 | 研究计划 / 访谈提纲 / 问卷 / 旅程图 |
| J | 设计系统管理 | 设计令牌 JSON / 组件规范 / 模式库 |
| K | 设计交付 | handoff 文档 + 标注 |
| L | UX 文案 | 按钮 / 错误 / 空状态微文案 |
| M | 无障碍审查 | WCAG 2.1 AA 对比度检查 |
| N | 潮玩展览与投票 | 本地绘制潮玩概念图 + 画廊 + 投票 |
| O | 品牌资产包（独有） | Logo/配色/字体/组件全套 |
| P | 批量流水线（独有） | 灵感→设计→评审→交付编排 |
| Q | 多平台自适应（独有） | 一次设计多尺寸导出 |
| R | 一致性检查（独有） | 跨图配色/字号一致性 |
| S | 上下文个性化（独有） | 读聊天→个性化参数→注入本地脚本 |
通用执行约定
生成类（平台原生，非第三方插件）：
- 文生视频 / 图生视频 → VideoGen
- 配音 → 使用 WorkBuddy 内置原生 TTS
图形类（本地零密钥，本技能内置脚本——绝无水印）：
- 信息图 / 长图 → infographic_merge.py（PIL 本地绘制各模块卡后合并）
- 配色 / 设计令牌 → palette_tokens.py
- 封面图 → html_to_image.js（渲染本地 HTML，需 CHROME_PATH）
- GIF 贴纸 → gif_sticker.py
- 潮玩概念图 / Logo → 本地 PIL 绘制或 html_to_image.js 渲染
脚本清单（本地零密钥）：
- scripts/wcag_check.py：对比度 / 无障碍
- scripts/infographic_merge.py：长图纵向合并
- scripts/palette_tokens.py：配色 + 设计令牌 + 多图一致性
- scripts/gif_sticker.py：照片转 GIF 贴纸
- scripts/html_to_image.js：HTML→封面图（需 CHROME_PATH）
- scripts/context_profile.py：从聊天提取个性化参数包
输出目录：产物放 outputs/，用 present_files 呈现。
模块 A — 信息图与数据可视化
目标：把任意主题/数据做成小红书风格的干货长图。
步骤：
1. 收集数据：用 WebSearch 或用户给定。
2. 拆成 6 类模块卡：标题封面 / 核心数据卡 / 时间轴 / 对比表 / 步骤流程 / 金句来源。
3. 用 Python（PIL）直接绘制各模块卡（标题/数据/金句），图表用纯 PIL 或 matplotlib 绘制；也可从用户提供的本地素材拼合。
4. 用 infographic_merge.py 纵向合并为一张长图。
> 如需插画风头图，用 html_to_image.js 渲染一份本地 SVG/HTML 头图（无文生图水印），再并入长图。
合并长图：
python3 scripts/infographic_merge.py \
--images out/mod1.png out/mod2.png out/mod3.png \
--gap 24 --bg "#0f1115" --out out/infographic.png
模块 B — UI/UX 设计系统
步骤：
1. 问清场景（网页/移动/后台）、技术栈、风格。
2. 产出配色（主/辅/强调/中性）、字体层级（H1–H6/正文/标注）、间距刻度（4/8/12/16）、圆角、阴影、组件清单（按钮/输入/卡片/导航/弹窗）。
3. 生成设计令牌：
python3 scripts/palette_tokens.py --brand "科技蓝" --base "#3a7afe" --out outputs/tokens.json
- 附
references/checklist.md的反模式清单与交付检查项。
模块 C — 多模态生成（生视频 / 配音）
本模块只覆盖动态媒体生成，不涉及任何图像生成。
文生视频 / 图生视频：VideoGen，prompt 写明镜头、时长、风格、配乐与转场。
配音：使用 WorkBuddy 内置原生 TTS，给出角色语气与情绪、停顿与重音。
> 注：本技能不提供文生图 / 图生图（平台生图会带水印且无法去除）；所有图像产物均由本地脚本生成，绝无水印。
模块 D — 自媒体封面
把 HTML 渲染成图片，支持多平台尺寸：
node scripts/html_to_image.js \
--html outputs/cover.html --out outputs/cover.png \
--preset xiaohongshu # xiaohongshu|wechat|bibili|weibo|square
预设尺寸：小红书 1242×1660 / 公众号 900×383·1080×1080 / B站 1146×717 / 微博 1080×1080。需 CHROME_PATH 指向 Chromium。渲染的是你自己的 HTML，绝无水印。
模块 E — 视觉分析
- 描述：
Read图像，输出结构化描述。 - OCR：对截图做文字提取，输出文本/表格。
- 图表数据提取：OCR + 数值识别 → CSV/JSON。
- UI 审查：对照设计稿与实现截图，列出版式/配色/间距偏差清单。
多张图循环处理产出汇总表。
模块 F — 销售与营销素材
- 收集客户背景 + 销售目标 + 品牌信息。
- 产出 HTML 落地页 → 模块 D 渲染为图/PDF。
- 演示稿可导出为 .pptx（用本地
python-pptx生成，或先产出 HTML 后由模块 D 渲染为图）。 - 单页摘要用模块 A 长图模板。
模块 G — 设计评审
五维框架逐维打分（1–5）：① 第一印象 ② 可用性 ③ 视觉层次 ④ 一致性 ⑤ 可访问性。
输出结构化评审表 + 可操作改进项（避免"再大气点"式空话），可与模块 B 设计系统对照形成闭环。
模块 H — GIF 贴纸 / 表情包
把照片转成多个动画 GIF，潮玩风 + 字幕：
python3 scripts/gif_sticker.py \
--photo inputs/photo.jpg \
--captions "嗨~" "冲鸭!" "收到!" "谢谢老板" \
--out outputs/stickers/
实现：呼吸缩放 + 轻微浮动 + 字幕叠加，输出 4 个 GIF。源照片由用户提供，输出绝无水印。
模块 I — 用户研究
产出：研究计划、5 段式访谈提纲（热身→背景→深潜→反应→收尾）、调研问卷、综合分析文档。
方法库：访谈 / 可用性测试 / 问卷 / 日记研究 / 卡片分类 / A-B 测试。
分析框架：亲和图 / 影响-努力矩阵 / 用户旅程图 / JTBD。
模块 J — 设计系统管理
产出跨产品一致的 design tokens JSON（palette_tokens.py 生成）+ 组件规范表 + 模式说明，便于团队规模化协作。
模块 K — 设计交付
把设计规范转成开发者交付文档：覆盖视觉/交互/内容/无障碍 4 维度，含实现指导、间距/字号/色值表。产出 handoff.md + tokens.json + 标注截图。
模块 L — UX 文案
为界面写微文案：按钮文字、错误提示、空状态、引导语、加载提示。按场景产出文案表，标注语气（友好/专业/俏皮）与字数限制。
模块 M — 无障碍审查（WCAG 2.1 AA）
本地零密钥检查对比度：
python3 scripts/wcag_check.py --fg "#3a7afe" --bg "#ffffff" --size 16 --bold false
# 也支持 --pairs 批量，输出 通过/失败 + 修正建议
检查项：文本对比度（正文≥4.5:1，大字≥3:1）、可聚焦、替代文本、语义结构。
模块 N — 潮玩展览与投票
用本地脚本（PIL）绘制 3–6 款潮玩 / IP 概念草图，或用 html_to_image.js 渲染概念页 → 画廊页（模块 D）→ 汇总投票/评分 → 推荐量产方向。概念图由本地绘制，绝无水印。
独有模块 O — 品牌资产包（Brand Kit）
一次性生成品牌全套：Logo 概念（本地矢量/几何绘制或 HTML 渲染）、主辅色板（palette_tokens.py）、字体层级、组件库、名片/头像/封面模板。输出 brand-kit/ 目录。所有图形本地生成，绝无水印。
独有模块 P — 批量流水线（Pipeline）
把"灵感 → 设计 → 评审 → 交付"串成工作流：收集需求 → 生成设计稿（B/D/N）→ 自动评审（G/M）→ 修订 → 产出交付包（K/F）。适合运营矩阵号日更、活动素材批量生产。
独有模块 Q — 多平台自适应导出
一次设计，按模块 D 的 --preset 自动导出多平台尺寸（小红书/公众号/B站/微博/方形）。
独有模块 R — 一致性自动检查
跨多张产出图校验：主色是否一致、字号层级是否统一、圆角/间距是否合规：
python3 scripts/palette_tokens.py --diff a.png b.png c.png
独有模块 S — 上下文感知个性化（按聊天定制）
读聊天上下文，把主题/平台/风格/品牌色/语气编译成参数包（context_profile.json），注入本地绘图脚本（infographic_merge / palette_tokens / html_to_image）；支持自然语言增量调整，无需从头重来。
python3 scripts/context_profile.py --from-chat chat.txt # 提取偏好
python3 scripts/context_profile.py --load # 输出注入后缀
python3 scripts/context_profile.py --edit "换成蓝色科技风" # 动态增量调整
个性化参数包注入本地生成脚本的参数（如配色、风格关键词），本技能不调用任何文生图/图生图接口，所有图像本地生成、绝无水印。
安全与边界
- 纯本地脚本 + 内置生成工具运行，不收集用户数据。
- 生成内容遵守平台合规要求，不涉及任何非图像设计范畴的功能。
- 本技能仅包含图像与设计相关能力，不绑定、不包含任何其他主题的技能。
- 所有图像产物由本地脚本生成，绝不包含任何第三方平台水印。
