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. For the same reason a design skill should also cover states: hover, focus, disabled and loading. Those are what a model invents on its own most often, and they are where an interface visibly falls apart.

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

264 skills in this collection; the 24 highest-rated are listed below.

• Авторский визуальный дизайн фронтенда — 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
• pixel2motion — анимация логотипа из растра в SVG — pixel2motion is an open-source Claude Code and Codex skill that converts a raster logo — PNG, JPG, WebP, or screenshot — into a clean, motion-ready SVG and animates it: the deliverables are a dependency-free HTML showcase with replay and speed controls, GIF/video previews, geometry overlay QA evidence, and a motion_spec.md choreography brief. Reach for it when you need an animated logo sting for a video or presentation but only have a raster file; when the original vector was lost and must be reconstructed before any editing; when you want the animation as editable code rather than a rendered video. The workflow runs iterative QA-verified SVG fitting — IoU diagnostics with smoothness and structure as hard gates — then layers CSS animation onto semantically addressed logo parts. Built in Python, it connects as a skill via SKILL.md with no separate editor required. Direction is raster-to-animated-vector, not AI video generation and not the reverse; the companion project Pixel2SVG-HTML covers static vectorization only, without animation. Works best with geometric logos; photographic textures and complex gradients reduce tracing quality.
• Аудит дизайна по принципам Дитера Рамса — 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.
• Генерация CAD-моделей по тексту для ИИ-агентов — earthtojake/text-to-cad is an open-source library of agent skills for generating, editing, inspecting, slicing, and handing off CAD models and robot-description files from local project files. Reach for it when you need a part modeled from a plain-language description or an image instead of drawing it by hand; when a mesh needs printability checks before sending to a 3D printer or laser cutter; when an agent should author URDF/SRDF files for a robotic arm or produce validated FDM G-code autonomously. Built on Python 3.11+, MIT-licensed, and installed as a skill set that an agent calls the same way it calls any other tool. Skills cover: CAD generation with STEP as the primary output plus STL, 3MF, and GLB export; 2D DXF drawings; in-browser CAD Viewer for local previews; off-the-shelf STEP part sourcing via step.parts; robot descriptions in URDF, SRDF, and SDF; DfAM printability checks for wall thickness, overhangs, and build orientation; G-code slicing with real slicer CLIs; and pre-upload validation for SendCutSend. The direction is machine-driven geometry generation and processing by an agent, not an interactive CAD editor for human use. Engineering responsibility stays with the user — any model headed to production must be reviewed by a qualified engineer. Not suited for proprietary formats like SolidWorks .sldprt without prior conversion.
• CadQuery — генерация 3D-моделей для печати — cad-skill is a Claude Code skill that generates parametric 3D-printable models using the CadQuery library. Reach for it when you need a custom part for your printer described in plain words, want to quickly resize an existing object to fit your setup, need a bracket, enclosure, or adapter without CAD experience, or want an AI agent to iterate on the model with you. You describe the physical object; Claude writes a parametric CadQuery script, exports an STL, renders 6-view PNG previews via trimesh and pyrender, and refines the design through conversation. Included utilities cover a Gridfinity bin generator, a scan-to-pocket outline pipeline (outline_from_scan.py), an STL-to-3MF converter for Bambu Studio and PrusaSlicer, and a printability checklist (design-review.md). The skill is written in Python 3.10–3.12, installed via git clone into ~/.claude/skills, with dependencies managed through pip. It activates automatically on trigger keywords such as "3D print", "STL", or "enclosure", or explicitly via /parametric-3d-printing. The direction is precise functional parts, not organic or artistic shapes — parametric code means dimensions are numbers you can change and rebuild, unlike image-based generators that require redrawing from scratch. Requires Claude Code and Python 3.10–3.12; licensed under PolyForm Noncommercial 1.0.0, free for non-commercial use only.
• daisyUI — скиллы и MCP для компонентов Tailwind — daisyUI is a Claude Code plugin with a skill for the daisyUI component library for Tailwind CSS. It helps build interfaces from ready components without inventing class names. A second plugin, daisyui-blueprint, is an MCP server that, according to its description, needs a paid license. The README gives no install command and no list of what the skill contains, so no further detail is available. daisyUI 5 itself is a free open-source component library for Tailwind CSS; documentation, the component list and install instructions are on daisyui.com.
• Редактор скриншотов для App Store и Google Play — App Store & Google Play Screenshots Generator is a skill for AI coding agents that scaffolds a ready Next.js editor for App Store and Google Play marketing screenshots. Reach for it when you need to prepare polished showcase screenshots of an app for the stores: get a full editor with a canvas, real device frames, an inspector panel, persistent project state, and one-click export of image bundles at store-ready sizes. It's not a static one-off page but a full editor the agent builds for you. Its focus is generating and editing app marketing screenshots to store requirements, not a general image editor or a logo generator: the value is quickly producing presentable screenshots for an app listing. It suits mobile developers and marketers preparing app pages on the App Store/Google Play.
• Стилизация UI через семантические токены дизайн-системы — designlang is a Claude Code skill that applies the extracted render.com design-system tokens when styling UI, preventing ad-hoc color or spacing values from being introduced. The skill was generated by designlang v7.0.0 and includes semantic tokens for color (`color.action.primary: #8a05ff`, `color.surface.default: #ffffff`, `color.text.body: #000000`), border radius (`radius.control: 2px`), and typography (`typography.body.fontFamily: PPNeueMontreal`). Coverage spans the nav, pricing, testimonials, and footer regions of the site. Tokens are referenced by dotted path such as `semantic.color.ac
• 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
• Дизайн-токены 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
• Конвертация CSS в утилиты Tailwind v4 — css-to-tailwind is a Claude Code skill that converts vanilla CSS, CSS Modules, SCSS, or styled-components into Tailwind v4 utilities using @theme-backed tokens and semantic utility classes. The migration process follows rules that preserve style behavior and readability, so existing cascade logic is not lost during conversion. It is aimed at developers and design-system teams looking to migrate legacy stylesheets or an entire codebase to Tailwind v4 with proper theming support.
• Дизайн-токены 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
• Дизайн-токены 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
• Дизайн-токены 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
• Дизайн-токены 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
• Дизайн-токены 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
• Дизайн-токены 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
• Дизайн-токены 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
• Дизайн-токены 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

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