Summary
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.
Install to Claude Code
npx -y skills add mblode/agent-skills --skill ui-design --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
