What is the qiaomu-design skill?
qiaomu-design is an opinionated design advisor packaged as an Agent Skill, with version 3.9.0 of its SKILL.md in the repo root. It runs three phases: diagnose the UI, show four direction mockups on a preview page, then build the chosen one and check it in a browser. It bans generic AI looks.
qiaomu-design is an Agent Skill from joeseesun, described in its repo as an opinionated design advisor for anti-generic UI, with a style fitting room and 58 real-site design systems. It ties diagnosis, direction, build and browser checks into one loop.
The SKILL.md acts as a router. Each request is sent down a path, such as diagnosis only, full redesign or polish, and the agent loads only the reference files that path needs instead of the whole library.
How a request runs
- Design read: the agent states the page type, audience and tone, sets three dials for variance, motion and density, and writes a functional contract.
- Diagnose: it audits hierarchy, spacing, the core task and existing states. If you only asked for a review, it stops here and edits nothing.
- Preview: it writes one self-contained page with four mockups labeled A to D, then waits for your pick.
- Execute: it builds from a project DESIGN.md, runs the page, takes desktop and mobile screenshots, and passes a preflight checklist.
What changes in your agent's output
- Layouts come from a stated purpose and a chosen direction instead of a default centered hero with three equal cards.
- Purple and blue glows, gradient headline text, glass effects on everything and empty bento grids are on the ban list.
- Motion rules rule out transition: all, ease-in on UI and scale(0) entrances, and require prefers-reduced-motion support.
- Copy has to use concrete facts and actions, and fake data has to look like real data.
Who qiaomu-design is for
Best for
- Redesigns and new pages where you want to compare four visual directions before any code is written.
- Dashboards, forms and admin tools, where the skill points to IBM Carbon based references for task flow and states.
- Chinese language interfaces: a system font stack comes first, and decorative fonts are kept to short subset titles.
- Existing pages that need a polish pass without a rebuild.
Not for
- Backend logic, pure copy edits or coding unrelated to an interface. The skill description rules these out.
- Quick one-shot tweaks. The full path pauses for your choice after the preview.
- Teams that want a different approach to the same job can compare frontend-design.
Use it with UiChemy
qiaomu-design decides the look and builds a front end. To move a finished build into WordPress, UiChemy AI to WordPress imports an AI build, and Composer then edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.
The skill already has its own motion and review paths, but a separate pass with motion design patterns or accessibility review gives a second opinion on the same build.
How to install qiaomu-design Skill: Four Design Directions Before Code
git clone https://github.com/joeseesun/qiaomu-design.gitClone the repository
Run
git clone https://github.com/joeseesun/qiaomu-design.git. SKILL.md sits at the repository root, so the clone itself is the skill folder.Copy it into your skills folder
For Claude Code, the README gives
cp -r qiaomu-design ~/.claude/skills/qiaomu-design. It adds that the copy path varies by client, so use the skills folder your own agent reads.Check Node.js
The interactive preview needs Node.js. Run
node --version && npx --version, and optionallynode --check scripts/qiaomu-design-preview-server.mjsfrom the skill folder.Ask for a design
Use the README example,
redesign my landing page and show four visual directions first, or name a page you want diagnosed.
Check that it loaded
Ask for a redesign. The agent should state a design read with the three dials, write design-previews/YYYY-MM-DD-task-name/index.html with four mockups, and wait for your A, B, C or D choice before editing anything.
Key features
- Design read and three dialsEvery task starts with a one line read of page type, audience and tone. Dials for variance, motion and density are set per task type, and they change the look but never the readability or accessibility.
- Functional contractThe agent writes down why the page exists, what a visitor must learn in three seconds and which action must work. Creative choices are built on top of that contract.
- Four direction preview pagePhase 2 produces a self-contained index.html under design-previews with four mutually exclusive mockups. They must differ in type roles, color system and layout, not just a color swap.
- Selection callback serverA small Node script serves the preview on a local address and reports your choice back to the workflow. If it cannot run, the page opens as a static file and you reply with A, B, C or D.
- 58 site design system libraryA catalog of DESIGN.md files distilled from real sites. The agent picks one or two as donors and takes only a few concrete values, without copying a brand look.
- Chinese typography rulesA dedicated reference puts Chinese typography ahead of general font preferences, with system font stacks for body text and subset loading for decorative titles.
- Anti-generic ban listDefault AI glows, gradient headings, card seas, centered hero plus three cards and empty bento layouts are banned. UI italics are banned too.
- Polish modeFor a page whose direction already works, the skill edits real files through Audit, Critique, Polish, Animate, Harden or Live passes instead of starting over.
- Preflight gateDelivery requires reading and passing preflight.md. Without tests, browser runs or screenshots, the output must say missing evidence instead of claiming success.
- External model only on requestThe current agent does the work by default. An outside model is called only when you name it in the current task, and the agent still reviews the diff and runs the checks.
Frequently asked questions
What is the qiaomu-design skill?
It is an Agent Skill from joeseesun that makes your AI coding agent work as a design advisor. It diagnoses the interface, shows four real direction mockups on one page, builds the one you choose and verifies it in a browser, with rules against generic AI looks.
How do I install qiaomu-design?
Clone joeseesun/qiaomu-design from GitHub and copy the folder to where your agent loads skills. Node.js is needed only for the interactive preview server. Then ask for a redesign and name the page.
Which AI coding agents can use qiaomu-design?
The README says any client that supports Agent Skills, naming Codex and Claude Code as examples. The SKILL.md describes the current Codex session as the default executor. Other clients are not listed, so check how yours loads SKILL.md folders.
What are the three dials in qiaomu-design?
They are variance, motion and density, each rated 1 to 10. Functional pages start near the middle, marketing pages push variance and motion up with low density, and trust focused pages stay low. The dials change presentation only, never accessibility or task flow.
Does qiaomu-design call an outside model?
Only if you ask. The skill names an external model called K3 and uses it only when you request it by name in the current task. Triggering the skill, a complex task or earlier use of K3 does not count as permission, and the current agent still runs the checks.
What is in the 58 site design system library?
It holds DESIGN.md files distilled from public sites, such as Stripe, Linear and Apple, in a format from Google Stitch. The README says they are style references and not company endorsements. For a lighter rule set, see design standards.
Will qiaomu-design change my files without asking?
Not for a diagnosis request, where the skill stops after the report. For a redesign it waits at the preview until you pick a direction. It also tells the agent to protect your uncommitted changes and not to reset or overwrite unrelated files.
What license does qiaomu-design use?
The repository is MIT licensed, with the copyright held by its author. The README adds that the skill does not inject donation or profile widgets into the pages it generates, and that credit on your own pages is your choice.