Ui Design

This is the pre-implementation design layer: colour palettes, typography scales, design tokens, and visual direction before you write any Tailwind. It splits into product UI (dashboards, admin panels, data tables) and marketing (landing pages, brand sites), with separate guidance for each. The marketing track includes CRO psychology, A/B testing methodology, social proof patterns, and conversion benchmarks. Use it when someone says "make this look premium" or "pick a visual style" or you're starting a design system from scratch. Once you have a spec or token set, hand off to the ui skill for actual markup. The boundary is clear: this outputs decisions and direction, ui outputs components and Tailwind classes.

skills.sh installs: 1.5K
GitHub stars: 191
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mblode/agent-skills --skill ui-design --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Design

Owns everything that touches the built artifact: pick the visual direction, implement it in code, and audit what shipped.

IS: choosing visual direction (palettes, type scales, tokens, layout systems, CRO strategy, brand boards), building UI in code, and auditing built React or Next frontends for user-facing defects with file:line evidence, applied fixes, and a ship verdict.
IS NOT: deciding what an interface should do before it exists (use product-design); non-UI correctness and code quality (use tidy); agentic-app review (use ax-audit); deep typography or motion passes (use typography-audit, ui-animation); measuring the rendered page in a browser (use ui-verification); the wording of a string (use ghostwriter).