UI Design Skills for Claude

UI design skills for Claude write down a project's visual rules in a form the model can actually follow: which spacing scale is in use, which colors are allowed, how component states are defined. Without them Claude reinvents the styling on every run and the interface drifts apart quickly — especially when several people build components in parallel.

The key to a working design skill is tokens instead of adjectives. "Make it clean and modern" carries no information for a model and produces arbitrary output. "Spacing only from the 4/8/12/16/24 scale, colors only from these variables, one corner radius across the project" is reproducible and checkable.

The second layer is accessibility. Text contrast, tap target size, a visible keyboard focus state, behavior under reduced motion — these are rules with unambiguous verification, and keeping them in a skill is more reliable than catching them during design review.

The collection below covers design systems, interface markup and landing pages.

Skills in this collection

• HTML-прототипирование и motion-дизайн — huashu-design is a Claude Code skill that turns Claude into an HTML-based designer, producing high-fidelity interactive prototypes, 1920×1080 slide decks, timeline-driven motion animations, data visualizations, and UI mockups — all without a backend. For every task that generates new visual design, the skill mandates a three-direction draft round so the user chooses a direction before execution, even when a style or brand is already specified. When real brands or products are involved, a WebSearch fact-check runs first, followed by an official asset protocol that collects logos, product images, and color specs. It covers UX prototyping, design reviews, and MP4/GIF export workflows, but explicitly excludes production web apps and systems requiring server-side logic.
• Разработка UI-компонентов на React и TypeScript — frontend-ui-engineering is a Claude Code skill that builds production-quality, accessible, and responsive user interfaces in React and TypeScript. It covers creating new components and pages, implementing responsive layouts, managing state across the full spectrum from useState to Zustand, and meeting WCAG 2.1 AA accessibility requirements. The skill enforces a container/presentation component split, file colocation, and composition-over-configuration patterns to keep codebases maintainable. It actively avoids the recognizable AI aesthetic — generic gradients, excessive rounding, oversized padding, and shadow-heavy designs — replacing them with consistent spacing scales, semantic color tokens, and realistic placeholder content. Best suited for developers who need UI that looks like it was crafted by a design-aware engineer rather than generated automatically.
• Авторский визуальный дизайн фронтенда — frontend-design is a Claude Code skill that guides the creation of distinctive, intentional visual design when building a new UI or restyling an existing one. It frames the task as a design-lead role at a boutique studio: make deliberate, opinionated choices about palette (4–6 named hex values), typography (display, body, and utility faces with a clear type scale), layout, and one justified aesthetic risk specific to the brief. A built-in two-pass process — first a compact design plan with a signature element, then a self-critique against the brief before any code is written — actively counters the cluster of templated looks that AI-generated design defaults to. Practical guidance covers hero structure, motion, structural devices, CSS specificity pitfalls, and copy. Useful for developers and designers who need a custom, non-generic frontend that genuinely reflects its subject matter rather than recycling common UI patterns.
• Генерация лендинга через брендовое интервью — brand-landingpage is a Claude Code skill that runs a structured brand-identity interview covering product purpose, brand feel, and visual direction, then generates and iterates a polished landing page through Stitch and delivers deployment-ready HTML. The workflow spans four phases: Stitch SDK setup with API key verification, a three-part interview, design system creation in Stitch, and a generate-review-refine loop. Project state persists in `.stitch/metadata.json`, so if the file already exists the skill resumes from the saved phase without re-interviewing. It's built for developers who need a marketing page, homepage, or product site but have no established visual direction. Dashboards, multi-page apps, and component-level work fall outside its scope — use the frontend-design skill for those cases instead.
• Проектирование KPI-дашбордов для SaaS — kpi-dashboard-design is a Claude Code skill that guides the design of effective KPI dashboards, covering metric selection, visualization best practices, and real-time monitoring patterns. It structures dashboards across three levels — strategic, tactical, and operational — and provides concrete SQL examples for normalizing MRR across subscription intervals, building monthly retention cohorts with DATE_TRUNC, and writing pre-aggregated summary tables to prevent live dashboards from overloading production databases. Troubleshooting sections address common failures: MRR figures that contradict finance reports due to inconsistent proration, alert fatigue from static thresholds, and cohort queries that accidentally partition by day instead of month. The skill is built for product and engineering teams creating SaaS executive dashboards, operations monitoring centers, or user retention analysis views who need a consistent calculation methodology and clear anti-patterns to avoid.
• draw.io — генерация и экспорт диаграмм — drawio-skill is a Claude Code skill that generates `.drawio` XML files and exports them to PNG, SVG, PDF, or JPG using the native draw.io desktop app CLI — no browser automation required. It covers flowcharts, architecture diagrams, UML/ER/BPMN, SysML/MBSE, swimlane and cross-functional charts, network topology, cloud infrastructure diagrams from Terraform or Kubernetes manifests, ML/DL model figures, mind maps, and dozens of other types. The skill ships with 31 scripts, shape- and style-reference guides, a searchable library of 10,000+ shapes (AWS/Azure/GCP, Cisco, Kubernetes, UML, BPMN, and
• Аудит дизайна по принципам Дитера Рамса — design-is is a Claude Code skill that audits a design against Dieter Rams' ten "Good design is…" principles, scores each principle with cited evidence, and hands off a ready-to-run /make-plan prompt for one of three outcomes: new design, refine, or redesign. Acting as an orchestrator, it fans out four parallel subagents — Structural, Visual, Copy & Honesty, and Weight & Friction — each required to return concrete facts with file:line citations, px arrays, hex token counts, and byte measurements, while all 0–3 scoring stays with the orchestrator. Output lands in a DESIGN-IS-<YYYY-MM-DD>/ folder containing scope, evidence, scorecard, verdict, and handoff-prompt files. Ideal for product teams and solo developers who need an objective, evidence-backed case for whether to iterate on or replace an existing UI.
• Дизайн-токены Netflix для стилизации UI — designlang is a Claude Code skill that styles UI for netflix.com by referencing an extracted design system instead of inventing colors, spacing, or typography from scratch. It was generated by designlang v7.0.0 and includes semantic tokens such as the primary action color (#e50914), default surface (#000000), control border radius (2px), and the Netflix Sans typeface. The skill covers key page regions — nav, footer, and content — and enforces the use of dotted semantic paths like `semantic.color.action.primary` while prohibiting new hex values or custom tokens. When a token is missing, the nea
• Дизайн-токены PlanetScale для стилизации UI — designlang is a Claude Code skill that applies extracted PlanetScale design-system tokens when styling UI, eliminating the need to invent colors, spacing, or typography from scratch. It ships semantic tokens extracted by designlang v7.0.0 from planetscale.com: action and surface colors, body text color (`color.text.body: #414141`), pill-shaped control radius (`radius.control: 9999px`), and a system-ui font stack. The skill enforces referencing tokens by their dotted path — such as `semantic.color.action.primary` — forbids introducing new hex values, and requires flagging any gaps when a fittin
• Стилизация UI Sentry через токены дизайн-системы — designlang is a Claude Code skill that styles UI for sentry.io using extracted design-system tokens instead of inventing colors, spacing, or typography from scratch. It ships with semantic tokens produced by designlang v7.0.0: color values (`color.action.primary: #150f23`, `color.surface.default: #1f1633`, `color.text.body: #000000`), a control radius (`radius.control: 2px`), and body font (`typography.body.fontFamily: Rubik`). All tokens are referenced by dotted path (`semantic.color.action.primary`) and cover page regions including nav, testimonials, content, features, cta, pricing, and foot
• Дизайн-токены Discord для стилизации UI — designlang is a Claude Code skill that provides extracted design-system tokens for discord.com, ensuring UI styling is based on real values rather than invented colors, spacing, or typography. Tokens were extracted by designlang v7.0.0 and cover semantic variables including color (`color.action.primary: #5865f2`, `color.surface.default: #1a2081`, `color.text.body: #000000`), border radius (`radius.control: 12px`), and font family (`typography.body.fontFamily: Ggsans`). The skill enforces referencing tokens by their dotted path (e.g. `semantic.color.action.primary`) and strictly prohibits creat
• Дизайн-токены Duolingo для стилизации UI — designlang is a Claude Code skill that supplies extracted design tokens from duolingo.com so UI can be styled against the real design system rather than invented values. Extracted by designlang v7.0.0, the token set covers semantic variables for color (`color.action.primary: #d7ffb8`, `color.surface.default: #ffffff`, `color.text.body: #000000`), border radius (`radius.control: 2px`), and typography (`typography.body.fontFamily: duolingo-sans`). The skill maps tokens across page regions — nav, pricing, content, cta, and footer — and enforces the rule of referencing tokens by their dotted path
• Создание HTML-презентаций и конвертация PowerPoint — frontend-slides is a Claude Code skill that builds animation-rich, zero-dependency HTML presentations from scratch or converts PowerPoint (.ppt/.pptx) files into a self-contained web deck. Every output is a single HTML file with inline CSS and JS, featuring keyboard, swipe, and scroll navigation, Intersection Observer reveal animations, and a hard viewport-fit rule — no internal scrollbars, no overflow, every slide scales with clamp(). When the user has no clear design preference, the skill generates three single-slide preview files in .ecc-design/slide-previews/ so they can choose or mix styles visually rather than answering abstract questions. It suits pitch decks, conference talks, workshops, and internal updates, and ships with reduced-motion support, semantic markup, and readable contrast out of the box.
• PostHog UI — токены дизайн-системы для стилизации — designlang is a Claude Code skill that styles UI for posthog.com using extracted design system tokens instead of inventing arbitrary colors, spacing, or typography. It contains semantic tokens captured by designlang v7.0.0: colors (`color.action.primary: #e1d7c2`, `color.surface.default: #e5e7e0`, `color.text.body: #000000`), a control border radius (`radius.control: 2px`), and a body font (`typography.body.fontFamily: IBM Plex Sans Variable`). Coverage spans the main interface regions — sidebar, nav, pricing, and footer. Usage rules are strict: always prefer semantic tokens over primitives, n
• Дизайн-токены loom.com для стилизации UI — designlang is a Claude Code skill that supplies extracted design tokens from loom.com so UI styling stays consistent with the actual design system instead of relying on invented values. Tokens were extracted by designlang v7.0.0 and cover semantic variables for color (`color.action.primary: #1868db`, `color.surface.default: #ffffff`, `color.text.body: #000000`), border radius (`radius.control: 1px`), and typography (`typography.body.fontFamily: Charlie Text`). The skill maps page regions including nav, hero, pricing, features, testimonials, content, sidebar, and footer. Usage rules enforce `se
• Стилизация Mintlify по дизайн-токенам — designlang is a Claude Code skill that styles Mintlify UI by referencing extracted design-system tokens instead of inventing colors, spacing, or typography from scratch. It ships semantic tokens sourced from mintlify.com by designlang v7.0.0: colors (`color.action.primary: #faf8f5`, `color.text.body: #000000`), a control radius (`radius.control: 2px`), and a body font (`typography.body.fontFamily: inter`). The skill enforces a strict rule — no new hex values or tokens may be invented; if a value is missing, pick the nearest existing semantic token and flag the gap. Tokens are referenced by dot
• Дизайн-токены cal.com для стилизации UI — designlang is a Claude Code skill that supplies extracted cal.com design-system tokens and enforces rules for using them when styling UI components. It includes semantic tokens generated by designlang v7.0.0: `color.action.primary: #0000ee`, `color.surface.default: #f4f4f4`, `color.text.body: #000000`, `radius.control: 2px`, and `typography.body.fontFamily: Inter`. The skill requires referencing tokens by their dotted path (e.g. `semantic.color.action.primary`), prohibits inventing new hex values or spacing, and instructs Claude to pick the closest existing semantic token and flag any gap when
• Извлечение дизайн-системы из сайта — extract-design is a Claude Code skill that extracts a complete design system from any website URL and produces 8 ready-to-use output files. It runs the designlang utility via npx — no installation required — to capture colors, typography, spacing, shadows, components, breakpoints, and animations, then scores accessibility against WCAG. The generated files cover every common target: an AI-optimized markdown summary, a visual HTML preview with swatches, a Tailwind config, a React/CSS-in-JS theme object, CSS custom properties, a shadcn/ui theme, Figma Variables JSON, and W3C Design Tokens. Additi
• Дизайн-токены Ramp для стилизации UI — designlang is a Claude Code skill that styles UI for ramp.com by referencing extracted design system tokens instead of inventing colors, spacing, or typography from scratch. It includes semantic tokens sourced via designlang v7.0.0: color.action.primary (#000000), color.surface.default (#ffffff), color.text.body (#000000), radius.control (0px), and typography.body.fontFamily (Times). The skill enforces a clear rule set — always prefer semantic tokens over primitive ones, never introduce new hex values, and when a token is missing, fall back to the closest existing semantic token and flag the g
• Дизайн-токены clerk.com для верстки — designlang is a Claude Code skill that provides a reference of extracted design tokens for clerk.com, preventing Claude from inventing arbitrary colors, spacing values, or typography settings. The tokens were extracted by designlang v7.0.0 and include semantic variables such as `color.action.primary` (#6c47ff), `color.surface.default` (#f7f7f8), `color.text.body`, `radius.control` (2px), and `typography.body.fontFamily` (geistNumbers), covering regions like nav, pricing, and footer. Usage rules require referencing tokens by their dotted path (e.g. `semantic.color.action.primary`), preferring s
• Framer.com — дизайн-токены для стилизации UI — designlang is a Claude Code skill that supplies extracted design-system tokens for framer.com, letting you style UI components without inventing colors, spacing, or typography from scratch. The token set covers semantic variables such as color.action.primary (#0066ff), color.surface.default (#000000), radius.control (1px), and typography.body.fontFamily (Inter), extracted by designlang v7.0.0. It maps to key page regions — nav, hero, pricing, testimonials, content, and footer — and requires referencing tokens by their dotted path (e.g. semantic.color.action.primary) rather than hardcoding arbi
• Дизайн-токены Resend для стилизации UI — designlang is a Claude Code skill that styles UI for resend.com using extracted design-system tokens instead of invented colors, spacing, or typography values. It ships with semantic tokens generated by designlang v7.0.0: action color (`color.action.primary: #d6ebfd`), default surface (`color.surface.default: #000000`), body text (`color.text.body: #ffffff`), control radius (`radius.control: 4px`), and font family (`typography.body.fontFamily: inter`). Coverage spans all major page regions — nav, hero, cta, content, pricing, sidebar, features, testimonials, and footer. The skill enforces a cle
• Дизайн-токены Coinbase для стилизации UI — designlang is a Claude Code skill that supplies extracted design tokens from coinbase.com and enforces their use when styling UI, preventing Claude from inventing arbitrary colors, spacing, or typography. The token set — extracted with designlang v7.0.0 — includes semantic entries such as `color.action.primary: #0000ee`, `color.surface.default: #ffffff`, `color.text.body: #313131`, `radius.control: 50px`, and `typography.body.fontFamily: Arial`. Tokens are referenced by dotted path (e.g. `semantic.color.action.primary`), with semantic tokens always preferred over primitives. When a needed toke
• Стилизация Retool через токены дизайн-системы — designlang is a Claude Code skill that styles UI on retool.com using extracted design-system tokens instead of invented colors, spacing, or typography values. It ships semantic tokens sourced by designlang v7.0.0 from retool.com — including `color.action.primary`, `color.surface.default`, `color.text.body`, `radius.control: 4px`, and `typography.body.fontFamily: saansFont` — covering regions from nav and hero to pricing and footer. The skill enforces referencing tokens by their dotted path and prohibits introducing new hex values; when a token is missing, it instructs Claude to pick the closes

FAQ

Can Claude Code build an interface from a Figma file?

Yes, when Figma access is wired in through the matching MCP server — the model then reads the file structure, variables and tokens. The skill's job in that pipeline is deciding what the design becomes: which components, under which class names, and by which responsive rules.

How do I stop the model from inventing new styling every time?

Give the skill closed sets: the list of allowed colors, the spacing scale, the set of radii and shadows, the type scale. While the choice is bounded by a list, output stays inside the system. The moment a rule is phrased as "a modern look", the variance comes back.

All Claude Code skills