An automated tool that analyzes design assets like screenshots and mockups to generate structured, interactive HTML5 presentation documents.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-analysis
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install design-analysis using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Design Analysis Skill?
The Design Analysis Skill is a specialized utility designed for developers and designers who need to convert static design materials into professional, structured documentation. By leveraging the power of Openclaw Skills, this tool scans local directories for visual assets and automatically synthesizes a paginated HTML5 experience.
This skill eliminates the manual labor involved in creating design review documents or UI/UX presentations. It transforms raw screenshots into a refined interface featuring a 30/70 split-screen layout, where technical analysis or descriptions sit alongside high-resolution design renders. This makes it an essential part of the Openclaw Skills ecosystem for maintaining consistent documentation standards.
Design Analysis Skill Use Cases
- Performing structural analysis on design mockups and UI screenshots.
- Generating media-rich HTML reports for internal design reviews or client presentations.
- Organizing design iterations into paginated chapters for easier navigation.
- Automating the conversion of design folders into interactive, shareable web documents.
How Design Analysis Skill Works
- The skill scans a designated input folder for image files including PNG, JPG, JPEG, and GIF formats.
- It performs a smart analysis of the file contents based on metadata, filenames, and timestamps to establish a logical sequence.
- Content is organized into distinct sections or chapters, either automatically or based on user-defined configurations.
- An HTML5 presentation is generated, incorporating a responsive layout and embedded interactive elements.
- The final document is exported to a specified path, complete with sidebar navigation, page controls, and keyboard support.
Design Analysis Skill Setup
To utilize this within the Openclaw Skills framework, you can invoke the design analysis function via your coding agent. Ensure your design assets are organized in a local directory.
// Basic usage to generate a presentation
const result = await designAnalysis({
inputFolder: "~/Desktop/DesignAssets",
outputFile: "~/Desktop/analysis_report.html",
title: "Product Design Analysis"
});
Design Analysis Skill Data Schema & Taxonomy
The skill processes input parameters and generates a structured JSON response and a final HTML file. Data organization follows this taxonomy:
| Component | Description |
|---|---|
| inputFolder | Source directory containing screenshots/mockups |
| outputFile | Target destination for the generated HTML file |
| layout | Configuration for textWidth and imageWidth ratios |
| sections | Metadata array including titles, tags, and content for each page |
| analysis | Output object containing fileCount, imageFiles, and section list |
Design Analysis Skill Advanced Features
- Custom layout proportions allowing users to adjust the split-screen ratio for text and imagery.
- Support for custom page dimensions (e.g., 1920x1080 or 4K) to match specific display requirements.
- Advanced navigation features including a sidebar dock, footer controls, and smooth transition animations.
- Keyboard shortcut support for rapid navigation between design sections.
- Fully responsive output that adapts to mobile devices for on-the-go design reviews.
SKILL.md
Loading
Related Openclaw Skills
Doubao Seed Image Analysis Skill
A specialized CLI tool that leverages ByteDance Doubao vision models to analyze and describe image content for users and AI agents.
ClawHub Publisher
ClawHub Publisher is a professional developer tool that automates the entire lifecycle of publishing and managing Openclaw Skills.
Skill Shield
An advanced security management system for OpenClaw extensions that provides automated risk scanning and granular policy control.
3-Layer Token Compressor
A local preprocessing utility that leverages Ollama models to compress prompts and summarize history before they reach expensive paid LLM APIs.
TokenBooks Cross-Provider AI Spend Dashboard
TokenBooks provides a unified local dashboard to track, analyze, and optimize your spending across multiple AI providers like OpenAI and Anthropic.
Self-Improving Agent
A sophisticated AI memory and learning framework that enables agents to learn from errors, user corrections, and best practices in real-time.
Featured*
