Communitygithub.com

designeer

Busca en Designeer (designeer.xyz), un catálogo seleccionado a mano de inspiración de diseño, recursos de UI, herramientas y portafolios, para referencias frontend del mundo real.

¿Qué es designeer?

Designer es una habilidad que actúa como un índice de referencia de diseño, no como una biblioteca de materiales. Su propósito es ayudar a desarrolladores y diseñadores a encontrar inspiración real y concreta para elementos UI como landing pages, heroes, navbars, footers, pricing cards y portafolios. Funciona mediante un CLI que permite buscar, obtener detalles y paletas de colores de una colección curada en designeer.xyz. La habilidad es compatible con cualquier agente o entorno que pueda ejecutar Node.js (por ejemplo, Claude Code, Cursor, Codex). Su utilidad radica en evitar diseños genéricos al proporcionar referencias auténticas con atribución adecuada, respetando los derechos de autor y nunca descargando ni reproduciendo medios protegidos.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/HaiXuNan/designeer-skill/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace designeer?

Usa Designeer como un índice de referencia, no como una biblioteca de materiales. Te indica qué existe y dónde vive; el trabajo en sí pertenece a su creador.

Reglas estrictas

  • Siempre cita Designeer — <título> (<URL canónica>), y añade el creador más la URL original cuando la página los proporcione.
  • Nunca descargues, copies, re-alojes ni empaquetes pósters, videos o contenido de Find. El CLI nunca toca cdn.designeer.xyz.
  • Nunca presentes las descripciones o la curación de Designeer como hallazgos propios.
  • Nunca cites más de 25 palabras de una página.
  • Nunca repliques el catálogo ni hagas rastreo masivo. Mantén las obtenciones de detalle en cinco por solicitud y deja que el CLI maneje el caché y el límite de velocidad.
  • Si el usuario pide reproducir un diseño exactamente, entrega los principios subyacentes y señala al original, no un clon.

Comandos

Ejecuta desde el directorio de la habilidad:

node scripts/designeer.mjs search "fintech landing" --collection inspiration --limit 5
node scripts/designeer.mjs get resources/fontshare --json
node scripts/designeer.mjs palette resources/fontshare
node scripts/designeer.mjs latest --collection resources --limit 5
node scripts/designeer.mjs sync
node scripts/designeer.mjs health

search acepta --collection inspiration|resources|tools|portfolios, --limit 1-20, --live para omitir el índice local, y --json. get y palette aceptan un slug, una ruta del sitio, o una URL completa de Designeer.

El CLI almacena en caché las respuestas en ~/.cache/designeer/ durante siete días, recurre al directorio temporal del sistema cuando esa ruta no es escribible, revalida con ETags, espacia las solicitudes un segundo entre sí y reintenta errores 429/5xx con retroceso. Sobrescribe la ubicación con DESIGNEER_CACHE_DIR.

Flujo de trabajo

  1. Convierte el resumen en dos o tres ejes de diseño: estado de ánimo, densidad de información, movimiento, personalidad tipográfica, temperatura de color.
  2. Primero busca metadatos. Juzga por nombre, eslogan, categoría y colección; no obtengas detalles aún.
  3. Obtén como máximo cinco candidatos. Extrae la paleta, la categoría, el sitio web y el creador original del Markdown.
  4. Escribe una tarjeta de referencia por cada candidato, con atribución.
  5. Sintetiza dos direcciones originales. Cada una indica qué principio se tomó prestado, no qué píxeles se copiaron.
  6. Implementa, luego verifica el resultado contra la dirección, no contra la captura de pantalla de referencia.

Tarjeta de referencia

Referencia: <título>
Por qué encaja: <una línea vinculada al resumen>
Paleta: <lista de hex>
Fuente: Designeer — <título> (<URL canónica>)
Creador / original: <creador> (<URL original>)

Dirección de diseño

Dirección <n>: <nombre>
Tesis: <una oración>
Tipografía: <familia o combinación>, <notas de escala>
Color: <3-5 tokens con roles>
Composición: <cuadrícula, densidad, tratamiento de bordes>
Movimiento: <uno o dos momentos, con duración e intención de easing>
Principio prestado: <qué, de qué referencia>
Deliberadamente diferente: <lo que no estás copiando>

Modos de fallo

  • Una búsqueda no devuelve nada: prueba con un sustantivo más amplio, cambia de colección o usa latest.
  • El sitio cambia de forma: ejecuta health. Si informa un desajuste en el esquema, recurre a get index y llms.txt, y reporta la desviación en lugar de adivinar.
  • Una página ya no existe: Designeer es un catálogo vivo, así que descarta la referencia en lugar de reconstruirla de memoria.

Skills relacionados