Repolode
Submit
joeseesun

joeseesun/qiaomu-design

An opinionated Agent Skill for Claude Code and similar clients that guides AI-generated UI design away from generic templates, with a visual direction picker and 58 real-site design system references.

View on GitHub
Stars
675
Forks
50
Open issues
1
Last commit
26 days ago

What is it?

qiaomu-design is an Agent Skill that adds a design workflow to AI coding assistants. When asked to design or redesign an interface, it first diagnoses the request, then renders four mutually different direction mockups in a local preview so the user can pick one before implementation starts. The chosen direction is then built in the project files and checked against a pre-delivery checklist covering accessibility, forms, focus handling, and Chinese typography.

The skill bundles rules aimed at common AI design habits, such as banning purple gradients, Inter, and centered hero layouts. It also includes a motion-design reference set, a Carbon design system reference, and a library of 58 DESIGN.md files distilled from public sites like Stripe, Linear, and Apple, which can be referenced with prompts such as "make it like Linear". A polish mode handles existing pages through audit, critique, and refinement without a full rewrite.

Installation is via `npx skills add joeseesun/qiaomu-design`. The skill targets Agent-Skills-compatible clients and depends on the executing agent and project context for output quality.

Key features

  • 01Generates four mutually different style directions as interactive mockups before implementation.
  • 02Enforces anti-generic rules such as banning AI purple gradients, Inter, and centered hero layouts.
  • 03Provides Chinese typography guidance including system font stacks and CJK spacing rules.
  • 04Includes a library of 58 DESIGN.md design system references from real websites.
  • 05Offers a polish mode for auditing and refining existing pages without rewriting them.
  • 06Runs a pre-flight checklist covering accessibility, forms, and destructive-action guards.

Use cases

  • Starting a new product landing page and comparing visual directions before writing code.
  • Improving an existing dashboard or page that looks generic without a full redesign.
  • Asking an AI assistant to match the feel of a known product such as Linear or Stripe.
  • Building a design system for a developer tool with a reference-driven approach.

Quick start

  1. 1

    Install the skill with npx

    npx skills add joeseesun/qiaomu-design
  2. 2

    In a supported client (Codex or Claude Code), ask it to design a page, e.g. a product landing page

Things to know

  • It is an Agent Skill for compatible clients, not standalone software, so results depend on the executing agent and project context.
  • The DESIGN.md reference library is distilled from public sites and does not imply endorsement by those companies.
  • Interactive preview selection needs a local preview server; without it you fall back to replying in chat.

In collections

UI design skills for AI coding agentsClaude Code tools, skills & pluginsAI agent skill libraries

Topics

#agent-skill#claude-code#ui-design#frontend-design#design-system#chinese-typography

FAQ

What is qiaomu-design?
An opinionated Agent Skill for Claude Code and similar clients that guides AI-generated UI design away from generic templates, with a visual direction picker and 58 real-site design system references. qiaomu-design is an Agent Skill that adds a design workflow to AI coding assistants. When asked to design or redesign an interface, it first diagnoses the request, then renders four mutually different direction mockups in a local preview so the user can pick one before implementation starts. The chosen direction is then built in the project files and checked against a pre-delivery checklist covering accessibility, forms, focus handling, and Chinese typography.
Is qiaomu-design free to use? What license does it have?
qiaomu-design is open source under the MIT license. Check the license terms before using it in commercial products.
Is qiaomu-design still maintained?
Actively maintained. The last commit to qiaomu-design was on Oct 13, 2026.
What can I use qiaomu-design for?
Starting a new product landing page and comparing visual directions before writing code. Improving an existing dashboard or page that looks generic without a full redesign. Asking an AI assistant to match the feel of a known product such as Linear or Stripe. Building a design system for a developer tool with a reference-driven approach.
How do I install qiaomu-design?
Install the skill with npx: npx skills add joeseesun/qiaomu-design In a supported client (Codex or Claude Code), ask it to design a page, e.g. a product landing page
Where can I get qiaomu-design?
The source code and installation instructions are on GitHub: https://github.com/joeseesun/qiaomu-design

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects