Playbook
Prototype Kit

Paso 3: Preparar tus documentos de producto

Escribe los tres documentos cortos que el agente necesita para construir tu prototipo.

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.

# 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
# 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

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:

# 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:

# 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

Describe el aspecto y la sensación en palabras simples. El agente traducirá esto en colores, tipografía y estilo de componentes.

Plantilla:

# 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

Lista cada pantalla que necesita tu prototipo. Para cada pantalla, describe su propósito y los elementos principales.

Plantilla:

# Pantallas

## Pantalla: [Nombre de la pantalla]
**Propósito:** [Una oración: ¿qué hace el usuario aquí?]
**Elementos:**
- [Elemento 1]
- [Elemento 2]
- [Elemento 3]

Ejemplo:

# 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.

On this page