前端UI设计师越来越危险了！

Anthropic 竟然用Claude Skills 设计前端！

正所谓好看的皮囊千篇一律，有趣的灵魂万里挑一！

要用AI生产独具一格和品味的网站，非资深设计师还真办不到！

为了让Claude不生成那种千篇一律的网站样式。

Anthropic自己开始吃自家狗粮了。

通过创建前端设计Skill，他们从 Claude 中解锁更好的 UI 生成，而无需永久的上下文开销。

让Claude像前端工程师一样思考前端设计。你越能将美学改进映射到可实现的前端代码，Claude 的执行效果就越好。

前端 Skill 分别从 typography（字体排版）, animations（动画）, background effects（背景效果）, themes（主题）多个维度进行编写。

Typography  字体排版

下面的提示专门引导 Claude 使用更有趣的字体。

英文版

<use_interesting_fonts>
Typography instantly signals quality. Avoid using boring, generic fonts.

Never use: Inter, Roboto, Open Sans, Lato, default system fonts

Here are some examples of good, impactful choices:
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro
- Technical: IBM Plex family, Source Sans 3
- Distinctive: Bricolage Grotesque, Newsreader

Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.

Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.

Pick one distinctive font, use it decisively. Load from Google Fonts.
</use_interesting_fonts>

可以看到，让Claude避免使用Inter等千篇一律的字体后，输出的前端样式确实很亮眼，甚至也改变了UI的整体美感。

Themes  主题

不少博客都有主题，没有审美的话，往往选出来的主题单调乏味。

Anthropic使用下面的提示词来指导模型生成主题。

<always_use_rpg_theme>
Always design with RPG aesthetic:
- Fantasy-inspired color palettes with rich, dramatic tones
- Ornate borders and decorative frame elements
- Parchment textures, leather-bound styling, and weathered materials
- Epic, adventurous atmosphere with dramatic lighting
- Medieval-inspired serif typography with embellished headers
</always_use_rpg_theme>

合并到Skills

除了 字体排版和主题选择，还有动画和交互设计，引导模型选择更有趣的背景可以创造深度和视觉趣味。

Anthropic 团队综合了所有维度，开发了一个仅仅400个Token的提示词。

提示词足够紧凑，这样模型加载不会膨胀上下文（即使作为一项Skill加载），显着改善了排版、颜色、动画和背景方面的前端输出。

上述提示词，首先向 Claude 提供有关问题的一般背景以及试图解决的问题。他们发现，为模型提供这种类型的高级上下文是校准输出的有用提示策略。

然后，确定了我们之前讨论过的改进设计的几点，并给出了有针对性的建议，以鼓励模型在所有这些维度上更具创造性地思考。

下面是提示词的英文版，一般推荐直接用英文。

<frontend_aesthetics>
You tend to converge toward generic, "on distribution" outputs. In frontend design,this creates what users call the "AI slop" aesthetic. Avoid this: make creative,distinctive frontends that surprise and delight. 

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.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
- 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.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
</frontend_aesthetics>

案例展示

下面是相同的提示词，在未使用Skill和使用Skill后的效果对比。

示例 1：SaaS 登陆页面

Prompt: "Create a SaaS landing page for a project management tool"

示例 2：管理员仪表板

Prompt: "Create an admin panel with a data table showing users, their roles, and action buttons"

安装使用

/plugin install frontend-design@anthropics/claude-code

如果安装遇到问题，直接把错误贴给Claude Code，让他自己完成安装。凡是自己搞不定的，先让AI自己修！

写在最后

Skill 的确是一个比MCP更易用的设计，Skill目前存在很大的空白，很多场景等着挖掘。

每个人都可以把一些专业技能，或者是自己独有的小技能，通过Skill的形式安装给AI，让AI完成你的工作。