brandvm/webflow-prototype

Prototipo Webflow: diseño de Figma → prototipo localhost aprobado

La primera fase de un proyecto. Cada sitio comienza desde un archivo de Figma, y su diseño se construye en código, en las URLs y puntos de interrupción reales, con las variables y nombres de clase que tendrá Webflow, y se aprueba página por página. Lo que sale no es un mock: es el marcado, las clases, los módulos y la lista de pasos manuales desde los que comienza la construcción en Webflow.

Esta fase nunca escribe en Webflow. Lee el sitio (el snapshot) y propone cambios; las escrituras pertenecen a la habilidad webflow-build, en su propia sesión, después de que el prototipo esté aprobado.

• checklists.md controla las entradas, cada página del prototipo y la entrega.
• prototype-starter/ es la carpeta de prototipo desde la que arranca un proyecto (pnpm new-project la copia).
• figma.md lee el archivo de Figma a través del conector de Figma: frames por punto de interrupción, capturas de pantalla, variables, medidas.
• Los pasos que construyen una página desde sus frames están en webflow-build (SKILL.md › El prototipo, desde Figma), los mismos que sigue el AI de Bench. La etapa de Prototipo de su checklists.md sigue el prototipo hasta la aprobación del cliente.
• La habilidad webflow-style-guide crea la guía de estilos, la primera página del prototipo.
• conventions.md (en webflow-build) establece la estructura de página y sección, y la nomenclatura de clases y variables que sigue el prototipo; lessons/ contiene lo que costó tiempo en construcciones anteriores.
• rules.md contiene las reglas que comparten todas las habilidades de Webflow (sin commit ni push sin OK, Designer primero, sin credenciales en el chat), el cierre de sesión y cómo contribuir.

Cada elemento de la checklist dice quién lo hace: [Claude], [Claude checks] (Claude verifica e informa; una persona arregla lo que Claude no puede) o [Person] (Claude puede recordar y hacer seguimiento, nunca lo reclama).

Inicio de sesión (cada sesión)

1. Lee el CLAUDE.md del workspace, luego AGENTS.md y GOTCHAS.md del repositorio, luego docs/handoff/. Hojea lessons/README.md; las lecciones del importador en lessons/mcp.md deciden cómo se escribe el marcado del prototipo.
2. Lee la memoria del proyecto: dónde se detuvo la última sesión, preguntas abiertas. Di en una línea cómo están las cosas y qué sigue.
3. En un proyecto nuevo, ejecuta primero Antes del prototipo en checklists.md. Si falta una entrada, pídela; no adivines contenido, estados o campos SEO.
4. El servidor de desarrollo del prototipo está en ejecución (pnpm dev en prototype/).
5. El alcance de hoy es una página. Dilo.

Configuración del proyecto (proyecto nuevo)

En Bench, Añadir cliente › desde un diseño de Figma configura la carpeta del cliente, el repositorio desde esta plantilla y un prototype/ vacío, luego construye el prototipo desde los frames que la persona elige (paso 6). Los pasos de la persona (4) y las entradas siguen aplicando.

No en Bench, el flujo comienza desde un mensaje (README › Iniciar un proyecto), p.ej. "Nuevo proyecto: sitio Webflow , Figma . Configura el repo y el workspace, ejecuta Antes del prototipo, luego construye el prototipo desde el archivo de Figma página por página; espera mi visto bueno antes de cualquier cambio en Webflow."

Antes, una persona ha creado el repo desde la plantilla en GitHub, lo ha clonado en su propia carpeta de cliente (<Cliente>/wf-<cliente>/), y ha duplicado el sitio starter bajo el nombre del cliente (starter-site.md).

1. Habilidades primero. Ofrece pnpm update-skills (pregunta; reemplaza ediciones locales de habilidades), para que el proyecto comience con las últimas lecciones.

2. Encuentra el sitio. A través del conector de Webflow, lista los sitios y busca el nombre que la persona dio: el ID del sitio y el nombre corto (el subdominio de staging, <nombre corto>.webflow.io). Dos coincidencias o ninguna → pregunta. Lee la org y el repo de GitHub de git remote get-url origin.

3. Rellena el repositorio y configura el workspace:

   pnpm install
   pnpm new-project --client "<Cliente>" --slug <nombre corto> --org <org> --site-id <id>
   

   Rellena los datos del proyecto en AGENTS.md, el nombre en package.json, REPO en loader.html y el título de entrega, y escribe webflow-build.config.json. Alrededor del repo crea el workspace: <Cliente>/CLAUDE.md (importa AGENTS.md, GOTCHAS.md y docs/handoff/), .mcp.json, enlaces a las habilidades, prototype/ (una copia de prototype-starter/) y Assets/. Escribe el enlace de Figma en el CLAUDE.md del workspace (línea de Diseño). Pregunta por cualquier valor que no puedas encontrar; nunca adivines.

4. Enumera los pasos de la persona, en este orden, y hazles seguimiento en docs/handoff/MANUAL-TODO.md hasta que estén hechos:

   1. Configuración del Repositorio → Pages → Source: GitHub Actions; añade el equipo de desarrolladores.
   2. Primer push: Claude pide hacer commit de la configuración; después del push, el workflow de staging debe pasar (https://<org>.github.io/<repo>/styles.css debe cargar).
   3. Pega el loader desde loader.html (ORG y REPO ahora están rellenados): código en head y código en footer en la configuración del sitio. Los embeds 2a y 2b ya están en G | Components con placeholders: Claude los rellena a través del MCP después del visto bueno, o la persona los pega.
   4. Contraseña de staging y noindex hasta el lanzamiento.

5. Muévete al workspace. Desde la siguiente sesión, Claude se abre en <Cliente>/, no en el repo: ahí es donde están configurados el servidor MCP, las habilidades y las importaciones. Ejecuta pnpm install en prototype/.

6. Entradas, luego el prototipo. Ejecuta Antes del prototipo en checklists.md (incluye el plan de componentes y la lista de videos), lee el archivo de Figma (figma.md), toma el snapshot de Webflow, y construye el prototipo desde el archivo: primero la guía de estilos (habilidad webflow-style-guide), aprobada antes de cualquier página de contenido, luego página por página desde los frames seleccionados (webflow-build › El prototipo, desde Figma), cada una pasando Página de prototipo terminada.

7. Rellena docs/handoff/HANDOFF.md a partir del diseño; mantén MANUAL-TODO.md y BUILD-NOTES.md actualizados desde la primera sesión.

El prototipo

• Refleja Webflow: las mismas URLs, los mismos puntos de interrupción (991, 767, 479), los nombres de clase de Webflow, y la estructura de página, shell y sección de conventions.md. Nav y footer son parciales individuales (un componente cada uno).
• Marca componentes y CMS: data-component="<Nombre del componente>" en la raíz de una instancia de componente (el Nav y el Footer parciales tienen el suyo), data-prop="<Nombre de la propiedad>" en lo que establece una propiedad de componente, data-collection="<Nombre de la colección>" en un wrapper de Collection List y data-field="<Nombre del campo>" en un elemento vinculado a un campo CMS (en un elemento de lista o en una página de plantilla CMS). Nada visible cambia, y no se crean en Webflow, que tiene sus propios componentes y enlaces CMS (prototype-starter/README.md › Marcadores de componente y CMS).
• Lee las variables del sitio desde un snapshot de Webflow (prototype-starter/README.md › Snapshot de Webflow). Después de escribir o actualizar el snapshot: pnpm css, luego pnpm check:snapshot, luego pnpm check:drift, que compara el snapshot con la hoja de estilo que publica el sitio de staging y lista cada variable, clase y valor que difiera (publica primero en staging).
• ¿Sin conector de Webflow? (no configurado aún, conectado a otro sitio, o no se permite llamada MCP) pnpm css:published <URL de staging> construye tokens.css, webflow.css y webflow-base.css desde el CSS que publica el sitio (solo GET; el CSS por página se lee página por página y se fusiona), y recupera el snapshot hasta donde el CSS lo permite. El CSS es exacto; los nombres del Designer, nombres de modo, clases vacías e interacciones no están en él (el encabezado del script lista todo lo que adivina), así que di en HANDOFF.md que el snapshot es un sustituto, nunca propongas una variable o clase por un nombre adivinado sin verificarlo en el Designer, y reemplaza el snapshot desde el MCP tan pronto como esté disponible (borra webflow-snapshot/source.json, luego pnpm css). Mientras exista source.json, pnpm css se niega a ejecutarse.
• Los cambios de variables se proponen, nunca se hacen: como antiguo → nuevo en proposed.css, agrupados y con letras para aprobación. Las nuevas clases van en new-classes*.css, escritas como el Designer puede sostenerlas.
• El marcado se escribe para el importador: las formas son divs, no spans vacíos; los controles de formulario están dentro de un <form>; los atributos booleanos llevan un valor; un salto de línea tiene   antes; los módulos dependen de hooks data-*, no de nombres de clase. pnpm wf:preflight verifica todo.

Orden.

1. Snapshot, pnpm css, pnpm check:snapshot, pnpm check:drift (sin conector: pnpm css:published, luego las mismas comprobaciones).
2. La guía de estilos (habilidad webflow-style-guide), aprobada antes de cualquier página de contenido.
3. Páginas, una a la vez, desde sus frames de Figma (webflow-build › El prototipo, desde Figma). Por cada una: constrúyela; añade la fila para cada clase o componente que introdujo (pnpm style-guide); pnpm screens (cada ancho de 2560 a 360: desbordamiento y errores) y pnpm check:states (estados focus y pressed); ejecuta Página de prototipo terminada; la persona la aprueba en 1440, 820, 667 y 390.
4. El cliente aprueba el prototipo por escrito.
5. La entrega (a continuación).

Entregando a la construcción

Ejecuta Entrega del prototipo en checklists.md. El paquete desde el que comienza la sesión de construcción:

• docs/handoff/HANDOFF.md: páginas, variables y clases, CMS, componentes a crear, módulos y sus hooks, la lista de videos.
• pnpm wf:styles: cada nueva clase clasificada en lo que el conector puede crear, lo que una persona establece a mano en el Designer (ya filas en MANUAL-TODO.md) y lo que va al CSS del repo.
• pnpm wf:preflight: los pasos conocidos del importador por página.
• El prototipo aprobado en sí mismo, en ejecución, como referencia contra la que se compara la construcción (pnpm wf:compare, wf:pass).

Luego da a la persona el mensaje que inicia la sesión de construcción, rellenado, para que lo pegue en una nueva sesión abierta en la carpeta del workspace:

Continuar : construir en Webflow. El prototipo está aprobado (cada página y la guía de estilos, ). Lee el CLAUDE.md del workspace, docs/handoff/ y la habilidad webflow-build. Empieza con la base: propón el lote de variables de proposed.css y espera mi visto bueno antes de cada escritura en Webflow. Luego etiqueta estilos, clases (desde el plan de estilos), colecciones CMS, el puerto del repo y el loader, la página de la guía de estilos, la página de medios (si la lista de videos tiene entradas), componentes y páginas, una página por sesión.

La construcción se ejecuta en su propia sesión para que cargue solo las reglas de construcción, y para que el prototipo permanezca intacto como referencia.

Ritmo de trabajo

• Una página por sesión, completamente terminada: construida, verificada en cada ancho, sus estados hechos, Página de prototipo terminada ejecutada, entrega actualizada.
• docs/handoff/ se mantiene actualizado durante la sesión, no al final: una decisión va a HANDOFF.md cuando se toma.
• Las lecciones se devuelven. Al cierre, ofrece cada lección template-candidate a la plantilla (rules.md › Contribuir).