joeseesun/qiaomu-design

What it solves

AI-generated user interfaces often suffer from a "default AI look"—characterized by generic purple gradients, centered hero sections, and repetitive templates. qiaomu-design provides an opinionated workflow that forces the AI to diverge from these clichés and ensures the final output meets professional engineering and typography standards, particularly for Chinese characters.

How it works

It operates as an Agent Skill for compatible clients (like Codex or Claude Code), implementing a three-phase closed-loop process:

1. Diagnosis: The agent analyzes the requirements and tunes "dials" for variance, motion, and density based on the task type.
2. Style Fitting Room: Instead of one result, it generates four distinct, mutually-divergent visual directions as real HTML mockups. The user selects their preferred direction via a local preview server.
3. Execution: The agent implements the chosen design using a set of strict rules, including an "Anti-slop" ban on AI clichés, a library of 58 real-site design systems (e.g., Stripe, Linear, Apple), and a pre-flight checklist for accessibility and engineering quality.

Who it’s for

Developers and designers using AI agents to build web interfaces who want high-fidelity, professional results that don't look like they were generated by an AI.

Highlights

• Style Fitting Room: Generates 4 real mini-mockups for visual selection before full implementation.
• Anti-AI Aesthetics: Explicitly bans common AI design clichés (e.g., purple gradients, specific fonts) to force creativity.
• Professional Typography: Includes specialized rules for Chinese typography (CJK spacing, system font stacks).
• Design System Library: Access to distilled design systems from 58 top-tier websites for style reference.
• Engineering Rigor: Implements Vercel-style engineering checklists and the Emil Kowalski motion system for high-quality animations.
• Self-Evolution: Automatically abstracts user feedback into rules for a personal preferences ledger.