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.
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:
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.mdreferences/product-archetypes.md — how to correct mismatched first-pass results for product types that need calmer or more specific tasteDo 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:
Before touching visuals, identify:
If the user already gave a strong direction, do not overcomplicate it. Use that direction and sharpen it.
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:
Sometimes the first generated result is technically plausible but emotionally wrong. That is a correction problem, not a reason to abandon the workflow.
When this happens:
Read references/product-archetypes.md when the first result drifts toward generic app-store, generic SaaS, or any style that does not fit the product’s real emotional center.
After choosing the direction, define the implementation layer clearly. At minimum, lock:
Read references/implementation-patterns.md when moving from design direction into real UI code.
If implementation needs more detail, search one domain directly:
python3 skills/ui-craft-pro/scripts/search.py "<query>" --domain style
python3 skills/ui-craft-pro/scripts/search.py "<query>" --domain color
python3 skills/ui-craft-pro/scripts/search.py "<query>" --domain typography
python3 skills/ui-craft-pro/scripts/search.py "<query>" --domain landing
python3 skills/ui-craft-pro/scripts/search.py "<query>" --domain ux
python3 skills/ui-craft-pro/scripts/search.py "<query>" --domain chart
Use this when you need:
This is the important part.
After choosing a direction, map it into implementation decisions such as:
Do not code a random pretty page after generating a design system. Code in a way that clearly reflects the chosen style.
While coding:
Before shipping or reporting back, check:
Read references/review-checklist.md for the final pass.
If the page still feels bland, refine hierarchy and consistency before adding flair.
Prefer this order internally:
Do not dump raw search results unless they are directly useful. Use them to improve judgment and implementation.
product → product type and expected design languagestyle → visual direction, mood, effects, compatibility, complexitycolor → palettes aligned to product type and emotional tonetypography → font pairing and reading hierarchylanding → section order, CTA placement, conversion structureux → best practices and anti-patternschart → chart choice for dashboard/data workgoogle-fonts → font discoveryicons → icon directionreact / web → implementation guidance when usefuldesign-systems → reference systems worth studying by product contextstyle-signatures → "X-like but mine" style DNApatterns-shells → reusable page/app structural patternsanti-generic-ui → common AI-generic smells and fixes--design-system first so the result has a coherent visual language.