By 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
# 1. Crear proyecto
npm create vite@latest mi-proyecto -- --template react-ts
cd mi-proyecto
# 2. Instalar Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite
# 3. Configurar Vite
# Añadir @tailwindcss/vite a vite.config.ts
# 4. Instalar shadcn
npx shadcn@latest init
# 5. Instalar componentes base
npx shadcn@latest add button card input
# 6. Instalar utilidades
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
# Build de producción
npm run build
# Deploy a Vercel (con MCP)
"Despliega a Vercel"
# O manualmente
npx vercel
Checklist Pre-Launch
- Responsive en mobile, tablet, desktop
- Favicon y meta tags
- Open Graph images
- Loading states
- 404 page
- Performance (Lighthouse > 90)
- Accesibilidad básica (contraste, alt texts)