---
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, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

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. NEVER converge on common choices (Space Grotesk, for example) across generations.

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: 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.

使用说明：

设计理念先行：在编码前深入理解上下文并确定大胆的美学方向
核心思考维度：
- 目的：界面解决什么问题？谁在使用？
- 基调：选择极端风格（极简主义、极繁主义、复古未来主义、有机自然、奢华精致、游戏化、杂志风、粗野主义、装饰艺术、柔和粉彩、工业实用等）
- 约束条件：技术要求（框架、性能、可访问性）
- 差异化：什么让这个设计难忘？最突出的特点是什么？
执行原则：
- 选择明确的概念方向并精准执行
- 实现生产级别的功能性代码
- 视觉冲击力强且令人难忘
- 整体美学观点一致
- 每个细节都精心打磨

前端美学指导原则：

字体排版：选择美观、独特、有趣的字体，避免Arial、Inter等通用字体
色彩主题：坚持统一的美学风格，使用CSS变量保持一致性
动效设计：为重点时刻使用动画和微交互，优先CSS解决方案
空间构成：采用非对称、重叠、对角线流动等意外布局
背景视觉：创造氛围和深度而非默认纯色背景

重要提醒：

绝不使用通用AI生成的美学风格（如过度使用的紫色渐变、可预测的布局等）
创造性解读需求，做出真正为上下文量身定制的意外选择
在极简主义和极繁主义之间找到平衡，关键是意图明确而非强度

许可证： Apache License 2.0（详见LICENSE.txt）

特点总结：

这个技能与其他自动化技能有显著不同：

创意导向：专注于设计美学和用户体验
手工制作感：强调避免"AI生成"的通用外观
个性化定制：每个设计都应该独一无二
技术实现：涵盖HTML/CSS/JS到React/Vue等现代框架
质量标准：生产级别、功能完善、视觉惊艳

这更像是一个创意设计助手，而非传统的自动化工具。

编辑技能

基本信息

使用方法

发布设置

分类管理