What is ui-design best used for?

Rapid single-file UI prototypes for inspiration and exploration of layouts, typography, and visual rhythm.

Do I need JavaScript or external frameworks?

No. Focus on CSS hover/focus interactions and inline styling; icons can be integrated without extra scripts.

How do I keep the prototype portable?

Keep everything self-contained in one file, use inline styles, and avoid external dependencies.

ui-design

Scanned

npx machina-cli add skill shajith003/awesome-claude-skills/ui-design --openclaw

Files (1)

SKILL.md

1.9 KB

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.

Source

git clone https://github.com/shajith003/awesome-claude-skills/blob/main/ui-design/SKILL.mdView on GitHub

Overview

This skill focuses on crafting a polished user interface in a single-file prototype intended for inspiration and UI exploration. It emphasizes a clean, modern aesthetic with subtle dividers, precise typography, and responsive layouts to guide rapid prototyping and exploration before building a full app. It’s ideal for testing visual rhythm and component composition quickly.

How This Skill Works

Create a complete UI surface by assembling sections, cards, navigation, forms, and components within one file, applying inline styles to ensure portability. The approach favors a dark-by-default, refined palette and 1.5-stroke lucide icons for clarity, with CSS-based hover and focus interactions instead of JavaScript animations. Layouts are designed to be responsive from mobile to desktop, enabling iterative exploration of spacing and hierarchy.

When to Use It

Kick off a new app concept with a quick visual compass and layout ideas.
Prototype a dashboard to compare card grids, charts, and navigation patterns.
Mock up a landing page or feature page to tell a product story visually.
Experiment with responsive, mobile-first layouts before committing to a full build.
Use in workshops or tutorials to demonstrate UI composition and typography choices.

Quick Start

Step 1: Sketch the page sections and components you need to convey the concept.
Step 2: Build a self-contained prototype with inline styles and modular blocks.
Step 3: Add responsive tweaks and lucide icons at 1.5 stroke width; refine hover and focus states.

Best Practices

Define a clear typographic scale and ensure headings above 20px use tracking-tight.
Maintain a modular card system and consistent spacing to improve reusability.
Incorporate subtle dividers and outlines to delineate sections without clutter.
Prioritize accessibility with good color contrast and visible keyboard focus states.
Iterate with responsive breakpoints and refined iconography to preserve balance.

Example Use Cases

Studio portfolio homepage prototype
Analytics dashboard landing frame
Product feature tour layout
Mobile onboarding screens showcase
Marketing hero section with CTA

Frequently Asked Questions

Add this skill to your agents