Qiaomu Design

Q: What does the Qiaomu Design skill do?

为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA， 也创作与修改微信公众号封面、B站封面、YouTube 缩略图、小绿书配图和小红书封面，按平台检查裁切与可读性。 在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统、参考某种风格， 或创作公众号封面、设计公号头图、修改微信文章封面、制作 B站封面、YouTube 封面、小绿书配图、小红书配图时使用； 不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行， 只有用户在当前任务明确点名 K3 时才调用外部模型。

为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA，也创作与修改微信公众号封面、B站封面、YouTube 缩略图、小绿书配图和小红书封面，按平台检查裁切与可读性。在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统、参考某种风格，或创作公众号封面、设计公号头图、修改微信文章封面、制作 B站封面、YouTube 封面、小绿书配图、小红书配图时使用；不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行，只有用户在当前任务明确点名 K3 时才调用外部模型。

666 stars 50 forksFrontend & Design

Install

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

npx skills add joeseesun/qiaomu-design --skill qiaomu-design

Manual install

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

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

From the SKILL.md

# 偏执型设计顾问 v3.9

把“读懂场景 → 看见方向 → 明确选择 → 真实实现 → 浏览器验收”串成闭环。目标不是堆视觉效果，
而是做出有功能契约、有个性、可运行、可验证且不像默认 AI 模板的界面。

## Router Rules

### 优先级与执行者

1. 每次开工先读 `references/user-preferences.md`。优先级为：当前用户要求与项目事实 > 偏好账本 > 本文件 > 按需参考。
2. 设计、前端、UI、CSS、组件和页面任务默认由当前 Codex 直接完成。触发本 skill、任务复杂或以前用过 K3，都不构成外部模型授权。
3. 只有用户在**当前任务**明确说“用 K3 / Kimi K3 / 调用 K3”时，才读取并使用 `qiaomu-model-cli`。K3 必须看到真实代码或截图；当前 Codex 仍负责 diff、测试和浏览器验收。
4. 保护用户已有未提交改动。不得因设计任务重置、覆盖或顺手重构无关文件。

### 按任务选路径

| 用户意图 | 路径 | 必读参考 |
|---|---|---|
| 创作/修改公众号封面、公号头图、微信文章封面 | 封面专用流程：文章提炼 → 构图/生图 → 横图与方图核对 → 交付选择 | `wechat-cover.md`；不套网页三阶段实现流程 |
| B站封面、YouTube 缩略图、小绿书/小红书配图，多平台适配 | 平台识别 → 提炼真实承诺 → 按平台重新构图/生图 → 小图与裁切验收 | `platform-covers.md`、`platform-playbooks.json`；小绿书与小红书分开 |
| 只要诊断、审查或建议 | 诊断后停止，不修改文件 | `engineering-checklist.md`；按界面类型补相应参考 |
| 从零设计、重设计、要方案/方向/预览 | 完整三阶段；Phase 2 后等用户选择 | `style-preview.md`、`divergence-playbook.md`；开放命题再读 `creative-prompting.md` |
| 已有方向，只要打磨/反 AI 味/加动效 | 打磨模式，可直接改真实文件 | `craft-loop.md`、`preflight.md`；有动效再读动效参考 |
| 功能型 UI、表单、后台、仪表盘、AI 工具 | 先守任务流和状态，再谈风格 | `carbon-foundations.md`、`carbon-components.md`、`carbon-patterns.md`；有图表再读 `carbon-data-visualization.md` |
| 中文界面 | 中文排版优先于通用字体偏好 | `chinese-typography.md` |
| 手势、拖拽、弹簧、抽屉、浮层 | 使用可中断、跟手的物理交互 | `apple-fluid-interfaces.md`、`motion-craft.md` |
| 动效审查或用户说不清动效名 | 先命名，再按阻断标准审查 | `animation-vocabulary.md`、`motion-review.md` |
| 指定某网站或要建设计系统 | 从 58 站索引选对应供体 | `design-systems-catalog.md` 与相应 `design-systems/{site}/DESIGN.md` |

Read the full skill on GitHub

Details

Skill name: qiaomu-design
Repository: joeseesun/qiaomu-design
License: MIT
Repo updated: 13 October 2026

FAQ

What does the Qiaomu Design skill do?

How do I install the Qiaomu Design skill?

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

Is Qiaomu Design popular?

It lives in joeseesun/qiaomu-design, which has 666 GitHub stars and 50 forks.

Related skills

Spine Animation

616

GenielabsOpenSource/spine-animation-ai

Create Spine 2D skeletal animations from pre-existing character assets (separated body-part PNGs, atlas spritesheet, or a full character image). Use this skill whenever the user wants to animate a 2D character, create Spine JSON from existing art assets, rig a character with bones, build walk/idle/run/attack animations, produce an interactive Spine Web Player preview, or generate Spine-compatible export files (.json + .atlas + .png). Also trigger when the user mentions "Spine animation", "2D rigging", "skeletal animation", "bone animation", "cutout animation", "animate this character", "make t

Frontend & Design87

Better Design

545

marvkr/better-design

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.

Frontend & DesignIn 1 list32

SVG Diagram

640

bybit-exchange/svg-diagram

SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.

Frontend & Design44

Color Expert

629

meodai/skill.color-expert

Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory.

Frontend & DesignIn 1 list39

Draw UI

524

oil-oil/draw-ui

设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。

Frontend & Design77

Power Design

748

ItsssssJack/power-design

Generate beautiful, on-brand HTML — presentation decks or full responsive websites — in any brand's design language, combining brand DNA extracted via Firecrawl with codified, research-backed design principles (20 rules for slides, 20 for the web).

Frontend & Design98

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.