Frontend Design
围绕产品需求确定视觉方向，构建或重做有明确层级与表达的前端界面。
查看详情指南 →发布者: Anthropic
面向界面设计的 Agent Skills
新建界面、审查已有界面，以及检查动效和交互行为，是不同的设计任务；这里按任务区分相应指引。
指令文件可以提供设计审查框架，但不能替代查看真实界面、检查无障碍支持，或在目标设备上测试交互。
精选 Skill 与原始来源
Web Design Guidelines
根据最新网页设计规范审查界面文件，将问题定位到相关代码并给出精简检查结果。
查看详情指南 →发布者: Vercel Labs
Design Engineering
围绕界面打磨、组件设计、动效选择与一致性，提供设计工程视角。
发布者: Emil Kowalski
Review Animations
检查动画代码的目的、时长、可中断性、性能、可访问性和界面契合度。
发布者: Emil Kowalski
Apple Design
将 Apple 风格的交互原则用于网页中的手势、弹簧动画、弹层、空间反馈和减少动效设置。
发布者: Emil Kowalski
Vercel React View Transitions
根据导航、共享元素与界面状态变化，选择具有明确空间含义的 React 视图过渡。
查看详情指南 →发布者: Vercel Labs
Impeccable
通过单个 Skill 与专项命令设计、检查和优化界面，并核对实际渲染结果。
查看详情指南 →发布者: pbakaus
本站为独立整理；Skill 的安装、工具要求和可用范围以发布者的原始说明为准。
按任务选择
从零开始做界面
Frontend Design 与 Design Engineering 关注初期的视觉方向和实现质量。
审查现有页面
Web Design Guidelines 为具体 UI 问题提供审查流程，而不是仅凭个人审美判断。
检查动效与反馈
当过渡、时序或减少动态效果的支持有问题时，选用动效专门指引。
探索其他 Skill 分类
按下一项任务选择指引，而不只按发布者浏览。
常见问题
新建界面与审查现有界面该选什么指引？
新界面需要视觉方向、内容层级和交互决定，现有界面审查则从已观察到的可用性或实现问题出发。前者选择创作类指引，后者选择审查类指引。
设计 Skill 能替代查看真实页面吗？
不能。截图和运行中的界面才能确认间距、溢出、对比度与状态变化。应在相关尺寸下查看并操作控件，再判断设计是否完成。
无障碍检查除了颜色对比还应看什么？
检查标题结构、有效标签、键盘导航、焦点可见性和交互状态反馈。视觉精致的页面，也可能难以通过键盘或辅助技术操作。
怎样判断界面是否需要某个动画？
先问它解释了什么变化、提供了什么反馈，再在真实任务中检查时长，并尊重减少动态效果的偏好。拖慢操作或干扰阅读的动效应简化或移除。
每个页面章节都应该新建组件吗？
结构和用途一致时优先复用现有组件，多页需要同一模式时再提取共享组件。页面内容应可配置，不要把不同用途的章节硬套进同一模板。
卡片怎样保持一致，又不写成模板文案？
统一信息职责与句子长度，说明项目做什么、帮助谁或处理什么。排版和间距应配合内容编辑；只靠截断文字不能解决描述空泛或长短失衡。