基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Colin4k1024/tsp --skill frontend-ui-ux-system命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
自动化视觉测试与 UI 交互验证。部署功能后使用浏览器自动化验证关键页面、核心路径和发布前回归。 当任务需要真实浏览器验证渲染、导航、交互或前端上线风险时使用。
Use Open Design as an external local-first design workbench for prototypes, decks, mobile screens, dashboards, DESIGN.md systems, and exportable visual artifacts. Keep TSP responsible for team workflow, handoff, and quality gates.
作为 Team Skills Platform 中的 DevOps Engineer（运维工程师），负责环境变更、发布执行、监控、回滚与运行保障。 当用户明确点名该角色，或当前任务需要该角色承担主责时使用。
| name | frontend-ui-ux-system |
| description | 提供公司级前端 UI/UX 设计知识库，覆盖产品类型、视觉方向、设计 token、布局、 交互、可访问性、动效与交付检查。当前端任务需要统一设计语言或体验门禁时使用。 |
tech-lead、frontend-engineer、qa-engineer 在同一套设计语言下协作。检查项目根目录是否存在 DESIGN.md：
npx getdesign@latest add <brand> 或直接填写 DESIGN.md 模板 生成，放置于项目根目录。先阅读 frontend-ui-ux-standards.md 和 frontend-quality-gates.md 明确硬性门禁。
用 product-style-map.md 与 design-tokens.md 锁定产品类型、视觉方向和 token 策略。
对新界面或大改版先补齐 design-system-brief.md，对进入实现的任务补齐 ui-implementation-plan.md。
在交付评审前使用 interaction-accessibility.md、delivery-checklist.md 与 ui-review-checklist.md 做闭环检查。
tech-lead 需要判断某个需求的 UI 范围、设计约束和体验门禁是否已经足够明确。frontend-engineer 需要在多种视觉方向和交互模式中选定统一方案。qa-engineer 需要把视觉、交互、无障碍和性能检查标准从“主观观感”变成一致规则。