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 ★
Ecommerce Visual Copywriting Skill — 电商视觉文案设计SOP Skill - 让电商设计小白也能一键做出5年资深设计经验的商品图片.兼容 Claude / Codex / Cursor / Workbuddy 等 SKILL.md Agent 650 ★

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: