Diseña Sin Saber Diseñar
Cinco habilidades gratuitas de Claude Code que te convierten en diseñador — páginas web, pósters, apps, paletas de colores y arte generativo. Las instalas y listo.
Qué vas a encontrar
- Frontend Design — diseña páginas y apps completas con tipografía, colores y animaciones
- Canvas Design — crea pósters y gráficos para redes sociales en PNG o PDF
- Web Artifacts Builder — construye apps funcionales sin escribir código
- Theme Factory — 10 paletas de colores con tipografía lista para usar
- Algorithmic Art — arte generativo con patrones infinitos que ni Canva ni Figma pueden hacer
Las 5 son gratis. Las instalas y ya.
01 frontend design
Diseña Tu Página Completa
Qué puedes hacer
- Le dices para qué es tu página o tu app y Claude la diseña completa
- Elige tipografía, colores, animaciones y layout por ti
- Genera código real listo para usar — no un mockup ni una imagen
- Funciona para landing pages, dashboards, apps, portfolios y más
anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design
Skill oficial de Anthropic — open source
Instalación rápida
claude install-skill https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-designEjemplo: landing para negocio
Claude diseña toda la página desde cero
Diseña una landing page para una pastelería artesanal. Elige colores cálidos, tipografía elegante, animaciones suaves al hacer scroll. Incluye hero con foto, sección de menú, testimonios y formulario de contacto.
Ejemplo: dashboard minimalista
Claude crea la interfaz completa de un panel de control
Diseña un dashboard minimalista para una app de finanzas personales. Usa colores neutros, tipografía limpia y tarjetas con sombras suaves. Incluye gráfico de gastos, lista de transacciones y resumen mensual.
02 canvas design
Crea Pósters y Gráficos
Qué puedes hacer
- Crea pósters, portadas e infografías para cualquier red social
- Genera archivos listos para descargar en PNG o PDF
- Sigue tu identidad de marca — no plantillas genéricas
- Composición profesional con tipografía integrada como elemento visual
anthropics/skills/tree/main/skills/canvas-design
Skill oficial de Anthropic — open source
Instalación rápida
claude install-skill https://github.com/anthropics/skills/tree/main/skills/canvas-designEjemplo: póster para Instagram
Diseño visual listo para publicar
Crea un póster para Instagram anunciando el lanzamiento de mi curso online de fotografía. Usa colores oscuros con acentos dorados. Incluye solo el nombre del curso y la fecha — mínimo texto, máximo impacto visual.
Ejemplo: portada de YouTube
Banner profesional para tu canal
Diseña una portada de YouTube para un canal de tecnología. Estilo moderno y limpio, colores azul oscuro con detalles en cyan. Solo el nombre del canal y un tagline corto.
03 web artifacts builder
Construye Apps Sin Código
Qué puedes hacer
- 40+ componentes pre-instalados listos para armar tu app
- React + TypeScript + Tailwind — stack profesional automático
- Genera una app funcional que puedes usar de inmediato
- Un solo comando convierte todo en un archivo HTML que compartes
anthropics/skills/tree/main/skills/web-artifacts-builder
Skill oficial de Anthropic — open source
Instalación rápida
claude install-skill https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builderEjemplo: calculadora de precios
App funcional sin escribir código
Crea una calculadora de precios para un servicio de diseño gráfico. El usuario selecciona tipo de proyecto (logo, póster, web), nivel de complejidad y urgencia. Muestra el precio estimado al instante.
Ejemplo: organizador de tareas
Mini app con drag and drop
Construye un organizador de tareas con tres columnas: Por Hacer, En Progreso y Terminado. Que se puedan arrastrar tareas entre columnas. Diseño limpio y minimalista.
04 theme factory
Colores y Tipografía Resueltos
Qué puedes hacer
- 10 paletas de colores profesionales listas para usar
- Cada paleta viene con tipografías que combinan perfecto
- También puedes crear paletas personalizadas desde cero
- Aplica el tema a cualquier proyecto — slides, páginas, reportes
anthropics/skills/tree/main/skills/theme-factory
Skill oficial de Anthropic — open source
Instalación rápida
claude install-skill https://github.com/anthropics/skills/tree/main/skills/theme-factoryEjemplo: paleta para SaaS
Colores y fuentes para tu producto digital
Muéstrame todas las paletas disponibles en Theme Factory y recomienda la mejor para una app SaaS de productividad. Aplícala a un ejemplo de interfaz.
Ejemplo: tema personalizado
Crea tu propia paleta desde cero
Crea un tema personalizado para una marca de café artesanal. Colores terrosos y cálidos, tipografía que se sienta orgánica y moderna a la vez.
05 algorithmic art
Arte Generativo — Ni Canva Ni Figma Pueden
Qué puedes hacer
- 100+ variaciones de arte generativo con patrones infinitos
- Fractales, espirales, sistemas de partículas y geometría
- Controles interactivos para ajustar todo en tiempo real
- Cada semilla genera una obra única — misma semilla, mismo resultado
anthropics/skills/tree/main/skills/algorithmic-art
Skill oficial de Anthropic — open source
Instalación rápida
claude install-skill https://github.com/anthropics/skills/tree/main/skills/algorithmic-artEjemplo: fractal animado
Arte generativo con patrones que se repiten
Crea arte generativo inspirado en patrones de crecimiento natural — ramas de árboles, raíces, corales. Usa colores verdes y dorados sobre fondo oscuro. Incluye controles para ajustar la densidad y velocidad.
Ejemplo: geometría abstracta
Patrones geométricos con controles interactivos
Genera un sistema de partículas con patrones geométricos que fluyen como un río. Colores cyan y magenta sobre negro. Quiero poder controlar la cantidad de partículas y la fuerza del flujo.
bonus
Instala Todo de un Jalón
Un solo comando para instalar las 5 habilidades. Copia, pega en tu terminal y listo.
Instalar las 5 habilidades
claude install-skill https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design && claude install-skill https://github.com/anthropics/skills/tree/main/skills/canvas-design && claude install-skill https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder && claude install-skill https://github.com/anthropics/skills/tree/main/skills/theme-factory && claude install-skill https://github.com/anthropics/skills/tree/main/skills/algorithmic-artReferencia rápida — ¿cuál uso?
| Skill | Para qué | Ejemplo rápido |
|---|---|---|
| Frontend Design | Páginas y apps completas | "Diseña mi landing" |
| Canvas Design | Pósters y gráficos | "Hazme un póster para IG" |
| Web Artifacts | Apps sin código | "Crea una calculadora" |
| Theme Factory | Colores + tipografía | "Dame paletas para SaaS" |
| Algorithmic Art | Arte generativo | "Genera un fractal animado" |
Las cinco habilidades son completamente gratuitas.
Las instalas una vez y ya las tienes para siempre. No necesitas suscripción, no necesitas pagar — solo Claude Code. Sígueme en @soyenriquerocha y compártelo con alguien que lo necesita.