ui-craft-pro
Design, refine, and implement better UI for websites, dashboards, apps, landing pages, and components by using a local design knowledge base plus a code-first implementation workflow. Use when the goal is not just to get style ideas, but to turn a chosen visual direction into real interface code that looks more polished, more intentional, and less like generic AI UI. Especially useful for choosing styles, colors, typography, layout patterns, UX guidelines, chart types, generating a project-specific design system, and then coding the UI to match that system.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/airaeliteagent/ui-craft-proUI Craft Pro
Use this skill to make UI output look sharper and feel more deliberate.
This skill is not just for searching design references. Its real job is:
- choose a design direction that fits the product
- turn that direction into a usable design system
- implement code that actually follows that system
- review the output so the final UI still matches the intended vibe
What this skill contains
data/— local design knowledge base: styles, colors, typography, charts, landing patterns, UX guidelines, product mappings, reasoning rulesscripts/search.py— search + design-system entry pointscripts/core.py— local BM25 search engine over the CSV datascripts/design_system.py— design-system generator that combines product type, style direction, color, typography, and anti-pattern guidancescripts/style_signature.py— compact style-cloning brief generator for "X-like but mine" workreferences/implementation-patterns.md— how to translate a chosen design system into real codereferences/review-checklist.md— post-build review checklist to catch drift and weak outputreferences/product-archetypes.md— how to correct mismatched first-pass results for product types that need calmer or more specific taste
Core rule
Do not stop at “the search result says X”. Use the result to drive the actual implementation.
When using this skill for real UI work, the expected path is:
- understand the product
- generate or infer the design system
- map that system into code
- check whether the final UI still matches the system
- then ship or refine
Workflow
1) Understand the product first
Before touching visuals, identify:
- what the product is
- who it is for
- what mood it should give off
- whether the stack is fixed already
If the user already gave a strong direction, do not overcomplicate it. Use that direction and sharpen it.
2) Generate a design system early
For new pages, dashboards, flows, or landing pages, start here:
python3 skills/ui-craft-pro/scripts/search.py "<product + style keywords>" --design-system -p "<project name>"
Examples:
python3 skills/ui-craft-pro/scripts/search.py "gaming landing page bold neon competitive" --design-system -p "Neon Rift"
python3 skills/ui-craft-pro/scripts/search.py "AI dashboard modern premium dark" --design-system -p "Aira Ops"
python3 skills/ui-craft-pro/scripts/search.py "fintech mobile app minimal trustworthy" --design-system -p "Wallet App"
Use the result to lock in:
- layout pattern
- style direction
- color palette
- typography pairing
- interaction feel
- anti-patterns to avoid
3) Correct bad first-pass matches when needed
Sometimes the first generated result is technically plausible but emotionally wrong. That is a correction problem, not a reason to abandon the workflow.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-airaeliteagent-ui-craft-pro": {
"enabled": true,
"auto_update": true
}
}
}