muhammad-ahmed-ghani/ai-website-builder

Constructor de sitios web con IA

Una aplicación es de clase mundial cuando cinco cosas son ciertas al mismo tiempo. Responde lo que la persona realmente quería. Se ve diferente a las demás y aún así convierte. Dice solo lo que es verdad. Todo en ella funciona. Y alguien la miró en un navegador real antes de decir que estaba terminada. Esta habilidad es el método para conseguir las cinco, en cualquier stack, solo o con agentes ayudantes.

Empieza aquí: ¿qué hará la gente EN ella?

Antes de cualquier llamada a una herramienta, decide cuál de estas estás construyendo. Lee references/01-read-the-request.md si no es obvio.

La persona pide...	Construye	Leer
Una aplicación sobre un negocio, persona, lugar o cosa que venden	Una aplicación de lectura: historia, pruebas reales que dieron, una forma de contactarlos	01, 02, 03, 09, 04, 10
Algo para USAR: un dashboard, herramienta, portal, "como Slack pero...", un rediseño de una herramienta funcional	Una aplicación funcional: / es la pantalla de trabajo, con datos demo y, si la gente inicia sesión, credenciales demo visibles	01, 05 primero, luego 03, 09, 04
Una actividad (aprender un idioma, práctica de examen, planificación, seguimiento) con una audiencia y sin negocio nombrado	Una aplicación funcional. Para aprendizaje: una página de inicio diseñada con secciones, luego lecciones, práctica, progreso. NO un folleto para una escuela inventada	01, 05, 09
Una página que presenta un producto existente	Una aplicación de lectura sobre ese producto	01, 02, 03, 09, 04, 10

La palabra "sitio web" en una solicitud no lo decide; las palabras del propietario ("mi academia", "nuestra tienda") y lo que la gente hará en ella sí lo hacen. En caso de duda, construye la ruta de aplicación funcional y dila en tu primer mensaje.

El bucle (detalles en references/00-operating-loop.md)

1. Lee la solicitud. Escribe .app-notes/brief.json (hechos con las palabras propias de la persona, desconocidos, suposiciones) y .app-notes/requirements.json (todo lo que dicen, ahora y después). Haz como máximo una pregunta agrupada, solo si una suposición incorrecta cambiaría la construcción.
2. Investigación y estrategia (junto al paso 3). Estudia la categoría real, escribe las nueve respuestas de estrategia y la tesis de diseño. references/02-research-and-strategy.md
3. Paneles de inspiración (junto al paso 2). Seis paneles por ronda; cada panel es UN diseño mostrado como cuatro pantallas de la misma aplicación, de aproximadamente 2048 x 1280; la persona puede pedir más rondas hasta que esté satisfecha. Los seis provienen de seis mundos candidatos en la cultura de la audiencia, no de seis adjetivos (references/09-design-craft.md sección 2). references/03-design-direction.md
4. Conceptos, pruebas, panel. Un concepto por panel, estructuralmente diferente; renderiza cada uno como una página real; puntúalos; elige.
5. Vincula la dirección. DESIGN.md, tokens.css, fonts.css, verificación de contraste, un plano por página.
6. Planifica. Páginas y secciones con trabajos de una línea, funciones con pasos de aceptación ejecutables, imágenes con trabajos.
7. Construye. Primero la base, luego los constructores de página en paralelo, luego un integrador. Solo tokens, copia real, imágenes reales, controles funcionales. references/04-build-system.md, y 05-working-apps.md para aplicaciones funcionales.
8. Verifica con scripts/check-app.mjs en la compilación de producción: tres tamaños, desplázate como lo haría un visitante, imágenes, hechos medidos, un escaneo de diseño (contraste, tipografía, jerarquía, texto cubierto, dice el generador), flujos de funciones, un tour grabado. references/06-qa-and-repair.md
9. Critica, luego repara. Juzga el diseño primero, sin anclaje; luego lee el escaneo; luego ejecuta los pases nombrados (diseño, tipografía, color, más audaz, endurecer, pulir...) uno a la vez, cada uno con alcance definido, cada uno terminando con evidencia. Arregla las causas; vuelve a verificar; deshaz lo que empeoró. references/09-design-craft.md
10. Pulir contra la imagen elegida, luego informa honestamente solo a partir de mediciones.

No te saltes los pasos 3, 4, 8 y 9: son donde una aplicación deja de ser una plantilla y donde "terminado" deja de ser una afirmación. Ejecuta los pasos independientes juntos.

No negociables

1. La honestidad está por encima de todo. Nunca inventes testimonios, logotipos, prensa, valoraciones, estadísticas, premios, miembros del equipo, direcciones, correos electrónicos, números de teléfono, precios, horarios, tiempos de respuesta, políticas, garantías o calificaciones. Un hecho que falta se omite (por defecto), se convierte en una invitación, o se marca una vez con un <Draft> visible para el propietario. Contar lo que la persona no enumeró es inventar. Los datos de muestra en una aplicación funcional solo se permiten porque la aplicación dice "Datos demo" en pantalla.
2. Nada finge que funciona. No href="#", ningún formulario que no lleve a ninguna parte, ningún botón deshabilitado "aún no conectado", ningún servicio de formulario de terceros que la persona no eligió, ningún inicio de sesión que acepte cualquier cosa. Conéctalo de verdad o déjalo fuera y dilo.
3. Nunca afirmes lo que no se midió. No "probado", "verificado", "accesible", "pulido" o "responsivo" sin evidencia para esa afirmación exacta. "No se pudo mirar" nunca es "limpio". Nunca digas que el trabajo ha comenzado a menos que hayas hecho la llamada que lo inicia.
4. Decide el aspecto a partir de imágenes, antes del código, y construye según la imagen elegida. Sin apariencias genéricas. Rechaza las señales de IA de primer y segundo orden a menos que el mundo de este cliente las justifique (09 las enumera como reglas que mide el script de QA; un hallazgo de review se mantiene solo con una razón).
5. Un sistema de diseño. El color, la tipografía, el radio, la sombra y la suavidad provienen solo de los tokens. Como máximo dos familias tipográficas. Un momento de firma y una imperfección deliberada. El acento se usa con moderación.
6. Las imágenes son generosas, art-directed y nunca falsas. Aproximadamente una por pantalla de desplazamiento, un estilo compartido, a través del manifiesto de imágenes, texto alternativo real; sin imágenes SVG dibujadas a mano de objetos o personas; sin letras dentro de imágenes; sin imágenes de IA subtituladas como un evento real.
7. Idioma correcto, escritura correcta. lang y dir configurados; escritura real (nunca transliteración que la sustituya); propiedades CSS lógicas; las traducciones que no puedas verificar se marcan para el propietario.
8. Todo lo que la persona dice se registra y se usa. Los seguimientos, indicaciones y respuestas van al registro de requisitos y son leídos por cada paso posterior. Un seguimiento continúa el mismo proyecto.
9. La evidencia supera al código. Cada afirmación visual proviene de una imagen que miraste en esta ejecución, a 390, 768 y 1440.
10. Arregla las causas, el cambio más pequeño. Reproduce, arregla la causa, vuelve a verificar. Dos parches fallidos: reescribe el componente. Un defecto dentro de una imagen generada necesita una imagen nueva, no CSS.

El iniciador y los scripts

<skill> a continuación es la carpeta donde está este SKILL.md (por ejemplo ~/.claude/skills/ai-website-builder). Ejecuta los scripts desde la carpeta del proyecto.

bash <skill>/scripts/scaffold.sh ./my-app [--app]           # copia el iniciador, instala, lint, compila (--app añade src/app/ para una aplicación funcional)
node <skill>/scripts/contrast.mjs --tokens src/styles/tokens.css   # cada par de colores que usa un componente, claro y oscuro
node <skill>/scripts/optimize-images.mjs --src .app-notes/originals --alt .app-notes/alt.json   # conjunto avif + webp y el manifiesto
pnpm build && pnpm preview                                  # sirve la compilación de PRODUCCIÓN (déjala ejecutándose)
node <skill>/scripts/check-app.mjs --url http://localhost:4173 --flows .app-notes/flows.json --tour [--extremes]
                                                            # imágenes, hechos medidos, escaneo de diseño, flujos de funciones, visita grabada, informe
                                                            # --extremes añade 320x640 y 1920x1080; --no-design omite el escaneo

El script de QA necesita Playwright (pnpm add -D playwright && npx playwright install chromium) o --chrome /path/to/chrome. El optimizador necesita sharp.

assets/template/ es Vite + React 19 + TypeScript + Tailwind v4 con prerenderizado por ruta, un contrato de tokens, 18 primitivas de UI, un kit de movimiento, un kit inmersivo, un kit de aplicación y un lint que falla la compilación en los errores habituales. Su AGENTS.md es el mapa de archivos autorizado; STANDALONE.md dice qué hacer manualmente sin una plataforma de alojamiento (tokens de autor, hacer imágenes, configurar el endpoint del formulario). Para una aplicación funcional usa scaffold.sh --app (escribe src/app/{accounts,db,seed}.ts; una aplicación a la que nadie inicia sesión mantiene demoAccounts vacío). Usa otro stack si el proyecto de la persona ya tiene uno: el método, las reglas y los scripts no dependen de la plantilla.

Usar ayudantes

Con una herramienta de subagente, divide según references/08-role-briefs.md y dale a cada ayudante un alcance de escritura disjunto (base: archivos compartidos; constructores de página: una carpeta de página cada uno; integrador al final). Solo, sigue el mismo orden. Mantén una lista de tareas compartida: los elementos de la persona son suyos para cambiar; no devuelvas mientras haya uno abierto que se ajuste a tu parte; al final, cada elemento está hecho, bloqueado con una nota, o no hecho con una razón.

El informe de cierre (solo a partir de mediciones)

Lo que construiste (páginas, funciones); para una aplicación funcional, qué es real y qué es simulado; qué debe proporcionar la persona; qué se verificó (veredicto) y qué NO; qué sigue abierto en palabras sencillas; por requisito: construido y verificado, construido no verificado, o no hecho y por qué. Corto, sencillo, sin tono de marketing. Usa assets/checklists/done.md antes de enviarlo.

Mapa de referencias

Archivo	Léelo cuando
references/00-operating-loop.md	planificar la ejecución, dividir el trabajo, mantener los registros y la lista de tareas
references/01-read-the-request.md	los primeros diez minutos de cada trabajo; aplicación de lectura o aplicación funcional; idioma; afirmaciones; seguimientos
references/02-research-and-strategy.md	investigar la categoría, escribir la estrategia y la tesis de diseño, elegir los esqueletos de página
references/03-design-direction.md	paneles, conceptos, movimientos, tipografía, leyes de artesanía, señales de IA, pruebas, panel, fidelidad
references/04-build-system.md	escribir código: tokens, páginas, copia, formularios, imágenes, movimiento, SEO, accesibilidad, presupuestos
references/05-working-apps.md	cualquier cosa que la gente use: backend demo, inicio de sesión, regiones, flujos, aplicaciones de aprendizaje
references/06-qa-and-repair.md	verificar, juzgar, reparar, crítica, el informe de cierre
references/07-failure-catalogue.md	antes de empezar y antes de informar: lo que salió mal antes y la cura
references/08-role-briefs.md	informar a los agentes ayudantes; mapear nombres de herramientas
references/09-design-craft.md	elegir cuánto presionar (modos de visitante), construir un mundo, pisos de color y tipografía, las señales como reglas, los pases de refinamiento, las dos evaluaciones, puntuación
references/10-copy-and-voice.md	escribir o revisar cualquier palabra en la aplicación: voz a partir de hechos, reglas de ranura, las señales de prosa generada
references/11-listening-to-the-audience.md	el paso de investigación: escuchar las preocupaciones y palabras de la audiencia sin tomar prestadas sus afirmaciones
references/12-diagrams.md	una imagen de cómo funciona, proceso, flujo o arquitectura; construida en marcado a partir de tokens
references/13-reference-teardown.md	medir hasta tres aplicaciones de referencia por artesanía y estructura durante la investigación
references/14-scripts-and-app-jobs.md	fuentes para una escritura no latina; qué vienen a hacer los visitantes en cada tipo de aplicación; adiciones de accesibilidad
references/15-redesign-and-extension.md	ya existe una aplicación: regístrala, elige pulir, reestilizar o completa, demuestra que no se perdió nada
references/NOTICE.md	créditos y licencias de los proyectos públicos de los que esta habilidad aprendió
assets/checklists/brief.md, done.md	las formas de los registros; la última comprobación