Ui Design
Generate a polished single-file HTML/Tailwind UI mock for inspiration and rapid visual exploration.
Overview
ui-design is an agent skill for the Build phase that produces a single responsive HTML/Tailwind inspiration page with lucide icons and optional chart.js charts.
Install
npx skills add https://github.com/shajith003/awesome-claude-skills --skill ui-designWhat is this skill?
- Single HTML document with Tailwind utility classes on body tags—no separate tailwind config file
- Visual language aligned to modern product SaaS aesthetics with accurate font weights one step thinner than requested
- Custom checkbox, slider, dropdown, and toggle markup only when the requested UI needs them
- chart.js integration with canvas nesting guidance to avoid layout growth bugs
- Responsive layouts with tracking-tight on titles above 20px and lucide icons at 1.5 stroke width
- Font rule: render requested bold weight one level thinner (e.g., Bold as Semibold)
- chart.js canvases must be nested (div>canvas) to avoid infinite layout growth
Adoption & trust: 2.8k installs on skills.sh; 24 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a credible UI direction quickly but only have a text prompt—not a Figma file or component library.
Who is it for?
Solo builders exploring landing pages, settings screens, or dashboards before committing to React/Vue implementation.
Skip if: Teams needing WCAG audit trails, multi-page design systems, or backend/API work with no visual deliverable.
When should I use this skill?
Use this to design a nice UI in single html as inspiration and UI exploration.
What do I get? / Deliverables
You receive one self-contained HTML mock with Tailwind-styled layout, responsive behavior, and on-brand typography you can screenshot or hand to implementation.
- Single-file responsive HTML page with embedded Tailwind utility classes
- Optional chart.js visualizations and custom form controls when specified
Recommended Skills
Journey fit
Canonical shelf is Build/frontend because output is implementable UI markup for product screens rather than market or analytics work. Frontend subphase matches Tailwind-in-HTML delivery, responsive layout rules, lucide icons, and optional chart.js dashboards.
How it compares
One-shot HTML visual generator rather than a Figma plugin or shadcn component install.
Common Questions / FAQ
Who is ui-design for?
Indie developers and designers using coding agents who want Linear/Stripe-grade layout polish in a single HTML file for inspiration.
When should I use ui-design?
Use it during Build/frontend when exploring layouts, marketing pages, or admin UIs—or early Validate/prototype when you need a clickable-looking mock before code split.
Is ui-design safe to install?
It is prompt-only styling guidance with optional Unsplash image URLs; review the Security Audits panel on this Prism page and avoid embedding secrets in generated HTML.
SKILL.md
READMESKILL.md - Ui Design
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.