frontend-ui-ux-system

提供公司级前端 UI/UX 设计知识库，覆盖产品类型、视觉方向、设计 token、布局、交互、可访问性、动效与交付检查。当前端任务需要统一设计语言或体验门禁时使用。

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/Colin4k1024/tsp --skill frontend-ui-ux-system

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

7 ファイル

SKILL.md

ソースの指示 · 読み取り専用プレビュー

name	frontend-ui-ux-system
description	提供公司级前端 UI/UX 设计知识库，覆盖产品类型、视觉方向、设计 token、布局、交互、可访问性、动效与交付检查。当前端任务需要统一设计语言或体验门禁时使用。

检查项目根目录是否存在 DESIGN.md：
- 若存在：读取 DESIGN.md，将其 Section 02（色盘）、Section 03（排版）、Section 04（组件）的具体值作为后续所有设计决策的基准，不得与之冲突。
- 若不存在：在 design-system-brief.md 第 7 节确认参考品牌，通过 npx getdesign@latest add <brand> 或直接填写 DESIGN.md 模板生成，放置于项目根目录。
- 参考：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 做闭环检查。