kami-landing

¿Qué hace kami-landing?

Produce un documento de una sola página en el sistema de diseño kami (紙 / 纸). La estética toma prestada de la impresión editorial, los white papers técnicos y la correspondencia antigua mecanografiada — el objetivo es buen contenido en buen papel, no interfaz de aplicación moderna.

Fuente de verdad del sistema de diseño: design-systems/kami/DESIGN.md. Léelo antes de entregar. Los tokens, las reglas tipográficas, los "diez invariantes" y los colores prohibidos están todos allí.

Qué obtienes

Un único archivo HTML autocontenido con:

• Lienzo de pergamino cálido (#f5f4ed) — nunca #ffffff.
• Un solo acento cromático — azul tinta (#1B365D), usado en el número de sección, la palabra de acento del titular, la regla izquierda del manifiesto y los valores de métrica. En cualquier otro lugar, el azul tinta debe cubrir ≤ 5 % del área del documento.
• Serifa a un solo peso (500) para jerarquía — Charter (EN), TsangerJinKai02 / Source Han Serif (CN) o YuMincho (JA), seleccionados según el parámetro language. Sin cursivas en ningún lugar.
• Ritmo de impresión ajustado — alturas de línea 1.10–1.55, espaciado entre letras por idioma (0 para EN, 0.35px para CN, 0.02em para JA).
• Pilas numéricas configuradas con font-variant-numeric: tabular-nums para que las columnas de métricas y los dígitos de paginación queden alineados limpiamente.
• Profundidad mediante bordes de 1px + sombras susurradas (0 4px 24px rgba(0,0,0,0.05)). Sin sombras marcadas, sin neumorfismo, sin desenfoques de backdrop-filter.
• Relleno de etiquetas como hex sólido (ej. #E4ECF5), nunca rgba() — los renderizadores de impresión repintan las etiquetas con canal alfa.
• Responsivo a 1280 / 980 / 768 / 560.

Estructura de la página

1. Fila de cejas        — selector de idioma · edición · versión (sans mayúsculas 12px)
2. Héroe                — titular principal (serifa 500 96–106px), eslogan (21px),
                         tres chips de token héroe (con tono de papel)
3. Manifiesto           — párrafo destacado en serifa 400, 20px, 1.65 LH, con
                         regla izquierda azul tinta y pie de firma
4. Fila de métricas     — 3–6 celdas: valor (serifa 500 azul tinta 24px, tabular-nums),
                         etiqueta (serifa 500 oliva 12px)
5. Capítulos            — numerados (`01`, `02`, …) serifa 500 azul tinta 14px,
                         título de sección 28–32px, cuerpo 14–15px
6. Pie de página        — palabra de remate (serifa 500 mega), licencia · año · contacto,
                         índice del sitio de tres columnas en serifa 500 12px

Contrato de flujo de trabajo

1. Recopilar el resumen de la marca

Usa AskQuestion (o equivalente) para recopilar el resumen de la marca en partes. No vuelques toda la lista de entrada al usuario; pregunta en dos rondas:

1. Ronda de identidad — nombre, eslogan, ubicación, edición / versión, URL principal, idioma dominante.
2. Ronda de contenido — párrafo del manifiesto + firma, 3–6 mosaicos de métricas, 3–5 entradas de capítulo (título + introducción + cuerpo).

2. Elegir la pila de idioma

El parámetro language controla qué --serif stack se define en :root. Elige según el idioma dominante del manifiesto y el cuerpo del capítulo:

language	--serif	Notas
en	Charter, Georgia, Palatino, Times New Roman, serif	predeterminado
zh-CN	TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia	letter-spacing 0.35px en el cuerpo
ja	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	también sobrescribe --olive a #4d4c48 (los trazos de YuMincho son más finos)

El contenido mixto de escritura en línea es correcto: la cadena de fallback por glifo del navegador lo maneja. No encadenes las tres familias dentro de una declaración font-family; eso diluye el carácter.

3. Escribir index.html

Genera un único archivo con todo el CSS incrustado. Refleja la estructura de example.html y usa solo los tokens de design-systems/kami/DESIGN.md. No inventes nuevos colores, pesos o familias tipográficas.

Primitivas de componentes que el agente puede incorporar (todas definidas en el bloque <style> del ejemplo):

• .eyebrow, .label — barras superiores sans-serif
• .metric — par vertical valor + etiqueta
• .section-num + .section-title + .section-lede
• .tag.standard, .tag.brush — etiquetas hex sólido (máximo un brush por página)
• .quote — cita serifa 500 con regla izquierda
• ul.dash — viñetas con guión largo en azul tinta
• .code — bloque de código con fondo marfil y borde de 1px
• .footer-kicker — palabra serifa 500 mega

Etiqueta cada elemento editable con data-od-id="<slug-único>" para que el modo de comentario de la aplicación anfitriona pueda apuntar a él.

4. Autocomprobación antes de entregar

• El fondo de la página es pergamino (#f5f4ed), nunca #ffffff.
• El azul tinta (#1B365D) cubre ≤ 5 % de la superficie visible — cuenta los números de sección, la regla del manifiesto, los valores de métrica, el acento del titular. Total ≤ 5 %.
• Todos los grises son cálidos (R ≈ G > B). Sin slate-*, sin #f3f4f6.
• El peso de la serifa se mantiene en 500 — sin font-weight: 700 o 900 en ningún texto serifa.
• Sin font-style: italic en ningún lugar. El énfasis se cambia a color azul tinta o a una .tag.
• Todas las pilas numéricas (valores de métrica, paginación, fechas, cifras financieras) llevan font-variant-numeric: tabular-nums.
• Todos los rellenos de etiquetas son hex sólido (ej. #E4ECF5), nunca rgba().
• Sombras: como máximo un borde de 1px o una sombra susurrada de 0 4px 24px rgba(0,0,0,0.05). Sin sombras marcadas.
• Titular ≤ 6 palabras en tamaño de exhibición; CJK ≤ 8 caracteres.
• A 768px y 560px el diseño se colapsa a una columna sin desplazamiento horizontal.

Archivos en este skill

design-templates/kami-landing/
├── SKILL.md                 # este contrato
├── README.md                # guía rápida para humanos
└── example.html             # renderización canónica de SplatStudio

Límites

• No inventes nuevos colores o tipografías. La paleta de kami es fija; si un resumen exige un color de marca, recházalo o renderiza el color de marca como un único acento .tag.brush.
• No introduzcas un segundo color de acento. Elige azul tinta o no elijas nada.
• No mezcles las tres pilas tipográficas en una declaración; elige el idioma dominante, sobrescribe --serif en :root y deja que el fallback por glifo del navegador resuelva el contenido mixto en línea.
• No uses rgba() para rellenos de etiquetas — los renderizadores de impresión repintan las etiquetas con canal alfa. Usa el hex sólido premezclado de la tabla en design-systems/kami/DESIGN.md §2.
• No agregues JavaScript para animación. La página es papel, no una aplicación — el movimiento pertenece al lector al desplazarse.

Ver también

• design-systems/kami/DESIGN.md — la especificación completa de tokens.
• design-templates/kami-deck/ — skill hermano que produce una presentación de diapositivas en el mismo lenguaje kami.
• Upstream: tw93/kami — skill original de Claude (MIT) del que se adapta el sistema de diseño.