Arquitecto de Concepto Web
Diseño conceptual previo al código para sitios personales, portafolios y páginas de aterrizaje. Este skill produce dirección, no maquetado. El entregable es un conjunto pequeño de documentos conceptuales distintos de los que el usuario elige; el elegido alimenta a ui-ux-architect para la implementación.
Cuándo usarlo
El usuario está comenzando un nuevo sitio web y quiere decidir qué es antes de escribir código. No aplica para rediseños de sitios en funcionamiento a menos que el briefing sea «repiensa desde cero». Tampoco para decisiones de UI a nivel de componentes — eso pertenece a ui-ux-architect.
1. Principio operativo — camina, no vuelques
Ejecuta las seis etapas de forma interactiva, una a la vez. Después de cada etapa, presenta el menú, pausa, espera la elección del usuario y avanza. Nunca colapses varias etapas en una sola pregunta. Nunca te saltes etapas aunque el usuario se adelante con información — muestra lo que dijo como un valor preseleccionado y confírmalo.
El objetivo de la caminata es forzar decisiones que el usuario de otro modo postergaría. Saltarse una etapa significa un documento conceptual vago más adelante.
2. Las seis etapas
| # | Etapa | Propósito | Salida |
|---|---|---|---|
| 1 | Propósito | ¿Para qué es el sitio? | 1-2 selecciones de la lista de arquetipos |
| 2 | Audiencia | ¿Quién lo lee? | 1-2 selecciones, define tono y densidad |
| 3 | Inventario de contenido | ¿Qué vive en él? | Menú de secciones marcadas |
| 4 | Tono y personalidad | ¿Cómo se siente? | 2-3 adjetivos de una lista curada |
| 5 | Dirección visual | ¿Cómo se ve? | 1 arquetipo (sugerencias rankeadas, lista completa mostrada) |
| 6 | Síntesis | Documentos conceptuales | 2-3 direcciones conceptuales distintas + wireframe ASCII |
3. Etapa 1 — Propósito
Presenta estos arquetipos. El usuario elige 1-2 (combinables, ej. portafolio + centro de escritura):
- Portafolio / vitrina — los artefactos de trabajo son el centro; los proyectos son la columna vertebral de la arquitectura de la información.
- Centro de escritura — ensayos / blog / notas son la columna vertebral; todo lo demás es navegación.
- Tarjeta de presentación profesional — una sola página o casi una; reclutadores / clientes aterrizan, conocen, contactan.
- Jardín digital — notas interconectadas siempre verdes; la estructura es la red, no la cronología.
- Lanzador de proyecto — un producto o proyecto específico es el héroe; «acerca de mí» es una nota al pie.
- Laboratorio experimental — el sitio mismo es un artefacto creativo; la convención es la enemiga.
Si el usuario elige 2 arquetipos incompatibles (ej. laboratorio experimental + tarjeta de presentación profesional), señálalo y pregunta cuál gana en la página de inicio — el perdedor se convierte en una subsección.
4. Etapa 2 — Audiencia
Las elecciones definen cuánta explicación necesitan las cosas y qué voz encaja.
- Reclutadores / clientes — hojeo rápido, primero las credenciales, poco argot, contacto visible.
- Compañeros desarrolladores / pares — asume vocabulario compartido, tolera densidad, ejemplos de código funcionan.
- Amigos / comunidad — informal, personalidad al frente, bromas internas aceptables.
- Futuro-tú / archivo — construido para buscar tu propio pasado, densidad sobre pulido.
- La web abierta — visitante genérico, debe autoexplicarse, SEO importa.
La multi-audiencia es normal. Si elige 3+, pregunta para cuál está optimizada la página de inicio — las demás se acomodan en subpáginas.
5. Etapa 3 — Inventario de contenido
Presenta este menú. El usuario marca lo que quiere; ofrece agregar elementos personalizados.
Secciones estándar:
- Acerca de / biografía
- Página «ahora» (en qué te enfocas actualmente)
- Índice de proyectos
- Casos de estudio de proyectos individuales
- Ensayos / blog / escritura
- Notas / jardín digital / wiki
- Lista de lecturas / estantería
- Página «usos» (herramientas, hardware, configuración)
- Currículum / CV (o enlace a PDF)
- Contacto (email, redes sociales, formulario)
- Suscripción al boletín
- Feed RSS / Atom
- Registro de cambios (actualizaciones del sitio o de la vida)
- Galería de fotos
- Charlas / podcasts / apariciones
- Libro de visitas / webring (estética retro-web)
Para cada sección marcada, haz una pregunta de seguimiento: ¿esto ya existe? Las secciones sin contenido se marcan como [diferido] en el documento conceptual para que el usuario no publique páginas vacías.
6. Etapa 4 — Tono y personalidad
Elige 2-3 adjetivos. Estos anclan las sugerencias visuales de la etapa 5 y la voz de copia de la etapa 6.
Preséntalos como pares opuestos para que las elecciones fuercen concesiones:
- minimalista ↔ denso
- juguetón ↔ serio
- cálido ↔ clínico
- crudo ↔ pulido
- íntimo ↔ público
- experimental ↔ convencional
- rápido / escaneable ↔ contemplativo / de lectura larga
- seguro ↔ autocrítico
Un usuario que elige minimalista + juguetón + cálido recibe sugerencias muy diferentes que denso + serio + clínico. Registra las elecciones textualmente — pasan al documento conceptual como el briefing.
7. Etapa 5 — Dirección visual
Ocho arquetipos. Rankea los 3 primeros por ajuste según las etapas 1-4, pero muestra la lista completa para que el usuario pueda anular.
| Arquetipo | Sensación | Ajusta cuando las etapas 1-4 dicen... | Sitios de referencia |
|---|---|---|---|
| Terminal / CLI | monoespaciado, escaso, línea de comandos | audiencia dev, minimalista, crudo, archivo | sive.rs, wiki.nikiv.dev, ratfactor.com |
| Editorial / Suizo | tipografía fuerte, cuadrícula, mucho espacio en blanco | pulido, serio, tarjeta de presentación profesional | rauno.me, paco.me, linear.app |
| Brutalista | HTML crudo, estilos por defecto, sin cromo | experimental, crudo, íntimo, audiencia dev | brutalist-web.design, motherfuckingwebsite.com |
| Fanzine / maximalista | collage, fuentes mezcladas, texturas en capas | juguetón, experimental, audiencia comunitaria | cassie.codes, lynnandtonic.com |
| Portafolio minimalista | columna única, imágenes grandes, mucho espacio en blanco | portafolio, pulido, reclutadores/clientes | muchos portafolios de diseñadores |
| Cuaderno / jardín | tipo wiki, enlaces densos, siempre verde | jardín digital, audiencia archivo, denso | gwern.net, andymatuschak.org |
| Revista / historia | narrativa de scroll largo, dirigida artísticamente, imágenes heroicas | lanzador de proyecto, contemplativo, web abierta | largas lecturas de pitchfork.com, reportajes de the verge |
| Base de datos / índice | tabla filtrable, casi una UI | denso, archivo, muchos artefactos | perfiles de are.na, directorio /now de derek sivers |
Muestra el ranking con una oración de justificación por elección, ej. «Terminal/CLI encaja porque elegiste audiencia dev + minimalista + crudo.» El usuario elige uno; si anula el ranking, pregunta por qué y regístralo (la anulación a menudo revela una restricción no detectada antes).
8. Etapa 6 — Síntesis
Produce 2-3 direcciones conceptuales distintas, no una. Incluso si el usuario ya está decidido, las alternativas exponen qué está sacrificando.
Forma del documento conceptual
Para cada dirección, escribe un documento markdown con estas secciones:
# Concepto: <nombre>
## Pitch de una línea
<el sitio en 15 palabras o menos>
## Brief
- Propósito: <selecciones de etapa 1>
- Audiencia: <selecciones de etapa 2, primaria primero>
- Tono: <adjetivos de etapa 3>
- Arquetipo visual: <selección de etapa 5>
## Arquitectura de información
<árbol de páginas/secciones, máximo 2 niveles de profundidad>
## Estrategia de página de inicio
<qué hace la página de inicio en 2-3 oraciones — primera impresión, acción principal, qué sabe el visitante al irse>
## Muestra de voz de copia
<2-3 oraciones en la voz elegida — introducción de la sección «Acerca de», o eslogan + subtítulo de la página de inicio>
## Qué sacrifica este concepto
<lista honesta de lo que se ha despriorizado frente a los otros conceptos — todo concepto intercambia algo>
## Wireframe ASCII de página de inicio
<ver §9>
Las tres direcciones deben diferenciarse en un eje real, no ser variantes cosméticas:
- Concepto A = la lectura obvia de las elecciones del usuario
- Concepto B = optimiza más para la audiencia primaria (a menudo más minimalista)
- Concepto C = un estiramiento deliberado — ¿y si el dial experimental girara un paso más?
Si dos de los tres terminan siendo casi idénticos, elimina uno y explica por qué.
9. Wireframe ASCII de página de inicio
Uno por concepto. Mantenlo a 80 columnas de ancho, etiqueta las regiones con [CORCHETES]. Muestra la jerarquía con dibujos de caja o guiones simples.
Ejemplo para un portafolio terminal/CLI:
+------------------------------------------------------------------------------+
| ~ ejemplo.dev [ahora] [escribir] [/] |
+------------------------------------------------------------------------------+
| |
| jane doe |
| desarrollador backend · tooling · CLIs de código abierto |
| |
| > actualmente construyendo una pequeña herramienta de caché de compilación en Go |
| |
| --- recientes ---------------------------------------------------------- |
| 2026-05-18 lanzó: cachetool v0.3 |
| 2026-05-02 ensayo: por qué mantengo mis herramientas en un repo |
| 2026-04-21 proyecto: internals de build-cache |
| |
| --- proyectos -------------------------------------------------------- |
| cachetool caché de compilación incremental [→] |
| notas escritos breves sobre tooling [→] |
| |
+------------------------------------------------------------------------------+
| email · github · rss |
+------------------------------------------------------------------------------+
Los wireframes tratan sobre proporción y jerarquía, no sobre diseño de píxeles. Sin colores, sin fuentes, sin íconos más allá de ASCII. Si una sección necesita explicación, añade una nota de una línea debajo del wireframe, no dentro de él.
10. Antipatrones
- Saltarse etapas porque «el usuario ya lo dijo». Presenta su entrada como valor por defecto y confírmalo; no asumas. La mitad del valor está en forzar al usuario a mirar lo que no dijo.
- Un solo documento conceptual en lugar de 2-3. Las alternativas son cómo el usuario entiende lo que está eligiendo. Una salida de un solo concepto es una ejecución fallida.
- Arquetipo visual antes de fijar el tono. El orden de las etapas importa — lo visual es aguas abajo del propósito/audiencia/tono, no paralelo.
- Rellenar contenido para secciones
[diferido]. Si el usuario no ha escrito los ensayos, no inventes listas de temas — el documento conceptual se compromete con la estructura, no con el contenido. - Wireframes con detalles de implementación. No «usa shadcn Card aquí» — eso es trabajo de ui-ux-architect. Los wireframes muestran qué va dónde.
- Sugerencias genéricas. «Un portafolio moderno y limpio» no es un concepto. Cada documento conceptual debe comprometerse con elecciones específicas en cada eje.
11. Transferencia
Una vez que el usuario elige uno de los 2-3 conceptos, el documento conceptual es el briefing para:
- ui-ux-architect — para tokens, componentes, accesibilidad, los cuatro estados requeridos.
- El skill
frontend-designincorporado — para el código real si se va a nivel de producción.
El documento conceptual debe guardarse en el repositorio del proyecto (ej. docs/concepto.md) para que perdure como la justificación del diseño.
12. Vínculos entre skills
- ui-ux-architect — estándares de implementación; este skill le proporciona el briefing.
- demo-presentation-architect — estructura interactiva similar de caminata guiada, dominio diferente.
- demo-script-architect — principios narrativos (audiencia primero, revelación progresiva) aplican también a la copia de la página de inicio.