Frontend Design
围绕产品需求确定视觉方向，构建或重做有明确层级与表达的前端界面。
Anthropic
前端界面 Skills：设计实现与 React 项目检查
比较界面设计指引与运行页面的检查工具。处理 React 项目时，还需要提供仓库中的组件、样式约定与测试环境。
区分界面决策与运行证据
从视觉需求开始时，可比较 Frontend Design 与 Design Taste Frontend。OpenDesign 用于 HTML 原型，Impeccable 支持界面改进，Browser Testing with DevTools 则补充现有页面的运行证据。处理 React 应用时，先提供实际版本与组件约定，再适配输出。当前资源侧重界面工作，尚未收录专门的 React API 或性能指南。
前端界面 Skills
前端界面独立项目
Skill 提供任务指引，项目提供软件或配套资源。安装方式、运行条件、权限与许可请分别核对原始说明。
按任务选择
从界面需求开始
先提供内容、视觉要求和现有组件体系，再选择设计指引。
检查真实交互
在运行中的应用里检查导航、控件、响应式状态和控制台证据。
从原型进入 React 实现
用 OpenDesign 制作 HTML 原型后，先核对应用组件和状态，再适配到 React。
探索相关任务分类
按下一步工作查找指引与软件，从代码修改、界面设计延伸到办公与媒体制作，比较相邻任务需要的资源。
常见问题
新界面从哪类资源开始？
设计指引可比较 Frontend Design 与 Design Taste Frontend；交付物是 HTML 原型时可查看 OpenDesign。开始前分别核对指南的宿主与配置要求。
现有页面出错时从哪里开始？
Browser Testing with DevTools 通过 Chrome DevTools MCP 收集控制台和网络证据。提供可访问页面与复现步骤，再排查运行行为。
设计需求需要提供什么？
提供真实文案、目标屏幕、品牌要求和可复用组件。只有截图时，交互行为可能仍不明确。
浏览器检查能证明组件逻辑正确吗？
它只能说明已检查状态下的可见行为。状态转换和边界情况仍需组件或集成测试。
怎样检查手机布局？
检查窄屏、长文本、键盘焦点和展开菜单等状态，查看真实页面，不能只看桌面截图。
这些 Skill 会安装 UI 组件库吗？
分类本身没有这种含义。按来源说明配置，依赖变更需要单独核对与授权。