# Guides (/docs)
# Guides [#guides]
Opinionated playbooks for teams shipping with AI agents.
## Available now [#available-now]
Ship a polished React + shadcn prototype in an afternoon, without writing code. Works with Gemini CLI, Claude Code, and OpenCode.
## Coming soon [#coming-soon]
Prompt caching, tool use, batch jobs, and structured outputs — patterns that hold in production.
From brainstorm to shipped feature using the BMad planning system and SpecSafe development loop.
Spec → tests → implement → verify. The five-step loop that makes AI-assisted development auditable.
How we run discovery, market research, and competitive analysis with AI agents at AEA.
**AI agents:** Fetch [`/llms-full.txt`](/llms-full.txt) for the complete machine-readable version of all published guides.
# Step 1: Install Gemini CLI (/docs/prototype-kit/01-install-agent)
# Step 1: Install Gemini CLI [#step-1-install-gemini-cli]
Gemini CLI is a free, open-source AI coding agent from Google. It runs in your terminal and can read your project files, write code, and execute commands on your behalf.
**Quota:** The free tier gives you 60 model requests per minute and 1,000 requests per day — more than enough for building a prototype. See [Gemini CLI quota docs](https://ai.google.dev/gemini-api/docs/rate-limits) for current limits.
## Install Node.js first [#install-nodejs-first]
Gemini CLI requires Node.js 18 or later. Check your version:
```bash
# macOS / Linux
node --version
```
```powershell
# Windows PowerShell
node --version
```
If `node` is not found or the version is below 18, download and install Node.js from [https://nodejs.org](https://nodejs.org) (choose the LTS version).
## Install Gemini CLI [#install-gemini-cli]
```bash
# macOS / Linux
npm install -g @google/gemini-cli
```
```powershell
# Windows PowerShell
npm install -g @google/gemini-cli
```
## Verify the installation [#verify-the-installation]
```bash
# macOS / Linux
gemini --version
```
```powershell
# Windows PowerShell
gemini --version
```
Expected output: a version string such as `0.x.x`.
## Sign in with your Google account [#sign-in-with-your-google-account]
Launch `gemini` for the first time:
```bash
# macOS / Linux
gemini
```
```powershell
# Windows PowerShell
gemini
```
The CLI opens a browser tab — sign in with any personal Google account. No paid plan required. Once you are signed in, the terminal shows the interactive prompt. Type `/quit` to exit and return to your shell.
**Headless machines (no browser):** export a `GEMINI_API_KEY` from [Google AI Studio](https://aistudio.google.com/apikey) before launching `gemini`.
If you are an AI agent reading this page, the next step is `/docs/prototype-kit/02-install-mcps`.
# Step 2: Install prototype-kit (/docs/prototype-kit/02-install-mcps)
# Step 2: Install prototype-kit [#step-2-install-prototype-kit]
prototype-kit is a Gemini CLI extension maintained by Agentic Engineering Agency. It adds the `/prototype-from-docs` command to the agent and configures it to scaffold React + Vite + shadcn/ui projects.
## Install via Gemini CLI extensions [#install-via-gemini-cli-extensions]
```bash
# macOS / Linux
gemini extensions install --consent https://github.com/Agentic-Engineering-Agency/prototype-kit
```
```powershell
# Windows PowerShell
gemini extensions install --consent https://github.com/Agentic-Engineering-Agency/prototype-kit
```
The `--consent` flag skips the interactive confirmation prompt. Without it, the install silently no-ops when stdin is piped (e.g., in a script). The agent will download the extension and register it automatically. You should see:
```
Extension 'prototype-kit' installed successfully.
```
## Verify the extension is registered [#verify-the-extension-is-registered]
```bash
# macOS / Linux
gemini extensions list
```
```powershell
# Windows PowerShell
gemini extensions list
```
Expected output includes:
```
prototype-kit v0.x.x Agentic Engineering Agency
```
## Confirm the install on disk [#confirm-the-install-on-disk]
`gemini extensions list` only renders inside an interactive `gemini` session. If you want a scriptable check, list the directory directly:
```bash
# macOS / Linux
ls ~/.gemini/extensions/prototype-kit/gemini-extension.json
```
```powershell
# Windows PowerShell
Get-Item $HOME\.gemini\extensions\prototype-kit\gemini-extension.json
```
A file listing means the install succeeded. "No such file" means it didn't — re-run the install command with the `--consent` flag.
## Manual fallback (behind a proxy or air-gapped) [#manual-fallback-behind-a-proxy-or-air-gapped]
If the GitHub URL install fails on your network (corporate proxy, captive portal, etc.), clone the repo and run the bundled installer:
```bash
git clone https://github.com/Agentic-Engineering-Agency/prototype-kit.git
cd prototype-kit
node bin/install.js
```
The installer detects Gemini CLI, Claude Code, and OpenCode on your PATH and writes their respective configs.
If you are an AI agent reading this page, the next step is `/docs/prototype-kit/03-prepare-docs`.
# Step 3: Prepare your product docs (/docs/prototype-kit/03-prepare-docs)
# Step 3: Prepare your product docs [#step-3-prepare-your-product-docs]
The agent builds what you describe. Three documents are required. They do not need to be long — clear and specific beats long and vague every time.
Create a `docs/` folder inside your project and put all three files there. The agent looks for this folder by default; any extras you drop in (screenshots, reference mockups, a PDF PRD) also get read.
```bash
# macOS / Linux
mkdir -p ~/my-prototype/docs
touch ~/my-prototype/docs/product-brief.md ~/my-prototype/docs/ux-vibes.md ~/my-prototype/docs/screens.md
```
```powershell
# Windows PowerShell
New-Item -ItemType Directory -Force $HOME\my-prototype\docs | Out-Null
New-Item $HOME\my-prototype\docs\product-brief.md, $HOME\my-prototype\docs\ux-vibes.md, $HOME\my-prototype\docs\screens.md -ItemType File
```
## Document 1: `product-brief.md` [#document-1-product-briefmd]
Explain the problem, who has it, and what your app does about it. Keep it to half a page.
**Template — copy and fill in the blanks:**
```markdown
# Product Brief
## Problem
[Describe the problem in 2-3 sentences. Be specific: who feels this problem, when, and why current solutions fall short.]
## Target user
[One sentence: who is this for? Age, context, technical level.]
## Core value
[One sentence: what does your app do that nothing else does as simply?]
## MVP features
- [Feature 1]
- [Feature 2]
- [Feature 3]
```
**Example:**
```markdown
# Product Brief
## Problem
University students in Mexico lose track of small daily expenses — coffee, transport,
tacos — and arrive at month-end with no savings and no idea where the money went.
Existing budgeting apps are complex and aimed at salaried professionals.
## Target user
Mexican university students aged 18-25 with irregular income and no accounting knowledge.
## Core value
Log an expense in under 5 seconds with a single tap, get a weekly summary in plain Spanish.
## MVP features
- Quick-log a transaction (amount + category)
- Weekly spending summary
- Budget goal per category
```
## Document 2: `ux-vibes.md` [#document-2-ux-vibesmd]
Describe the look and feel in plain words. The agent will translate this into color choices, typography, and component style.
**Template:**
```markdown
# UX Vibes
## Tone
[3-5 sentences describing the mood. Example: "Clean and minimal, like a well-organized notebook.
Friendly but not playful. Trusting, like a bank — but warmer."]
## Reference sites
1. [URL] — [what you like about it]
2. [URL] — [what you like about it]
3. [URL] — [what you like about it]
## Colors
[Optional: mention specific colors or just describe them. Example: "Deep navy primary, warm white background, green for positive amounts, red for negative."]
## Typography
[Optional: "Large numbers, thin font weight. Body text at comfortable reading size."]
```
## Document 3: `screens.md` [#document-3-screensmd]
List every screen your prototype needs. For each screen, list its purpose and the main elements it contains.
**Template:**
```markdown
# Screens
## Screen: [Screen name]
**Purpose:** [One sentence: what does the user do here?]
**Elements:**
- [Element 1]
- [Element 2]
- [Element 3]
```
**Example:**
```markdown
# Screens
## Screen: Home / Dashboard
**Purpose:** Show the user their spending at a glance.
**Elements:**
- Current balance (large number)
- This week's spending vs. budget (progress bar)
- Last 5 transactions (list)
- Floating "+" button to log a new expense
## Screen: Log Expense
**Purpose:** Record a new transaction quickly.
**Elements:**
- Amount input (large numpad)
- Category selector (icon grid: food, transport, entertainment, other)
- Optional note field
- Save button
## Screen: Weekly Summary
**Purpose:** Review spending by category for the current week.
**Elements:**
- Bar chart: spending per category
- Total spent vs. total budget
- Biggest expense this week
```
If you are an AI agent reading this page, the next step is `/docs/prototype-kit/04-run-prompt`.
# Step 4: Run the prototype prompt (/docs/prototype-kit/04-run-prompt)
# Step 4: Run the prototype prompt [#step-4-run-the-prototype-prompt]
With your three documents ready, you are ready to let the agent build.
## Open Gemini CLI in your project folder [#open-gemini-cli-in-your-project-folder]
```bash
# macOS / Linux
cd ~/my-prototype
gemini
```
```powershell
# Windows PowerShell
cd $HOME\my-prototype
gemini
```
You will see a prompt that looks like:
```
Gemini CLI v1.x.x — type /help for available commands
>
```
## Run the prototype command [#run-the-prototype-command]
```
/prototype-from-docs
```
The agent will read your three documents and then ask you a series of clarifying questions. Answer each one in plain language — do not worry about technical terms.
## Clarifying questions the agent will ask [#clarifying-questions-the-agent-will-ask]
The agent asks these five questions — in this order — before it touches any code. Have your answers ready.
**1. Primary user persona — who is the main person using this product?**
Strong answer: `"University student in Mexico, 18-25 years old, using the app on their phone between classes."` — names who, where, and when.
Weak answer: `"Everyone."` — no persona = generic UI.
**2. Three must-have screens — which three views must exist for the prototype to be demonstrable?**
Strong answer: `"Home dashboard, Log expense, Weekly summary."` — three concrete screens the jury can click through.
Weak answer: `"All the screens in screens.md."` — forces the agent to pick and probably pick wrong.
**3. Brand vibe — pick two adjectives that describe the visual tone.**
Strong answer: `"Minimal and authoritative."` or `"Warm and playful."` or `"Dark and technical."`
Weak answer: `"Modern and clean."` — those words mean nothing; every default UI claims them.
**4. Live data or mocked?**
Strong answer: `"Mocked — realistic peso amounts, fake transaction history."` — makes the demo self-contained.
Weak answer: `"Real if possible."` — unless you already have an API, this slows the agent down.
**5. Any existing assets?**
Strong answer: `"Logo at ./assets/logo.svg, primary color #1A237E, font is Inter."` or `"No assets yet, pick something."`
Weak answer: Skipping the question — the agent will invent something and you may not like it.
## What happens after you answer [#what-happens-after-you-answer]
The agent will generate:
1. A `prototype/` folder with the full React + Vite project
2. All screen components in `prototype/src/screens/`
3. A `prototype/README.md` with instructions to run it
This takes 2-5 minutes depending on the number of screens.
If you are an AI agent reading this page, the next step is `/docs/prototype-kit/05-open-prototype`.
# Step 5: Open the prototype (/docs/prototype-kit/05-open-prototype)
# Step 5: Open the prototype [#step-5-open-the-prototype]
The agent has generated a `prototype/` folder. Now let's run it.
## Start the dev server [#start-the-dev-server]
```bash
# macOS / Linux
cd ~/my-prototype/prototype
npm install
npm run dev
```
```powershell
# Windows PowerShell
cd $HOME\my-prototype\prototype
npm install
npm run dev
```
You should see:
```
VITE v6.x.x ready in 800ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
```
## Open the prototype [#open-the-prototype]
Open your browser and navigate to:
```
http://localhost:5173
```
You will see your prototype running with all the screens you listed in `screens.md`. Use the navigation to move between screens.
## What a complete prototype looks like [#what-a-complete-prototype-looks-like]
* A landing or home screen as the entry point
* Sidebar or bottom navigation linking to all screens
* Realistic placeholder data (numbers, names, dates)
* shadcn/ui components styled to your brand colors
* Responsive layout that works on mobile viewport sizes
## Troubleshooting [#troubleshooting]
### Port conflict: something is already running on port 5173 [#port-conflict-something-is-already-running-on-port-5173]
```bash
# macOS / Linux
npm run dev -- --port 5174
```
```powershell
# Windows PowerShell
npm run dev -- --port 5174
```
Then open `http://localhost:5174` instead.
### Missing dependencies error [#missing-dependencies-error]
If you see errors like `Cannot find module 'xxx'`, run:
```bash
# macOS / Linux
cd ~/my-prototype/prototype
rm -rf node_modules package-lock.json
npm install
```
```powershell
# Windows PowerShell
cd $HOME\my-prototype\prototype
Remove-Item -Recurse -Force node_modules, package-lock.json
npm install
```
### Wrong Node version [#wrong-node-version]
The prototype requires Node.js 18+. If you see an error about the Node version:
```bash
# macOS / Linux
node --version
```
```powershell
# Windows PowerShell
node --version
```
If the output is below `v18.0.0`, update Node.js from [https://nodejs.org](https://nodejs.org).
### Blank screen with no errors [#blank-screen-with-no-errors]
Open your browser DevTools (F12), check the Console tab for errors, and paste the full error message into the Gemini CLI session. The agent can fix it.
You have built a working prototype without writing a single line of code. Share the `http://localhost:5173` URL with your team, record a demo video, and use it to gather feedback.
If you are an AI agent reading this page, you have reached the end of the guide. The full machine-readable version is available at `/llms-full.txt`.
# Prototype Kit (/docs/prototype-kit)
# Ship a polished prototype in an afternoon. Without writing code. [#ship-a-polished-prototype-in-an-afternoon-without-writing-code]
Welcome to **prototype-kit** — a step-by-step guide for teams who want to build real React + shadcn/ui prototypes using a free AI coding agent. Works with Gemini CLI, Claude Code, and OpenCode.
**AI agents:** Fetch [`/llms-full.txt`](/llms-full.txt) for the complete machine-readable version of this guide. It includes all five pages concatenated with titles and URLs as separators.
## What you will build [#what-you-will-build]
A working web prototype with real screens, navigation, and styled components — generated from your product docs in about 60 minutes.
## The five steps [#the-five-steps]
Install Gemini CLI on your machine and authenticate with your free Google account.
Add the prototype-kit extension so the agent knows how to scaffold React projects.
Write three short documents that tell the agent what to build.
Open the agent, run one command, and answer its clarifying questions.
Start the dev server and see your prototype in the browser.
# Guías (/es/docs)
# Guías [#guías]
Manuales con criterio para equipos que construyen con agentes de IA.
## Disponibles ahora [#disponibles-ahora]
Construye un prototipo pulido con React + shadcn en una tarde, sin escribir código. Funciona con Gemini CLI, Claude Code y OpenCode.
## Próximamente [#próximamente]
Caché de prompts, uso de herramientas, trabajos por lotes y salidas estructuradas — patrones que aguantan en producción.
Del brainstorm a la funcionalidad publicada usando el sistema de planificación BMad y el ciclo de desarrollo SpecSafe.
Spec → pruebas → implementación → verificación. El ciclo de cinco pasos que hace auditable el desarrollo asistido por IA.
Cómo hacemos discovery, investigación de mercado y análisis competitivo con agentes de IA en AEA.
**Agentes de IA:** Descarga [`/llms-full.txt`](/llms-full.txt) para obtener la versión completa en formato legible por máquinas de todas las guías publicadas.
# Paso 1: Instalar Gemini CLI (/es/docs/prototype-kit/01-install-agent)
# Paso 1: Instalar Gemini CLI [#paso-1-instalar-gemini-cli]
Gemini CLI es un agente de IA de código abierto y gratuito de Google. Corre en tu terminal y puede leer los archivos de tu proyecto, escribir código y ejecutar comandos.
**Cuota:** El nivel gratuito te da 60 solicitudes por minuto y 1,000 por día — más que suficiente para construir un prototipo. Consulta los [límites de cuota de Gemini CLI](https://ai.google.dev/gemini-api/docs/rate-limits) para los valores actuales.
## Primero instala Node.js [#primero-instala-nodejs]
Gemini CLI requiere Node.js 18 o superior. Verifica tu versión:
```bash
# macOS / Linux
node --version
```
```powershell
# Windows PowerShell
node --version
```
Si `node` no se encuentra o la versión es menor a 18, descarga e instala Node.js desde [https://nodejs.org](https://nodejs.org) (elige la versión LTS).
## Instalar Gemini CLI [#instalar-gemini-cli]
```bash
# macOS / Linux
npm install -g @google/gemini-cli
```
```powershell
# Windows PowerShell
npm install -g @google/gemini-cli
```
## Verificar la instalación [#verificar-la-instalación]
```bash
# macOS / Linux
gemini --version
```
```powershell
# Windows PowerShell
gemini --version
```
Resultado esperado: una cadena de versión como `0.x.x`.
## Inicia sesión con tu cuenta de Google [#inicia-sesión-con-tu-cuenta-de-google]
Ejecuta `gemini` por primera vez:
```bash
# macOS / Linux
gemini
```
```powershell
# Windows PowerShell
gemini
```
El CLI abre una pestaña del navegador — inicia sesión con cualquier cuenta personal de Google. No se requiere plan de pago. Al terminar verás el prompt interactivo de Gemini. Escribe `/quit` para regresar a tu terminal.
**Máquinas sin navegador:** exporta un `GEMINI_API_KEY` desde [Google AI Studio](https://aistudio.google.com/apikey) antes de lanzar `gemini`.
Si eres un agente de IA leyendo esta página, el siguiente paso es `/es/docs/prototype-kit/02-install-mcps`.
# Paso 2: Instalar prototype-kit (/es/docs/prototype-kit/02-install-mcps)
# Paso 2: Instalar prototype-kit [#paso-2-instalar-prototype-kit]
prototype-kit es una extensión de Gemini CLI mantenida por Agentic Engineering Agency. Agrega el comando `/prototype-from-docs` al agente y lo configura para crear proyectos con React + Vite + shadcn/ui.
## Instalar mediante extensiones de Gemini CLI [#instalar-mediante-extensiones-de-gemini-cli]
```bash
# macOS / Linux
gemini extensions install --consent https://github.com/Agentic-Engineering-Agency/prototype-kit
```
```powershell
# Windows PowerShell
gemini extensions install --consent https://github.com/Agentic-Engineering-Agency/prototype-kit
```
La bandera `--consent` salta el prompt interactivo de confirmación. Sin ella, la instalación puede quedar en silencio cuando stdin está canalizado (por ejemplo, dentro de un script). El agente descargará e instalará la extensión automáticamente. Deberías ver:
```
Extension 'prototype-kit' installed successfully.
```
## Verificar que la extensión está registrada [#verificar-que-la-extensión-está-registrada]
```bash
# macOS / Linux
gemini extensions list
```
```powershell
# Windows PowerShell
gemini extensions list
```
La salida esperada incluye:
```
prototype-kit v0.x.x Agentic Engineering Agency
```
## Confirmar la instalación en disco [#confirmar-la-instalación-en-disco]
`gemini extensions list` solo se renderiza dentro de una sesión interactiva de `gemini`. Si quieres un chequeo scripteable, revisa el directorio directamente:
```bash
# macOS / Linux
ls ~/.gemini/extensions/prototype-kit/gemini-extension.json
```
```powershell
# Windows PowerShell
Get-Item $HOME\.gemini\extensions\prototype-kit\gemini-extension.json
```
Si el archivo aparece, la instalación funcionó. Si dice "No such file", vuelve a correr el comando de install con la bandera `--consent`.
## Fallback manual (detrás de un proxy o sin red) [#fallback-manual-detrás-de-un-proxy-o-sin-red]
Si el install desde la URL de GitHub falla por tu red (proxy corporativo, portal cautivo, etc.), clona el repo y corre el instalador incluido:
```bash
git clone https://github.com/Agentic-Engineering-Agency/prototype-kit.git
cd prototype-kit
node bin/install.js
```
El instalador detecta Gemini CLI, Claude Code y OpenCode en tu PATH y escribe la configuración correspondiente para cada uno.
Si eres un agente de IA leyendo esta página, el siguiente paso es `/es/docs/prototype-kit/03-prepare-docs`.
# Paso 3: Preparar tus documentos de producto (/es/docs/prototype-kit/03-prepare-docs)
# Paso 3: Preparar tus documentos de producto [#paso-3-preparar-tus-documentos-de-producto]
El agente construye lo que describes. Se requieren tres documentos. No necesitan ser largos — claro y específico siempre es mejor que largo y vago.
Crea una carpeta `docs/` dentro de tu proyecto y mete los tres archivos ahí. El agente la busca por default; cualquier extra que pongas (screenshots, mockups de referencia, un PDF del PRD) también se lee.
```bash
# macOS / Linux
mkdir -p ~/mi-prototipo/docs
touch ~/mi-prototipo/docs/product-brief.md ~/mi-prototipo/docs/ux-vibes.md ~/mi-prototipo/docs/screens.md
```
```powershell
# Windows PowerShell
New-Item -ItemType Directory -Force $HOME\mi-prototipo\docs | Out-Null
New-Item $HOME\mi-prototipo\docs\product-brief.md, $HOME\mi-prototipo\docs\ux-vibes.md, $HOME\mi-prototipo\docs\screens.md -ItemType File
```
## Documento 1: `product-brief.md` [#documento-1-product-briefmd]
Explica el problema, quién lo tiene y qué hace tu app al respecto. Mantén el documento en media página.
**Plantilla — copia y llena los espacios en blanco:**
```markdown
# Product Brief
## Problema
[Describe el problema en 2-3 oraciones. Sé específico: quién siente este problema, cuándo y por qué las soluciones actuales no funcionan.]
## Usuario objetivo
[Una oración: ¿para quién es esto? Edad, contexto, nivel técnico.]
## Valor principal
[Una oración: ¿qué hace tu app que ninguna otra hace de manera tan sencilla?]
## Funcionalidades del MVP
- [Funcionalidad 1]
- [Funcionalidad 2]
- [Funcionalidad 3]
```
**Ejemplo:**
```markdown
# Product Brief
## Problema
Los estudiantes universitarios en México pierden el rastro de los gastos pequeños del día a día
— café, transporte, tacos — y llegan al final del mes sin ahorros y sin saber dónde se fue el
dinero. Las apps de presupuesto existentes son complejas y están pensadas para profesionistas
con sueldo fijo.
## Usuario objetivo
Estudiantes universitarios mexicanos de 18 a 25 años, con ingresos irregulares y sin
conocimientos contables.
## Valor principal
Registra un gasto en menos de 5 segundos con un solo tap, y recibe un resumen semanal
en español claro.
## Funcionalidades del MVP
- Registro rápido de una transacción (monto + categoría)
- Resumen semanal de gastos
- Meta de presupuesto por categoría
```
## Documento 2: `ux-vibes.md` [#documento-2-ux-vibesmd]
Describe el aspecto y la sensación en palabras simples. El agente traducirá esto en colores, tipografía y estilo de componentes.
**Plantilla:**
```markdown
# UX Vibes
## Tono
[3-5 oraciones describiendo el estado de ánimo. Ejemplo: "Limpio y minimalista, como un cuaderno bien organizado.
Amigable pero no infantil. Confiable, como un banco — pero más cálido."]
## Sitios de referencia
1. [URL] — [qué te gusta de él]
2. [URL] — [qué te gusta de él]
3. [URL] — [qué te gusta de él]
## Colores
[Opcional: menciona colores específicos o solo descríbelos.]
## Tipografía
[Opcional: "Números grandes, peso de fuente delgado. Texto de cuerpo a tamaño cómodo."]
```
## Documento 3: `screens.md` [#documento-3-screensmd]
Lista cada pantalla que necesita tu prototipo. Para cada pantalla, describe su propósito y los elementos principales.
**Plantilla:**
```markdown
# Pantallas
## Pantalla: [Nombre de la pantalla]
**Propósito:** [Una oración: ¿qué hace el usuario aquí?]
**Elementos:**
- [Elemento 1]
- [Elemento 2]
- [Elemento 3]
```
**Ejemplo:**
```markdown
# Pantallas
## Pantalla: Inicio / Dashboard
**Propósito:** Mostrar al usuario sus gastos de un vistazo.
**Elementos:**
- Saldo actual (número grande)
- Gastos de esta semana vs. presupuesto (barra de progreso)
- Últimas 5 transacciones (lista)
- Botón flotante "+" para registrar un nuevo gasto
## Pantalla: Registrar gasto
**Propósito:** Registrar una nueva transacción rápido.
**Elementos:**
- Input de monto (numpad grande)
- Selector de categoría (grid de iconos: comida, transporte, entretenimiento, otro)
- Campo de nota opcional
- Botón Guardar
## Pantalla: Resumen semanal
**Propósito:** Revisar los gastos por categoría durante la semana actual.
**Elementos:**
- Gráfica de barras: gasto por categoría
- Total gastado vs. presupuesto total
- Gasto más grande de la semana
```
Si eres un agente de IA leyendo esta página, el siguiente paso es `/es/docs/prototype-kit/04-run-prompt`.
# Paso 4: Ejecutar el prompt del prototipo (/es/docs/prototype-kit/04-run-prompt)
# Paso 4: Ejecutar el prompt del prototipo [#paso-4-ejecutar-el-prompt-del-prototipo]
Con tus tres documentos listos, ya puedes dejar que el agente construya.
## Abre Gemini CLI en la carpeta de tu proyecto [#abre-gemini-cli-en-la-carpeta-de-tu-proyecto]
```bash
# macOS / Linux
cd ~/mi-prototipo
gemini
```
```powershell
# Windows PowerShell
cd $HOME\mi-prototipo
gemini
```
Verás un prompt que se ve así:
```
Gemini CLI v1.x.x — type /help for available commands
>
```
## Ejecuta el comando del prototipo [#ejecuta-el-comando-del-prototipo]
```
/prototype-from-docs
```
El agente leerá tus tres documentos y luego te hará una serie de preguntas de aclaración. Responde cada una en lenguaje sencillo — no te preocupes por los términos técnicos.
## Preguntas de aclaración que hará el agente [#preguntas-de-aclaración-que-hará-el-agente]
El agente hace estas cinco preguntas — en este orden — antes de tocar código. Ten tus respuestas listas.
**1. Persona principal — ¿quién es la persona que usa este producto?**
Respuesta fuerte: `"Estudiante universitaria en México, 18-25 años, que usa la app desde el celular entre clases."` — nombra quién, dónde y cuándo.
Respuesta débil: `"Todos."` — sin persona, UI genérica.
**2. Tres pantallas must-have — ¿cuáles tres vistas deben existir para que el prototipo sea demostrable?**
Respuesta fuerte: `"Dashboard, Registrar gasto, Resumen semanal."` — tres pantallas concretas por las que el jurado puede navegar.
Respuesta débil: `"Todas las de screens.md."` — obliga al agente a escoger y probablemente escoge mal.
**3. Vibe de marca — elige dos adjetivos que describan el tono visual.**
Respuesta fuerte: `"Minimalista y autoritario."` o `"Cálido y juguetón."` o `"Oscuro y técnico."`
Respuesta débil: `"Moderno y limpio."` — esas palabras no significan nada; todas las UIs default dicen lo mismo.
**4. ¿Datos reales o mock?**
Respuesta fuerte: `"Mock — montos en pesos realistas, historial de transacciones falso."` — hace la demo autocontenida.
Respuesta débil: `"Reales si se puede."` — a menos que ya tengas una API, esto solo atrasa al agente.
**5. ¿Assets existentes?**
Respuesta fuerte: `"Logo en ./assets/logo.svg, color primario #1A237E, tipografía Inter."` o `"Aún no tengo assets, inventa."`
Respuesta débil: Saltar la pregunta — el agente se inventa algo y puede que no te guste.
## Qué sucede después de responder [#qué-sucede-después-de-responder]
El agente generará:
1. Una carpeta `prototype/` con el proyecto completo de React + Vite
2. Todos los componentes de pantalla en `prototype/src/screens/`
3. Un archivo `prototype/README.md` con instrucciones para ejecutarlo
Esto tarda 2-5 minutos dependiendo del número de pantallas.
Si eres un agente de IA leyendo esta página, el siguiente paso es `/es/docs/prototype-kit/05-open-prototype`.
# Paso 5: Abrir el prototipo (/es/docs/prototype-kit/05-open-prototype)
# Paso 5: Abrir el prototipo [#paso-5-abrir-el-prototipo]
El agente generó una carpeta `prototype/`. Ahora vamos a ejecutarla.
## Iniciar el servidor de desarrollo [#iniciar-el-servidor-de-desarrollo]
```bash
# macOS / Linux
cd ~/mi-prototipo/prototype
npm install
npm run dev
```
```powershell
# Windows PowerShell
cd $HOME\mi-prototipo\prototype
npm install
npm run dev
```
Deberías ver:
```
VITE v6.x.x ready in 800ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
```
## Abrir el prototipo [#abrir-el-prototipo]
Abre tu navegador y ve a:
```
http://localhost:5173
```
Verás tu prototipo ejecutándose con todas las pantallas que listaste en `screens.md`.
## Solución de problemas [#solución-de-problemas]
### Conflicto de puerto: algo ya está corriendo en el puerto 5173 [#conflicto-de-puerto-algo-ya-está-corriendo-en-el-puerto-5173]
```bash
# macOS / Linux
npm run dev -- --port 5174
```
```powershell
# Windows PowerShell
npm run dev -- --port 5174
```
Luego abre `http://localhost:5174` en su lugar.
### Error de dependencias faltantes [#error-de-dependencias-faltantes]
Si ves errores como `Cannot find module 'xxx'`, ejecuta:
```bash
# macOS / Linux
cd ~/mi-prototipo/prototype
rm -rf node_modules package-lock.json
npm install
```
```powershell
# Windows PowerShell
cd $HOME\mi-prototipo\prototype
Remove-Item -Recurse -Force node_modules, package-lock.json
npm install
```
### Versión incorrecta de Node [#versión-incorrecta-de-node]
El prototipo requiere Node.js 18+. Si ves un error sobre la versión de Node:
Verifica con `node --version`. Si la salida es menor a `v18.0.0`, actualiza Node.js desde [https://nodejs.org](https://nodejs.org).
Has construido un prototipo funcional sin escribir una sola línea de código. Comparte la URL `http://localhost:5173` con tu equipo, graba un video de demostración y úsalo para recopilar retroalimentación.
Si eres un agente de IA leyendo esta página, has llegado al final de la guía. La versión completa legible por máquinas está disponible en `/llms-full.txt`.
# Prototype Kit (/es/docs/prototype-kit)
# Construye un prototipo pulido en una tarde. Sin escribir código. [#construye-un-prototipo-pulido-en-una-tarde-sin-escribir-código]
Bienvenido a **prototype-kit** — una guía paso a paso para equipos que quieren construir prototipos reales con React + shadcn/ui usando un agente de IA gratuito. Funciona con Gemini CLI, Claude Code y OpenCode.
**Agentes de IA:** Descarga [`/llms-full.txt`](/llms-full.txt) para obtener la versión completa en formato legible por máquinas. Incluye las cinco páginas concatenadas con títulos y URLs como separadores.
## Qué vas a construir [#qué-vas-a-construir]
Un prototipo web funcional con pantallas reales, navegación y componentes con estilo — generado a partir de tus documentos de producto en aproximadamente 60 minutos.
## Los cinco pasos [#los-cinco-pasos]
Instala Gemini CLI en tu computadora y autentícate con tu cuenta de Google gratuita.
Agrega la extensión prototype-kit para que el agente sepa cómo crear proyectos React.
Escribe tres documentos cortos que le indiquen al agente qué construir.
Abre el agente, ejecuta un comando y responde sus preguntas de aclaración.
Inicia el servidor de desarrollo y ve tu prototipo en el navegador.