> Skill 地址：https://www.skills.sh/anthropics/skills/frontend-design

frontend-design 是一个专门面向前端界面设计与实现的 Agent Skill。它的重点不是让 Agent 随机生成一段“看起来能运行”的页面代码，而是帮助 Agent 按更接近真实产品设计的方式工作：先理解页面目标，再规划信息层级，确定视觉风格，拆分组件结构，补齐交互状态，最后落到可维护的前端实现。

如果你经常让 AI 生成页面，就会遇到一个典型问题：代码能跑，元素也齐全，但页面缺少产品感。比如间距混乱、视觉层级不清、按钮状态缺失、移动端布局崩掉、表单没有错误态。这正是 frontend-design 这类 Skill 适合解决的问题。

## 它主要解决什么问题

frontend-design 的作用可以理解为给 Agent 增加一套前端设计判断力。普通代码生成通常更关注“功能是否实现”，而这个 Skill 会提醒 Agent 同时关注“用户是否容易理解和使用”。

它适合处理这些任务：

- 设计 SaaS 官网、产品落地页、活动页；
- 构建 Dashboard、管理后台、数据分析页面；
- 优化表单、弹窗、卡片、导航、表格等组件；
- 为已有页面做 UI/UX review；
- 改善颜色、字体、间距、层级和响应式；
- 检查页面是否包含 loading、empty、error、disabled 等状态；
- 让一个粗糙页面更接近成熟产品。

它的价值不是“让页面更花哨”，而是让页面更清晰、更一致、更符合用户目标。

## 安装与启用方式

安装方式取决于你使用的 Agent 平台。大多数 Skills 都遵循类似结构：一个 skill 目录中包含 SKILL.md，里面定义 skill 名称、触发说明和使用规则。

如果你从 Skills 平台安装，可以打开 frontend-design 的页面，复制平台提供的安装命令，安装到当前 Agent 的 skills 目录。常见安装方式是使用 「npx skills add」。例如可以执行：

~~~bash
npx skills add anthropics/frontend-design
~~~

安装完成后，通常需要重启或刷新 Agent，让它重新加载 skill metadata。

如果手动安装，可以把 skill 放到类似这样的目录：

~~~text
~/.agents/skills/frontend-design/SKILL.md
~~~

或者放到项目约定的本地 skills 目录中。关键是 Agent 启动时能扫描到它的 name 和 description。

安装后可以用一个简单任务验证：

~~~text
帮我设计一个 AI 工具产品的 landing page，面向开发者，包含 Hero、功能介绍、使用流程、价格和 FAQ。
~~~

如果 Agent 开始先分析页面目标、用户群体、模块结构和视觉风格，而不是直接输出一坨代码，说明这个 Skill 已经发挥作用。

## 推荐使用方式

使用 frontend-design 时，提示词越具体，效果越稳定。不要只说“帮我写个页面”，最好说明产品类型、目标用户、视觉风格、技术栈和页面模块。

比如可以这样写：

~~~text
帮我设计一个 AI Agent 产品落地页，目标用户是开发者。风格要专业、有科技感，但不要过度炫酷。技术栈使用 React + Tailwind。页面包含 Hero、核心能力、使用流程、价格和 FAQ。
~~~

如果是优化已有页面，可以这样写：

~~~text
请 review 这个 Dashboard 页面，重点检查信息层级、间距、按钮状态、响应式和可访问性，并给出可以直接落地的修改建议。
~~~

如果是组件级任务，可以这样写：

~~~text
帮我设计一个文件上传组件，需要支持拖拽、上传中、上传失败、空状态和成功状态，风格要和现有后台系统一致。
~~~

更推荐的工作流是：先让 Agent 给出设计方案和组件拆分，再进入实现。这样你可以先确认方向，避免它直接生成大量不符合预期的代码。

## 实战中应该关注的细节

第一，要明确页面目标。落地页要突出价值主张和转化按钮，后台页面要突出效率和数据密度，设置页要突出清晰分组和安全感。不同页面不能用同一套视觉套路。

第二，要遵守现有设计系统。如果项目已经使用 Ant Design、shadcn/ui、Material UI 或内部组件库，就应该优先复用已有组件、颜色 token、间距和交互规范。不要让 Agent 重新发明一套风格。

第三，要补齐真实状态。一个产品级组件至少要考虑默认态、hover、focus、disabled、loading、empty、error 和 success。很多 AI 页面看起来像截图，就是因为只有理想状态，没有真实数据状态。

第四，要考虑响应式。桌面端三栏布局在移动端可能需要变成单列；复杂表格在小屏可能需要横向滚动或卡片化展示；按钮组也需要考虑换行和触控尺寸。

第五，要关注可访问性。按钮要有明确文案，表单要有 label，颜色对比度要足够，交互元素要能键盘访问。可访问性不是额外加分项，而是产品质量的一部分。

## 常见误区

一个常见误区是过度追求“AI 感”。大量渐变、发光边框、玻璃拟态和复杂动画并不一定高级。如果产品是 B2B 工具，清晰、稳定、专业往往比炫酷更重要。

另一个误区是只看首屏。很多页面首屏不错，但价格区、FAQ、表单状态、移动端表现很弱。frontend-design 更适合帮助你系统性检查整页体验。

还有一个误区是让 Agent 直接改代码，但不给项目上下文。实际项目中，应该先让 Agent 读取现有组件和样式约定，再做修改。否则生成的 UI 可能和项目风格割裂。

## 与其他 Skill 的配合

frontend-design 可以和代码实现类 Skill 配合。它负责设计判断、页面结构和体验建议，代码类 Skill 负责落地实现、重构和测试。

如果项目涉及复杂图表，也可以配合数据可视化类 Skill；如果涉及文案和品牌表达，可以配合写作类 Skill；如果涉及组件库规范，可以配合设计系统相关 Skill。

## 小结

frontend-design 的价值在于让 Agent 不只是“会写前端”，而是更懂“如何设计一个可用、好用、像产品的前端界面”。它适合用于页面设计、组件实现、UI 优化和体验审查。正确使用它时，你应该提供清晰业务目标和项目约束，让 Agent 先做设计判断，再进入代码实现。

介绍 frontend-design Skill 的适用场景、核心能力、推荐工作流、提示词示例和落地注意事项，帮助开发者用 AI Agent 生成更接近产品级的前端界面。

Agent Skills 教程 01：frontend-design 前端设计技能

> Skill 地址：https://www.skills.sh/remotion-dev/skills/remotion-best-practices

remotion-best-practices 是一个面向 Remotion 视频开发的 Agent Skill。Remotion 的特点是用 React、TypeScript 和 Web 技术生成视频，这让前端开发者可以像写组件一样写视频。但视频项目和普通 Web 页面不同，它需要关注帧、时间轴、渲染性能、资源加载、音视频同步和最终导出质量。

这个 Skill 的价值在于，让 Agent 在生成或修改 Remotion 项目时遵循更稳定的工程实践，而不是只写出一段能预览的组件代码。它适合帮助开发者构建可维护、可渲染、性能更稳定的视频工程。

## 它主要解决什么问题

remotion-best-practices 主要解决 AI Agent 写 Remotion 代码时容易忽略的视频工程细节。

普通 React 页面关注交互和状态，而 Remotion 项目关注时间和帧。一个动画是否正确，不只看组件结构，还要看帧数、fps、duration、composition、资源加载和渲染确定性。如果 Agent 不理解这些约束，生成的视频可能在预览中勉强可用，但渲染时出现闪烁、卡顿、资源缺失或时间不准。

这个 Skill 通常会提醒 Agent：

- 正确使用 Composition 和 durationInFrames；
- 使用 useCurrentFrame、interpolate 等 Remotion API 控制动画；
- 避免依赖非确定性逻辑；
- 处理图片、字体、音频和视频资源加载；
- 保证组件在不同帧下可预测渲染；
- 注意渲染性能和导出稳定性；
- 让视频代码更接近真实项目，而不是临时 Demo。

它适合用于生成产品宣传视频、代码演示视频、数据可视化视频、自动化短视频、字幕动画、社交媒体视频模板等场景。

## 安装与启用方式

可以使用 Skills CLI 安装这个 Skill：

~~~bash
npx skills add remotion-dev/remotion-best-practices
~~~

安装后，通常需要重启或刷新 Agent，让它重新加载 skills metadata。之后，当你要求 Agent 创建 Remotion 视频、修改 Remotion Composition、优化视频渲染或排查 Remotion 项目问题时，它就应该优先应用这个 Skill 的规则。

安装后可以用一个简单任务验证：

~~~text
帮我用 Remotion 做一个 10 秒的产品功能介绍视频，包含标题入场、三段功能卡片动画和结尾 CTA。
~~~

如果 Agent 不只是写 React 组件，而是主动考虑 fps、durationInFrames、时间轴、动画插值和资源组织，就说明这个 Skill 开始发挥作用。

## 推荐使用方式

使用这个 Skill 时，最好把视频目标描述清楚。Remotion 项目对时间结构很敏感，所以提示词里建议包含视频时长、分辨率、fps、画面结构、素材来源和动画风格。

例如：

~~~text
帮我创建一个 Remotion 视频，时长 12 秒，分辨率 1920x1080，30fps。内容是 AI Agent 产品介绍：前 3 秒展示标题，接着 6 秒展示三个能力卡片，最后 3 秒展示 CTA。动画要简洁、科技感，不要过度花哨。
~~~

如果是优化已有项目，可以这样写：

~~~text
请 review 这个 Remotion composition，检查时间轴、动画插值、资源加载和渲染性能问题，并给出修改建议。
~~~

如果是排查问题，可以提供错误信息、composition 名称、视频时长和相关组件，让 Agent 更容易定位。

## 实战中应该关注的细节

第一，时间线要清晰。视频代码最好明确每个阶段从哪一帧开始、持续多少帧。不要把所有动画时间写成散落的魔法数字。

第二，动画要可预测。Remotion 渲染要求同一帧输出稳定结果，因此不要在渲染过程中使用随机数、当前时间或不可控副作用。如果需要随机效果，应使用固定 seed。

第三，资源要提前规划。图片、字体、音频、视频素材都可能影响渲染。Agent 应该关注资源路径、加载方式、文件大小和格式兼容性。

第四，性能要考虑。复杂 SVG、大量 DOM、过多滤镜、频繁布局计算都会拖慢渲染。视频越长、分辨率越高，性能问题越明显。

第五，组件要可复用。标题动画、卡片动画、字幕、Logo、背景这些元素可以抽成组件，避免每个视频都从头写一遍。

## 常见误区

第一个误区是把 Remotion 当普通 React 页面写。普通页面可以依赖用户交互和运行时状态，但 Remotion 更强调帧级确定性。

第二个误区是忽略 durationInFrames。视频长度不明确时，动画很容易提前结束或超出画面。

第三个误区是只关注预览，不关注最终渲染。预览能播放不代表导出稳定，尤其是外部资源、字体和音频。

第四个误区是过度动画。视频不一定越炫越好。产品视频更需要节奏清晰、信息可读、视觉一致。

## 与其他 Skill 的配合

remotion-best-practices 可以和 frontend-design 配合。frontend-design 负责视觉结构、信息层级和画面风格，remotion-best-practices 负责把这些设计转化成稳定的视频时间轴和 Remotion 实现。

它也可以和代码审查类 Skill 配合，用于检查 composition 是否可维护、是否有性能风险、是否存在资源加载问题。

如果视频内容来自数据，还可以配合数据可视化类 Skill，把图表、指标和趋势设计成适合视频呈现的动画。

## 小结

remotion-best-practices 的核心价值，是让 Agent 更懂 Remotion 视频工程。它不仅帮助生成代码，还会关注帧、时间轴、资源、性能和渲染确定性。对于想用 AI Agent 生成产品视频、动态演示和自动化视频模板的开发者来说，这是一个非常实用的 Skill。

介绍 remotion-best-practices Skill 的功能、安装方式、使用方法、Remotion 视频工程实践、常见误区和与其他 Skill 的配合方式。

Agent Skills 精选资源库

课程目录

Agent Skills 教程 01：frontend-design 前端设计技能

Agent Skills 教程 02：remotion-best-practices 视频生成实践