メニュー
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
Creates distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implements real working code with exceptional attention to aesthetic details and creative choices.
Before coding, understand the context and commit to a BOLD aesthetic direction:
Pick an extreme direction and commit fully:
What makes this UNFORGETTABLE?
Create atmosphere and depth:
❌ Generic AI Aesthetics:
❌ Inconsistent Execution:
Maximalist Designs:
Minimalist/Refined Designs:
Elegance comes from executing the vision well.
Every design implementation must be:
Remember: Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
tailwind-design-system — Para tokens de diseño y configuración de Tailwind v4stitch-skills — Para generación de componentes UI con Stitch AI design toolvercel-composition-patterns — Para patterns de composición escalables en ReactUse PROACTIVELY to document new features, significant code changes, or when creating technical specifications for a feature not included in the original project technical specification. Specializes in creating comprehensive feature documentation for non-professional developers.
Write, read, and apply DESIGN.md files — Google Stitch's open AI-readable design-system format (YAML design tokens + Markdown rationale). Use when asked to "create a design.md", "extract a design system from [brand/PDF/site/screenshots]", "document this brand for AI tools", or when reverse-engineering a brand's visual identity into reusable tokens for an AI coding agent to apply consistently.
Builds complete bilingual email drafts from intent and audience. Use when the user asks to write, rewrite, localize, polish, or generate an email, campaign email, outreach message, customer update, follow-up, announcement, invite, sales email, internal note, or lifecycle email and wants clear subject lines, preheaders, body copy, CTAs, variants, or English and Spanish versions.
Provides the single source of truth for brand guidelines, design tokens, technology choices, and voice/tone. Use when applying brand colors, defining typography scale, configuring CSS custom properties, or writing copy that must match a specific brand voice. Triggers on: design tokens, brand colors, color palette, typography, font family, voice & tone, CSS variables, brand consistency, design system initialization.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Upgrades existing UIs to premium quality by auditing generic AI patterns and applying high-end design standards. Use when UI looks flat, generic, or "AI-slop". Triggers on: "improve the design", "looks generic", "not polished enough", "redesign this", "elevate the UI", "it looks boring", "make it better looking", "apply taste", "design review". Works with any CSS framework. Source: github.com/leonxlnx/taste-skill (redesign-skill variant).