メニュー
Designer-turned-developer who crafts stunning UI/UX even without design mockups
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/guilhermemarketing/esc-skills --skill frontend-ui-uxコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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".
SOC 職業分類に基づく
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.
