SkillFoxx

qiaomu-design skill

An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look

  • 685 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

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

joeseesun/qiaomu-designAuthor:Qiaomu

Install

Manual install

npx skills add joeseesun/qiaomu-design

Installs the skill into a client that supports the skills format. Node.js and npx are required.

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

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

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.

Good fit when

  • You need to design or rework a page and first see the directions
  • You want to polish a working page without a full rebuild
  • You need a review of hierarchy, states and the mobile version before edits

Not a fit when

  • The task is only business logic or pure backend with no interface
  • You need only copy edits rather than design and layout

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.

FAQ

What is the style fitting room?

Four mutually exclusive directions as real mini-mockups on a local page, from which you choose before implementation.

Do I need the K3 model?

No, by default the current agent implements. K3 connects only if the user explicitly names it in the current task.

Discussion

No questions or reviews yet.

Skills

A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.

SkillExtended access51

A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI

SkillExtended access982

A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.

SkillMinimal access135

A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL

SkillMinimal access54K48

A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.

SkillMinimal access95

A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles

SkillMinimal access3.6K

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.

README badge

Original 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 后等用户选择。
- 已有方向只要打磨：打磨模式，可直接改真实文件。

Report a problem