A professional design reverse-engineering tool that extracts color palettes, typography, and layout specifications from any website URL.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install cosdesign-standalone
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 cosdesign-standalone 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 CosDesign?
CosDesign is a technical design replication tool built for developers who need to translate visual inspiration into actionable code. By leveraging advanced crawling technologies, it performs a deep dive into any target URL to extract comprehensive visual design systems. As part of the ecosystem of Openclaw Skills, it bridges the gap between design observation and frontend implementation.
The tool identifies core visual elements such as HEX/RGB color schemes, font hierarchies, spacing systems, and responsive layout patterns. Unlike simple inspection tools, CosDesign synthesizes this data into developer-ready outputs, enabling rapid scaffolding of design specifications without manual data entry.
CosDesign Use Cases
- Extracting precise color palettes and typography hierarchies from a reference website to accelerate project setup.
- Generating Tailwind CSS configurations or CSS Variables directly from a live URL.
- Performing competitive design analysis by comparing the visual frameworks of multiple websites side-by-side.
- Creating automated Design Token JSON files for integration into multi-platform design systems.
- Producing detailed HTML design specification reports for design-to-development handovers.
How CosDesign Works
- The tool receives a target URL through the command line interface.
- It utilizes Jina Reader, WebFetch, or WebSearch to crawl and parse the webpage's visual and structural metadata.
- The extraction engine analyzes the DOM and CSS to identify recurring patterns in spacing, colors, and typography.
- Extracted data is categorized into modules such as colors, fonts, layout (grid/flex), and component-specific styles.
- The tool generates the requested output format, such as a Design Token JSON, a Tailwind config, or a visual HTML report.
CosDesign Setup
Standard Installation
clawhub install cosdesign
Manual Installation
cp -r /path/to/cosdesign ~/.openclaw/workspace/skills/cosdesign/
Optional Configuration
To increase crawling rate limits using Jina Reader, you can set an optional API key:
export JINA_API_KEY=<your-jina-api-key>
CosDesign Data Schema & Taxonomy
CosDesign maintains a clean directory structure for managing extraction logic and history:
| Path | Purpose |
|---|---|
data/analysis-history.json |
Stores a log of analyzed URLs, timestamps, and metadata summaries. |
scripts/analyze.js |
Core script for single-page design specification extraction. |
scripts/compare.js |
Script for multi-site visual style comparison. |
scripts/export.js |
Formatter for converting extracted data into CSS, JSON, or Tailwind formats. |
scripts/define-style.js |
Generates comprehensive design definition documents. |
CosDesign Advanced Features
- Multi-site comparison support for analyzing design differences across up to three URLs simultaneously.
- Focused extraction modes allowing users to isolate specific attributes like --focus color or --focus typography.
- Automated generation of 4px/8px grid-based spacing systems based on real-world page margins and padding.
- Direct export to professional formats including Design Tokens (JSON) and full HTML visual reports with color swatches and font samples.
- Seamless integration with Openclaw Skills workflows for automated frontend scaffolding.
SKILL.md
Loading
Related Openclaw Skills
Magazine Cover Generator
An AI-powered tool for generating high-fidelity magazine cover art with professional typography and editorial styling.
Teletalk AllJobs Gov Job Search
Automate your Bangladesh government job search by filtering the Teletalk AllJobs API and tracking applications directly within your AI workflow.
Sansheng Thinking
An interactive e-commerce strategy consultant that helps merchants analyze product viability, pricing, and platform-specific operations through structured reasoning.
ECG_Excel_Pro
A vision-semantic AI assistant designed to automate ECG image auditing, metadata extraction, and AI-driven diagnostic reporting.
AI Bikini Video Generator
An automated AI tool to generate bikini dance videos from a single portrait or full-body photo via the WeShop CLI.
WeShop AI Bikini Photo Editor Skill
An automated AI-powered image editing skill designed to transform person photos into stylized bikini scenes using the WeShop OpenAPI.
Featured*
