原始来源Anthropic
Frontend Design
指导 Agent 为新界面或现有界面作出有依据的视觉选择，而不是套用默认布局与装饰。
第三方 Agent Skills · 按任务浏览
面向界面设计的 Agent Skills
新建界面、审查已有界面，以及检查动效和交互行为，是不同的设计任务；这里按任务区分相应指引。
指令文件可以提供设计审查框架，但不能替代查看真实界面、检查无障碍支持，或在目标设备上测试交互。
精选 Skill 与原始来源
本站详情Vercel Labs
Web Design Guidelines
安装的 SKILL.md 是简短审查流程，不是固定不变的规则全集。Agent 每次先获取最新规范，再检查指定文件，并输出简洁的问题定位。
原始来源Emil Kowalski
Design Engineering
围绕界面打磨、组件设计、动效选择与一致性，提供设计工程视角。
原始来源Emil Kowalski
Review Animations
检查动画代码的目的、时长、可中断性、性能、可访问性和界面契合度。
原始来源Emil Kowalski
Apple Design
将 Apple 风格的交互原则用于网页中的手势、弹簧动画、弹层、空间反馈和减少动效设置。
本站详情Vercel Labs
Vercel React View Transitions
原始指南把动画与空间含义对应起来：列表到详情可能需要共享元素，后台刷新却通常不应动。具体实现还受 React 与框架版本约束。
本站为独立整理；Skill 的安装、工具要求和可用范围以发布者的原始说明为准。
按任务选择
从零开始做界面
Frontend Design 与 Design Engineering 关注初期的视觉方向和实现质量。
审查现有页面
Web Design Guidelines 为具体 UI 问题提供审查流程，而不是仅凭个人审美判断。
检查动效与反馈
当过渡、时序或减少动态效果的支持有问题时，选用动效专门指引。
探索其他 Skill 分类
按下一项任务选择指引，而不只按发布者浏览。
常见问题
这些 Skill 能直接生成完整设计系统吗？
不能。它们提供指引；完整设计系统仍需要产品决策、组件实现与测试。
审查现有 UI 先看哪个 Skill？
广泛审查可先看 Web Design Guidelines；如果问题集中在动效，就看 Review Animations。
设计和前端编码是同一个分类吗？
两者有交集，但不相同。本类聚焦视觉、交互和审查决定；Coding 聚焦实现修改。
这些页面会复制发布者的全部指令吗？
不会。原始 SKILL.md 才是维护源；Floatboat 只提供独立摘要与来源链接。