UI Styles

Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.

11 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add chrzamz/ui-styles-skill --skill ui-styles

Manual install

git clone --depth 1 https://github.com/chrzamz/ui-styles-skill.git /tmp/ui-styles-skill
mkdir -p ~/.claude/skills
cp -r /tmp/ui-styles-skill/. ~/.claude/skills/ui-styles

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# UI Styles

Help people who are not designers make and maintain a coherent product. Participate in the actual implementation, from the first demo through later pages. The 79 bilingual style entries are reference material; the deliverable is a suitable, usable interface and reusable project decisions.

Resolve paths below relative to this `SKILL.md`, regardless of where the skill is installed. Use available file, browser and preview tools; no particular agent, MCP server or network connection is required for the local workflow.

## Enter before visual decisions

Use this workflow before choosing a component library, writing the first styled page, or changing an existing visual system. A demo is still a product surface. Do not first generate a habitual palette, card layout or library and then apply this skill as decoration.

For a small change, read the existing standard and work within it. Do not restart style selection for every button, add setup files to an explanation-only request, or redesign unrelated screens. Plain backend/data work is outside this skill.

Automatic discovery depends on the host. When setting up persistent project use, follow [agent-integration.md](references/agent-integration.md); a skill description alone cannot guarantee invocation.

## 1. Understand the product with minimal friction

Read the full skill on GitHub

Details

Skill name: ui-styles
Repository: chrzamz/ui-styles-skill
Repo updated: 30 October 2026

FAQ

What does the UI Styles skill do?

How do I install the UI Styles skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add chrzamz/ui-styles-skill --skill ui-styles. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is UI Styles popular?

It lives in chrzamz/ui-styles-skill, which has 11 GitHub stars and 1 forks.

Related skills

Designbrief

Heiberg-Industries/designbrief

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

Frontend & Design

Figma Annotations Strategy

saralobo/skill-figma-annotations

Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".

Frontend & Design

Frontend Design Pro

Krishna-Modi12/frontend-design-pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

Frontend & Design

Slizdeck

pedroanze/slizdeck

Genera decks de slides HTML animados a partir de un design system propio — enfocado en pitch decks de startup (minimalista, poco texto, mucha imagen/gráfica), pero también sirve para charlas, demos y recaps de evento. Arquitectura deck-stage 1920×1080 con navegación por teclado, pensado para presentar en vivo. Trae cinco style packs listos (terminal oscuro, blanco puro, color dominante, denso en datos, editorial), cada uno con paleta, tipografía y reglas de composición validadas contra contraste WCAG y clichés visuales de IA. El design system se define de forma guiada —elegir un pack, inyectar

Frontend & Design

No Slop UI

LeoStehlik/no-slop-ui

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

Frontend & Design

Taxue Halftone

taxueseek/taxue-halftone

半调海报：用限墨+网点把任意主题做成有结构、有质感、可复用的艺术封面。支持多种印刷语言（半调/孔版/双色/木刻/蓝晒/蓝染/复印机、1-bit 剪影、撕纸拼贴），按风格给出一致又有特色的封面。六项不变式出图前先定：纸色、墨色角色、叠印方式、印刷机制、主体走向、字图音量。触发词：半调海报、艺术封面、网点、孔版、双色、Riso、duotone、木刻、蓝晒、蓝染、蓝染海报、物影、蓝晒物影、反俗套蓝染、复印机美学、不完美印刷拼贴、撕纸拼贴、编辑型印刷拼贴、有意不完美、点阵解构、丝网海报、剪纸、窗花、中式剪纸、网点剪纸、经典致敬、风格模仿、致敬、名画、艺术流派、年代美学、视觉风格转译、波普、波点、圆点场、点画、视错觉、扁平矢量图形、艺术展览海报、平台封面（B站/小红书/抖音/公众号/头像/超宽）、主题结构印刷封面、限墨封面。不用于：全彩实拍、UI、图表、模板拼贴。

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.