yanliudesign

Design Style Skill — Design skill for Claude Code

Design community

🎨 Pick & apply a design style from 67 curated visual aesthetics — an agent skill for Claude Code, Codex, OpenCode.

How to install Design Style Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open yanliudesign/design-style-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Style Skill does

🎨 Pick & apply a design style from 67 curated visual aesthetics — an agent skill for Claude Code, Codex, OpenCode. Preview + palette + CSS + prompts, all in one.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
Opencode Background Agents — Claude Code-style background agents for OpenCode – async delegation with context persistence 388 ★

README

[中文](./README.zh.md) · **English**

🎨 Design Style Skill

**Pick and apply a design style from 67 curated aesthetics — in 3 steps.**

[![License](https://img.shields.io/badge/LICENSE-MIT-4c8bf5?style=flat-square&labelColor=333)](./LICENSE) [![Version](https://img.shields.io/badge/VERSION-1.0.0-2ea44f?style=flat-square&labelColor=333)]() [![Stars](https://img.shields.io/github/stars/yanliudesign/design-style-skill?style=flat-square&label=STARS&color=e37f2c&labelColor=333)](https://github.com/yanliudesign/design-style-skill/stargazers)

[![Claude Code](https://img.shields.io/badge/Claude_Code-Skill-d97757?style=flat-square&labelColor=1a1a1a&logo=anthropic&logoColor=white)](https://claude.ai/code) [![Codex](https://img.shields.io/badge/Codex-Skill-2ea44f?style=flat-square&labelColor=1a1a1a)]() [![OpenCode](https://img.shields.io/badge/OpenCode-Skill-4c8bf5?style=flat-square&labelColor=1a1a1a)]() [![OpenClaw](https://img.shields.io/badge/OpenClaw-Skill-8b5cf6?style=flat-square&labelColor=1a1a1a)]() [![Hermes](https://img.shields.io/badge/Hermes-Skill-e879a8?style=flat-square&labelColor=1a1a1a)]()

🧪 Interactive lab: browse all **67 styles** — colors, CSS, prompt templates — at **[design-lab-yanliu.vercel.app](https://design-lab-yanliu.vercel.app/)**.

An agent skill for picking a design style. Tell it what you're building and the feeling you want, and it hands back **3 opinionated recommendations** — each with a real color palette, ready-to-paste CSS variables, font suggestions, and a prompt template. Pick one, and it integrates the style into your existing code (Tailwind, vanilla CSS, styled-components, plain HTML). Not a moodboard, not 15 vague options — 3 concrete choices you can ship today.

How it works — just 3 steps

Invoke the skill with anything like *"help me pick a design style"* / *"apply glassmorphism to my landing page"* / *"帮我选设计风格"* and you go through exactly: