| name | design-full |
| description | 平面设计全案——完整网页/落地页、APP/产品界面、品牌视觉体系。从需求 brief 到设计系统选取、素材获取、HTML/CSS 编写、视觉 review、交付归档的完整工作流。接到"做网页/落地页/APP 界面/品牌视觉"类平面设计需求时走本技能。 |
| metadata | {"openclaw":{"emoji":"🎨","requires":{"bins":["python3"]}}} |
平面设计全案（design-full）
适用场景
用户要做以下任一平面设计工作：
- 完整网页 / 落地页 / 团队介绍页 / 404 页等
- APP / 产品界面 / 管理后台 / SaaS 面板原型
- 品牌视觉体系（色彩 / 字体 / 组件 / 间距规范）
不适用：视频制作（→ video-producer / collage-broll / manim-explainer）。
工作流
Step 1：建工作区（强制起点）
每项设计任务开始前必须先建独立文件夹，所有产出归档其中：
design-full init <任务名>
产出目录结构（落在工作区根的 design_assets/ 下）：
design_assets/YYYY-MM-DD-<任务名>/
├── brief.md # 设计需求模板（待填写，确认后不可跳过）
├── prompts.json # 生图参数记录
├── source/ # 原始素材（参考图、品牌资产等）
└── output/ # 成品输出（HTML/CSS 文件、组件预览页）
design_assets/ 同时建 references/ 与 brand/ 两个共享子目录（跨任务复用参考素材与品牌资产）。
Step 2：Brief 确认（强制闸门）
把需求整理写入 brief.md，发给用户确认，等待明确同意。确认前不得进入后续步骤。后续视觉 review 以 brief 为基准对照。
brief 至少含：产品类型 / 页面或界面清单 / 功能范围 / 风格方向 / 品牌约束 / 参考素材。
Step 3：设计系统选取
每项任务在 brief 确认后、进具体设计前必须调本技能确定设计系统：
design-full pick "<风格描述>"
按风格描述从内置 14 套设计系统库匹配最合适的 1–3 套，展示匹配结果及推荐理由给用户，等待确认选定。用户也可指定参考品牌或自定义风格，本技能据此生成定制 DESIGN.md。
选定后把该设计系统规范写入任务 DESIGN.md，后续所有 HTML/CSS 产出的色彩、字体、间距、组件样式都遵循该规范。
Step 4：素材获取
页面所需配图 / 背景图 / 参考图：
- 优先：公共
pexels-footage / pixabay-footage 搜索下载
- 备选：公共
siliconflow-img-gen 生成
- 下载或生成的素材保存到
source/ 目录
Step 5：HTML + CSS 编写
- CSS custom properties 定义设计 token（颜色、间距、字号、阴影）——严格遵循 DESIGN.md
- 语义化标签（header / main / section / footer）
- 响应式（min-width: 768px / 1024px 断点）
- hover / focus / active 状态完备
- 图片引用
source/ 中的素材
Step 6：视觉 Review（强制闸门）
生成页面 / 组件后必须调视觉模型 review，不得跳过：
- 用
image 工具查看生成结果
- 对照
brief.md 和 DESIGN.md 逐项检查：风格一致性、组件规范遵循度、响应式表现、交互状态完整性
- 发现偏差 → 调整 CSS token 或 HTML 结构后重新输出（最多 3 轮）
- Review 通过 → 发送给用户
Step 7：交付归档
最终确认后把文件保存到任务文件夹 output/ 目录，归档并更新 index.md。
三条子工作流（按任务类型择）
按 brief 里的产品类型择一条子工作流执行。Step 1/2/3/6/7 是三条共用骨架，下面只列各子工作流的 Step 4/5 差异。
工作流 A：完整网页 / 落地页设计
Step 2 brief 含：
- 页面类型（产品介绍页/活动落地页/团队介绍/404 页...）
- 页面清单与信息架构（Sections 列表）
- 交互功能范围（纯静态展示/含表单/含轮播...）
- 风格参考（可提供品牌名或描述词）
- 是否需要深色模式
- 品牌约束（品牌色、字体、LOGO — 从 MEMORY.md 获取）
Step 4 素材：页面所需配图/背景图 → pexels-footage / pixabay-footage 优先，siliconflow-img-gen 备选
Step 5 编写：
- CSS custom properties 定义设计 token —— 严格遵循 DESIGN.md
- 语义化标签（header / main / section / footer）
- 响应式（min-width: 768px / 1024px 断点）
- hover / focus / active 状态
- 图片引用 source/ 中的素材
最终交付：HTML/CSS 文件 → output/，归档更新 index.md
工作流 B：APP / 产品界面设计
Step 2 brief 含：
- 产品类型（移动 APP / Web APP / 管理后台 / SaaS 面板...）
- 核心页面清单（登录/首页/列表/详情/设置...）
- 交互模式（导航方式、手势支持、状态管理...）
- 风格参考
- 品牌约束
Step 3 后另写 DESIGN.md 设计规范：
- 色彩系统（语义色名 + hex + 用途：primary/secondary/surface/error/...）
- 字体系统（font-family + 层级表：display/heading/body/caption/overline）
- 间距系统（4px/8px/12px/16px/24px/32px/48px 基准）
- 组件样式规范（Button/Input/Card/Nav/Modal/Toast 等，含各状态）
- 阴影/圆角/动效规范
Step 5 编写关键页面 HTML + CSS 原型：
- 严格遵循 DESIGN.md 中的 token
- 移动端优先（如为 APP 界面，按 375px 基准设计）
- 包含交互状态（hover/focus/disabled/loading）
最终交付：DESIGN.md + 所有页面 HTML/CSS → output/
工作流 C：品牌视觉体系构建
Step 2 brief 含：
- 品牌定位（行业、目标客群、核心价值）
- 风格方向（1-3 个关键词，如"专业+科技+温暖"）
- 现有品牌资产（Logo、已有色彩偏好等）
- 应用场景（官网/APP/社交媒体/印刷品...）
Step 5 构建完整 DESIGN.md：
- Visual Theme & Atmosphere：设计哲学、情感基调、密度
- Color Palette & Roles：语义名 + hex + 功能角色
- Typography Rules：字体族 + 完整层级表
- Component Stylings：核心组件样式 + 状态
- Layout Principles：间距系统、网格、留白哲学
- Depth & Elevation：阴影系统、表面层级
- Responsive Behavior：断点、触控目标、折叠策略
- Do's and Don'ts：设计护栏
Step 5 另编写组件预览页面（preview.html）：
- 展示色彩色板、字体层级、按钮/卡片/输入框等核心组件
- 包含亮色和暗色两种表面
最终交付：DESIGN.md + preview.html → output/
- 将 DESIGN.md 核心信息同步到 MEMORY.md 的 Brand Assets 区
CSS 设计 Token 规范
所有 HTML/CSS 产出必须使用 CSS Custom Properties 定义设计 token：
:root {
--color-primary: oklch(...);
--color-surface: oklch(...);
--color-text: oklch(...);
--text-display: clamp(3rem, 1rem + 7vw, 8rem);
--text-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--duration-normal: 300ms;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
品牌规范应用原则
- 若 MEMORY.md 中有品牌色 / 字体记录 → 在 DESIGN.md 和 CSS token 中强制指定
- 若无 → 第一次设计后询问用户是否认可当前色彩体系，认可则记入 MEMORY.md
- 核心品牌色 / Logo 不得随意替换，其余设计 token 可根据设计系统适配
内置设计系统库
14 套知名品牌设计系统，每套 8 段规范（Visual Theme / Color / Typography / Components / Layout / Depth / Do's & Don'ts / Responsive）：
| 设计系统 | 风格关键词 | 适用场景 |
|---|
| Stripe | 紫色渐变、优雅、金融科技 | SaaS 产品页、支付/金融科技落地页 |
| Vercel | 黑白极简、精密、Geist | 开发者工具、技术产品官网 |
| Linear | 超极简、紫色点缀、精确 | 项目管理、效率工具 |
| Notion | 暖色极简、衬线标题、柔和 | 知识管理、内容平台 |
| Apple | 极致留白、电影级影像 | 消费电子、高端品牌官网 |
| Supabase | 暗色翡翠绿、代码优先 | 数据库/后端服务、开源工具 |
| Shopify | 暗色电影感、霓虹绿 | 电商平台、商业服务 |
| Figma | 多彩活泼、专业、创意 | 创意工具、设计平台 |
| Spotify | 鲜明绿、大胆排版 | 媒体/娱乐平台 |
| Tesla | 极致减法、全屏影像 | 汽车/硬件、极简品牌 |
| Framer | 黑蓝、动效优先 | 网站构建、交互展示 |
| Airbnb | 暖色珊瑚、摄影驱动 | 旅游/生活服务、社区平台 |
| BMW | 巴伐利亚蓝、暗色奢华、金属质感 | 奢侈品牌、高端产品 |
| IBM | 企业蓝、Carbon 系统、数据密集 | 企业级产品、B2B 服务、数据平台 |
| Starbucks | Siren 绿、温暖社区、自然质感 | 生活品牌、餐饮/零售、社区平台 |
库文件落在本技能目录 design-systems/<name>.md，索引 design-systems/index.json。
自定义设计系统
内置库无法覆盖所有风格需求时，基于用户描述自行构建设计系统，输出格式参照内置 DESIGN.md 的标准 8 段结构。
也可从上游仓库 VoltAgent/awesome-design-md 查找并导入：
- 访问上述仓库查看完整设计系统列表，或直接访问
https://getdesign.md/<brand-name>/design-md 查看特定品牌
- 选取匹配的设计系统后，将内容下载为
design-systems/<name>.md，补全缺失段落确保 8 段完整
- 在
design-systems/index.json 中添加条目（字段：id / name / category / keywords / description / colorPrimary / darkMode / bestFor / file）
完成后即可通过 design-full pick 搜索到该设计系统。
子命令清单
| 子命令 | 用途 | 退出码 |
|---|
design-full init <任务名> | 建任务文件夹 + brief 模板 | 0 成功 / 1 参数错 |
design-full pick "<风格描述>" | 从内置库匹配 1–3 套设计系统 | 0 成功 / 1 参数错 |
Step 2（brief 确认）/ Step 4（素材获取）/ Step 5（HTML+CSS 编写）/ Step 6（视觉 review）/ Step 7（交付归档）由 agent 按 SKILL.md 工作流直接执行，不经本 wrapper——这些是创意判断与对话协作环节，不上脚本。
禁止事项（强制）
- 禁止 brief 未确认就动手：Step 2 闸门强制，确认前不得进 Step 3
- 禁止跳过设计系统选取：每项任务 Step 3 必跑
design-full pick，不得凭印象直接写 CSS
- 禁止跳过视觉 Review 交付：Step 6 闸门强制，对照 brief + DESIGN.md 逐项查，不得裸交
- 禁止凭空捏造品牌色：MEMORY.md 有记录则强制遵循，无记录则设计后问用户认可才记入
