Run any Skill in Manus with one click

Get Started

frontend-ui-ux-system

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

Run Skill in Manus

Overview

Install command

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

Copy and paste this command into Claude Code to install the skill

Source

Colin4k1024/tsp

Stars0

Forks0

UpdatedApril 22, 2026 at 06:08

File Explorer

7 files

SKILL.md

readonly

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

Frontend UI/UX System

用途

把 UI/UX 决策前置到计划和方案阶段，不把视觉和体验变成实现末端的补丁。
让 tech-lead、frontend-engineer、qa-engineer 在同一套设计语言下协作。

默认做法

检查项目根目录是否存在 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 做闭环检查。

何时优先调用

tech-lead 需要判断某个需求的 UI 范围、设计约束和体验门禁是否已经足够明确。
frontend-engineer 需要在多种视觉方向和交互模式中选定统一方案。
qa-engineer 需要把视觉、交互、无障碍和性能检查标准从“主观观感”变成一致规则。

More from this repository

same repository

codegraph

Colin4k1024/tsp

将 CodeGraph 作为默认内置 MCP-backed 代码图谱能力接入，用于 brownfield 符号搜索、调用链、影响面和上下文查询。输出必须回落到 `/team-*` 主链和 artifacts。

2026-05-220

open-design

Colin4k1024/tsp

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.

2026-05-070

gitnexus

Colin4k1024/tsp

将 GitNexus 作为受控可选代码智能能力接入，用于 brownfield MCP 查询、影响面分析、 detect_changes、多仓分析和更深代码图谱证据。输出必须回落到 `/team-*` 主链和 artifacts。

2026-05-050

context-engineering

Colin4k1024/tsp

项目级上下文工程框架：通过 PROJECT / REQUIREMENTS / ROADMAP / STATE 四层文档为每个任务建立结构化上下文，控制 token 预算，防止上下文腐烂，确保跨会话连续性。与 context-lifecycle 的 L0-L3 层互补。

2026-04-220

frontend-engineering

Colin4k1024/tsp

提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。

2026-04-220

pua

Colin4k1024/tsp

强化高能动性和高压闭环执行的行为技能。适用于连续失败、原地打转、空口完成、把问题甩给用户、没搜就猜、修完就停等场景，也支持手动通过 /pua 进入核心模式。

2026-04-220

Source

Colin4k1024

Colin4k1024/tsp

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web and Digital Interface DesignersComputer and Mathematical Occupations15-1255L4

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

Frontend UI/UX System

用途

把 UI/UX 决策前置到计划和方案阶段，不把视觉和体验变成实现末端的补丁。
让 tech-lead、frontend-engineer、qa-engineer 在同一套设计语言下协作。

默认做法

检查项目根目录是否存在 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 做闭环检查。

何时优先调用

tech-lead 需要判断某个需求的 UI 范围、设计约束和体验门禁是否已经足够明确。
frontend-engineer 需要在多种视觉方向和交互模式中选定统一方案。
qa-engineer 需要把视觉、交互、无障碍和性能检查标准从“主观观感”变成一致规则。