skill分享 - 前端设计增强（frontend-design）

简介

这是来自 anthropics/claude-code 的前端设计 skill，用于在“组件/页面/应用”的实现中强调明确风格与设计记忆点。它的核心目标不是“能用即可”，而是在保证可运行的前提下，做出有审美方向、可上线的 UI。

核心价值

• ✅ 避免“AI 味”模板：拒绝千篇一律的默认布局和配色
• ✅ 设计方向清晰：先定风格，再落地结构与细节
• ✅ 产出可上线代码：不仅好看，而且可运行、可维护
• ✅ 细节更精致：排版、间距、层级、动效都有明确目标

适用场景

• 新建或重构前端组件 / 页面 / 应用
• 需要“美化 UI”但又不想变成模板化
• 需要明确视觉风格的品牌化页面

关键原则（摘要）

1. 先定审美方向：极简 / 极繁 / 复古未来 / 编辑感 / 粗粝 / 轻盈等，选一个并坚持。
2. 字体 / 色彩 / 动效 / 布局 / 背景 五个维度必须有明确选择。
3. 禁止项：通用字体 + 紫色渐变白底 + 模板卡片拼贴。
4. 复杂度匹配美学：复杂风格需要更丰富的实现细节，极简风格需要更精密的留白与排版。

如何使用

方法一：直接复制使用（推荐）

将下面的完整内容复制，发送给 Codex，告诉它“请帮我制作成 skill”。

方法二：手动创建 skill

创建 skill 并命名为 frontend-design，将下方内容作为配置即可。

---

Skill 完整内容

---
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
---

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.

Skill 中文版本（翻译）

---
name: frontend-design
description: 创建具有高设计品质、可上线的前端界面。当用户要求构建 Web 组件、页面或应用时使用。生成有创意、精致的代码，避免通用 AI 审美。
license: Complete terms in LICENSE.txt
---

本 skill 指导创建具有辨识度、可上线的前端界面，避免通用“AI 味”审美。实现真实可运行的代码，并在审美细节与创意选择上保持高标准。

用户会提供前端需求：要构建的组件、页面、应用或界面，并可能包含用途、受众或技术约束等上下文。

## 设计思考

在编码之前，理解上下文并确立一个大胆的审美方向：
- **目的**：这个界面解决什么问题？谁在使用？
- **基调**：选择一种极端风格：极简、极繁、复古未来、自然有机、奢华精致、玩具感、编辑/杂志感、粗粝主义、装饰艺术/几何、柔和粉彩、工业/工具感等。可用于灵感，但最终要选择与方向一致的风格。
- **约束**：技术要求（框架、性能、可访问性）。
- **差异化**：最让人记住的 1 个点是什么？

**关键**：选定清晰概念并精确执行。极繁或极简都可以，重要的是“有意识的选择”，而不是“强度”。

然后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求：
- 可上线且可用
- 视觉强烈且有记忆点
- 风格一致且有明确审美视角
- 细节打磨到位

## 前端审美指南

重点关注：
- **字体**：选择有性格、独特、耐看的字体。避免 Arial/Inter 等通用字体；选择能提升审美的字体组合。用有个性的标题字体搭配稳健的正文字体。
- **配色与主题**：统一审美，使用 CSS 变量保持一致性。主色明确 + 高对比点胜过平均分配的低对比色板。
- **动效**：用动画强化效果与交互。HTML 优先 CSS 动效，React 可用 Motion 库。聚焦高价值时刻：一个精心编排的首屏入场（staggered reveals）胜过零散微交互；加入滚动触发与惊喜 hover。
- **空间构成**：非对称、重叠、斜向流动、打破栅格。要么大留白，要么有控制的密度。
- **背景与细节**：创造氛围与深度，不要默认纯色。加入与审美一致的纹理与效果：渐变网格、噪点、几何图案、叠层透明、戏剧化阴影、装饰边框、自定义光标、颗粒感叠层等。

绝不要使用“通用 AI 审美”——过度使用的字体（Inter/Roboto/Arial/系统字体）、陈词滥调配色（特别是紫色渐变白底）、可预测的布局与组件拼贴、缺乏语境的模板化设计。

要大胆解释需求并做出意料之外但合理的选择。每次设计都应不同：在明暗主题、字体、审美方向上变化，避免在多次产出中趋同（例如总是用 Space Grotesk）。

**重要**：实现复杂度要匹配审美目标。极繁需要更丰富的动画与细节；极简或精致风格则需要对间距、字体与细节的高精度控制。优雅来自于把既定方向执行好。

记住：Claude 能做出非常高水准的创意作品。不要保守，要敢于突破，完整执行一个有辨识度的方向。