Sistema de Diseño Unificado
Una entrada que cubre todos los ámbitos del diseño.
Reglas de Carga de Recursos
Al comenzar, cargar el registro. En cada fase, cargar los recursos de esa fase según sea necesario. No generar a través del perfil de preferencias del usuario; la arquitectura de la skill se encuentra en
skill-architecture.html, la ruta de trabajo enskill-workflow.html, y los cambios de versión enCHANGELOG.md.
Cargar al Inicio
| Recurso | Por qué |
|---|---|
manifest.md | Saber qué ámbitos y recursos existen |
Presupuesto de Carga (Límite Máximo)
Esta skill tiene 125 archivos; leer todo antes de actuar = fracaso de la tarea.
| Restricción | Valor |
|---|---|
| Carga inicial (no cuenta en el presupuesto) | manifest.md — registro obligatorio, no consume cuota |
| Archivos de reglas adicionales a leer como máximo | 4 |
| Total de estos archivos juntos | ≤1200 líneas (límite real absoluto) |
| Archivo individual >400 líneas | Leer solo la sección § nombrada, no el archivo completo |
¿Por qué 4? El costo real son las líneas, no la cantidad de archivos (los 3 obligatorios de la línea Web solo ocupan el 37% de las 1200 líneas). El límite de archivos es una heurística para evitar «leer un poco aquí y allá»: 4 archivos × 300 líneas promedio ≈ 1200 líneas, ambas restricciones son consistentes. No uses la cuarta cuota como margen predeterminado para gastar libremente; antes de gastarla, sigue la decisión de colocación a continuación.
El presupuesto se gasta en este orden: ① Archivo principal del ámbito (domains/web/distilled-playbook.md / domains/poster/MODE.md / domains/brand/MODE.md) ② El archivo marcado como «obligatorio» en ese ámbito (ej. domains/web/anti-slop/MODE.md) ③ Solo si se necesitan valores específicos, leer la sección § correspondiente de shared/.
Según la estructura actual, para una tarea Web la lectura obligatoria son 3 archivos: distilled-playbook.md + domains/web/anti-slop/MODE.md + references/flow.md. Los tres niveles de materiales, la lista de fuentes locales y los escollos de ingeniería P1-P11 están en este archivo, no es necesario profundizar más. El propósito de la cuarta cuota: en la fase ④, leer shared/react-bits-assets.md (§0 + §3, prohibido leer las 1626 líneas completas). En el resto de los casos es margen (úsalo cuando realmente necesites una cuarta pieza, ver «Dónde colocar nuevas reglas»).
Los principios de ámbito se dividen por dominio (nivel de referencia, no consumen cuota obligatoria): núcleo común transversal shared/design-principles.md (§1.1–§1.12) + subconjuntos de ámbito shared/design-principles-web.md / shared/design-principles-brand.md / shared/design-principles-poster.md. Modo de carga: según el ámbito actual, cargar solo el subconjunto correspondiente, usar según sea necesario (por ejemplo, para tareas Web, en la fase ① de análisis competitivo / ③ de diseño del punto de recuerdo, leer las secciones correspondientes de design-principles-web.md), nivel de referencia, no cuenta en las 3 cuotas obligatorias, no es necesario leer todo el núcleo común.
references/gates.md y constraints.md son referencias opcionales (detalles de criterios / casos límite), no consumen estas 3 cuotas: consúltalas solo si es necesario, omítelas si no.
Prohibido: leer todos los archivos referenciados para «entender el panorama completo»; leer completamente shared/react-bits-assets.md (1626 líneas; para seleccionar componentes ver §3 clasificación / §5 detalles) o shared/design-philosophies.md (para seleccionar filosofía ver §Guía de selección); leer más de 4 archivos seguidos sin empezar a hacer.
Dónde Colocar Nuevas Reglas (Decisión de Colocación, Ir Aquí Primero Antes de Gastar Presupuesto)
Al añadir una nueva regla, evaluar en orden: si se acierta en los primeros tres pasos, no se permite crear un nuevo archivo:
- ¿Lo necesitan todos los ámbitos y todas las tareas? → Colocar en el archivo principal (el archivo principal no consume presupuesto — este es el costo correcto de las reglas de nivel obligatorio: si se usa cada vez, debe estar cada vez). Criterio: tanto una tarea de póster como una tarea de Web se equivocarían sin ella.
- ¿Pertenece solo al flujo de un ámbito? → Incorporarlo al archivo obligatorio existente de ese ámbito (por ejemplo, para web, incorporarlo a
distilled-playbook.md), sin crear un nuevo archivo. SSoT: es mejor usar subtítulos para dividir secciones que abrir un nuevo archivo. - ¿Solo son valores / detalles / tablas de consulta? → En el archivo correspondiente de
shared/, mantenerlo como referencia (no consume cuota obligatoria, consultar solo si es necesario). Si el archivo principal está relacionado, dejar un puntero. - ¿Nada de lo anterior, y realmente se usa cada vez? → Solo entonces se permite añadir un cuarto archivo obligatorio. En ese momento, registrar en «Consulta rápida de ámbitos» a qué línea de ámbito pertenece y confirmar que el límite total de 1200 líneas todavía es suficiente (actualmente la línea Web usa 439/1200).
Línea de advertencia del archivo principal: ≤400 líneas. Si se supera, priorizar la reducción del contenido «no usado cada vez» a referencias según el criterio (dejando un criterio de una oración), en lugar de seguir expandiéndolo — cada línea que crece el archivo principal, todas las tareas lo pagan una vez.
Agotar y parar: producir con el contenido ya leído, anotar al entregar «Saltar X (presupuesto de carga)». Un esquema completo basado en 3 archivos > leer 10 archivos sin producir.
Autoverificación Antes de Entregar (No Consume Presupuesto de Carga)
Después de generar el HTML, se recomienda ejecutar una renderización en navegador sin cabeza (npx playwright screenshot / Chrome·Edge local --headless --screenshot), al menos tomar una captura en 1440 y 390 de ancho cada una, y verificar tres cosas:
- ¿La primera pantalla está en blanco? — si las animaciones dependen de JS/IntersectionObserver para mostrarse, las máquinas lentas y las capturas de pantalla quedarán completamente blancas; el contenido de la primera pantalla debe ser directamente visible.
- ¿Hay desbordamiento horizontal o texto pegado a los bordes? — revisar si la abreviatura de
paddingde los bloques cubre el relleno izquierdo y derecho del contenedor. - ¿Los títulos se desbordan? — si un título supera las 3 líneas en ancho de escritorio, el límite superior de
clamp()o el tamaño de fuente están mal.
Si se encuentra un problema, corregirlo in situ. No entregar páginas no renderizadas. Mirando el código no se ven estos tres tipos de problemas.
Presupuesto de autoverificación (con límite máximo, para evitar convertir la autoverificación en una reparación infinita): como máximo 2 rondas, cada ronda 2 capturas (1440 / 390), una sola ronda ≤90 segundos. Si después de dos rondas aún hay problemas, parar y escribir los problemas restantes en la nota de entrega — la autoverificación es un medio para detectar tres tipos de problemas estructurales, no para ajustar la página a la perfección.
7 Principios Centrales de Diseño
Estos 7 principios son la guía del alma del diseño. No son una lista de verificación, son direcciones de pensamiento.
| Principio | Pregunta central | Significado |
|---|---|---|
| Con fundamento | Saber para quién se diseña y qué problema se resuelve | Aclarar antes de empezar: ¿quién es el usuario objetivo? ¿Qué debe hacer después de ver la página? ¿Cuál es el mensaje central a transmitir? Un diseño sin fundamento = autocomplacencia. |
| Con alma | Tener un tono unificador al que todas las decisiones sirven | «Si esta página fuera una persona, ¿cuál sería su carácter?» Definir con una palabra (ej. «elegante» / «poderoso» / «rebelde»). Los colores, fuentes, espaciados y animaciones posteriores giran en torno a esa palabra. |
| Con sistema | Todos los elementos obedecen a una misma gramática visual | Colores, fuentes, espaciados, duración de animaciones, retroalimentación de interacción: después de establecer reglas unificadas, cada nuevo elemento hereda automáticamente este sistema, sin necesidad de decisiones individuales. Ver shared/system-design.md §2 Elección del punto de partida de diseño + §3 Matriz de influencia de tres parámetros. |
| Con punto de recuerdo | Al menos una cosa que haga a la gente parar a mirar | Puede ser una forma única de interacción, una sensación de material, una forma de tratar el texto, una relación espacial. No necesita ser complejo: una idea simple ejecutada cuidadosamente vale más que diez efectos complejos toscos. |
| Con calidez | Transmitir emoción, no solo apilar información | ¿Qué sensación transmite la página? Tranquila, vibrante, cálida, misteriosa, tecnológica, natural. La emoción no es un adorno, es la fuerza motriz subyacente del diseño. |
| Con calidad | La entrega debe ser completa y utilizable, no un producto a medio hacer | Cada estado debe estar contemplado (carga/vacío/error/éxito), la adaptación móvil completa, soportar prefers-reduced-motion, usar variables CSS. |
| Con esmero | ¿Has tomado el diseño en serio? | No omitir contenido importante, no ser descuidado, no usar material de baja calidad para reemplazar el bueno, no hacerlo de cualquier manera. Cada detalle se toma en serio, con toda la dedicación, sin escatimar esfuerzos. |
Contrato de Fuente Única de Verdad (SSoT · Leer Antes de Modificar Este Archivo)
El principal modo de fallo pasado de este archivo: la misma regla copiada en 3-4 lugares — una copia en la tabla de flujo, otra en el punto de control estricto, otra en la puerta de calidad, y otra en las restricciones. La consecuencia no es «más seguro», sino ser tratado como una casilla de verificación vacía repetida: marcar una ya es suficiente, la regla en realidad deja de funcionar. Este es exactamente el mecanismo de formación de «cumplimiento en papel ≠ cumplimiento a nivel de código».
Responsabilidades por capas (el contenido nuevo se coloca según esto; un error de colocación se considera un defecto):
| Capa | Ubicación | Solo poner qué | Prohibido poner qué |
|---|---|---|---|
| Definición | Restricciones 0-9 de «Modo de trabajo», «Línea base común» | La definición única de la regla | — |
| Flujo | Tablas de cada fase del flujo de diseño adaptativo | Cuándo hacer qué + consultar qué archivo + puntero («según restricción X») | Prohibido repetir la definición de la restricción |
| Puerta | Puerta de ejecución de la cuarta fase, puerta de calidad, puerta de escollos de ingeniería | Acción de verificación / umbral PASS / preguntas de verificación | Prohibido reafirmar la definición institucional |
Prueba de colocación (pregunta obligatoria al añadir una regla): ¿Esta regla está definiendo o verificando? → Definición va a la capa de definición, verificación va a la capa de puerta, solo puede caer en una. → Además: las reglas de juicio (gusto, coherencia, riqueza, no se pueden determinar mecánicamente) van a la puerta de calidad; las reglas fácticas (verificables con grep/ls/aserción) van a la puerta de escollos de ingeniería. Si se coloca mal, esta regla queda invalidada.
Flujo de Diseño (6 Fases)
| Fase | Qué hacer | Entregable |
|---|---|---|
| ① Investigación y requisitos | Extraer requisitos implícitos, determinar ámbito, fijar tres parámetros | Reexpresión de requisitos (para CP1) + tres parámetros |
| ①.5 Razonamiento activo | Extender un requisito de una frase a un brief completo | Brief extendido |
| ② Bloqueo de inspiración | Bloquear directamente 1 dirección de máximo nivel (uno de los cuatro ejes) | Dirección + tensión central (para CP2) |
| ③ Concepto y narrativa | Arquitectura de información, narrativa de desplazamiento, mapa de intención | Intention Map (obligatorio; sin producir, no se puede pasar a ④) |
| ④ Diseño de sistemas | Gramática de diseño, inventario de animaciones, inventario de capacidades; para animaciones/componentes interactivos, consultar primero shared/react-bits-assets.md §0 (estado de cumplimiento: 11 locales ✅, el resto 🌐 necesita conexión) + §3 selección amplia, usar solo ✅ o crear equivalentes propios | Tabla de diseño del sistema + lista de capacidades ≥8-10 elementos (deben indicar la fuente del componente: react-bits ✅ / 🌐 / creación propia) |
| ⑤ Implementación visual | Fuentes / color / maquetación / aplicación de materiales | Página producto (HTML/CSS/JS, forma según shared/code-generation-strategy.md §3.1; incluye declaración de aplicación o degradación de fuentes y materiales) |
| ⑥ Interacción y entrega | Interacción, rendimiento, tres puertas | Producto final que supera las puertas (para CP4) + añadir una línea a usage-log.md (fecha / tarea / semilla / familia de ratón / componente) |
En la fase en la que se esté, leer solo la sección correspondiente de
references/flow.md— no es necesario leerla toda. Cada sección contiene tres columnas: «Qué hacer / Contenido específico / Qué consultar».
Bifurcación por ámbito (importante): Los 7 pasos anteriores son el flujo completo para Web. Los otros dos ámbitos siguen su propia línea, no apliques las fases y puertas de Web:
- Póster →
domains/poster/MODE.md§8, 5 pasos: definir tamaño → definir propuesta → elegir familia → organizar tres capas → autoverificación con miniatura. - Marca →
domains/brand/MODE.md, B1-B5: estrategia (método de 9 preguntas) → modo visual → Logotipo → Panel de marca → producción.
Vídeo → domains/video/MODE.md: primero decidir si se debe usar (§1) → definir rol y volumen (§2) → elegir ruta (§3) → fusionar (§4, el 90% de la falta de armonía está en las costuras) → pasar las comprobaciones de entrega V1-V9.
Herramientas son vías paralelas, no están en el bucle principal: PPT / exportación de vídeo / auditoría de renovación / pensamiento de diseño se activan de forma independiente (ver «Consulta rápida de ámbitos»), son paralelas a las 6 fases, no ocupan números de fase.
Restricciones del Modo de Trabajo 0-9 (Consulta Rápida)
| # | Regla | Criterio / Excepción |
|---|---|---|
| 0 | La instrucción explícita del usuario prevalece sobre el valor predeterminado general | Si entra en conflicto con una regla estricta, señalarlo y dar una alternativa; si el usuario insiste, obedecer |
| 1 | Bloquear directamente la dirección de máximo nivel, no presentar opciones paralelas | Uno de los cuatro ejes (contención extrema / densidad / movimiento / material) hasta el final; no degradar por dificultad de implementación (la dificultad solo afecta a la ruta de implementación, no al concepto) |
| 2 | = Ampliación del escenario de la restricción 1 | «Lo que sea» → 1 concepto; «Da 2-3 opciones para comparar» → solo entonces múltiples conceptos |
| 3 | Hacer solo una pregunta por cada cambio | Hacer varias preguntas = el usuario no puede atribuir la causa |
| 4 | La calidad prevalece sobre la velocidad | Animaciones sin motivación / ritmo completamente plano / estado faltante → parar y corregir |
| 5 | El número de secciones se determina por la planificación | <5 deben explicar «por qué la simplicidad es adecuada para este brief»; prohibido rellenar por rellenar, prohibido holgazanear |
| 6 | El modo es una semilla, no un esqueleto | Prohibido «elegir estilo → aplicar esqueleto», debe recomponerse in situ |
| 7 | Contrato de coherencia impulsado por semilla | Cada dimensión debe resonar con la semilla, o indicar claramente «omisión deliberada» |
| 8 | Disciplina de generación anticonservadora | ≥3 lenguajes técnicos; la interacción debe ser real; el texto también debe moverse |
| 9 | Disciplina de uso de la biblioteca de materiales | Primero bloquear la semilla → del mismo tipo en esta página ≤1 → escribir una declaración de uso |
| 10 | Congelar el concepto, prohibido tomar algo ya existente por comodidad | Primero enumerar «qué necesita el concepto» y luego consultar «qué tengo a mano»; la sustitución debe escribir «planeado / realmente hecho / por qué no es equivalente», la sustitución silenciosa = fracaso |
Las reglas completas, casos límite y principios (incluyendo los detalles de resolución de conflictos de la restricción 0) se encuentran en
references/constraints.md. La restricción 0 tiene la máxima prioridad, prevalece sobre las demás restricciones y puertas (excepto las líneas base de ingeniería).
Consulta Rápida de Puertas (Obligatorio Antes de Entregar)
| Puerta | Cuándo | Qué verificar | Si no se pasa |
|---|---|---|---|
| Puerta de ejecución | Antes de pasar a ⑤ | Inventario de capacidades ≥8-10 elementos (debe incluir ≥1 animación de texto / ≥1 WebGL·Canvas / ≥1 GSAP·coreografía de desplazamiento); la repetición del mismo tipo debe dar una razón de semilla (consultar usage-log.md); registro de obtención de red (qué se obtuvo → de dónde → resultado, A3); cuando la forma de entrega esté restringida, dar según el límite alcanzable e indicar la razón de la restricción, prohibido inventar u omitir en silencio | Completar el inventario antes de pasar |
| Puerta de calidad 7 principios | Final de ⑤ · antes de ⑥ | La entrega debe dar una decisión PASS/HOLD (taste-rules.md §8, prohibido aprobar con «en general está bien»); crítica 10 dimensiones + medios/animaciones/diagramación «contenido pero rico» + coherencia de semilla + 7 preguntas anticonservadoras | Volver a la fase correspondiente a corregir, prohibido entregar un producto a medio hacer |
| Puerta de escollos de ingeniería P1-P11 | Antes de entregar | Verificación mecánica con grep/ls: aplicación de fuentes, respaldo de CDN, desbordamiento horizontal, descenso de cursivas… | Corregir hasta PASS, prohibido entregar con FAIL |
Los detalles de criterios de la puerta de ejecución y la puerta de calidad se encuentran en
references/gates.md; los escollos de ingeniería P1-P11 se muestran a continuación, se usan cada vez, no se profundiza más.
Puerta de Escollos de Ingeniería P1-P11 (Ejecutar Uno por Uno Antes de Entregar)
División del trabajo con la puerta de calidad anterior (clave): La puerta de calidad juzga «está bien o mal» — gusto/coherencia/riqueza, pertenece a la categoría de juicio, depende de la estética, no se puede determinar mecánicamente. Esta puerta juzga «está roto o no» — defectos de ingeniería conocidos que realmente dañan la usabilidad/apariencia, pertenecen a la categoría de hechos, se basan en la verificación. Principio de inclusión: solo se incluyen elementos que se pueden verificar mecánicamente con
grep/ls/aserción en tiempo de ejecución. Las reglas de la categoría de juicio no entran en esta puerta (se quedan en la puerta de calidad), de lo contrario degenerarán en una casilla de verificación vacía de «autocertificación de cumplimiento». Ejecución: antes de entregar, ejecutar una por una; si alguna es FAIL → corregir y volver a verificar, prohibido entregar con FAIL.
| # | Escollo (realmente pisado) | Forma de verificar | Condición PASS |
|---|---|---|---|
| P1 | Solo el fondo se mueve, el contenido no (el más común, el que más daña la «sensación de conjunto») | grep el enlace de animación de desplazamiento de cada sección de contenido | El contenedor de contenido tiene un translateZ/scale/rotate vinculado al desplazamiento, no solo opacity/clip-path; y el fondo y el contenido están impulsados por el mismo progress |
| P2 | Las capas de profundidad/decoración cubren el contenido | Verificar la pila de z-index + pointer-events | Las capas de primer plano/decoración/ruido tienen z-index inferior a la capa de contenido, y todas tienen pointer-events:none |
| P3 | Parpadeo en transiciones / destellos molestos | Verificar el pico de opacity y duration de los elementos parpadeantes | Pico ≤ .4 y duración ≥ .3s (umbral cuantificable, más allá es molesto) |
| P4 | prefers-reduced-motion no se ha degradado realmente | grep la rama de la media query | Existe la rama y desactiva WebGL/animaciones pesadas/parpadeos, no solo acorta la duración |
| P5 | La fuente/JS se ha referenciado pero el archivo no se ha implementado | ls el directorio de salida assets/fonts/ y .js | El src de @font-face, el archivo apuntado por <script src> existe físicamente (excepción para entrega de un solo archivo: cambiar a verificar si la entrega contiene el fragmento @font-face + la lista de TTF); si se usa interactive-editing.js, su archivo también debe estar presente y la página debe usar variables CSS de forma integral (de lo contrario, el panel no puede ajustar parámetros) (misma verificación que la puerta de calidad 6, aquí es la acción de verificación) |
| P6 | Dependencia de CDN sin respaldo, si la biblioteca falta, pantalla en blanco/sin cursor | grep el <script> de CDN para ver si tiene rama de degradación | Cuando falla la carga de una biblioteca clave, la página sigue siendo legible, el cursor no desaparece (ocultar el cursor del sistema solo después de que JS confirme que está listo) |
| P7 | La animación mueve una propiedad no GPU | grep las propiedades de transition/animation/GSAP | Solo transform/opacity/filter (parámetros de cámara), sin width/top/left |
| P8 | No se ha degradado para móvil | Verificar el interruptor de WebGL en el punto de ruptura | ≤820px desactivar WebGL pesado, usar degradación CSS 3D |
| P9 | Chocar con una fuente AI-slop | grep font-family / @font-face | La fuente mostrada no es Inter / Fraunces / Instrument Serif (estas tres ya están muy usadas, ver anti-slop MODE.md) |
| P10 | La animación se sale de rango / la curva se sale de la familia | `grep -oE |