fuzzyplace/living-stage

Living stage: configuración guiada

Estás ayudando a alguien a crear su propia versión de este sitio: un personaje de tinta con vida propia, brazos que imprimen la página mientras se desplaza, su historia en sus palabras. El motor ya funciona. Tu trabajo es copiarlo, entrevistarlo y llenar cinco lugares. No escribas código del motor.

Los cinco lugares que son suyos

Qué	Archivo
Palabras: nombre, eslogan, capítulos, llamada a la acción, huevos de pascua	src/content/site.ts
Enlaces en el árbol de enlaces	src/content/links.ts
El aspecto del personaje	src/content/character.tsx (ajustes predefinidos en src/art/looks.tsx)
Paleta, tipografía, movimiento	design/tokens.json, reflejado en src/styles/tokens.css
Imagen de compartir e icono	npm run og (generado a partir de lo anterior)

También escribes las decisiones de la entrevista en docs/STORY.md, y puedes leer src/art/looks.tsx para copiar un aspecto predefinido en src/content/character.tsx.

Todo lo demás (src/art/, src/audio/, src/components/, src/sections/, src/App.tsx) es el motor. No lo leas para hacer este trabajo; es grande y no lo necesitarás. Lee docs/CHARACTER.md para las reglas de aspecto y titulares, y docs/DESIGN_SYSTEM.md antes de tocar los tokens. Solo abre archivos del motor si una verificación falla y el error apunta allí.

Paso 0: obtener el código (rápido, sin generación)

Si la carpeta actual ya es una copia de la plantilla (tiene src/content/site.ts y .claude/skills/living-stage/), salta al paso 1.

De lo contrario, pregunta dónde debería vivir el nuevo sitio (un nombre de carpeta), luego copia la plantilla sin su historial e instálala:

npx degit fuzzyplace/lil_guy_portfolio mi-sitio
cd mi-sitio
git init
npm install

Luego inicia el servidor de desarrollo (npm run dev, o la herramienta de vista previa si tienes una) y muéstrales el sitio de ejemplo para que sepan lo que están creando. Si no puedes ejecutar o ver un servidor de desarrollo, usa capturas de pantalla en su lugar: npm run build && npm run verify escribe screenshots/verify-desktop-hero.png (el héroe, a mitad de la acrobacia) y amigos, y npm run looks escribe primeros planos de cada aspecto. (Primera vez: npx playwright install chromium.) Diles en dos líneas lo que sucederá a continuación: una breve entrevista, una pregunta a la vez, luego lo construirás, verificarás y (con su consentimiento) desplegarás.

Paso 1: la entrevista

Cómo decidir (esto es lo que más importa)

Decide de arriba abajo, una capa a la vez, y nunca preguntes sobre una capa inferior hasta que la superior esté bloqueada. Los aspectos visuales terminados antes de que la historia y la voz estén definidas llevan a una copia que no tiene sentido.

1. Intención: para quién es el sitio, qué deberían sentir y qué deberían hacer al final.
2. Historia: el arco, desplazándose de arriba a abajo.
3. Estilo de copia: voz, forma de las oraciones, dispositivos de encuadre.
4. Estructura: los bloques (capítulos, un elemento emergente, contacto) y para qué sirve cada uno.
5. Líneas: las palabras reales, primero el eslogan.
6. Personaje: cómo se ve.
7. Paleta, tipografía y movimiento.
8. Enlaces: el árbol de enlaces y la llamada a la acción.

Escribe cada capa bloqueada en docs/STORY.md bajo "BLOQUEADO" (reemplazando las entradas del ejemplo de persona a medida que avanzas). Todo lo siguiente debe remontarse a ello. Si una idea posterior contradice una capa bloqueada, dilo y pregunta antes de cambiar algo.

Cómo preguntar

• Una pregunta a la vez, en texto de chat simple. Sin formularios ni diálogos con múltiples preguntas.
• Antes de cada pregunta, di en una línea qué decide y qué cambia en la página.
• Muestra, no describas. Para preguntas de estilo y apariencia, da 3 o 4 opciones, cada una escrita con su contenido real: los mismos tres momentos cada vez (la apertura, un capítulo, el final). Para el personaje, muestra los ajustes predefinidos (?look=beanie|bun|hood|bot en el servidor de desarrollo, o npm run looks para primeros planos). Para paletas, muestra muestras con el color del texto sobre el fondo.
• Recomienda una opción y di por qué en una oración. Ellos eligen, mezclan o se oponen.
• Después de cada respuesta, repite lo que ahora está bloqueado en una línea, escríbelo en docs/STORY.md, luego haz la siguiente pregunta.
• "Tú decides" significa que tú decides, regístralo bajo "Decisiones" en docs/STORY.md, y continúa.
• Mantén un sentido del costo: no vuelvas a leer archivos que ya hayas leído, no regeneres todo el sitio por cada respuesta, edita solo las líneas que cambiaron.

Qué preguntar, capa por capa

1. Intención. ¿Para quién es esto (gerentes de contratación, clientes, colaboradores, amigos)? ¿Qué deberían sentir? ¿Cuál es la única cosa que deberían hacer al final (enviar un correo, reservar una llamada, seguir, nada)?
2. Historia. Pide primero el material en bruto (lo que hicieron, hacen ahora, quieren después, cualquier cosa que hagan en paralelo), luego propón 2 o 3 arcos en una línea cada uno. El arco predeterminado es pasado, presente, un elemento emergente con el hilo conductor, futuro, contacto; cualquier orden de capítulos y elementos emergentes funciona.
3. Estilo de copia. Ofrece 3 o 4 voces representadas en su propio material, por ejemplo: primera persona tranquila; cuaderno de laboratorio; notas de campo; registro de terminal; o una mezcla. Recomienda una.
4. Estructura. La lista de bloques, cada uno con su trabajo en una línea, más cuáles aparecen en la navegación del encabezado. Un bloque debe ser el bloque de contacto.
5. Líneas. Redacta cada línea en la voz bloqueada, luego muéstralas juntas en contexto (el servidor de desarrollo, después de escribir site.ts). Primero, haz bien el eslogan: lee "Titulares" en docs/CHARACTER.md (de 2 a 4 líneas cortas, una palabra real en la primera línea, letras altas junto a letras cortas, una coma al final de una fila; máximo 24 caracteres por línea). También: la ceja, el lede, el huevo de pascua del pie de página, el huevo de pascua de la consola, las dos líneas de confianza, la línea 404. El borrador de la copia está bien; nada se envía hasta que ellos lo aprueben.
6. Personaje. Muestra los cuatro ajustes predefinidos. Si ninguno encaja, pide una descripción de una oración (pelo o gorro, ropa, la única cosa que atrapa la luz) y dibuja un aspecto personalizado copiando el ajuste predefinido más cercano en src/content/character.tsx y cambiando una forma a la vez. Sigue las reglas de caja, articulaciones y relleno en docs/CHARACTER.md. Nunca traces una foto o la semejanza de una persona real a menos que sea la suya propia y ellos lo pidan. Los ajustes predefinidos comparten parts.NECK y parts.SKULL (exportados de src/art/looks.tsx). Muestra el resultado con npm run looks (screenshots/look-current.png).
7. Paleta, tipografía y movimiento. Ofrece 3 paletas como muestras (los grises de tinta predeterminados, y dos que se adapten a su historia), el color de acento, y si mantener las fuentes predeterminadas. Edita design/tokens.json primero, refleja cada color que cambiaste en src/styles/tokens.css (solo la rampa de grises tiene variables --md-ref-gray-* allí; cada otro color se asienta directamente en su --md-sys-color-<rol>), luego npm run tokens:contrast: verifica el contraste del texto (4.5:1) y que los dos archivos coincidan. La niebla (fog-light, fog-mid, fog-deep, fog-edge) lleva el estado de ánimo de la paleta: tiñe los cuatro. Mantén el acento como un susurro (docs/DESIGN_SYSTEM.md). Movimiento: duraciones predeterminadas o más tranquilas (más largas).
8. Enlaces. Pregunta por cada enlace y a dónde va (Conectar, Trabajo, Jugar, o grupos renombrados). Solo URLs reales: cualquier cosa que aún no tengan es href: null, status: 'soon' (se muestra en desarrollo, oculto en producción). Luego la llamada a la acción: un enlace de reserva, un correo electrónico o un enlace de perfil.

Paso 2: construir y verificar

1. Escribe los archivos de contenido a partir de lo que está bloqueado. Establece site.url en donde vivirá el sitio (https://host, sin barra inclinada final). Sin dominio aún: usa la dirección del host (por ejemplo https://su-sitio.vercel.app) y actualízalo después.
2. Ejecuta npm run check (tipos, pruebas incluyendo las reglas de copia, contraste y desviación de tokens, compilación). Corrige lo que falle. La compilación advierte mientras site.url aún apunte al demo de la plantilla (lil-guy-portfolio.vercel.app) o la llamada a la acción a example.com. Las reglas de copia: sin guiones em o en, sin signos de exclamación, sin palabras de relleno genéricas.
3. Ejecuta npm run og para la tarjeta de compartir y el icono.
4. Ejecuta npm run build && npm run verify (primera vez: npx playwright install chromium). Verifica a 1440 y 375, con y sin movimiento reducido, que el personaje aparezca al cargar, haga la entrada y la acrobacia del título, permanezca en pantalla mientras se desplaza, y que no haya errores. Si no se reproduce ninguna acrobacia, el eslogan no le da nada sobre lo que pararse: revísalo con ellos.
5. Muéstrales las capturas de pantalla (screenshots/verify-desktop-hero.png y verify-mobile-hero.png para el héroe a mitad de la acrobacia, verify-desktop.png y verify-mobile.png para el final de la página) y el servidor de desarrollo, y pregunta qué cambiar. Repite hasta que estén contentos. node scripts/shots-sections.mjs da una toma por capítulo.
6. Pase de privacidad. Lee cada cadena en src/content/ una vez más. Señala cualquier cosa que quizás no quieran pública: una dirección de casa, un teléfono o correo personal que no eligieron compartir, detalles familiares o de salud, empleadores o clientes que no hayan autorizado. Elimina los restos de la persona de ejemplo: "Pim Lanternby", "PIM", "The Quiet Hour", líneas de lámpara y radio, y cualquier example.com, example.org o example.net que no te hayan dado ellos mismos, y la dirección demo lil-guy-portfolio.vercel.app.

Paso 3: desplegar

Desplegar publica su sitio, así que pregunta antes de hacerlo. Sigue docs/DEPLOY.md (Vercel por defecto; Netlify y GitHub Pages también funcionan). Después de que esté en vivo, abre la URL, verifica la tarjeta de compartir con el og.png desplegado, y dales el enlace.

Termina con un breve resumen: qué está en vivo, qué está aún soon, y cualquier cosa que hayan dicho que enviarían después.