Only code in HTML/Tailwind in a single code block. Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response. Don't mention about tokens, Tailwind or HTML. Always include the html, head and body tags. Use lucide icons for javascript, 1.5 strokewidth. Unless style is specified by user, design in the style of Linear, Stripe, Vercel, Tailwind UI (IMPORTANT: don't mention names). Checkboxes, sliders, dropdowns, toggles should be custom (don't add, only include if part of the UI). Be extremely accurate with fonts. For font weight, use one level thinner: for example, Bold should be Semibold. Titles above 20px should use tracking-tight. Make it responsive. Avoid setting tailwind config or css classes, use tailwind directly in html tags. If there are charts, use chart.js for charts (avoid bug: if your canvas is on the same level as other nodes: h2 p canvas div = infinite grows. h2 p div>canvas div = as intended.). Add subtle dividers and outlines where appropriate. Don't put tailwind classes in the html tag, put them in the body tags. If no images are specified, use these Unsplash images like faces, 3d, render, etc. Be creative with fonts, layouts, be extremely detailed and make it functional. If design, code or html is provided, IMPORTANT: respect the original design, fonts, colors, style as much as possible. Don't use javascript for animations, use tailwind instead. Add hover color and outline interactions. For tech, cool, futuristic, favor dark mode unless specified otherwise. For modern, traditional, professional, business, favor light mode unless specified otherwise. Use 1.5 strokewidth for lucide icons and avoid gradient containers for icons. Use subtle contrast. For logos, use letters only with tight tracking. Avoid a bottom right floating DOWNLOAD button.
Featured
Launch OpenClaw on Hostinger in about 60 seconds and keep your agent live 24/7. Our referral link gives you 20% off, no coupon code needed.
Launch on Hostinger →Launch Hermes on Hostinger in one click, fully managed, no VPS knowledge needed. Use code ZACAARON10 for 10% off.
Launch on Hostinger →Firecrawl crawls and scrapes any site into clean markdown for your agent. Get 1,000 free credits, and new users get 10% off their first purchase.
Try Firecrawl free →QwikClaw sets up and runs an always-on OpenClaw agent for you. One click, no config files, no server setup.
Deploy now →Context.dev gives your agents a single API to scrape, enrich, and extract live web data — no proxies, no parsers, no maintenance.
Start building free →White-glove OpenClaw for founders and exec teams (4–50+ employees): we install, harden, integrate your tools, and maintain it — secured from day one.
Get it set up for you →DataForSEO gives your agent live access to SERP results, keyword data, backlinks, and on-page SEO data through one API. New accounts get a $1 credit, good for up to 20,000 keyword or backlink lookups.
Try DataForSEO free →A flat monthly placement in front of developers actively installing AI tools. No lock-in, cancel anytime.
Advertise here →
Installation
npx skills add https://github.com/shajith003/awesome-claude-skills --skill ui-designSummary
Use this to design a nice UI in single html as inspiration & UI exploration.
SKILL.md
Score
0–100Grade
C
3,019 installs — solid traction.
Documented: full SKILL.md body, description, one-line install. Missing: category/license metadata.
Community skill with a public GitHub source repository you can review.
No update timestamp is tracked for this skill in our catalog.
Scored automatically from popularity, completeness, trust, and freshness — computed only from data in our catalog, never fabricated.
Proud of your score? Add this badge to your README.
Paste a snippet into your GitHub README. The badge updates automatically and links back to this page.
Score badgeMarkdown
[](https://www.claudemarket.ai/skills/shajith003/awesome-claude-skills/ui-design)
HTML
<a href="https://www.claudemarket.ai/skills/shajith003/awesome-claude-skills/ui-design"><img src="https://www.claudemarket.ai/skills/shajith003/awesome-claude-skills/ui-design/badges/score.svg" alt="Ui Design skill"/></a>
Ui Design FAQ
How do I install the Ui Design skill?
Run “npx skills add https://github.com/shajith003/awesome-claude-skills --skill ui-design” in your terminal. The skill is added to your agent's skills directory and picked up automatically on the next run — no restart or extra configuration needed.
What does the Ui Design skill do?
Use this to design a nice UI in single html as inspiration & UI exploration. The full SKILL.md on this page shows the exact instructions the skill gives your agent.
Is the Ui Design skill free?
Yes. Ui Design is a free, open-source skill published from shajith003/awesome-claude-skills. As with any third-party skill, review the source repository before installing it into an agent with sensitive access.
Does Ui Design work with Claude Code and OpenClaw?
Yes. Skills use the portable SKILL.md format, so Ui Design works with Claude Code, OpenClaw, Codex, Hermes, and any other agent that reads SKILL.md skills.
Recommended skills
Browse all →
find-skills
vercel-labs/skills
frontend-design
anthropics/skills
grill-me
mattpocock/skills
grill-with-docs
mattpocock/skills
agent-browser
vercel-labs/agent-browser
vercel-react-best-practices
vercel-labs/agent-skills
Related guides
Hand-picked reading to help you choose, install, and use agent skills.
Skills by category
MCP servers by category
Marketplaces by category