设计交接文档生成器

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install design-handoff-doc
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 design-handoff-doc。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

设计交接文档生成器可根据截图、Figma 链接或文字描述，创建实用、面向开发者的设计规格说明。它会将页面结构、组件尺寸、颜色、排版、间距、资源、交互、数据需求、响应式行为和 QA 验收标准整理到一份交接文档中。
对于使用 Openclaw Skills 的团队，这项技能通过将视觉参考转化为可执行的细节，帮助衔接设计与实现，同时指出小程序、移动应用、Web 和大屏界面的平台特定要求。截图测量值为估算值，而且可能无法直接访问 Figma API，因此技能会在需要时询问关键规格或截图。

应用场景

为新页面、功能或模块准备开发交接文档。
创建切图资源清单，注明导出格式、尺寸和命名建议。
记录组件状态、交互行为、动画和边缘情况。
将截图转化为结构化布局和组件规格说明。
将设计描述转化为考虑平台特性的实施简报。
在开发开始前补充响应式、无障碍、安全区域或设备特定说明。
在视觉要求之外，定义后端数据字段和 QA 验收标准。

工作原理

收集项目名称、平台、设计来源、页面或模块名称及任何特殊要求；询问缺失的关键信息。
分析提供的截图或图像，识别布局区域、组件、颜色、间距、排版、尺寸规律和可见状态。如果只提供描述，则结合平台最佳实践进行处理。
对于 Figma 链接，确认是否有可用规格；如果无法直接访问 API，则请求关键详情或截图。
选择匹配的平台模板：小程序、App、Web、大屏或通用模板。
使用页面结构、组件规格、资源要求、交互说明、响应式适配和数据需求填写模板。
根据质量检查清单核对交接内容，包括组件状态、边缘情况、平台限制和验收标准。
在聊天中展示完整文档，或按需将其保存为工作区中的 Markdown 文件。

配置指南

技能中未指定 CLI 安装命令或其他配置流程。通过 Openclaw Skills 代理的常规技能加载流程启用该技能，并将其引用的模板和指导文件与技能放在一起。
生成交接文档前，请提供：
项目名称和目标平台：小程序、App、Web 或大屏。
设计来源：截图、Figma 链接或文字描述。
页面或模块名称。
动画、特殊状态或特别交互的可选说明。
技能会询问缺失的关键信息。对于 Figma 链接，如果无法直接访问 API，请准备好提供截图或关键规格。如果希望将结果保存而不是在聊天中返回，请请求生成工作区 .md 文件。

数据架构

技能会生成 Markdown 交接文档，在聊天中展示或按需保存为 .md 文件。文档采用以下信息结构：
Section Information captured
页面概览 页面名称、平台、设计尺寸和简短描述
设计来源 设计链接或来源、设计师、版本和日期（如有）
页面结构 布局区域、层级和内容组织
组件列表 尺寸、HEX 颜色、字体系列及度量值、间距、圆角、阴影和状态
资源 / 切图清单 图标、图像、插画和背景，以及导出格式、尺寸和命名
交互说明 点击或轻触行为、导航、转场、反馈和异常状态
数据要求 各组件所需的数据字段，包括后端集成需求
适配说明 响应式行为、安全区域和平台特定限制
验收标准 实施和视觉行为的 QA 检查清单
工作流引用的支持文件包括 assets/ 中的平台模板（handoff-template-mini-program.md、handoff-template-app.md、handoff-template-web.md、handoff-template-large-screen.md 和 handoff-template-general.md），以及 references/ 中的指导文件（component-checklist.md 和 naming-convention.md）。这些路径描述了预期的技能资源；输入中不包含这些文件的内容。

高级特性

选择平台专属交接模板，并纳入相关实施限制。
从截图中提取布局、组件、颜色、间距、排版和可见状态等视觉细节；推断的测量值仅为估算值。
在适用时涵盖普通、悬停、激活、禁用、错误、加载和空状态等交互状态。
添加平台相关细节：小程序的 rpx 和安全区域；iOS pt 和 Android dp；Web 断点、焦点和键盘无障碍；或大屏缩放及远距离观看可读性。
将组件要求对应到数据需求，并记录响应式行为、资源导出和 QA 验收标准。
使用组件和资源命名参考清单减少遗漏；技能未指定 hooks、多代理协作或自动生成文件功能，除可选择将交接文档保存为 Markdown 外。

name: design-handoff-doc description: "Generate developer-facing design handoff documents from screenshots or design descriptions. Use when user needs a design delivery doc, handoff spec, cut asset list, or annotation guide for developers."

Design Handoff Doc Generator

Generate complete, developer-ready design handoff documents (设计交付说明) from design screenshots, Figma links, or design descriptions. Produces a structured doc that developers can directly use to implement the design.

When to Use

User needs a design handoff document (设计交付文档/设计交付说明)
User needs a cut asset list (切图清单)
User needs an annotation guide (标注说明)
User needs interaction notes (交互备注)
User mentions any of: 交付、切图、标注、handoff、设计说明、design delivery

Inputs Needed

Before generating, gather (or ask if missing):

项目名称 (project name)
平台 (platform): 小程序 / App / Web / 大屏
设计稿来源 (design source): 截图上传 / Figma 链接 / 文字描述
页面/模块名称 (page or module name)
特殊说明 (special notes, optional): 动效、异常态、特殊交互等

If the user provides a screenshot, analyze it and extract layout, components, colors, spacing, typography automatically.

If the user provides a Figma link, note that direct API access may not be available — ask for key specs or screenshot instead.

If the user gives only a description, generate based on the description + platform best practices.

Workflow

确认项目与页面信息 — If critical info is missing (project name, platform, page name), ask. Otherwise proceed.
分析设计稿 — If a screenshot/image is provided:
Identify layout structure (header, content, footer, sidebar, etc.)
Extract visible components (buttons, inputs, cards, lists, tabs, etc.)
Note color usage (background, text, accent, borders)

Estimate spacing and sizing patterns

Identify typography hierarchy

Flag any states visible (normal, selected, disabled, error, etc.)
选择模板 — Load the appropriate template from assets/:
handoff-template-mini-program.md for 小程序
handoff-template-app.md for App
handoff-template-web.md for Web
handoff-template-large-screen.md for 大屏
handoff-template-general.md for通用/不确定平台
生成交付文档 — Fill in the template with:

Page structure overview

Component breakdown with specs (size, color, spacing, font, radius, states)
Asset/cut list (what needs to be exported)
Interaction notes (click, hover, scroll, animation, edge cases)

Responsive/adaptation notes

Data requirements (what data each component needs from backend)
输出 — Present the full handoff doc in chat. If user wants a file, save to .md in workspace.

Output Structure

Every generated handoff doc includes:

页面概述 — Page name, platform, design size, brief description
设计稿信息 — Design file link, designer, version, date
页面结构 — Layout breakdown (regions, hierarchy)
组件清单 — Each component with detailed specs:
尺寸 (width × height)
色值 (background, text, border — HEX)
字体 (family, size, weight, line-height)
间距 (padding, margin)
圆角 (radius)
阴影 (shadow)
状态 (normal / hover / active / disabled / error / loading / empty)
切图清单 — Assets that need to be exported:
图标 (icons)
图片 (images/illustrations)
背景图 (background patterns)
Format, size, naming
交互说明 — Interaction and animation notes:
点击行为 (tap/click behavior)
页面跳转 (navigation)
动效 (transitions, loading, feedback)
异常态 (error, empty, loading, no-network)
数据需求 — What data fields each component needs
适配说明 — Responsive, safe area, platform-specific notes
验收标准 — Acceptance checklist for QA

Platform-Specific Handoff Notes

小程序
标注单位用 rpx（设计稿 750px 宽）
注明原生组件 vs 自定义组件
TabBar / NavigationBar 用原生还是自定义
注意底部安全区适配
分享卡片设计（封面图 5:4）

App

iOS / Android 差异点需分别标注
标注单位用 pt（iOS）/ dp（Android）
注明原生导航栏还是自定义导航栏
深色模式适配说明
手势交互（侧滑返回、长按等）
Haptics 反馈

Web

标注单位用 px
响应式断点（768 / 1024 / 1440 / 1920）
hover / focus 状态必须标注
键盘可访问性说明
浏览器兼容性要求
大屏
标注单位用 px（注明设计基准分辨率）
适配缩放策略（等比缩放 / 自适应）
数据刷新频率
远距离可读性确认（字号、对比度）

Quality Checklist

Before delivering, verify:

✅ Every interactive element has a clear behavior note
✅ Every visible component has size + color + font specs
✅ All states are documented (normal / pressed / disabled / error / empty / loading)
✅ Cut asset list is complete with format + naming
✅ Edge cases are covered (empty data, error, no network, loading)
✅ Platform-specific constraints are noted
✅ Data fields are mapped for backend integration

References

references/component-checklist.md — Component spec checklist to ensure nothing is missed
references/naming-convention.md — Asset naming conventions per platform
设计规范生成器

SignalLayer x402 Preflight