Sistema de diseño

v2.1

Toda pieza visual de AutoChiro sale de aquí: web, landing, informe, dashboard y presentación. Esta web se republica sola con cada cambio, así que nunca está desactualizada.

Ver el sistema

Si solo necesitas consultar algo

No hace falta nada técnico. En el catálogo está todo: los criterios primero y luego el inventario completo — colores con su código, el logo en sus cuatro variantes indicando cuál va en cada fondo, iconos, tipografías y componentes.

Necesito…Está en
El logo para un documentoMarca · los archivos en /brand/logo/
El código de un colorColor
Saber si algo «suena» a AutoChiroCriteriosVoz
Montar una landingCriteriosLandings
Un iconoIconos

Si quieres pedirle una pieza a Claude

Pega este bloque al principio de la conversación, en claude.ai o en Cowork. Con eso Claude tiene los criterios, el CSS y las plantillas, siempre en su versión de hoy.

Antes de diseñar nada, lee y respeta el sistema de diseño de AutoChiro:
https://autochiro-diseno.pages.dev/reglas.md

Para el CSS, según lo que pueda cargar la pieza:

· Si puede cargar recursos externos (una web normal), enlázalo:
  <link rel="stylesheet" href="https://autochiro-diseno.pages.dev/diseno.css">
  y las fuentes con el <link> de Google Fonts:
  Poppins 600;700 + Inter 400;500;600

· Si tiene que ser autocontenida (un artifact, un email, HTML para importar a
  Adobe Express), lee estos dos y pégalos dentro de la pieza:
  https://autochiro-diseno.pages.dev/diseno.css  → dentro de un <style>
  https://autochiro-diseno.pages.dev/iconos.svg  → el bloque, justo tras <body>
  Los dos se leen enteros sin problema.

  NO intentes leer /inline: son 116 KB con las fuentes en base64 y no sobrevive a
  la lectura. Ese archivo es para que lo pegue una persona a mano.
  Sin Google Fonts la tipografía caerá a la del sistema; si la pieza necesita la
  tipografía de marca de verdad, pide que te peguen el contenido de
  https://autochiro-diseno.pages.dev/inline

Plantillas de partida:
· Landing  https://autochiro-diseno.pages.dev/plantillas/landing
· Deck     https://autochiro-diseno.pages.dev/plantillas/deck
· Informe  https://autochiro-diseno.pages.dev/plantillas/informe

Logos: https://autochiro-diseno.pages.dev/brand/logo/

El mismo bloque en un archivo aparte, por si prefieres copiarlo de ahí o pasar la URL directamente: para-claude.md

Por qué una URL y no un archivo adjunto

Si le pasas una copia del CSS, esa copia envejece en cuanto alguien cambie algo — y nadie se dará cuenta. La URL siempre sirve la versión actual, porque se republica sola con cada cambio.

El bloque distingue a propósito qué lee Claude y qué tienes que pegar tú. Está comprobado contra este sitio: Claude lee /reglas.md, /diseno.css y /iconos.svg completos, pero /inline le llega vacío — son 116 KB y 85 son las tipografías en base64. Eso no se reproduce de memoria: se copia y se pega.

Qué no hacer

Para quien toca el código

El sistema vive en diseno/ del repo AutoChiro/autochiro-atlas y se publica solo en cada push a main. La skill diseno de claude.ai lleva además una copia empaquetada para funcionar sin red.

Si la copia de la skill y esta web no coinciden, manda la web: la copia es una reserva, no la fuente.