Design Style

Recommend and apply design styles from a curated library of 67 visual aesthetics. Use when the user wants to choose a design style for their project, get style recommendations, or apply a style's CSS/colors/fonts to their code.

16 stars 3 forksSoftware Development

Install

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

npx skills add yanliudesign/design-style-skill --skill design-style

Manual install

git clone --depth 1 https://github.com/yanliudesign/design-style-skill.git /tmp/design-style-skill
mkdir -p ~/.claude/skills
cp -r /tmp/design-style-skill/. ~/.claude/skills/design-style

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

From the SKILL.md

# Design Style

Recommend and apply design styles from a curated library of 67 visual aesthetics — from Brutalism to Glassmorphism, Cyberpunk to Japandi.

## When This Skill Activates

- User asks "what style should I use for my project?"
- User says "recommend a design style"
- User mentions a specific style name ("use glassmorphism", "apply brutalist style")
- User wants to apply colors, fonts, or CSS from a design aesthetic
- User asks "帮我选设计风格" / "推荐设计风格" / "选个设计风格"

## Core Principles

1. **Show, don't lecture** — Lead with concrete CSS, colors, and prompt templates. Not theory.
2. **Context-aware** — A fintech dashboard needs different styles than an indie game landing page.
3. **Opinionated** — Recommend 3 styles, not 15. Explain *why* each fits.
4. **Immediately actionable** — Every run ends with a browsable comparison HTML the user can pick from, plus paste-ready CSS variables.
5. **No middle stops** — After the user provides purpose + basic info, run straight through to a generated preview. Don't stop to ask "which one do you prefer?" — let the visual do the choosing.

---

## Phase 0: Detect Mode

- **Mode A: Recommend** (default) — User wants styles picked for their project. Go to Phase 1.
- **Mode B: Lookup** — User names a specific style (*"tell me about glassmorphism"*). Skip Phase 1/2, go straight to Phase 3 for that style.

Read the full skill on GitHub

Details

Skill name: design-style
Repository: yanliudesign/design-style-skill
Repo updated: 16 July 2026

FAQ

What does the Design Style skill do?

How do I install the Design Style skill?

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

Is Design Style popular?

It lives in yanliudesign/design-style-skill, which has 16 GitHub stars and 3 forks.

Related skills

Audit Flow

ArunJRK/audit-flow

Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export. Use for security audits, compliance documentation, flow tracing, feature ideation, brainstorming, debugging, architecture reviews, or incident post-mortems. Triggers on audit, trace flow, document flow, security review, debug flow, brainstorm, architecture review, post-mortem, incident review.

Software Development

Antigravity CLI

SafeMantella/claude-code-agy-CLI-skill

Delegate heavy, multi-step, or specialized tasks to Google's Antigravity CLI agents. Use when a task would benefit from: (1) deep multi-file codebase analysis across many files, (2) web research with Google Search grounding, (3) image generation or visual assets, (4) a second AI perspective for code review or architecture decisions, (5) specialized scientific/biology database queries (gnomAD, UniProt, PubMed, etc.), (6) long-running refactors that would exhaust your context window, (7) tasks requiring many sequential tool calls that would consume excessive tokens. Also use when the user explic

Software Development

Avito API

MissiaL/avito-api

Integrate and troubleshoot Avito Business API: listings, Messenger, orders, delivery, jobs, Autoload, Autoteka, Promo and Ads. Look up bundled endpoint schemas, choose authentication and official Ads SDKs, and check migrations. Use for Avito API requests and integrations, not ordinary browsing of avito.ru.

Software Development

Termscope

mwunsch/termscope

Drive and inspect terminal applications programmatically. Use for TUI testing, visual regression, debugging rendering issues, and automating interactive CLI tools. Provides snapshot capture, keyboard/text input, text search, and a JSON-lines session protocol.

Software Development

Coolify Manager

ajmcclary/Coolify-Manager

Manage and troubleshoot Coolify deployments using the official CLI and API. Use this skill when the user needs help with Coolify server management, WordPress troubleshooting on Coolify, debugging service issues, checking SSL certificates, accessing containers, or managing applications and databases through Coolify. Particularly useful for diagnosing down services, fixing .htaccess issues, REST API problems, and performing deployment operations.

Software Development

Flow Brief

shaokeyibb/flow-brief

Produce a single-file HTML swimlane brief that walks a system, module, or upcoming feature past a non-specialist reader, with provenance badges that separate what is measured from what is merely intended. Use this whenever someone needs to explain how something works to people outside the team — a flow diagram, an architecture walkthrough, an onboarding page, a design-review handout, a 介绍图 or 泳道图 — and especially when they describe the need without naming a format: "explain this to my boss", "draw how the data moves", "something the new hire can read", "I have to present this next week".

Software Development

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.