website-dev-skill

website-dev

Construye el sitio web personal que una persona reflexiva haría para sí misma. Dice claramente quién es y qué hace, pone su trabajo real en cada pantalla y parece que le pertenece: no un tema de portafolio, no el promedio estadístico de cada sitio de "Hola, soy un desarrollador apasionado" en internet, y no una pieza de arte que oculta el trabajo. El listón son los mejores sitios personales hechos a mano de diseñadores, desarrolladores, escritores, fotógrafos e investigadores: silenciosos, específicos, rápidos e inconfundiblemente de una persona.

Alcance: solo sitios web personales. Portafolio, página de inicio, blog, sitio de CV, página académica o centro de enlaces de una sola persona. El sitio de un freelancer cuenta, porque se trata de una persona y su trabajo. Un negocio, una tienda, un producto, una startup o un sitio de agencia no cuenta. Si la tarea es una de esas, di que este skill es para sitios personales y no lo apliques.

Este skill es un skill con sus partes en assets/. La tabla de abajo dice qué parte se carga cuándo, qué hace cada parte durante la configuración y cuándo el agente debe escribir de nuevo en ella. Tres partes se cargan siempre. El resto se carga cuando la tarea las toca.

Los archivos

Archivo	Invocar	Configuración inicial	Disparador de lectura	Disparador de actualización
principios-de-diseño	Siempre	Nunca se configura. Se lee tal como está escrito durante la configuración; no se pregunta ni cambia nada.	Cada vez que se carga este skill, antes de la primera decisión de diseño o código.	Nunca por el agente. Editar solo cuando el usuario pida explícitamente cambiar un principio. Un 'no me gusta' va a design-dont-dos, no aquí.
qué-no-hacer-en-diseño	Siempre	Se ejecuta siempre que se ejecuta la configuración. Cada dirección, paleta, fuente y componente propuesto durante la configuración se verifica contra cada fila antes de que el usuario lo vea. Cualquier sitio de referencia o rasgo que al usuario no le guste en sus respuestas de configuración se convierte en una fila de usuario de inmediato. En un sitio existente, enumera las filas que ya incumple.	Cada vez que se carga este skill, y de nuevo antes de que se escriba o cambie algo visible en el sitio.	Cada vez que el usuario diga que no le gusta algo del sitio (un color, forma, diseño, efecto, palabra, fuente, movimiento, o un sitio de referencia). Agrega una fila al final en el mismo turno, antes de continuar el trabajo. Cada fila agregada es una fila de usuario.
sistema-de-diseño-del-usuario	Siempre	Si no hay un sistema de diseño real, configúralo primero. No hay sistema de diseño real significa: la fila Dirección no está confirmed, o las tablas de color y tipo no tienen filas confirmed. Luego, antes de cualquier trabajo de diseño, haz las preguntas de configuración desde initial-setup. El usuario también puede iniciar la configuración en cualquier momento ("configura el sistema de diseño", "empieza de nuevo el look"). Si el usuario responde "tú decides" o "configúralo por mí", ejecuta la ruta de investigación. Las respuestas del usuario se convierten en confirmed, la investigación en proposed, los valores leídos del código existente en extracted. Si existe un sistema de diseño real, no preguntes de nuevo: pregunta solo sobre las filas que la tarea actual necesita y que aún están vacías.	Cada vez que se carga este skill. Sus valores confirmados anulan cualquier valor predeterminado en los otros archivos.	Cada vez que el usuario agregue o cambie algo en su sistema de diseño (un color, fuente, tamaño, paso de espaciado, radio, sombra, token de movimiento, regla de componente, logotipo o monograma, regla de imágenes, regla de voz). Actualiza la fila en el mismo turno y registra el cambio. También cuando la configuración extrae o investiga tokens.
configuración-inicial	Cuando: un sitio o repositorio nuevo, la primera ejecución en un sitio, el inicio de un rediseño, o users-design-system no tiene dirección confirmada.	Ejecuta la configuración cuando se dispare cualquier señal: (1) users-design-system no tiene sistema de diseño real, (2) un sitio o repositorio nuevo, (3) el usuario pide configurar o rehacer el sistema de diseño, (4) comienza un rediseño. Haz las rondas de preguntas de una vez, en la primera respuesta, antes de cualquier trabajo de diseño. Si el usuario dice "tú decides", "resuélvelo" o "configúralo por mí", ejecuta la ruta de investigación en su lugar. Omite cuando existe un sistema de diseño real y el usuario no lo pidió.	Al inicio de la tarea, antes de que se escriba cualquier página o componente.	Cuando el usuario cambie cómo debe comenzar un sitio (las preguntas, la pila, las herramientas), o cuando un paso de configuración resulte incorrecto en la práctica.
direcciones-de-diseño	Cuando: la configuración pide el look general, se ejecuta la ruta de investigación, o el usuario pide cambiar el look del sitio.	Se ejecuta cuando la configuración hace la pregunta de dirección o ejecuta la ruta de investigación. La primera pregunta de configuración ofrece las 3 direcciones que mejor se adaptan a la persona, más "Investígalo por mí". La ruta de investigación comienza desde este catálogo, luego busca direcciones nicho más allá de él.	Antes de hacer la pregunta de dirección, y antes de cualquier investigación sobre direcciones.	Cuando la investigación encuentre una dirección no en el catálogo, agrégala. Cuando el usuario elija o rechace una dirección, regístrala. El rasgo definitorio de una dirección rechazada también va a design-dont-dos.
diseño-de-hero	Cuando: la tarea construye, rediseña o revisa la página de inicio o su primera pantalla.	Se ejecuta cuando la configuración hace la P13 (solo si la persona no tiene imagen de trabajo o foto). La respuesta establece la fuente visual del hero en users-design-system.	En el paso de planificación de pantalla, antes de que se construya el hero, y en la revisión.	Cuando el usuario apruebe un hero, regístralo y escríbelo en users-design-system. Un hero que no guste va a design-dont-dos. El prompt de un hero generado va a su registro.
módulos-visuales	Cuando: la tarea planifica una página o sección, un sitio se lee como insípido, o el usuario pide "más vida".	Se ejecuta con la ruta de investigación: cada candidato nombra de 2 a 4 módulos.	En el paso de planificación de pantalla, antes de que se construya cualquier sección, y en la revisión.	Cuando al usuario le guste un módulo, regístralo y agrégalo a users-design-system. Un módulo que no guste va a design-dont-dos. Un módulo encontrado en la investigación va a su catálogo.
diseño-de-movimiento	Cuando: la tarea toca animación, transiciones, estados hover o press, efectos de scroll, cargadores, entradas de página, o cualquier cosa que se mueva.	Se ejecuta cuando la configuración hace la pregunta de movimiento. La respuesta establece el dial de movimiento en users-design-system. No se pregunta de nuevo una vez que el dial está confirmed.	Antes de que se escriba o revise cualquier código de movimiento.	Cuando el usuario apruebe un patrón de movimiento o cambie un valor de movimiento: regístralo en su tabla de decisiones. Un movimiento que al usuario no le guste va a design-dont-dos.
redacción	Cuando: la tarea escribe, reescribe o revisa cualquier texto visible en el sitio (la introducción, biografía, descripciones de proyectos, encabezados, enlaces, texto alternativo, meta tags).	Se ejecuta cuando la configuración hace la pregunta de voz. La respuesta establece la voz en users-design-system. No se pregunta de nuevo una vez que la voz está confirmed.	Antes de que se escriba la primera palabra de texto, y de nuevo antes de la entrega.	Cuando el usuario indique una regla de texto que se aplique más allá de una cadena: agrega a su tabla de reglas de texto de usuario. Una frase o tono que no guste también va a design-dont-dos. Una regla de voz va a users-design-system.
puerta-de-revisión	Cuando: antes de entregar cualquier página, sección o componente, y cuando el usuario pide revisar o auditar su sitio.	Nunca se configura. No se usa durante la configuración.	Después de la construcción, antes del informe al usuario.	Cuando el usuario encuentre un problema después de la entrega que la puerta no detectó: agrega una verificación a su tabla de verificaciones de usuario, y agrega el problema a design-dont-dos.

Qué significa gusto aquí

El gusto no es un estilo. Es un conjunto de decisiones tomadas a propósito, para esta persona, donde un modelo de otro modo tomaría el valor predeterminado.

• Específico vence a genérico. Cada sitio personal que un modelo escribe se desvía hacia la versión que le quedaría bien a cualquiera: "Hola, soy [Nombre] 👋", "un desarrollador apasionado al que le encanta crear experiencias digitales", barras de habilidades, una línea de tiempo, tres tarjetas de proyecto con botones de GitHub, un resplandor púrpura. Cada uno de esos es una decisión que nadie tomó. Lo específico tiene que venir de la persona: su trabajo, sus palabras, sus fotografías, su sistema de diseño. Nunca de una regla de estilo, y nunca inventado.
• El trabajo es el héroe. Un visitante viene a ver lo que esta persona ha hecho, escrito o encontrado. Pon lo mejor de ello en la primera pantalla o a un scroll de distancia. La decoración (orbes, partículas, blobs 3D, terminales falsos, widgets de concepto demo) es lo que llena una página cuando falta el trabajo.
• Una persona, una voz. Un sitio personal suena como alguien, no como la plantilla de un reclutador. Oraciones cortas, llanas y específicas en la voz que la persona eligió. Sin autobombo: el trabajo alaba.
• Selecciona, no archives. De tres a seis piezas fuertes vencen a treinta miniaturas. La mejor lidera y obtiene más espacio. El resto está a un enlace de distancia.
• La moderación es el lujo. Una paleta. Una escala de radio. Un estilo de enlace. Un tema. El espacio usado como material. Un sitio con menos decisiones, pero mejores, se lee como más cuidado.
• Vivo, no insípido. Un sitio de texto y grises es tan genérico como un sitio de resplandor. Dale color: dos colores que combinen, y uno de acento que los haga cantar solo en el encabezado y el hero. Dale un hero diseñado y de 2 a 4 módulos visuales: el trabajo de la persona mostrado con oficio, y forma de la paleta que no reclama nada. Nunca una sección falsa para llenar el espacio.
• Jerarquía que se ve al entrecerrar los ojos. Entrecierra los ojos ante la captura de pantalla. Una cosa lidera cada pantalla: el nombre, el trabajo o las palabras.
• La tipografía lleva a la persona. Elige el tipo para esta persona, configúralo con tracking ajustado para display, una medida de cuerpo legible (aproximadamente 65 caracteres) y pasos de peso reales. Para un escritor, el texto del cuerpo es el diseño.
• Ritmo, no uniformidad. Deja que un proyecto se alargue y otro sean dos líneas. Tarjetas idénticas en una cuadrícula es el aspecto de un tema.
• El movimiento responde, no actúa. La introducción llega una vez, un momento diseñado se gana su lugar, y cada enlace responde al puntero. Nada se escribe a sí mismo, gira o se desvanece al hacer scroll porque puede.
• Pequeño y rápido es una característica. Un sitio personal carga en un abrir y cerrar de ojos, se lee bien en un teléfono, funciona sin JavaScript y sigue funcionando en cinco años.
• La persona elige el look, no el agente. Un fotógrafo, un poeta, un ingeniero backend y un ilustrador merecen cada uno una respuesta diferente. La misma solicitud no debe producir el mismo sitio dos veces.

Las reglas de la casa

Estas ganan a todo en los assets excepto a las propias palabras del usuario y al sistema de diseño confirmado.

1. Solo sitios personales. Una persona y su trabajo. Cualquier otra cosa está fuera del alcance.
2. Configurar antes de diseñar. Si no hay un sistema de diseño real (la fila Dirección en users-design-system no está confirmed, o el color y el tipo no tienen filas confirmed), ejecuta initial-setup primero y haz las rondas de preguntas en la primera respuesta. El usuario también puede iniciar la configuración en cualquier momento, o decir "tú decides" para que el agente investigue y proponga el sistema. Nunca empieces un sitio con un gusto asumido.
3. Nunca resplandor, nunca píldora con resplandor, nunca púrpura IA. El usuario los prohibió por nombre. Sin resplandor exterior, neón, orbe brillante, borde brillante o degradado púrpura y violeta, en ninguna superficie, nunca, a menos que el sistema de diseño del usuario lo confirme.
4. El registro es la ley. Antes de escribir cualquier cosa visible, compruébalo contra design-dont-dos. Una fila de usuario nunca se rompe.
5. Escucha y anótalo. Cuando el usuario diga que no le gusta algo, agrega la fila del registro en el mismo turno, antes de arreglarlo. Cuando el usuario nombre un color, fuente o token, actualiza users-design-system en el mismo turno. El skill nunca debe cometer el mismo error dos veces para la misma persona.
6. Tokens, no valores. Cada color, tamaño, radio, sombra y duración proviene del sistema de diseño, a través de un bloque de variables CSS o un tema. Sin hex raw en un componente.
7. Muestra el trabajo real. Imágenes de proyectos reales, escritura real, fotografías reales de la persona si quiere una. Nunca una UI de proyecto falsa hecha de cajas grises, nunca imágenes de stock o IA pasadas como suyas. Una imagen con licencia abierta o generada solo está permitida como atmósfera del hero, después de que el usuario acepte una generada, y nunca muestra a la persona ni su trabajo.
8. No inventes nada. Sin testimonios, clientes, empleadores, premios, números o historia de vida inventados. Cualquier cosa asumida se marca en el código y se enumera en el informe.
9. La primera pantalla dice quién y qué a 1440x900 y a 390x844: el nombre, lo que hace en una línea, y el camino al trabajo o al contacto.
10. Accesible por defecto. Contraste 4.5:1, un anillo de enfoque visible, texto alternativo en cada pieza de trabajo, objetivos táctiles de 44px, movimiento reducido respetado. Nunca intercambiado por el aspecto.
11. Revisa antes de entregar. Ejecuta review-gate. Informa lo que falló o no se verificó primero.

Los tres diales

Después de la configuración, tres diales dirigen cada decisión de diseño, movimiento y densidad. Sus valores viven en el sistema de diseño del usuario (la configuración los establece; el usuario puede cambiarlos en una frase: "hazlo más tranquilo", "más movimiento", "más denso").

Dial	1 a 3	4 a 6	7 a 10
Variación (simetría a asimetría)	Centrado, simétrico, una columna de texto. Escritores, académicos, sitios de CV.	Lectura alineada a la izquierda, una introducción dividida, tamaños de imagen mixtos, diseños de sección variados.	Cuadrículas asimétricas, grandes zonas vacías, tipografía como imagen, saltos editoriales. Columna única por debajo de 768px en cualquier nivel.
Movimiento (estático a cinematográfico)	Solo estados hover y press.	Predeterminado. Más la entrada de introducción y un momento diseñado.	Solo cuando el propio trabajo de la persona es interactivo o se mueve (codificación creativa, movimiento...

[...truncado...]