Summary
This is the guide you want when someone asks you to "make it look better" and you're staring at a mess of divs. It's brutally practical: start with the feature itself, not the navbar. Work in grayscale first. Define spacing and type scales immediately instead of eyeballing every margin. The references cover hierarchy, layout, typography, color systems, and polish with specific tactical rules rather than vague design advice. The core insight is that good UI is about systems and constraints, not artistic talent. If you find yourself bikeshedding between twelve shades of blue or adding random padding values, this will snap you back to a disciplined workflow.
Install to Claude Code
npx -y skills add lovropodobnik/refactoring-ui-skill --skill ui-refactor --agent claude-codeInstalls into .claude/skills of the current project.
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.md
Select a file.
Featured
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
