joeseesun/qiaomu-design

Что это?

Ключевые возможности

• 01Перед реализацией предлагает четыре принципиально разных варианта оформления в виде интерактивных макетов.
• 02Не допускает шаблонных решений: например, запрещает фиолетовые градиенты в стиле AI, Inter и центрированные hero-блоки.
• 03Предлагает рекомендации по китайской типографике, включая системные наборы шрифтов и правила интервалов для CJK.
• 04Содержит библиотеку из 58 файлов DESIGN.md с референсами дизайн-систем реальных сайтов.
• 05Предлагает режим polish для аудита и доработки существующих страниц без их переписывания.
• 06Проводит предварительную проверку по чек-листу, охватывающему доступность, формы и защиту от деструктивных действий.

Сценарии использования

• Создать лендинг нового продукта и сравнить варианты оформления до написания кода.
• Улучшить существующий дашборд или страницу, которые выглядят шаблонно, без полной переработки дизайна.
• Попросить AI-ассистента повторить стиль известного продукта, например Linear или Stripe.
• Создать дизайн-систему для инструмента разработчика, опираясь на референсы.

Быстрый старт

1. 1

   Установите скилл с помощью npx

   npx skills add joeseesun/qiaomu-design
2. 2

   В совместимом клиенте (Codex или Claude Code) попросите его разработать страницу, например лендинг продукта

Что важно знать

• !Это Agent Skill для совместимых клиентов, а не самостоятельное программное обеспечение, поэтому результат зависит от выполняющего агента и контекста проекта.
• !Библиотека примеров DESIGN.md составлена на основе общедоступных сайтов и не означает, что эти компании одобряют её.
• !Для интерактивного выбора в предварительном просмотре нужен локальный сервер предпросмотра. Без него придётся общаться в чате.

В подборках

Темы

Частые вопросы

Что такое qiaomu-design?

Agent Skill с заданным подходом к дизайну для Claude Code и аналогичных клиентов: помогает избежать шаблонного UI, предлагает выбрать визуальное направление и содержит 58 референсов дизайн-систем реальных сайтов. qiaomu-design — это Agent Skill, который добавляет рабочий процесс проектирования в AI-ассистенты для написания кода. Когда вы просите спроектировать или переработать интерфейс, он сначала уточняет задачу, а затем показывает в локальном предпросмотре четыре принципиально разных варианта оформления, чтобы вы могли выбрать один до начала реализации. После этого выбранный вариант воплощается в файлах проекта и проверяется по чек-листу перед сдачей: доступность, формы, обработка фокуса и китайская типографика.

qiaomu-design можно использовать бесплатно? Какая у него лицензия?

qiaomu-design распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

qiaomu-design всё ещё поддерживается?

Активно поддерживается. Последний коммит в qiaomu-design — 13 окт. 2026 г..

Для чего можно использовать 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