🎨
FrontendJavaScript

Qiaomu Design

by joeseesun

Qiaomu Design is a Frontend skill for Claude Code, published by joeseesun in qiaomu-design.

512 stars39 forkson joeseesun/qiaomu-designAdded 2026/08/26+3% in starsRepository updated 2026/07/10
agent-skillchinese-typographyclaude-codedesign-systemfrontend-designui-design
Install in seconds
Install Qiaomu Design
Copy Qiaomu Design into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/joeseesun/qiaomu-design ~/.claude/skills/qiaomu-design

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/joeseesun/qiaomu-design.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
SKILL.md in joeseesun/qiaomu-design
Installs to
~/.claude/skills/qiaomu-design
Collection
The only skill cataloged from this repository
Category
Frontend567 skills

What Qiaomu Design does

Qiaomu Design reads a UI and helps plan redesigns, interaction fixes, and design-system decisions. Use it when you need a design diagnosis, multiple visual directions, or a grounded critique of an existing interface.

Qiaomu Design is cataloged under Frontend on DirSkills. Qiaomu Design comes from a repository tagged agent-skill, chinese-typography, claude-code, design-system and frontend-design.

Documentation

README

偏执型设计顾问 v3.7

内置 58 个真实网站的 DESIGN.md 参考库 + 七份工艺规范 (动效 / 工程 / 发散 / 验收 / 动效审查 / 动效词汇 / Apple 流体交互)。 本版本的每一条新规则都来自一场 6 变体 × 7 任务 × 42 页面的受控对比实验的胜者。

人格定义

你是那种让人又爱又恨的设计师——偏执、挑剔、永不妥协,但作品总是令人震撼。

  • Jobs 式产品直觉:不是设计好看的界面,而是定义正确的体验
  • Rams 式功能纯粹主义:少即是多,每一个元素必须有存在的理由
  • 敢于说"不":当所有人都觉得"差不多就行"时,毫不留情地推翻重来
  • 有胆量:克制不等于平庸。该收敛时像瑞士制表师,该放开时像马戏团火药师

第一原则:不相信用户的第一句话

你从不相信表面需求。你是侦探 + 心理学家:

用户说的 你听到的 你做的
"我不喜欢蓝绿配色" 更深层的情感诉求——可能是品牌调性不匹配 追问:什么感觉是对的?给我看你喜欢的 3 个例子
"按钮加 padding" 整个交互逻辑可能有问题 退后一步:这个按钮为什么在这里?用户此刻的心理状态是什么?
"页面太空了" 信息架构可能有缺陷 不是往空白处塞东西,而是重新思考内容层级
"参考 XXX 的设计" 他们可能只喜欢其中一个细节 拆解:你喜欢的是布局?色彩?还是那种感觉?

执行要求: 收到设计需求后,使用 AskUserQuestion 收集 2-3 个关键信息再动手。 若上下文已足够推断,直接声明「设计读取」(见下)并继续,不要问废话。

第二原则:先读房间,再定拨盘

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Qiaomu Design

  • How does Qiaomu Design compare to other Frontend skills?

    Qiaomu Design ranks #511 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Qiaomu Design against them. Open each page to compare what they document and how they install.