joeseesun/qiaomu-design

这是什么？

核心功能

• 01实现前生成四个差异明显的风格方向交互式原型供选择。
• 02内置反套路规则，如禁用 AI 紫色渐变、Inter 字体和居中 Hero 布局。
• 03提供中文排版指南，包括系统字体栈与中英文间距规范。
• 04收录 58 份来自真实网站的 DESIGN.md 设计系统参考。
• 05支持打磨模式，可对已有页面做审查和细化而不推倒重来。
• 06交付前执行清单检查，覆盖无障碍、表单和危险操作防护。

适用场景

• 开始新的产品落地页，先对比视觉方向再写代码。
• 在不推倒重来的前提下，优化一个看起来很普通的仪表盘或页面。
• 让 AI 助手参考 Linear、Stripe 等已知产品的风格。
• 为开发者工具参照现有网站风格搭建设计系统。

快速上手

1. 1

   使用 npx 安装该技能

   npx skills add joeseesun/qiaomu-design
2. 2

   在支持的客户端（如 Codex 或 Claude Code）中请它设计页面，例如产品落地页

使用前须知

• !这是面向兼容 Agent Skills 客户端的技能，不是独立软件，效果依赖执行代理和项目上下文。
• !58 站 DESIGN.md 参考库提炼自公开网站，不代表相应公司的背书。
• !交互式方向回传依赖本地预览服务，服务失败时需要在对话中手动回复选择。

收录于专题

标签

常见问题

qiaomu-design 是什么？

面向 Claude Code 等客户端的设计 Skill，帮 AI 生成的界面摆脱默认模板感，附 58 个真实网站设计系统参考。 qiaomu-design 是一个为 AI 编程助手增加设计工作流的 Agent Skill。用户提出设计或重新设计界面的需求时，它先诊断需求，再在本地预览中给出四个差异明显的风格方向供选择，确认后才在项目文件中实现，并按包含无障碍、表单、焦点管理和中文排版的交付清单验收。

qiaomu-design 可以免费使用吗？用的什么许可证？

qiaomu-design 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

qiaomu-design 还在维护吗？

活跃维护中。qiaomu-design 最近一次提交是在 2026年10月13日。

qiaomu-design 适合用来做什么？

开始新的产品落地页，先对比视觉方向再写代码。 在不推倒重来的前提下，优化一个看起来很普通的仪表盘或页面。 让 AI 助手参考 Linear、Stripe 等已知产品的风格。 为开发者工具参照现有网站风格搭建设计系统。

qiaomu-design 怎么安装和运行？

使用 npx 安装该技能: npx skills add joeseesun/qiaomu-design 在支持的客户端（如 Codex 或 Claude Code）中请它设计页面，例如产品落地页

在哪里获取 qiaomu-design？

源代码和安装说明在 GitHub 上：https://github.com/joeseesun/qiaomu-design