Create Amazing Website
Tu web entera, de punta a punta, con un solo comando.
La skill con la que trabajamos en el estudio. Le contás qué web querés y tu agente la lleva por diecinueve pasos: estructura, marca, diseño, código y la web publicada. Guarda todo en el proyecto, así que mañana sigue donde quedó.
En ChatGPT o Codex, pegá esto:
Instalá esta skill: https://github.com/themariscalproject/themariscal-create-amazing-website-skillOficialSkill oficial de The Mariscal · 19 pasos · versión 1.0.0 · licencia MIT
Antes de instalarla, leé la guía.
Si es tu primera web con un agente, empezá por acá. Se lee en el navegador, sin crear cuenta, y te deja listo para usar la skill.
Cómo crear un sitio web impresionante con ChatGPT. Gratis, Sin cuenta, 14 capítulos, 22 figuras, PDF con tu cuenta.
Diecinueve pasos, cuatro tramos.
Del paso 0 al 18. Cada uno deja archivos, versiones y decisiones guardadas, y nada avanza sin que vos lo apruebes.
Preparar y definir
El entorno listo y la web clara antes de dibujar nada.
- 0
Preparar el entorno
Revisa herramientas y cuentas, te dice qué falta y te pide permiso antes de instalar algo.
- 1
Definir la web y su base de conocimiento
Concepto, público y funciones; arma el cuaderno del proyecto, el plan y la checklist.
Estructura
Qué páginas hay, cómo se conectan y cómo se ven en el celular.
- 2
Estudiar la estructura de las páginas
Lee tus capturas o referencias y anota secciones, orden y contenido de cada página.
- 3
Conectar el mapa del sitio
Rutas, menús y relaciones entre páginas; marca lo que falta antes de los wireframes.
- 4
Wireframes que se adaptan
Páginas enlazadas en HTML y CSS para celular, tablet y escritorio. Estructura, no maquillaje.
- 5
Revisar y aprobar la estructura
Corrige lo que pidas y guarda la versión exacta que aceptás como base.
Marca y diseño
Referencias, identidad, dirección visual y el prototipo completo.
- 6
Investigar direcciones visuales
Tipografía, espaciado, color, superficies e imágenes de cada referencia.
- 7
Investigar la marca
Decide con vos si la identidad se conserva, se adapta o se crea, y qué no se toca.
- 8
Explorar conceptos de marca
Propone y compara conceptos, los refina con tu opinión y guarda tu elección.
- 9
Producir la marca final
Símbolo, logotipo, versiones y fondos, con reglas de uso y el inventario de archivos.
- 10
Comparar direcciones de diseño
Cada referencia aplicada a la misma página, lado a lado, para que elijas una.
- 11
Refinar el diseño elegido
Más tipografía, más composición, mejor celular, versión tras versión hasta tu sí.
- 12
Prototipo completo
El sistema visual en todas las páginas, con animación pensada y movimiento reducido.
- 13
Revisar el prototipo
Correcciones en versiones nuevas hasta la aceptación exacta: el traspaso definitivo.
Producción y lanzamiento
El código de verdad, el home pulido, el PR y la web en vivo.
- 14
La web en producción
Next.js, React, TypeScript y Tailwind en tu repositorio, con contenido editable en Markdown.
- 15
Rediseñar el home
Sólo el home: mejor composición, celular pulido y animación coordinada, hasta que lo aceptes.
- 16
Llevar el diseño a todo el sitio
Cuando lo pedís, el nuevo diseño pasa a todas las páginas sin perder lo que hacen.
- 17
Revisar el pull request final
Publica la rama y abre el PR; se mergea sólo con aprobación humana.
- 18
Publicar y aceptar la web
Despliega con tu permiso, revisa la web real y guarda la URL y la versión.
Cómo se instala
Vive en un repositorio público de GitHub, con código abierto. Elegí tu agente: todos los caminos instalan la misma carpeta.
themariscalproject/themariscal-create-amazing-website-skillVer el repositorioEn ChatGPT o Codex, pedíselo
Pegá esta frase con el link del repositorio. El instalador de skills la baja de GitHub y la deja lista para usar.
Tu agenteInstalá esta skill: https://github.com/themariscalproject/themariscal-create-amazing-website-skillEn Codex se llama con $themariscal-create-amazing-website.
En Claude Code, como plugin
La forma recomendada: después se actualiza con un solo comando. Escribí estas dos líneas dentro de Claude Code.
Claude Code/plugin marketplace add themariscalproject/themariscal-create-amazing-website-skill /plugin install themariscal-create-amazing-website@themariscalReiniciá Claude Code, abrí la carpeta de tu web y escribí /themariscal-create-amazing-website, o pedíselo con tus palabras.
O clonala e instalala vos
Cloná el repositorio y corré el instalador. Con --claude va a tus skills de Claude Code; con --codex, a las de Codex; con --project, sólo a un proyecto.
Terminalgit clone https://github.com/themariscalproject/themariscal-create-amazing-website-skill.git cd themariscal-create-amazing-website-skill ./install.sh --claudeEl instalador no usa internet, no pide sudo y nunca pisa una instalación que ya exista, salvo que le pases --update.
En cualquier otro agente
Con la CLI de skills, o copiando la carpeta skills/themariscal-create-amazing-website/ donde tu agente busca sus skills.
Terminalnpx skills add themariscalproject/themariscal-create-amazing-website-skill
Una sola entrada
No tenés que acordarte qué paso sigue. La primera vez arranca preparando el entorno; cuando volvés, lee lo que guardó y sigue en el paso y la acción que quedaron pendientes.
Para empezar
Start a new website with themariscal-create-amazing-website.Para retomar, mañana o en otra sesión
Resume my website with themariscal-create-amazing-website.Lo que te queda
- Un cuaderno del proyecto con requisitos, decisiones y el progreso guardado.
- Las referencias de estructura, los wireframes y cada versión revisada.
- Los archivos finales de la marca y un sistema visual documentado.
- Un prototipo completo que se adapta, y el código de producción aparte.
- Contenido editable en Markdown, sincronizado con la aplicación.
- Pruebas, aprobaciones, historial de entregas y la URL de la web.
Las decisiones son tuyas
Se frena cada vez que hace falta algo tuyo, y se acuerda de lo que decidiste: no te vuelve a preguntar mientras nada cambie. Un build que pasa o una conversación callada nunca cuentan como un sí.
- Qué versión queda
- Qué se instala
- Cuándo el diseño pasa a todo el sitio
- La revisión humana del PR
- El permiso para publicar
Viene el curso con Martín
Martín está preparando un curso con esta skill, para hacer una web de punta a punta con el método del estudio. Va a estar en la Academia de The Mariscal.
Ir a la Academia