qiaomu-design · An Opinionated Design Advisor

A Claude Code Agent Skill that makes AI-generated interfaces stop looking AI-generated. It fuses the experimentally-validated strengths of five top design skills into one opinionated design advisor. When you ask to design, redesign, or optimize an interface, it diagnoses the real need, then uses a visual style fitting room to show you 4 divergent directions. After you confirm, it delivers production-quality code with an engineering checklist — not a generic purple-gradient centered hero page.

Use Cases

• Developers or designers using Claude Code who want high-quality, non-generic UI interfaces.
• Tasks include: landing pages, dashboards, portfolios, wizards, component panels, creative 404 pages, e-commerce detail pages, mobile apps, data storytelling pages, etc.
• Optimizing existing pages: removing the "AI slop" look, adding animations, or polishing.

Preview

Video Case · Meditation Website

Benchmark Screenshots

The following 10 screenshots are real generated pages from qiaomu-design in the benchmark experiment. Click a screenshot to open the interactive online file.

Landing · AI Meeting Notes	Dashboard · E-commerce Operations

Portfolio · Independent Designer	Wizard · Flight Booking

Settings · Dangerous Action Components	Creative 404 · Space Voyage

Diversity Challenge · Three-mode Player	E-commerce Detail · Pour-over Coffee

Mobile · Meditation App	Data Story · Specialty Coffee Decade

Core Capabilities

• Style Fitting Room: Generates 4 mutually-divergent direction mockups (real fonts/colors/layout) in design-previews/YYYY-MM-DD-task/index.html. Pick by click or keys, confirm with dial values and optional notes, then the selection is reported back to the current workflow.
• Design Read + Three Dials: VARIANCE, MOTION, and DENSITY are auto-tuned per task type — restrained on functional UI, bold on open creative briefs.
• Anti-Slop Bans: No AI-purple gradients, no Inter font, no italics, no centered-hero clichés, no "revolutionary/seamless" copy.
• Chinese Typography Rules: System font stack first, subset decorative CJK web fonts (5–20 MB otherwise), CJK spacing/punctuation/line-height discipline.
• Motion Craft (Emil Kowalski System): Includes emil-design-eng, review-animations, animation-vocabulary, and apple-design — covering easing, durations, stagger, naming, and fluid gestures.
• Engineering Checklist (Vercel WIG): a11y, forms, focus traps, destructive-action guards, reviewed in file:line format.
• Carbon Decision System: Based on the official 319-page index, integrating tokens, component selection, full workflows, data visualization, and accessibility.
• 58 Real-Site DESIGN.md Library: Includes design systems from Stripe, Linear, Apple, etc. (Google Stitch format) — usable for "make it like X" requests.
• Polish Mode for existing pages: Audit, Critique, Polish, Animate, Harden, Live — no rewrites from scratch.
• Pre-flight Gate: A hard checklist; nothing ships if any item fails.
• Self-Evolution: Your feedback gets abstracted into a preferences ledger that the skill reads before every task, adapting to your preferences over time.

How It Works

The typical workflow has three phases, each waiting for your confirmation:

1. Diagnosis: Design read + three dials + 2–3 key questions.
2. Style Fitting Room: Generate design-previews/YYYY-MM-DD-task/index.html with 4 directions to view and choose. After you confirm, the direction, dial values, and any notes are sent back to the workflow.
3. Execution: First establish a DESIGN.md anchor, then write code, then pass the preflight gate before delivery.

If you have an existing page, you can say "polish this page", "remove the AI slop", or "add animations" — this triggers the polish mode, which does not rewrite the page from scratch.

What You Need to Provide

• A design task description, e.g., "design a landing page" or "redesign my blog homepage."
• If optimizing an existing page, provide the page description or file.
• Optional: specify an output directory (defaults to design-previews/YYYY-MM-DD-task/; falls back to the desktop directory if not in a project).

What You Get

• 4 direction preview HTML files that you can open locally to see real mockups.
• A final deliverable: complete page code (HTML/CSS/JS) that passes the engineering checklist.
• In polish mode, you receive targeted optimization suggestions and a modified page.

Usage Examples

In Claude Code, just say:

• "Design a landing page for a product."
• "Redesign my blog homepage."
• "Optimize this interface."
• "Give me a design system."
• "UI review, please."
• "Make it like Stripe."
• "Polish this page."
• "Remove the AI slop."
• "Add animations."

Notes

• Prerequisite: You must have Claude Code installed and running.
• Recommended Models: Strongly recommended to use GLM 5.2 / GLM 5.2 or Claude for this skill. In recent tests, GPT models inside Codex produced poor design results: too conservative, sparse, and template-like for high-quality visual work.
• Fitting Room Directory: Defaults to design-previews/YYYY-MM-DD-task/index.html; falls back to the desktop when not in a project. You can specify the output directory.
• Selection Feedback: The fitting room relies on a local preview server. If the server cannot start, it falls back to opening the HTML file and asking you to reply with your selection.
• Decorative Chinese Fonts: Disabled by default (5–20 MB overhead); only subset-loaded for creative title scenarios. This is a feature, not a bug.
• Design Only: This skill does not inject donation, social media, or personal profile widgets into generated pages by default. If you want attribution on a public page, we recommend a low-footprint footer like Powered by 向阳乔木 linking to https://qiaomu.ai/.
• DESIGN.md Library: The 58-site design system library is distilled from public websites for reference, not endorsement.
• Model Dependency: This is a Claude Code Agent Skill, not standalone software; quality depends on the underlying model.

Verification

Every core rule is derived from controlled design-skill comparisons verified through browser testing. The initial experiment covered 6 variants × 7 tasks × 42 generated pages. A public follow-up expanded to 8 variants × 10 tasks × 80 generated pages, covering landing pages, dashboards, portfolios, wizards, component panels, creative 404, diversity challenges, e-commerce detail, mobile, and data storytelling. The winning mechanisms from each dimension have been incorporated into this skill.