🎨

5 Skills para Disenar Webs y Apps con Claude Code

Instala estas 5 habilidades y convierte a Claude en tu disenador web personal. Sin Figma, sin Photoshop, sin saber CSS.

🔌 Skills instalables — copia, pega y funciona
⚡
Claude Code puede disenar y construir paginas web y apps completas. Pero con estas 5 skills instaladas, pasa de "bueno" a "increible". Cada skill le da conocimiento especializado que no tiene por defecto.

🔧 Antes de empezar: como instalar una skill

Instalar una skill en Claude Code toma 30 segundos:

  1. 1

    Abre tu terminal

    Donde tienes Claude Code instalado

  2. 2

    Crea el archivo de la skill

    En la carpeta .claude/skills/ de tu proyecto

  3. 3

    Usa el comando /nombre-skill

    Claude la carga automaticamente y ya tiene ese conocimiento

npx skills add coreyhaines31/marketingskills --skill page-cro copywriting
01
ui-ux-pro-max
El cerebro de diseno completo
Esta es LA skill. Le da a Claude conocimiento de 50 estilos de diseno (glassmorphism, brutalism, minimalism, bento grid...), 21 paletas de colores, 50 combinaciones de fuentes, y soporte para React, Next.js, Vue, Svelte, Tailwind y shadcn/ui.

Con esta skill Claude no solo genera HTML basico — genera disenos de nivel profesional con animaciones, responsive design, dark mode y accesibilidad.
Ejemplo de uso
/ui-ux-pro-max diseña una landing page glassmorphism dark mode para un spa en Bogota con reservas online, galeria de fotos y testimonios
50 estilos 21 paletas 9 frameworks Responsive
02
page-cro
Optimizacion de conversion
Disenar bonito no sirve si nadie hace clic. Esta skill convierte a Claude en un experto en CRO (Conversion Rate Optimization). Analiza tu pagina y te dice exactamente que cambiar para que mas gente agende, compre o llame.

Revisa: CTAs, jerarquia visual, velocidad de carga, posicion de formularios, copy de botones, flujo de navegacion y mas.
Ejemplo de uso
/page-cro analiza esta landing page y dame 10 cambios concretos para aumentar las conversiones de reserva
CTAs A/B testing +30% conversion
03
copywriting
Textos que venden
Una pagina web con buen diseno pero textos malos no convierte. Esta skill transforma a Claude en un copywriter profesional. Genera headlines que enganchan, descripciones que venden y CTAs que la gente no puede ignorar.

Funciona para landing pages, paginas de producto, secciones "sobre nosotros", FAQs, y cualquier texto que necesite persuadir.
Ejemplo de uso
/copywriting reescribe todos los textos de esta pagina web de clinica dental para que suenen profesionales pero cercanos, enfocados en eliminar el miedo al dentista
Headlines CTAs Persuasion
04
schema-markup
SEO tecnico invisible
El schema markup es codigo invisible que le dice a Google exactamente que es tu pagina — un restaurante, una clinica, un hotel. Esto hace que aparezcas con estrellas, horarios, precios y direccion directo en los resultados de busqueda.

La mayoria de paginas web de negocios pequenos NO tienen esto. Tu se lo agregas en 2 minutos y el cliente aparece mejor posicionado que su competencia.
Ejemplo de uso
/schema-markup agrega schema de LocalBusiness, Restaurant y FAQ a esta pagina web con todos los datos del negocio
Google Rich Results SEO Local Estrellas en Google
05
site-architecture
Estructura que escala
Antes de disenar, necesitas planificar. Esta skill convierte a Claude en un arquitecto web que define la estructura de navegacion, las URLs, los links internos y la jerarquia de contenido.

Perfecto para cuando el cliente dice "quiero una pagina web" pero no sabe que paginas necesita. Claude le arma toda la estructura en 30 segundos.
Ejemplo de uso
/site-architecture planifica la estructura completa de un sitio web para un hotel boutique: paginas, navegacion, URLs y contenido de cada seccion
Navegacion URLs limpias Links internos

🚀 El combo completo: como usarlas juntas

💡
El poder real esta en combinar las 5 skills en un solo flujo de trabajo. Asi es como construimos paginas web en menos de 24 horas en Athora AI.
PasoSkillQue hace
1/site-architectureDefine las paginas, navegacion y estructura
2/ui-ux-pro-maxDisena cada pagina con estilo profesional
3/copywritingEscribe textos que venden en cada seccion
4/page-croOptimiza para que la gente convierta
5/schema-markupAgrega SEO tecnico para Google

Resultado: una pagina web profesional, optimizada para conversion y SEO, lista para publicar — todo en menos de 1 hora.

📋 Como instalar las 5 skills ahora mismo

npx skills add coreyhaines31/marketingskills --skill page-cro copywriting schema-markup site-architecture

Para ui-ux-pro-max, esta se instala automaticamente si usas Claude Code con el editor de VS Code o la CLI.

✅
Una vez instaladas, son permanentes. No las tienes que instalar de nuevo. Cada vez que abras Claude Code, ya las tiene disponibles.

❓ Preguntas frecuentes

Necesito saber programar para usar estas skills?
No. Las skills funcionan con lenguaje natural. Tu le dices a Claude que quieres y el hace todo el codigo. Tu solo describes el resultado que esperas.
Funcionan para apps moviles tambien?
Si. La skill ui-ux-pro-max soporta React Native, Flutter y SwiftUI. Puedes pedirle que disene interfaces de app con el mismo flujo.
Cuanto cuesta Claude Code?
El plan Pro cuesta $20 USD/mes y te da acceso completo. Las skills son gratuitas y open source.
Puedo usar esto para vender paginas web a clientes?
Absolutamente. En Athora AI usamos exactamente este flujo para entregar paginas web en 24 horas. El cliente paga entre $500K y $900K COP por una landing page profesional.

Quieres aprender a construir webs y apps con IA?

En Automatiza con Athora ensenamos paso a paso como usar Claude Code, n8n y mas para automatizar negocios y vender servicios.

📅 Asesoria gratis 💬 WhatsApp directo

📸 @athoraaicol