引言
尝试用 AI 生成落地页时，结果往往风格高度同质化——白色背景、紫色渐变、Inter 字体。这种'机器感'强烈的设计缺乏个性与灵魂。
解决方案
Anthropic 官方发布了一个名为 frontend-design 的 Skill。同样的提示词与模型，加入该 Skill 后，生成了深色工业风背景、独特字体组合、大胆配色及精心编排的动效。
Skill 简介
Skill 可理解为包含指令的插件文件夹。frontend-design 的核心在于明确'什么是好的前端设计'，为 AI 提供判断标准。
设计原则
- 字体：拒绝通用字体，采用有性格的独特组合。
- 配色：避免均匀分布，使用大胆主色加尖锐点缀。
- 动效：从微交互升级为精心编排的加载动画。
- 布局：打破对称网格，采用非对称、重叠元素。
- 细节：纯色背景改为渐变网格、噪点纹理或几何图案。
安装方法
命令行（推荐）
npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code
若使用 Codex，将 --client 参数改为 codex；若使用 Cursor，添加 --local 参数。
手动下载
- 访问官方仓库获取
skills/frontend-design文件夹。 - 放置到
~/.claude/skills/目录下。 - 重启工具。
使用方法
在提示词中添加：'使用 frontend-design skill 来完成前端设计'。
适用场景
适用于产品官网、营销落地页、SaaS 产品界面、数据可视化 Dashboard 及需要惊艳效果的展示页。简单 CRUD 后台则无显著差异。
进阶玩法
可在原版基础上自定义品牌主色、偏好字体、圆角风格及阴影参数，确保生成内容符合品牌调性。
原理分析
该 Skill 并非教 AI'怎么做'，而是教 AI'怎么选'。它提供了判断标准，激活了模型已有的设计知识库，使交付更加稳定。
