✦

Del Prompt al
MVP con Claude

De la idea a las especificaciones listas para implementar

Mario Alberto Chávez Arquitecto Rails & creador de herramientas IA — Colima, México
maquina.app
Acerca de mí

Arquitecto Rails & creador de herramientas IA

Mario Alberto
Chávez

  • 15+ años construyendo con Ruby on Rails — sistemas empresariales, fintech y herramientas para desarrolladores.
  • ∿ Co-fundador de michelada.io — consultora Rails con clientes como Levi's, startups fintech y proveedores de salud en EE.UU.
  • ◆ Creador de maquina.app, Rails MCP Server y railsenespanol.co — el curso de Rails en español.
Maquina site

Cómo hacer vibecoding usar Claude AI
para desarrollo sin morir en el intento

Phase 01

MVP Creator

Investiga el mercado, haz las preguntas correctas y genera
cinco documentos base — uno aprobado a la vez.

claude — MVP Creator
~/projects/liminal ❯ claude
You
▋
Claude
Thinking…
MVP Creator — Phase 01

Resultado

Cinco documentos base

RESEARCH_REPORT.md → Análisis de competidores, matriz de funcionalidades y oportunidades de mercado.
MVP_BUSINESS_PLAN.md → Visión del producto, personas, flujos de usuario y métricas de éxito.
BRAND_GUIDE.md → Logotipos SVG, paleta de color, tipografía y configuración de Tailwind @theme.
TECHNICAL_GUIDE.md → Modelos de datos, patrones Rails, estrategia I18n y decisiones de arquitectura.
CLAUDE.md → Contexto del proyecto para Claude Code, configuración MCP y comandos personalizados.

Revisa y aprueba cada documento antes de solicitar el siguiente — cada uno alimenta al que sigue.

MVP_BUSINESS_PLAN.md

Documento generado

Liminal
MVP Business Plan

  • Nombre y significado — el umbral entre crear y entregar
  • Executive Summary en español
  • Problem Statement con contexto LATAM
  • Personas, flujos y métricas de éxito
MVP plan
TECHNICAL_GUIDE.md

Documento generado

Liminal
Technical Guide

"Rails vanilla es suficiente. La complejidad del producto viene de la experiencia del usuario, no de la arquitectura del código."
  • Rails 8 — Omakase, sin service objects
  • Hotwire — Turbo + Stimulus, sin frameworks JS
  • Tailwind CSS 4 — configuración CSS-first
  • maquina_components — UI à la shadcn/ui para Rails
  • Active Storage — variantes thumb / medium / high
Technical guide

Phase 02

Design
& Brand

Dos entregables. Uno define cómo habla la app.
El otro define cómo se ve. Ambos guían cada
spec de SDD que viene después.

BRAND_GUIDE.md

Documento generado

Liminal
Brand Guide

Serenidad Sin ruido, sin distracción — solo el trabajo.
Precisión La calidad del diseño es un espejo de la del fotógrafo.
Confianza El trabajo está protegido. La entrega, a la altura.
  • Propuesta de logotipo SVG lista para usar
  • Paleta de color + configuración @theme Tailwind 4
  • Tipografía y escala visual compatible con maquina_components
  • Voz y tono — sereno, preciso, profesional
Brand guide
Prompt opcional
✦ Define el tono y voz del producto — cómo habla la app con sus usuarios
✦ Genera microcopy bilingüe — botones, estados vacíos, errores, páginas de marketing
✦ Elimina el hype genérico de SaaS antes de que entre al código
claude — Brand Voice
~/projects/liminal ❯ claude
You
▋
Claude
Thinking…
frontend-design skill
✦ Mocks en HTML, CSS y JS vanilla — sin frameworks, listos para el browser
✦ 6 pantallas priorizadas — las dos caras de Liminal: cliente y fotógrafo
✦ Cada pantalla incluye contenido real y una nota de decisión de diseño
claude — UI Mocks
~/projects/liminal ❯ claude
You
▋
Claude
Thinking…
UI Mock — Fotógrafo

Mock generado

Project
Dashboard

Decisión de diseño

El estado de cada proyecto es lo primero — sin métricas innecesarias. El fotógrafo entra, ve qué necesita atención y actúa.

  • Vista autenticada — acceso del fotógrafo
  • Lista de proyectos con estado: borrador, compartido, cerrado
  • Conteo de fotos, visitas y descargas por proyecto
  • Acción rápida: crear proyecto, copiar link de entrega
Project dashboard

Phase 03

Spec-Driven
Development

Convierte los documentos aprobados del MVP en specs formales,
task breakdowns, y prompts de implementación
listos para Claude Code.

recuerd0.ai

Memoria del proyecto

Recuerd0
Workspace

  • Crea un workspace por proyecto — cada documento del MVP es una memoria independiente
  • El contexto persiste entre sesiones — Claude Code siempre sabe qué se decidió y por qué
  • Brand guide, guía técnica y specs informan cada prompt sin repetir instrucciones
  • Los documentos se comparten con todo el equipo — el contexto no vive solo en tu máquina
  • Claude accede a las memorias vía CLI y un Skill dedicado — sin copiar y pegar contexto
↗ recuerd0.ai
Recuerd0 workspace
spec-driven-development skill
✦ Lee las memorias de Recuerd0 — los documentos del MVP llegan como contexto sin copiar y pegar
✦ Crea la carpeta sdd/ y los slash commands /sdd-shape /sdd-tasks /sdd-status
✦ Prioriza sin piedad — revisa mission.md y roadmap.md en cuanto se generan. Este es el momento de cortar scope. No toda feature del Business Plan pertenece a v1
claude — SDD Init
~/projects/liminal ❯ claude
You
▋
Claude
Thinking…
Feature Workflow

El MVP Business Plan define las features — shape y spec filtran lo que entra en v1

01 Shape
  • 4–6 preguntas de alcance
  • Búsqueda en el codebase
  • references.md + standards
  • Visuales si aplica
02 Spec
  • Goal + User Stories
  • Requirements formales
  • Referencia visual
  • Out of Scope explícito
03 Tasks
  • 4 grupos de tareas
  • Prompt autocontenido por grupo
  • 2–5 tests por grupo
  • 10–20 tests por feature
04 Implement
  • Spec completo a Claude Code
  • Por grupo o sesión completa
  • Prompts independientes
  • Subagentes en paralelo

Orden recomendado: Autenticación primero → Modelo de datos core → Flujo UX principal → Features secundarias en orden de prioridad del Business Plan

Task Groups + Technical Stack — desde la Technical Guide memory

Grupos de tareas

01 — Database

  • Migrations · Models + validations
  • Associations + scopes · Fixtures

02 — Backend

  • Controllers + routes · Business logic
  • Authorization · Background jobs

03 — Frontend

  • ERB views (Tailwind 4) · Turbo Frames
  • Stimulus controllers · maquina_components

04 — Integration

  • System tests · Model unit tests
  • Controller tests · Edge cases

Stack no negociable

Framework & Frontend

FrameworkRails 8.x
FrontendHotwire — Turbo + Stimulus
CSSTailwind 4 — CSS-first config
Componentsmaquina_components

Infraestructura

JobsSolid Queue
CacheSolid Cache
AuthRails 8 built-in
TestingMinitest + Fixtures
DeployKamal 2

Patrones obligatorios

✓Rich domain models con concerns — sin service objects
✓CRUD resources — sin acciones de controller custom
✓Turbo Morph por defecto — Frames usados con moderación
Rails Vanilla — One Man Framework

Escribiendo código

Un developer.
Un framework.
Producción.

Opinionado por diseño. Rails sin abstracciones innecesarias — modelos ricos, CRUD resources, Hotwire. La complejidad viene de la experiencia del usuario, no de la arquitectura.

Maquina Generators

  • maquina:app — auth, multi-tenancy, jobs, error tracking
  • maquina:clave — autenticación passwordless
  • Sin dependencia en runtime — el código es tuyo
↗ maquina.app/documentation/generators/

Maquina Components

  • 16+ componentes — Alert, Badge, Card, Form, Sidebar, Table…
  • Estilo shadcn/ui para Rails — Tailwind 4 + Stimulus
↗ maquina.app/documentation/components/

Skills & Agents activos

Rails Simplifier

  • Mantiene el código idiomático — patrones 37signals
  • Elimina abstracciones que Rails ya resuelve

Better Stimulus

  • Mejores prácticas para Stimulus controllers
  • Lifecycle, outlets, valores — sin antipatrones

Maquina UI Standards

  • Guía de uso consistente de maquina_components
  • Brand guide y voz aplicados a cada vista

Recuerd0 Agents

  • Business Plan, Technical Guide y Brand Guide como contexto activo
  • Claude Code consulta las memorias en cada sesión de trabajo
Ejemplo real

Construido con esta metodología

Resto

  • App de finanzas personales basada en el método Kakeibo
  • Rails 8 · Hotwire · Tailwind 4 · maquina_components
  • Autenticación passwordless con maquina:clave
  • Un developer · desplegado con Kamal 2
TuResto screenshot
✦

Gracias

Mario Alberto Chávez
Arquitecto Rails & creador de herramientas IA — Colima, México

Open source — todas las herramientas
disponibles en maquina.app

1 / 10 │ ← → │ f │ Acerca de mí →