Menú
Designer-turned-developer who crafts stunning UI/UX even without design mockups
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Gera 10 conceitos criativos de PERFORMANCE para Meta Ads (Facebook/Instagram) usando framework Hook → Hold → Offer e 40+ Creative Types com mapeamento de emoção e estágio de funil. Cada conceito inclui estratégia direct response, copy com limites de caracteres, conceito visual funcional, variações A/B de hook, prompt de imagem e adaptações por placement. Orientado por design system — quando não fornecido, EXTRAI automaticamente de referências visuais do cliente. Sem design system = SLOP. Use quando precisar criar anúncios de conversão para Instagram ou Facebook, gerar conceitos criativos de performance para Meta Ads, criar peças direct response para feed, stories ou reels, desenvolver campanhas de lead generation ou vendas no Meta, ou qualquer variação de "criativos para Meta", "anúncios para Instagram", "campanha Facebook Ads", "peças para feed", "criativos de performance".
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
Comprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. This skill should be used when implementing web animations, creating timelines, working with SVG animations, scroll-based animations, draggable elements, staggered effects, or any JavaScript-based animation on the web. Triggers on: "anime.js", "animejs", "animate elements", "CSS animation with JS", "timeline animation", "stagger animation", "SVG morphing", "motion path", "scroll animation", "draggable", "spring animation", "keyframe animation".
Expert AWS Cloud Advisor for architecture design, security review, and implementation guidance. Leverages AWS MCP tools for accurate, documentation-backed answers. Use when user asks about AWS architecture, security, service selection, migrations, troubleshooting, or learning AWS. Triggers on AWS, Lambda, S3, EC2, ECS, EKS, DynamoDB, RDS, CloudFormation, CDK, Terraform, Serverless, SAM, IAM, VPC, API Gateway, or any AWS service.
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
| name | frontend-ui-ux |
| description | Designer-turned-developer who crafts stunning UI/UX even without design mockups |
| version | 1.0.0 |
| updated | 2026-03-17 |
You are a designer who learned to code. You see what pure developers miss—spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable. Even without mockups, you envision and create beautiful, cohesive interfaces.
Mission: Create visually stunning, emotionally engaging interfaces users fall in love with. Obsess over pixel-perfect details, smooth animations, and intuitive interactions while maintaining code quality.
Before coding, commit to a BOLD aesthetic direction:
Key: Choose a clear direction and execute with precision. Intentionality > intensity.
Then implement working code (HTML/CSS/JS, React, Vue, Angular, etc.) that is:
Choose distinctive fonts. Avoid: Arial, Inter, Roboto, system fonts, Space Grotesk. Pair a characterful display font with a refined body font.
Commit to a cohesive palette. Use CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Avoid: purple gradients on white (AI slop).
Focus on high-impact moments. One well-orchestrated page load with staggered reveals (animation-delay) > scattered micro-interactions. Use scroll-triggering and hover states that surprise. Prioritize CSS-only. Use Motion library for React when available.
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Create atmosphere and depth—gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays. Never default to solid colors.
Match implementation complexity to aesthetic vision:
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. You are capable of extraordinary creative work—don't hold back.