A professional design knowledge base and implementation workflow for turning generic AI-generated interfaces into polished, intentional, and product-specific UI code.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-craft-pro
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 ui-craft-pro 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 ui-craft-pro?
ui-craft-pro is a specialized addition to the Openclaw Skills ecosystem designed for developers who want to move beyond generic, uninspired AI-generated layouts. It provides a local design knowledge base covering styles, typography, color theory, and UX patterns, coupled with a robust search engine to help you find the right visual direction for any product archetype.
Unlike simple styling tools, this skill focuses on a code-first implementation workflow. It bridges the gap between high-level design inspiration and the actual implementation layer, ensuring that your CSS variables, Tailwind tokens, and component structures remain coherent and aligned with a specific project-specific design system.
ui-craft-pro Use Cases
- Building new landing pages with specific brand identities (e.g., gaming, fintech, or SaaS).
- Generating a cohesive design system for complex dashboards and data visualization projects.
- Correcting generic AI UI output that feels emotionally disconnected from the target audience.
- Translating visual styles and "style signatures" into production-ready React or web code.
- Auditing existing UI implementations against professional UX checklists and anti-pattern guides.
How ui-craft-pro Works
- The skill starts by identifying the product archetype and the intended mood or target audience.
- Users run a search via the local BM25 engine to generate a design system including typography, palettes, and layout patterns.
- The design direction is refined through domain-specific searches (color, UX, or charts) to ensure technical and emotional accuracy.
- Design tokens and implementation rules are locked in, defining the spacing rhythm, radius, and shadows.
- The code is implemented following the established system to ensure visual consistency.
- A final review pass is performed using a checklist to catch design drift or readability issues.
ui-craft-pro Setup
To install and begin using this component of Openclaw Skills, ensure you have the scripts and data directory in your project path, then initialize a search:
# Generate a design system for a new project
python3 skills/ui-craft-pro/scripts/search.py "AI dashboard modern premium dark" --design-system -p "Aira Ops"
# Search for specific typography or color pairings
python3 skills/ui-craft-pro/scripts/search.py "minimalist typography" --domain typography
ui-craft-pro Data Schema & Taxonomy
The skill organizes its intelligence through a structured local directory and specialized Python scripts:
| Component | Description |
|---|---|
data/ |
Local CSV knowledge base containing styles, UX guidelines, and product mappings. |
scripts/ |
Core logic for search (BM25), design system generation, and style cloning. |
references/ |
Markdown guides for implementation patterns, product archetypes, and review checklists. |
domains |
Taxonomy includes color, typography, landing patterns, charts, and anti-generic UI rules. |
ui-craft-pro Advanced Features
- Style Signature Generation: Create "X-like but mine" briefs to clone visual DNA without direct copying.
- Multi-Domain Drilldown: Specifically target domains like
chartfor data-heavy dashboards orgoogle-fontsfor discovery. - Anti-Generic UI Filter: Use the
anti-generic-uidomain to identify and fix common AI-generated design smells. - Design System Lock-in: Automated generation of layout, spacing, and interaction patterns based on product archetypes.
SKILL.md
Loading
Related Openclaw Skills
SUPAH Pulse
A real-time crypto market intelligence briefing that provides AI agents with situational awareness through a comprehensive Market Pulse Score.
Iteration Pattern
The Iteration Pattern implements the Ralph loop to solve incomplete AI execution through continuous cycles of verification and optimization.
Cisco Firewall Audit
A professional-grade auditing tool for evaluating Cisco ASA and Firepower Threat Defense security policies, access controls, and compliance posture.
GitHub Trending
An automated data extraction tool for tracking daily popular GitHub repositories with optional language filtering.
ProxyGate CLI Router
ProxyGate CLI is a marketplace router for AI agents to buy and sell API capacity using USDC on Solana with transparent proxying.
WeChat Article Generator
A professional interactive agent that guides you through a step-by-step workflow to generate high-quality WeChat Official Account articles with smart styling and image recommendations.
Featured*
