一个自动分析截图和原型等设计资产并生成结构化、交互式 HTML5 演示文档的工具。
安装与下载
1. ClawHub CLI
从源直接安装技能的最快方式。
npx clawhub@latest install design-analysis
2. 手动安装
将技能文件夹复制到以下位置之一
~/.openclaw/skills/ <project>/skills/ 优先级：工作区 > 本地 > 内置
3. 提示词安装
将此提示词复制到 OpenClaw 即可自动安装。
请帮我使用 Clawhub 安装 design-analysis。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
更倾向于下载？
获取包含原生技能文件的ZIP压缩包。
什么是 设计分析技能？
设计分析技能是一个专门为需要将静态设计材料转换为专业结构化文档的开发人员和设计师设计的工具。通过利用 Openclaw Skills 的强大功能，此工具会扫描本地目录中的视觉资产并自动合成分页的 HTML5 体验。
该技能消除了创建设计审查文档或 UI/UX 演示文稿所涉及的手动工作。它将原始截图转换为精细的界面，采用 30/70 分屏布局，技术分析或描述位于高分辨率设计渲染图旁边。这使其成为 Openclaw Skills 生态系统中维护一致文档标准的重要组成部分。
设计分析技能 应用场景
- 对设计原型和 UI 截图执行结构分析。
- 为内部设计评审或客户演示生成多媒体 HTML 报告。
- 将设计迭代组织成分页章节，以便于导航。
- 自动将设计文件夹转换为交互式、可共享的网页文档。
设计分析技能 工作原理
- 该技能扫描指定的输入文件夹以查找包括 PNG、JPG、JPEG 和 GIF 格式在内的图像文件。
- 它根据元数据、文件名和时间戳对文件内容进行智能分析，以建立逻辑顺序。
- 内容被组织成不同的部分或章节，可以是自动执行，也可以基于用户定义的配置。
- 生成 HTML5 演示文稿，其中包含响应式布局和嵌入式交互元素。
- 最终文档导出到指定路径，配备侧边栏导航、页面控制和键盘支持。
设计分析技能 配置指南
要在 Openclaw Skills 框架内利用此功能，您可以通过编码代理调用设计分析函数。确保您的设计资产组织在本地目录中。
// Basic usage to generate a presentation
const result = await designAnalysis({
inputFolder: "~/Desktop/DesignAssets",
outputFile: "~/Desktop/analysis_report.html",
title: "Product Design Analysis"
});
设计分析技能 数据架构与分类体系
该技能处理输入参数并生成结构化的 JSON 响应和最终的 HTML 文件。数据组织遵循以下分类法：
| Component | Description |
|---|---|
| inputFolder | 包含截图/原型的源目录 |
| outputFile | 生成的 HTML 文件的目标位置 |
| layout | 文本宽度 (textWidth) 和图像宽度 (imageWidth) 比例的配置 |
| sections | 包含每页标题、标签和内容的元数据数组 |
| analysis | 包含文件数量 (fileCount)、图像文件 (imageFiles) 和部分列表的输出对象 |
设计分析技能 高级特性
- 自定义布局比例，允许用户调整文本和图像的分屏比例。
- 支持自定义页面尺寸（例如 1920x1080 或 4K），以匹配特定的显示要求。
- 高级导航功能，包括侧边栏停靠、页脚控制和平滑过渡动画。
- 键盘快捷键支持，用于在设计部分之间进行快速导航。
- 完全响应式输出，适配移动设备进行随时随地的设计评审。
SKILL.md
加载中
Openclaw 相关技能
ClawHub Publisher
ClawHub Publisher 是一款专业的开发人员工具，可自动执行发布和管理 Openclaw Skills 的整个生命周期。
3层 Token 压缩器
一个本地预处理工具，利用 Ollama 模型在 prompt 提交到昂贵的付费 LLM API 之前对其进行压缩并总结历史记录。
TokenBooks 多提供商 AI 开支仪表盘
TokenBooks 提供了一个统一的本地仪表盘，用于追踪、分析和优化您在 OpenAI 和 Anthropic 等多个 AI 提供商之间的支出。
PyAutoGUI Automation Skill
一个全面的跨平台自动化技能，用于 Openclaw Skills 生态系统内的程序化鼠标、键盘和屏幕控制。
精选*
