joeseesun/qiaomu-design

O que é?

Recursos principais

• 01Gera quatro direções visuais bem diferentes como mockups interativos antes da implementação.
• 02Aplica regras contra designs genéricos, como proibir gradientes roxos típicos de IA, Inter e layouts com hero centralizado.
• 03Oferece orientações de tipografia chinesa, incluindo pilhas de fontes do sistema e regras de espaçamento para CJK.
• 04Inclui uma biblioteca com 58 referências de sistemas de design de sites reais, nos arquivos DESIGN.md.
• 05Oferece um modo de refinamento para auditar e melhorar páginas existentes sem reescrevê-las.
• 06Executa uma checklist prévia que cobre acessibilidade, formulários e proteções contra ações destrutivas.

Casos de uso

• Começar uma landing page de produto e comparar direções visuais antes de escrever código.
• Melhorar um dashboard ou uma página existente com aparência genérica, sem fazer uma reformulação completa.
• Pedir a um assistente de IA que reproduza a identidade visual de um produto conhecido, como Linear ou Stripe.
• Criar um sistema de design para uma ferramenta de desenvolvimento com uma abordagem baseada em referências.

Início rápido

1. 1

   Instale a skill com npx

   npx skills add joeseesun/qiaomu-design
2. 2

   Em um cliente compatível (Codex ou Claude Code), peça para ele criar o design de uma página, como uma landing page de produto

Antes de usar

• !É uma Agent Skill para clientes compatíveis, não um software independente. Portanto, os resultados dependem do agente que a executa e do contexto do projeto.
• !A biblioteca de referências DESIGN.md foi compilada a partir de sites públicos e não implica endosso por parte dessas empresas.
• !A seleção interativa na prévia requer um servidor de prévia local; sem ele, você terá que responder pelo chat.

Em coleções

Tópicos

Perguntas frequentes

O que é qiaomu-design?

Uma Agent Skill com opiniões fortes para Claude Code e clientes semelhantes, que orienta o design de interfaces geradas por IA para longe de templates genéricos, com seletor de direções visuais e 58 referências de sistemas de design de sites reais. qiaomu-design é uma Agent Skill que adiciona um fluxo de trabalho de design a assistentes de programação com IA. Ao receber um pedido para criar ou reformular uma interface, primeiro analisa a solicitação e, em seguida, renderiza quatro propostas visuais bem diferentes em uma prévia local, para que o usuário escolha uma antes do início da implementação. Depois, a direção escolhida é implementada nos arquivos do projeto e verificada com uma checklist pré-entrega que cobre acessibilidade, formulários, gerenciamento de foco e tipografia chinesa.

qiaomu-design é gratuito? Qual é a licença?

qiaomu-design é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

qiaomu-design ainda é mantido?

Manutenção ativa. O último commit de qiaomu-design foi em 13 de out. de 2026.

Para que posso usar qiaomu-design?

Começar uma landing page de produto e comparar direções visuais antes de escrever código. Melhorar um dashboard ou uma página existente com aparência genérica, sem fazer uma reformulação completa. Pedir a um assistente de IA que reproduza a identidade visual de um produto conhecido, como Linear ou Stripe. Criar um sistema de design para uma ferramenta de desenvolvimento com uma abordagem baseada em referências.

Como instalar qiaomu-design?

Instale a skill com npx: npx skills add joeseesun/qiaomu-design Em um cliente compatível (Codex ou Claude Code), peça para ele criar o design de uma página, como uma landing page de produto

Onde consigo qiaomu-design?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/joeseesun/qiaomu-design