joeseesun

Qiaomu Design Advisor — Design skill for Claude Code

Design community

🎨 偏执型设计顾问 — Jobs 式产品直觉 + Rams 式功能纯粹主义 Claude Code Skill.

How to install Qiaomu Design Advisor

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

What Qiaomu Design Advisor does

🎨 偏执型设计顾问 — Jobs 式产品直觉 + Rams 式功能纯粹主义 Claude Code Skill.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

qiaomu-design-advisor

Opinionated Design Advisor — Jobs-style product intuition + Rams-style functional purism + 58 real-world design system references.

偏执型设计顾问 — Jobs 式产品直觉 + Rams 式功能纯粹主义 + 58 个真实网站设计系统参考库。

**[English](#english) | [中文](#中文)**

English

Not sure what design style to use? Just say "help me design" — AI will ask 2-3 questions to match you with one of 10 design archetypes, then provide pixel-perfect solutions based on real design systems from Stripe, Vercel, Linear, and more.

Installation

Prerequisites

Claude Code installed (Installation Guide)
Node.js 18+ installed (verify: node --version)

Install Steps

npx skills add joeseesun/qiaomu-design-advisor

Verify installation:

ls ~/.claude/skills/qiaomu-design-advisor

Core Capabilities

1. Three-Phase Design Workflow

Phase 1: Diagnosis → Output report → Wait for confirmation
Phase 2: Three proposals (Incremental/Reshape/Ideal) → Wait for selection
Phase 3: Pixel-perfect execution

Each phase stops and waits for feedback — no assumptions.

2. 58 Real-World DESIGN.md Systems

Based on [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), includes complete design systems from 58 websites ([Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/format/)) — color palettes, typography, component styles, spacing systems, responsive rules, etc.

3. Style Recommendation Engine (10 Design Archetypes)

Not sure what style you need? AI asks 2-3 diagnostic questions to match the best direction from 10 archetypes:

#	Style	Representative Sites	One-liner
1	Minimal Precision	Vercel, Linear, Tesla	B&W, mathematically precise
2	Warm Premium	Stripe, Notion, Airbnb	Warm professionalism
3	Dark Professional	Cursor, Supabas