Primera parte
Antes de empezar
Qué vas a construir, por qué ChatGPT solo no alcanza, y las tres cuentas que hacen falta.
GratisChatGPTSin saber programar
Cómo crear un sitio web impresionante con ChatGPTCon la skill de The Mariscal: de una idea a una web publicada, sin tocar una línea de código
Por Martín Silva Molina 14 capítulos 52 min
Una guía completa, gratis, para hacer una web profesional con ChatGPT y la skill themariscal-create-amazing-website: estructura, wireframes, diseño, marca, prototipo, Next.js, GitHub y Vercel. Paso a paso, con el ejemplo real de una tienda de zapatillas.
La guía entera, con las figuras, para imprimir o leer sin conexión. Hace falta entrar con tu cuenta (es gratis).
Lo que te llevás
- Por qué «hacéme una web impresionante» no funciona, y qué hacer en cambio
- Instalar una skill en ChatGPT y darle memoria con Obsidian para que no se olvide de nada
- Sacar la estructura de cualquier web con una captura, y convertirla en wireframes
- Armar un archivo de diseño (design.md) a partir de referencias que te gustan
- Crear una marca desde cero, elegir entre varias propuestas y pedir cambios
- Pasar del prototipo en HTML a un proyecto profesional en Next.js
- Publicar en Vercel con GitHub: ramas, pull requests y merge, explicados sin dolor
- Editar los textos de tu web desde Obsidian y pedir animaciones con una captura
Qué necesitás
- ChatGPT (la app de escritorio, última versión) con un plan que permita proyectos
- Una cuenta de GitHub y la app GitHub Desktop (gratis)
- Obsidian instalado (gratis)
- Una cuenta de Vercel (gratis) para publicar
- Dos o tres horas y una idea de web, por chica que sea
Los capítulos
Primera parte · Antes de empezar
IQué vas a construir, y por qué no se hace pidiéndoselo a ChatGPT4 min- 1Preparar la computadora: GitHub, Obsidian y ChatGPT4 min
Segunda parte · La skill, paso a paso
2Arrancar: la skill instala sus ayudantes y arma el plan3 min- 3La estructura: capturas de otras webs, sin ningún diseño4 min
- 4Los wireframes: el esqueleto en blanco y negro3 min
- 5Las referencias de diseño y el archivo design.md3 min
- 6La marca: de tres logos ajenos a la tuya3 min
- 7Cuatro versiones del home: elegir con la cabeza, no con lupa4 min
- 8El prototipo completo: todas las páginas, un solo diseño3 min
- 9El proyecto de verdad: React y Next.js4 min
- 10La magia: el home primero, después todo el sitio3 min
- 11Publicar: GitHub, el pull request y Vercel4 min
Tercera parte · Después
12Después: editar los textos desde Obsidian y pedir cambios con una captura4 min- 13Glosario y problemas frecuentes6 min
Segunda parte
La skill, paso a paso
Los diecinueve pasos de la skill, en el mismo orden en que los vas a vivir: de la idea a la web publicada.
Tercera parte
Después
Editar los textos sin tocar código, pedir cambios con una captura, y las palabras que aparecieron en el camino.
La skill
Esta guía acompaña a la skill de The Mariscal. Es gratis y de código abierto.
themariscal-create-amazing-website
Cómo se instala
Instalá esta skill: https://github.com/themariscalproject/themariscal-create-amazing-website-skillCómo se lee
Con un lápiz en la mano
Entrá con tu cuenta (gratis) y subrayá con cinco colores o pegá post-its: quedan guardados en cualquier dispositivo.
Donde estés
Hecha para el celular primero. Retomás donde la dejaste.
En papel también
Bajala en PDF con todas las figuras, o imprimila. Sólo hace falta entrar.
Quién la escribe
Martín Silva Molina hace software desde hace más de diez años y enseña IA en persona en The Mariscal Academy. Las guías salen de lo que hacemos a diario en The Mariscal: webs, apps y skills para que cualquiera pueda construir con la IA.
Preguntas
¿Tengo que saber programar?
No. En toda la guía no se escribe código. Vos describís, mirás, aprobás y pedís cambios; la skill y ChatGPT hacen el resto.
¿Sirve con otra IA que no sea ChatGPT?
La skill también funciona en Claude Code. Esta guía sigue el video, que está hecho con ChatGPT, pero los pasos son los mismos.
¿Cuánto cuesta?
La guía y la skill son gratis. GitHub, Obsidian y Vercel tienen planes gratuitos que alcanzan. Lo único que pagás es tu plan de ChatGPT.
¿Puedo usarla para rediseñar una web que ya tengo?
Sí. En el paso de la estructura, en vez de capturas de otras webs le pasás capturas de la tuya.
¿Qué pasa si cierro ChatGPT a la mitad?
Nada. La skill guarda cada paso en Obsidian y en GitHub. Volvés, decís «continuemos» y sigue donde quedó.
Cómo crear un sitio web impresionante con ChatGPT
Con la skill de The Mariscal: de una idea a una web publicada, sin tocar una línea de código