Repolode
Enviar
joeseesun

joeseesun/qiaomu-design

Un Agent Skill con opiniones marcadas para Claude Code y clientes similares que aleja el diseño de UI generado por IA de las plantillas genéricas, con un selector de estilos visuales y 58 referencias de sistemas de diseño de sitios reales.

Ver en GitHub
Estrellas
675
Forks
50
Issues abiertos
1
Último commit
hace 24 días

¿Qué es?

qiaomu-design es un Agent Skill que incorpora un flujo de diseño a los asistentes de programación con IA. Cuando se les pide diseñar o rediseñar una interfaz, primero analizan la solicitud y luego generan cuatro propuestas visuales muy distintas en una vista previa local, para que el usuario elija una antes de empezar la implementación. Después, la propuesta elegida se desarrolla en los archivos del proyecto y se comprueba con una lista previa a la entrega que abarca accesibilidad, formularios, gestión del foco y tipografía china.

El skill incluye reglas para contrarrestar hábitos comunes del diseño con IA, como prohibir los degradados morados, Inter y las composiciones hero centradas. También incluye referencias de diseño de movimiento, una referencia del sistema de diseño Carbon y una biblioteca de 58 archivos DESIGN.md elaborados a partir de sitios públicos como Stripe, Linear y Apple, que se pueden consultar con indicaciones como «hazlo como Linear». El modo de pulido permite revisar páginas existentes, criticarlas y refinarlas sin reescribirlas por completo.

Se instala con `npx skills add joeseesun/qiaomu-design`. El skill está dirigido a clientes compatibles con Agent-Skills y la calidad del resultado depende del agente que lo ejecute y del contexto del proyecto.

Funciones clave

  • 01Genera cuatro propuestas de estilo muy distintas como mockups interactivos antes de la implementación.
  • 02Aplica reglas contra los diseños genéricos, como prohibir los degradados morados típicos de la IA, Inter y las composiciones hero centradas.
  • 03Ofrece pautas de tipografía china, incluidas pilas de fuentes del sistema y reglas de espaciado CJK.
  • 04Incluye una biblioteca con 58 referencias de sistemas de diseño en archivos DESIGN.md basadas en sitios web reales.
  • 05Ofrece un modo de pulido para revisar y refinar páginas existentes sin reescribirlas.
  • 06Ejecuta una lista de comprobación previa que abarca accesibilidad, formularios y medidas de protección frente a acciones destructivas.

Casos de uso

  • Empezar una landing page para un producto nuevo y comparar estilos visuales antes de escribir código.
  • Mejorar un dashboard o una página existente que se ve genérica, sin rediseñarla por completo.
  • Pedirle a un asistente de IA que reproduzca el estilo de un producto conocido, como Linear o Stripe.
  • Crear un sistema de diseño para una herramienta para desarrolladores siguiendo un enfoque basado en referencias.

Inicio rápido

  1. 1

    Instala la skill con npx

    npx skills add joeseesun/qiaomu-design
  2. 2

    En un cliente compatible (Codex o Claude Code), pídele que diseñe una página; por ejemplo, una página de destino para un producto

Antes de usarlo

  • Es una Agent Skill para clientes compatibles, no un software independiente, por lo que los resultados dependen del agente que la ejecute y del contexto del proyecto.
  • La biblioteca de referencias DESIGN.md se ha elaborado a partir de sitios públicos y no implica que esas empresas la respalden.
  • La selección interactiva en la vista previa requiere un servidor de vista previa local; si no está disponible, tendrás que responder en el chat.

En colecciones

Skills de diseño de interfaces para agentes de programaciónHerramientas, skills y plugins para Claude CodeBibliotecas de skills para agentes de IA

Temas

#agent-skill#claude-code#ui-design#frontend-design#design-system#chinese-typography

Preguntas frecuentes

¿Qué es qiaomu-design?
Un Agent Skill con opiniones marcadas para Claude Code y clientes similares que aleja el diseño de UI generado por IA de las plantillas genéricas, con un selector de estilos visuales y 58 referencias de sistemas de diseño de sitios reales. qiaomu-design es un Agent Skill que incorpora un flujo de diseño a los asistentes de programación con IA. Cuando se les pide diseñar o rediseñar una interfaz, primero analizan la solicitud y luego generan cuatro propuestas visuales muy distintas en una vista previa local, para que el usuario elija una antes de empezar la implementación. Después, la propuesta elegida se desarrolla en los archivos del proyecto y se comprueba con una lista previa a la entrega que abarca accesibilidad, formularios, gestión del foco y tipografía china.
¿qiaomu-design es gratuito? ¿Qué licencia tiene?
qiaomu-design es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿qiaomu-design sigue mantenido?
Mantenimiento activo. El último commit de qiaomu-design fue el 13 oct 2026.
¿Para qué puedo usar qiaomu-design?
Empezar una landing page para un producto nuevo y comparar estilos visuales antes de escribir código. Mejorar un dashboard o una página existente que se ve genérica, sin rediseñarla por completo. Pedirle a un asistente de IA que reproduzca el estilo de un producto conocido, como Linear o Stripe. Crear un sistema de diseño para una herramienta para desarrolladores siguiendo un enfoque basado en referencias.
¿Cómo se instala qiaomu-design?
Instala la skill con npx: npx skills add joeseesun/qiaomu-design En un cliente compatible (Codex o Claude Code), pídele que diseñe una página; por ejemplo, una página de destino para un producto
¿Dónde consigo qiaomu-design?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/joeseesun/qiaomu-design

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados