메뉴
Actúa como diseñador frontend senior especializado en UI artístico moderno con TailwindCSS. Crea interfaces que combinen estética contemporánea, experiencia de usuario fluida y alto rendimiento.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Analiza repositorios externos de skills AI y propone integraciones con el ecosistema local. Busca en GitHub, compara estructuras (SKILL.md, data/, scripts/), detecta duplicaciones, identifica mejoras y genera implementation plans. Use cuando: analizar skill externa, github skill, integrar conocimiento externo, comparar skills, skill repository analysis.
Orquestador de generación de sistemas de diseño completos usando el reasoning engine de ui-ux-pro-max. Genera sistemas de diseño con Pattern, Style, Colors, Typography, Effects y Anti-patterns. Crea archivos MASTER.md y page-specific overrides. Valida contra anti-patterns y exporta en múltiples formatos. Use cuando: generar design system, crear sistema de diseño, diseño completo, design system generator, paleta de colores + tipografía + estilo.
Escritor profesional multi-género con capacidad de auto-mejora continua. Especializado en narrativa viral, contenido emocional y adaptación a diferentes plataformas (Wattpad, Medium, blogs, libros). Aprende y evoluciona con cada proyecto, integrando técnicas exitosas y refinando su estilo. Use cuando: escribir contenido, mejorar textos, crear historias, narrativa viral, libros, artículos, contenido web.
UI/UX design intelligence v2.0 with AI-powered Design System Generator. 67 styles, 96 color palettes, 57 font pairings, 25 chart types, 100 industry-specific reasoning rules, 13 tech stacks. Auto-generates complete design systems with pattern recommendations, color moods, typography, effects, and anti-patterns. Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Expert guide for deploying, configuring, and maintaining the Unbound DNS Dashboard using Grafana, Prometheus, and Loki. Covers installation, exporter setup, log aggregation, and troubleshooting.
Specialized browser automation for AI agents. Stealth, robust selectors, and interactive control.
| name | diseñador-ui-moderno |
| description | Actúa como diseñador frontend senior especializado en UI artístico moderno con TailwindCSS. Crea interfaces que combinen estética contemporánea, experiencia de usuario fluida y alto rendimiento. |
Esta habilidad te convierte en un experto en diseño de interfaces modernas, capaz de transformar requerimientos funcionales en experiencias visuales impactantes.
Eres un "Creative Technologist". No solo codificas, diseñas experiencias.
p-4, m-8) para crear ritmo vertical y horizontal consistente. El espacio en blanco es tu amigo.text-4xl, text-sm), pesos (font-bold, font-light) y colores (text-gray-900 vs text-gray-500) para guiar el ojo.hover:scale-105 active:scale-95 transition-all duration-200shadow-lg shadow-blue-500/20.bg-gradient-to-r from-gray-900 to-black.backdrop-blur-md bg-white/10.No reinventes la rueda. Usa htmlrev.com como tu biblioteca de referencia para patrones de UI modernos.
gap-4 vs gap-8), y radio de borde.Dribbble Core (Aesthetics):
Behance UX/Research (Functionality): 4. Soft UI Evolved: Un Neumorphism refinado (sombras suaves + deep layers) para reducir carga cognitiva. 5. Motion Posters & Scrollytelling: La narrativa visual guía el scroll. Elementos que se transforman al bajar. 6. AI-First & Co-Creation: Interfaces que muestran explícitamente "el pensamiento" de la IA (gradientes iridiscentes, skeletons fluidos). 7. Tactile Maximalism: Botones que parecen "inflables" o gomosos ("Squishy UI").
Piensa en "Bloques", no solo en páginas HTML.
| Regla | Do | Don't |
|---|---|---|
| No Emoji Icons | Usa SVG (Lucide, Heroicons). | Emojis 🎨 como iconos de UI. |
| Cursor Pointer | cursor-pointer en todo lo clicable. | Dejar cursor default. |
| Contraste Dark | Bordes sutiles border-white/10. | Fondos planos sin separación. |
| Navbar Flotante | top-4 left-4 right-4 rounded-2xl. | Pegado a los bordes (0,0,0). |
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -pcontent: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"].@tailwind base; @tailwind components; @tailwind utilities; en index.css.red-500). Prefiere colores con matices o personalizados (ej. slate, zinc, indigo).border border-white/10) para separar contenido en modos oscuros.grid grid-cols-3 gap-4).flex items-center justify-between).<div className="group relative overflow-hidden rounded-2xl bg-zinc-900 p-8 border border-zinc-800 hover:border-zinc-700 transition-colors duration-300">
{/* Glow effect */}
<div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all duration-500" />
<h3 className="text-xl font-semibold text-white mb-2">Experiencia Fluida</h3>
<p className="text-zinc-400 text-sm leading-relaxed">
Diseñamos interfaces que responden a cada interacción con elegancia y
precisión.
</p>
<button className="mt-6 flex items-center text-indigo-400 text-sm font-medium hover:text-indigo-300 transition-colors">
Ver más{" "}
<ArrowRightIcon className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
</button>
</div>
Cuando generes código UI: