# ui.sh Design By **ui-sh** ยท Habilidades Claude/Codex/Cursor skill from the Tailwind CSS team that upgrades AI-generated UI from generic to designer-quality, in any existing project. - Source: https://ui.sh/skills/design - Install: `npx @uidotsh/install design --token=[token]` - Tags: skill, ui, design, claude, codex, cursor, tailwind, open-source - Pricing: unknown - Upvotes: 0 ## Features - Slash-command activation via /design in any supported coding agent - Guides layout, hierarchy, color, spacing, typography, and component decisions - Avoids common AI UI tells: purple palettes, text gradients, unnecessary card boxing - Builds within the project's existing framework, components, and conventions - Checks output across responsive breakpoints and interaction states - Supports parallel multi-concept generation when combined with the ideas skill - Works with Claude Code, Codex, Cursor, OpenCode, and Amp via MCP - Installs via a single npx command with a project-scoped token --- ## Why it matters AI coding agents ship UI fast, but the output has a fingerprint: purple palettes, text gradients, every section boxed into a card. ui.sh Design is a skill that rewires the agent's design judgment before it writes a single line. The result looks like a senior designer reviewed it, not like a model interpolated between a thousand Dribbble screenshots. ## The big picture ui.sh comes from Adam Wathan (Tailwind CSS) and Steve Schoger (Refactoring UI), two people who have spent years codifying design intuition into teachable rules. The skill format packages that intuition as curated prompts, markdown guidelines, and reference examples that travel with the agent's context. Per the project's own framing: "The designs will look better, the implementations will be more robust, the code will be more accessible, and no one is going to look at it and immediately think 'great, another obviously AI-designed landing page.'" ## How it works Install once with npx, then prefix any UI prompt with `/design`. The skill guides the agent on layout hierarchy, color, spacing, typography, and component details. It builds within the project's existing framework, components, assets, and conventions, then checks the result across responsive breakpoints and interaction states. Pairing it with the ideas skill lets you spin up multiple design concepts in parallel and pick the direction you like. ## Zoom in The before/after examples in the docs show the gaps are often subtle: a login page without the skill looks competent but dated; with it, the spacing tightens, the social login buttons feel intentional, and the typographic hierarchy reads cleanly. The team notes most testing was done with Claude Code running the Opus model, and that's where the best results appear. ## Yes, but ui.sh is currently invite-only, and Wathan himself describes the current state as "uncomfortably early." The skill primitive it relies on is itself new, so the surface area and conventions are still evolving. That's a real consideration for teams who need production stability over cutting-edge output quality. ## The bottom line If you're already using Claude Code or Codex to build UI and you're tired of outputs that feel obviously AI-designed, ui.sh Design is the most direct fix available, backed by some of the strongest design-systems pedigree in the ecosystem. Get on the waitlist early; the underlying skill platform is moving fast. ## FAQ ### What is ui.sh Design? ui.sh Design is an AI agent skill that gives coding agents like Claude Code, Codex, and Cursor the design judgment of a senior designer when generating UI. It works by injecting curated prompts, guidelines, and reference examples into the agent's context, steering decisions about layout, hierarchy, color, spacing, and typography. It was created by Adam Wathan (Tailwind CSS) and Steve Schoger (Refactoring UI), and is part of a broader suite of ui.sh skills for interface builders. ### How do I install and use the Design skill? Install it by running `npx @uidotsh/install design --token=` inside your project. Once installed, prefix any UI prompt with `/design` to activate the skill, for example `/design Create a login page for a SaaS application`. The skill works within your existing framework, components, and conventions, and checks results across responsive breakpoints and interaction states automatically. ### Is ui.sh free or open source? ui.sh requires a token to install, indicating it is access-gated rather than freely open. The platform is currently invite-only, and pricing details are not publicly disclosed in the available sources. Wathan has described the current state as 'uncomfortably early,' so the commercial model may still be taking shape. ### What is the Design skill best for? The Design skill is best for developers and teams who are already building UI with an AI coding agent and want to move the output quality from 'obviously AI-generated' to 'looks like a designer reviewed it.' It actively steers agents away from common AI tells like purple-heavy palettes, text gradients, and unnecessary card boxing, and it works within whatever framework and component library the project already uses. ### How does ui.sh Design compare to using a standalone AI design tool? ui.sh Design sits inside your existing agent workflow rather than requiring a separate design tool or IDE. Unlike tools such as TypeUI (which also offers design skills for Claude, Codex, and Cursor but as a standalone catalog), ui.sh integrates directly via MCP and a shell installer, meaning the skill travels with your project and respects your existing codebase conventions. The tradeoff is that ui.sh is invite-only and early, while alternatives may offer more immediate access. ### What are the limitations or risks of using ui.sh Design? The biggest limitation is access: ui.sh is invite-only and the creators describe it as 'uncomfortably early,' meaning stability, coverage, and conventions are still evolving. The best results are with Claude Code running the Opus model; other agents and models may produce weaker improvements. The skill primitive itself is new, so the surface area of what it covers will change as the platform matures. --- [View on Analog](https://analoghq.ai/pt-br/ui-sh/skills/ui-sh-design)