Frontend Design
围绕产品需求确定视觉方向，构建或重做有明确层级与表达的前端界面。
Anthropic
界面设计 Skills、组件与视觉资源
围绕视觉方向、可访问交互、React 组件与动效，查找设计指引和可复用资源，让页面设计与实际操作保持一致。
从视觉方向走向可操作的界面
设计需求、组件实现和页面审查分别解决不同问题。Skills 帮助判断层级、字体、交互与无障碍，独立项目可能提供界面组件、着色器素材或设计工作台。先明确页面内容、用户动作和需要覆盖的状态，再判断资源是否适合现有框架；视觉效果可复用，不代表它已经满足当前页面的操作与阅读要求。
设计与界面 Skills
设计与界面独立项目
Skill 提供任务指引，项目提供软件或配套资源。安装方式、运行条件、权限与许可请分别核对原始说明。
按任务选择
从零开始做界面
Frontend Design 与 Design Engineering 关注初期的视觉方向和实现质量。
审查现有页面
Web Design Guidelines 为具体 UI 问题提供审查流程，而不是仅凭个人审美判断。
检查动效与反馈
当过渡、时序或减少动态效果的支持有问题时，选用动效专门指引。
探索相关任务分类
按下一步工作查找指引与软件，从代码修改、界面设计延伸到办公与媒体制作，比较相邻任务需要的资源。
常见问题
新建界面与审查现有界面该选什么指引？
新界面需要视觉方向、内容层级和交互决定，现有界面审查则从已观察到的可用性或实现问题出发。前者选择创作类指引，后者选择审查类指引。
设计 Skill 能替代查看真实页面吗？
不能。截图和运行中的界面才能确认间距、溢出、对比度与状态变化。应在相关尺寸下查看并操作控件，再判断设计是否完成。
无障碍检查除了颜色对比还应看什么？
检查标题结构、有效标签、键盘导航、焦点可见性和交互状态反馈。视觉精致的页面，也可能难以通过键盘或辅助技术操作。
怎样判断界面是否需要某个动画？
先问它解释了什么变化、提供了什么反馈，再在真实任务中检查时长，并尊重减少动态效果的偏好。拖慢操作或干扰阅读的动效应简化或移除。
每个页面章节都应该新建组件吗？
结构和用途一致时优先复用现有组件，多页需要同一模式时再提取共享组件。页面内容应可配置，不要把不同用途的章节硬套进同一模板。
卡片怎样保持一致，又不写成模板文案？
统一信息职责与句子长度，说明项目做什么、帮助谁或处理什么。排版和间距应配合内容编辑；只靠截断文字不能解决描述空泛或长短失衡。
设计 Skill、组件和视觉素材应该怎样选择？
需要判断设计方向或审查界面时选 Skill；需要复用具体交互时检查组件是否适合当前框架；需要视觉表现时再选素材，并核对许可、渲染开销，以及是否影响阅读或操作。