A sophisticated design extraction tool that replicates any website's visual aesthetic—including colors, typography, and spacing—directly into your existing project.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install brightdata-design-mirror
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 brightdata-design-mirror 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 Mirror?
Design Mirror is a specialized AI skill designed to bridge the gap between inspiration and implementation. By leveraging Bright Data's Web Unlocker, this Openclaw Skills entry captures the essence of any live website and translates its design tokens—such as color palettes, font hierarchies, and border radii—into your specific codebase.
This skill focuses on the visual design language rather than the underlying functionality or content. It allows developers to mirror a desired aesthetic without copying proprietary code, making it an essential tool for creating modern, professional-looking frontends that match high-end benchmarks.
Design Mirror Use Cases
- Replicating a specific visual style or design language from a reference URL for a new project.
- Matching the UI design of an existing site to create a cohesive ecosystem across different apps.
- Rapidly prototyping themes by extracting palettes and spacing from professional benchmarks.
- Migrating the look and feel of a legacy site to a modern framework like Tailwind CSS or React components.
How Design Mirror Works
- Capture: The skill uses Bright Data to simultaneously take a high-resolution screenshot and scrape the HTML of the inspiration site.
- Extract: It identifies the full design system from the source, including CSS custom properties, typography imports, and spacing scales.
- Analyze: The AI studies both the visual screenshot and the structural CSS to understand the design's mood, layout rhythm, and component shapes.
- Map: A structured design token map is generated, outlining primary colors, font scales, and container shadows for user approval.
- Apply: The design tokens are surgically applied to your existing codebase, updating Tailwind configs, global CSS variables, or theme objects.
Design Mirror Setup
To get started with this skill in the Openclaw Skills ecosystem, you need a Bright Data API key and an Unlocker zone.
export BRIGHTDATA_API_KEY="your-api-key"
export BRIGHTDATA_UNLOCKER_ZONE="your-zone-name"
Design Mirror Data Schema & Taxonomy
The skill organizes extracted design data into a clear taxonomy to ensure precision during the application phase:
| Data Type | Description | Key Elements |
|---|---|---|
| Visual Assets | Temporary image files | /tmp/target_screenshot.png |
| Structure | Scraped HTML and CSS | /tmp/target_page.html |
| Design Tokens | JSON-like mapping | Colors, Typography, Spacing, Borders, Shadows |
| Implementation Guides | Framework-specific patterns | references/apply-guide.md |
Design Mirror Advanced Features
- Framework-agnostic application supporting Tailwind CSS, Styled Components, Emotion, and standard CSS Modules.
- Multi-modal analysis that combines visual screenshot inspection with deep CSS structural scraping to handle minified code.
- Parallel execution of capture tasks to minimize latency during the design extraction process.
- Surgical precision in code modification, ensuring that visual properties are updated without breaking existing application logic.
- Built-in support for capturing complex design effects like glassmorphism, custom gradients, and backdrop blurs.
SKILL.md
Loading
Related Openclaw Skills
Sendloop
A comprehensive integration allowing AI agents to manage Sendloop email marketing automation, subscriber lists, and campaign tracking through the Membrane CLI.
Datananas
A comprehensive sales engagement skill for managing prospects and automating personalized outreach sequences through the Membrane ecosystem.
CrowdStrike Skill
A powerful integration that enables AI agents to manage CrowdStrike security data, automate incident response, and perform real-time endpoint protection tasks.
DC Bank Integration for AI Agents
A powerful financial integration skill that enables AI agents to manage accounts, transactions, and loans via the Membrane framework.
Lattice
An AI agent skill for interacting with Lattice data to manage employee performance, goals, and feedback.
Miro Developer App
A powerful integration for developers to programmatically manage Miro boards, widgets, and team collaboration through a streamlined CLI interface.
Featured*
