Menu
Designer-turned-developer who crafts stunning UI/UX even without design mockups
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/guilhermemarketing/esc-skills --skill frontend-ui-uxThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Interpreta exports JSON versionados e relatórios Markdown legados do Feedback Studio e, quando solicitado, aplica com rastreabilidade comentários ao artefato-fonte correspondente. Use quando houver exportKind "feedback-studio.project-feedback", schemaVersion, "Feedback Report", "Comment #", "Element Selector" ou pedido para aplicar feedbacks exportados. Não use para manutenção do produto Feedback Studio nem para feedback genérico sem relatório.
Gera 10 conceitos criativos de performance para Meta Ads (Facebook/Instagram) com Hook → Hold → Offer, 40+ Creative Types, mapeamento de emoção e funil e diversidade anti-clone. Toda headline visível é clara e autoexplicativa em até 1,7 segundo: nomeia o assunto e a dor, benefício ou resultado, sem depender de legenda ou interpretação. Cada conceito inclui estratégia direct response, copy com limites, visual funcional, variações A/B, prompt de imagem e adaptações por placement, com Feed 4:5 (1080x1350px) como formato padrão. Orientado por design system; quando não fornecido, extrai automaticamente das referências do cliente. Use para anúncios de conversão, geração de leads ou vendas no Instagram/Facebook, criativos para feed, stories e reels, campanhas Meta Ads e peças direct response.
Gera landing pages premium completas para geração de leads (SQL) em 2 fases: (1) Wireframe-Tabela — seleciona o melhor framework de copywriting (AIDA, P.A.S.T.O.R., Q.U.E.S.T., BAB, PAS, FAB, 4P's, SCQA, SLAP, ACCA, etc.) e estrutura a LP em tabela com seções, headlines, copy e notas para designer; (2) Landing Page Premium — transforma a tabela em HTML premium com design minimalista, liquid glass glassmorphism, skeuomorphism, micro-animations, ritmo visual por contraste seccional (visual pacing, cognitive chunking, sectional contrast), scroll-triggered effects e design system baseado no briefing do cliente. Use para criar landing page premium, LP de alta conversão, página de vendas glassmorphism, LP para Google Ads ou Meta Ads, página de captura sofisticada, ou pedidos como "cria uma LP premium", "landing page moderna/profissional", "ritmo visual" e "contraste seccional".
Based on SOC occupation classification
Showing SKILL.md
| 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.
