Cómo Crear un Prototipo Desde una Idea Usando ChatGPT y V0

“¿Cuánto tardás en levantar tu sitio personal desde cero?”

Spoiler: con ChatGPT como copiloto y Vercel V0 al volante, una tarde con mates basta para pasar de la nada a un prototipo navegable.

¿Querés ver cómo mi sitio web pasó de ser una idea a realidad en una tarde?

En este primer post de una serie te cuento el paso a paso de cómo usé ChatGPT y Vercel V0 para crear un prototipo funcional sin escribir (casi) nada de código.

Vas a ver que con las herramientas correctas y un plan claro, cualquier desarrollador puede construir su presencia web profesional en cuestión de horas. A lo largo de esta serie documentaré el proceso completo. ¡Empecemos!

🧰 Herramientas en pocas palabras

Antes de avanzar con el paso a paso, hagamos una pausa para entender las herramientas que usé. Si venís del mundo tech probablemente ya las conocés, pero si no, acá va un mini glosario:

🤖 ChatGPT

Modelo de IA de OpenAI que conversa con vos como si fuera un colega sabio. Le pedí ideas, estructura, contenido... fue mi sparring creativo.

✨ Prompt

Texto que le das a la IA para que haga algo. Un buen resultado depende de un buen prompt. Es como un deporte, cuanto más practicas mejores resultados obtenés.

🧠 GitHub Copilot

Compañero de programación que sugiere código mientras escribís. Me ayudó a resolver errores cuando cloné el repo generado por Vercel.

🚀 Vercel V0

Plataforma que convierte tu prompt en una web funcional. Literalmente: escribís lo que querés y en segundos tenés una landing navegable.

🧪 TL;DR

Usé ChatGPT para generar ideas y un prompt detallado para Vercel V0. En minutos obtuve un prototipo funcional que combinaba landing page, terminal interactiva y blog técnico. Todo sin escribir código desde cero.

Herramientas clave: ChatGPT, Vercel V0, GitHub Copilot y mucho 🧉.

1. Brainstorming

Para arrancar abrí un chat con ChatGPT y le pedí inspiración sobre webs personales. Sumé la lista de mis referentes (portfolios que admiro) y lo desafié a justificar por qué cada uno funcionaba.

Este fue mi primer prompt:

Necesito tener mi personal brand como profesional IT, estaba pensando en armar una pagina web y en mis redes sociales

Tengo estas webs que me parecen interesantes, sobre todo porque son tipo links tree:
- <https://dielenka.com/>
- <https://peladonerd.com/>
- <https://beacons.ai/techunicorn>
- <https://beacons.ai/carlosazaustre>
- <https://moure.dev/>
- <https://beacons.ai/veritechie>

Tambien tengo estas que me gustan visualmente: 
- <https://veromoreno.github.io/>
- <https://www.lydiahallie.com/>
- <https://www.herhelloworld.com/>
- <https://bjornlu.com/>
- <https://addyosmani.com/>
- <https://sarah.dev/>
- <https://www.ceceliacreates.com/>
- <https://paoloduzioni.it/>
- <https://www.ildaneta.dev/>
- <https://www.carmenansio.dev/>
- <https://wesbos.com/>
- <https://cassidoo.co/>
- <https://www.grace-ling.com/>

Según lo que conoces de mi perfil tomate un tiempo para investigar y para pensar al menos 3 o 4 ideas de lo que deberia tener en mi pagina web.

Me encanta la idea de que sea con formato a un CLI pero quizas eso puede ser solo una parte, tambien la idea de que sea una especie de juego.

La respuesta, luego de varias interacciones obtuve 4 ideas que me gustaron mucho:

- Terminal interactiva (CLI): experiencia estilo consola donde el usuario escribe comandos como about, blog o proyectos para navegar tu contenido. Ideal para mostrar tu perfil técnico de forma creativa y original.
- Sitio gamificado: visualmente pensado como un “juego” en el que el roadmap se recorre como niveles desbloqueables. Perfecto para atraer a personas no técnicas y crear engagement con tu aprendizaje compartido.
- Blog profesional: estructura clásica pero moderna, clara, accesible y con foco en contenido técnico organizado. Ideal para posicionamiento profesional, enseñanza y visibilidad.
- Hub personal: estilo Linktree potenciado, con todos tus enlaces (GitHub, blog, videos, contacto, etc.) en una sola página de entrada fácil de compartir en redes. Profesional y útil para construir tu red.

Este paso es como tirar pintura contra la pared y rescatar las salpicaduras lindas — dejé que la IA arrojara color; sólo tomé los patrones que me servían.

Tip: cuando pidas inspiración, incluí 3‑4 ejemplos concretos; la IA compara y extrae patrones en lugar de improvisar.

2. Validando ideas

Con un borrador claro de qué mostrar, listé las secciones que quería:

• Hero con foto + tagline.

• Sobre mí.

• Proyectos destacados.

• Blog.

• CLI funcional.

• Links rápidos a redes.

Pregunté a ChatGPT si veía lagunas o redundancias. Ajustamos ordenar por valor para el visitante: primero prueba social → luego proyectos → al final curiosidades.

3. El prompt ideal

Le pedí a ChatGPT “Generame un prompt para V0 con las ideas del chat”, este fue el resultado:

Quiero crear una página web personal como frontend developer. El sitio tiene que tener tres partes principales:

1. **Landing Page profesional**:
   - Estilo moderno, claro y responsivo.
   - Foto o avatar mío, una frase destacada y resumen de quién soy.
   - Secciones con enlaces a:
     - Sobre mí
     - Blog
     - Proyectos
     - Red de contacto
     - Entrada a Terminal (CLI)
   - Debe verse bien tanto en desktop como en mobile.
   - Inspiración visual: lydiahallie.com, sarah.dev, cassidoo.co

2. **Modo Terminal (CLI interactiva)**:
   - Estética retro de consola (fondo negro, texto verde o nórdico, fuente monoespaciada).
   - Input para comandos como `help`, `about`, `blog`, `proyectos`, `contacto`.
   - Cada comando muestra contenido embebido directamente en el estilo de consola.
   - Debe simular una terminal real (cursor, historial, outputs con efecto typing).
   - Debe tener botones de acceso rápido a los comandos principales, para quien no sepa usar terminal.

3. **Blog integrado**:
   - Los artículos deben estar organizados por temas del [roadmap.sh/frontend](<https://roadmap.sh/frontend>).
   - Que cada post sea un archivo Markdown o MDX, con soporte para código embebido.
   - Posibilidad de filtrar por temas: HTML, CSS, JS, React, Vite, etc.
   - Visualización limpia y con buena legibilidad.

Opcional futuro: una sección de gamificación que represente el roadmap como un mapa tipo juego o RPG, con progreso visual.

Tecnologías sugeridas:
- Next.js (App Router)
- Tailwind CSS
- React para componentes interactivos
- Soporte para MDX en los artículos
- Posibilidad de desplegar en Vercel

Quiero que el resultado sea una web visualmente atractiva, técnica, clara, y que represente mi perfil como frontend engineer que crea contenido educativo. Debe tener buena experiencia de usuario tanto para personas técnicas como no técnicas. ¡Gracias!

En realidad mentí un poquito.

Tuve que iterar muchas veces para llegar a ese prompt. Yo sabia que debía llegar a algo así para poder obtener un resultado óptimo de forma mas rápida. Hay que usar la IA generativa como si fuera un sparring, es un amigo que no se cansa y que puede darte mil opciones porque tiene millones de datos.

4. De prompt a prototipo: Voilà! 🚀

1. Inicié sesión en Vercel V0.

2. New project (que llame Landing page) → Paste prompt.

3. Me cebe un🧉

4. Esperé ~30 segundos y salió la primera versión compilable.

   1. Previe

      

   2. Scaffolding

      

5. Cloné el repo autogenerado, corrí npm run dev → ERROR 🙃

6. Tuve que iterar con GitHub Copilot que tengo asociado en Visual Studio Code hasta lograr tener en localhost lo mismo que en V0.

   • Usé GitHub Copilot desde VSCode para resolver dependencias, imports, y conflictos con React 19.

   • Si antes pasaba horas en StackOverflow, ahora tengo copiloto en tiempo real.

Resultado: layout funcional + estilo coherente sin escribir una línea de HTML, CSS o Javascript en un ropositorio local. Un golazo!

5. En el siguiente post 🚧

En la próxima entrega vamos a ver cómo personalicé el prototipo generado por V0:

• Cómo adapté el contenido para que refleje mi perfil y experiencia

• Los ajustes de diseño para lograr una identidad visual única

Te mostraré el proceso paso a paso y compartiré los snippets más importantes del código.

(link al próximo post cuando esté disponible)

🙌 CTA

👉 Seguime en Linkedin, X, Instagram y dejale una ⭐ al repo.

¿Te sirvió? Invitame un ☕ en Cafecito.