メニュー
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications to avoid generic AI aesthetics and make memorable UIs.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Perform a meticulous final pass on UI code. Use when polishing components, doing a final review before shipping, or when asked to polish or refine the UI.
Review code for accessibility and visual design issues. Use when reviewing UI code, auditing components, checking accessibility, or when asked to review a file for design issues.
Accessibility and interaction rules for building UIs. Use when building forms, buttons, navigation, animations, or any interactive elements.
Master workflow for building exceptional UIs. Use when starting UI work, building components, or when the user asks about the development process for interfaces.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications to avoid generic AI aesthetics and make memorable UIs. |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.
Commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute with precision.
See typography reference for scales and pairing.
DO: Use a modular type scale with fluid sizing (clamp) DO: Vary font weights and sizes for clear hierarchy DON'T: Use overused fonts—Inter, Roboto, Arial, Open Sans DON'T: Use monospace as lazy shorthand for "technical"
See color reference for OKLCH and palettes.
DO: Use modern CSS color functions (oklch, color-mix, light-dark) DO: Tint neutrals toward your brand hue DON'T: Use gray text on colored backgrounds DON'T: Use pure black (#000) or pure white (#fff) DON'T: Use the AI palette: cyan-on-dark, purple-to-blue gradients, neon accents
See spatial reference for grids and rhythm.
DO: Create visual rhythm through varied spacing DO: Use fluid spacing with clamp() DO: Use asymmetry and break the grid intentionally DON'T: Wrap everything in cards DON'T: Nest cards inside cards DON'T: Center everything
DO: Use intentional, purposeful decorative elements DON'T: Use glassmorphism everywhere DON'T: Use rounded rectangles with generic drop shadows DON'T: Use modals unless truly necessary
See motion reference for timing and easing.
DO: Use motion to convey state changes DO: Use exponential easing (ease-out-quart/quint/expo) DON'T: Animate layout properties DON'T: Use bounce or elastic easing—they feel dated
Critical check: If someone said "AI made this," would they believe it immediately? If yes, that's the problem.
Review the DON'T guidelines—they are fingerprints of AI-generated work from 2024-2025.
Match complexity to aesthetic vision. Maximalist designs need elaborate code. Minimalist designs need restraint and precision.
Interpret creatively. Make unexpected choices. No design should be the same.
