| name | claudable-workflow |
| description | Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page. |
Workflow de Desarrollo Web
Fase 1: Descubrimiento
Antes de escribir código, responde estas preguntas:
- Propósito: ¿Qué hace este sitio/app?
- Audiencia: ¿Quién lo va a usar?
- Acciones clave: ¿Qué queremos que haga el usuario?
- Contenido: ¿Qué secciones necesitamos?
- Referencias: ¿Hay sitios similares que te gusten?
Fase 2: Dirección Estética
Elige UNA dirección principal:
| Estilo | Características | Mejor para |
|---|
| Minimalist | Espacio blanco, tipografía limpia, pocos colores | SaaS, portfolios |
| Brutalist | Crudo, tipografía bold, contrastes fuertes | Agencias, creativos |
| Luxury | Serif elegante, animaciones suaves, dark mode | Moda, premium |
| Playful | Colores vibrantes, ilustraciones, micro-interacciones | Apps consumer, startups |
| Editorial | Grid definido, jerarquía clara, como revista | Blogs, medios |
| Retro-futuristic | Gradients, glassmorphism, neon | Tech, gaming |
Fase 3: Setup del Proyecto
npm create vite@latest mi-proyecto -- --template react-ts
cd mi-proyecto
npm install tailwindcss @tailwindcss/vite
npx shadcn@latest init
npx shadcn@latest add button card input
npm install clsx tailwind-merge tw-animate-css
Fase 4: Sistema de Diseño
- Definir paleta de colores en CSS variables
- Elegir tipografías (evitar Inter, Arial, Roboto)
- Configurar espaciado consistente
- Crear componentes base personalizados
Fase 5: Desarrollo
Orden recomendado:
- Layout global - Header, Footer, estructura base
- Navegación - Menú principal, mobile nav
- Hero section - Primera impresión
- Secciones de contenido - Una por una
- CTAs y formularios - Conversión
- Estados - Loading, error, empty states
- Animaciones - Polish final
Fase 6: Testing Visual
# Usar Playwright MCP para screenshots
"Toma un screenshot de la página actual"
"Muéstrame cómo se ve en móvil"
Fase 7: Deploy
npm run build
"Despliega a Vercel"
npx vercel
Checklist Pre-Launch
