qiaomu-design

Install

npx skillfoxx add skills/qiaomu-design

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a claude-code -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a cursor -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a github-copilot -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a codex -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a gemini-cli -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a cline -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a roo -y

npx skills add joeseesun/qiaomu-design --skill qiaomu-design -a opencode -y

npx skills add joeseesun/qiaomu-design

This is third-party code. Review the repository files before installing.

What it does

The skill guides the agent through a full interface design cycle instead of dumping one finished page. First it clarifies the task and tunes the level of boldness, motion and density for the screen type. Then it shows a style fitting room: four mutually exclusive directions as real mini-mockups for you to choose from. After the choice the agent edits the actual files and runs an engineering acceptance checklist: accessibility, forms, focus traps, protection of dangerous actions. There is a polish mode for existing pages without a full rebuild, a catalog of real-site design systems as reference and rules for Chinese typography.

Who it is for. For designers and developers who want an interface with character and without default AI-style cliches.

Example request

Help me rework the product homepage; first give four directions I can actually look at

Limitations

Quality depends on what the current agent actually implements and verifies; the method gives a repeatable cycle, not a guarantee of a first-try result. The interactive direction fitting room needs a locally run Node.js preview script. The external K3 model connects only on the user's explicit request and needs a separate install; it is not required by default.

How to disable. Remove the qiaomu-design folder from your agent's skills directory.

Security check

• Edits real project files when implementing a design
• May run a local preview script for the directions

README in short

The README presents qiaomu-design as an opinionated design advisor for Claude Code and Codex that links task diagnosis, direction choice, implementation and browser acceptance. Key parts: a four-direction fitting room, a ban on default AI-style tells, Chinese typography rules, an engineering acceptance checklist and a catalog of real-site design systems as reference. There is a polish mode for existing pages without a full rebuild and a mechanism that accumulates user preferences. It installs via npx skills add. MIT licensed.

SKILL.md

---
name: qiaomu-design
description: >
  为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA。
  在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统或参考某种风格时使用；
  不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行，
  只有用户在当前任务明确点名 K3 时才调用外部模型。
metadata:
  author: Qiaomu
  version: "3.9.0"
---

# 偏执型设计顾问 v3.9

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

## Router Rules

1. 每次开工先读 references/user-preferences.md。优先级为：当前用户要求与项目事实 > 偏好账本 > 本文件 > 按需参考。
2. 设计、前端、UI、CSS、组件和页面任务默认由当前 Codex 直接完成。
3. 只有用户在当前任务明确说用 K3 时，才读取并使用 qiaomu-model-cli。
4. 保护用户已有未提交改动。不得因设计任务重置、覆盖或顺手重构无关文件。

## 按任务选路径

- 只要诊断或审查：诊断后停止，不修改文件。
- 从零设计或重设计：完整三阶段，Phase 2 后等用户选择。
- 已有方向只要打磨：打磨模式，可直接改真实文件。

Related