メニュー
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build immersive, scroll-driven websites with GSAP ScrollTrigger, Lenis smooth scroll, parallax effects, and cinematic page transitions. Use when building premium corporate sites, landing pages, or marketing microsites that need motion and polish beyond static designs.
Use when adding docstrings, creating API documentation, or building documentation sites. Invoke for OpenAPI/Swagger specs, JSDoc, doc portals, tutorials, user guides.
Use when reviewing pull requests, conducting code quality audits, or identifying security vulnerabilities. Invoke for PR reviews, code quality checks, refactoring suggestions.
Use when investigating slow queries, analyzing execution plans, or optimizing database performance. Invoke for index design, query rewrites, configuration tuning, partitioning strategies, lock contention resolution.
Use when investigating errors, analyzing stack traces, or finding root causes of unexpected behavior. Invoke for error investigation, troubleshooting, log analysis, root cause analysis.
Use when setting up CI/CD pipelines, containerizing applications, or managing infrastructure as code. Invoke for pipelines, Docker, Kubernetes, cloud platforms, GitOps.
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
| license | Adapted from Anthropic Skills (https://github.com/anthropics/skills/tree/main/frontend-design) |
When building frontend interfaces, create distinctive, production-grade designs with intentional aesthetic direction. Avoid generic "AI slop" aesthetics that lack character and context-specific design.
NEVER start coding without understanding:
Choose ONE clear conceptual direction and execute with precision:
✅ Valid approaches:
❌ Avoid:
Authority: Bold maximalism AND refined minimalism both work - the key is intentionality, not intensity.
Code must be:
ALWAYS check first:
I'm using the frontend-design skill to build [component/page/app].
Brand Guidelines Check:
- Location: .claude/BRAND-GUIDELINES.md
- Status: [EXISTS / NOT FOUND]
If guidelines exist:
Brand Guidelines Applied:
- Colors: [Primary: #XXX, Secondary: #XXX, Accent: #XXX]
- Typography: [Heading: Font A, Body: Font B]
- Visual Style: [Minimal/Maximal, Rounded/Angular, etc.]
- Personality: [Adjectives from brand guidelines]
I will design within these brand parameters.
If no guidelines:
No brand guidelines found. Proceeding with context-based design decisions.
Template:
Context Analysis:
- Purpose: [What problem does it solve? Who uses it?]
- Tone: [Chosen aesthetic direction OR brand personality]
- Constraints: [Technical requirements]
- Differentiation: [What makes it memorable?]
Aesthetic Direction: [Describe the bold direction chosen]
Choose fonts that are beautiful, unique, and interesting:
✅ DO:
❌ NEVER:
Example Combinations:
If brand guidelines exist: USE BRAND COLORS
/* Copy directly from .claude/BRAND-GUIDELINES.md */
:root {
/* Brand colors from guidelines */
--color-brand-primary: #[from guidelines];
--color-brand-secondary: #[from guidelines];
--color-accent-1: #[from guidelines];
/* ... complete palette from guidelines */
}
If NO brand guidelines: Create cohesive aesthetic
✅ DO:
❌ NEVER:
Implementation:
:root {
/* Primary palette */
--color-primary: #...;
--color-secondary: #...;
--color-accent: #...;
/* Semantic colors */
--color-background: #...;
--color-surface: #...;
--color-text: #...;
--color-text-secondary: #...;
/* State colors */
--color-success: #...;
--color-warning: #...;
--color-error: #...;
}
Use animations for high-impact moments:
✅ DO:
❌ AVOID:
Example: Staggered Page Load
.element {
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
}
.element:nth-child(1) { animation-delay: 0.1s; }
.element:nth-child(2) { animation-delay: 0.2s; }
.element:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Create unexpected, memorable layouts:
✅ DO:
❌ AVOID:
Create atmosphere and depth:
✅ DO:
❌ AVOID:
Example: Textured Background
.background {
background:
linear-gradient(135deg, #667eea 0%, #764ba2 100%),
url('data:image/svg+xml;base64,...') /* noise texture */;
background-blend-mode: multiply;
}
Match implementation complexity to aesthetic vision:
Authority: Elegance comes from executing the vision well, not from choosing "simple" or "complex."
❌ NEVER use:
❌ Mistakes:
✅ Solutions:
// Use framer-motion for animations
import { motion } from 'framer-motion';
const Component = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
Content
</motion.div>
);
<template>
<transition name="fade">
<div class="component">Content</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.6s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
<!-- Use semantic HTML -->
<article class="card" role="article">
<header class="card__header">
<h2 class="card__title">Title</h2>
</header>
<div class="card__content">
<p class="card__description">Description</p>
</div>
</article>
Before declaring frontend work complete:
Claude is capable of extraordinary creative work.
Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
Vary your designs: No two interfaces should look the same. Each should be uniquely designed for its specific context, purpose, and audience.
Quality over speed: Production-grade design takes time. Don't rush the aesthetic decisions.
Intentionality is everything: Whether minimal or maximal, the key is executing with clear purpose and precision.
This skill automatically integrates with the brand-guidelines skill:
.claude/BRAND-GUIDELINES.md at startRecommended workflow:
1. Use brand-guidelines skill first (establish/document brand)
2. Then use frontend-design skill (applies brand automatically)
3. Result: Consistent, on-brand, distinctive designs
Attribution: This skill is adapted from Anthropic Skills
Integrates with: brand-guidelines skill for automatic brand application