ui-designer · daniel-dan-conrad — Claude Code skill: frontend without the AI look
A skill that picks a deliberate visual direction before writing code, then builds the interface around typography, color, motion and composition.
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-codeWhat ui-designer does
The skill kicks in when you ask for a component, page, dashboard or landing page. It works through four questions first: what the interface is for, what tone it takes, what technical limits apply, and what will make it memorable. Coding starts after that.
A script ships with it: scripts/find-relevant-image.py. It scores images from assets/images.csv by how many of their tags appear in your description, verifies the decoded file with file, and writes the winner into scripts/outputs/. The output filename comes from the image metadata, not from you. Run it as python scripts/find-relevant-image.py "<description>".
The script needs Python. The skill also names what to avoid: font stacks like Inter, Roboto and Arial, purple gradients on white, predictable layout templates. If your project already runs on that kind of design system, expect the skill to pull the other way — worth checking before you commit.
What it helps with
- build a landing page with an actual visual idea instead of a default grid
- pick a display and body font pair that isn't a system stack
- stagger section reveals with
animation-delay - find a contextually fitting image for a page
- lay out a dashboard with asymmetric composition
Example prompts for the agent
- Build a landing page for a coffee shop: dark theme, bold display type, sections that fade in on scroll
- Make a React product card component in a brutalist style, no Inter or system fonts
- Find a background image for a page about Japanese temples using
scripts/find-relevant-image.py
How to install ui-designer
1Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-code2Manually: put the files in place
~/.claude/skills/ui-designer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ui-designer/
1Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a codex2Manually: put the files in place
.agents/skills/ui-designer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a cursor2Manually: put the files in place
.cursor/skills/ui-designer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install daniel-dan-conrad/ui-designer-skill ui-designer2Manually: put the files in place
.github/skills/ui-designer/SKILL.md1Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a gemini-cli2Platform CLI
gemini skills install https://github.com/daniel-dan-conrad/ui-designer-skillManually: put the files in place
.devin/skills/ui-designer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about ui-designer
How do I install ui-designer in Claude?
Run npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-code. The skill lands at ~/.claude/skills/ui-designer/SKILL.md.
What does ui-designer do?
It settles on a visual direction before coding and builds the frontend around it: typography, a color scheme driven by CSS variables, animation, composition. It also picks images from a bundled catalog.
What does the image script need to run?
Python. scripts/find-relevant-image.py reads assets/images.csv, matches tags against your description, and saves the chosen file to scripts/outputs/.
Similar skills
Everything for Frontend and UI →ui-designer by other authors comes first.
