Frontend UI/UX System

SkillDocs & knowledge

Provides an enterprise-level frontend UI/UX design knowledge base covering product types, visual direction, design tokens, layout, interaction, accessibility, motion, and delivery checklists. Use when frontend tasks require a unified design language or experience gates.

Use Frontend UI/UX System in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Frontend UI/UX System and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Frontend UI/UX System skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Frontend UI/UX SystemStart free

What this skill tells your AI

The instructions your AI receives, as published by hashgraph-online/awesome-codex-plugins in plugins/Colin4k1024/tsp/skills/frontend-ui-ux-system/SKILL.md and read by Ahel’s review.

用途

把 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 需要把视觉、交互、无障碍和性能检查标准从“主观观感”变成一致规则。

Signals

GitHub stars: 1k
Forks: 316
Last commit: Oct 2026

Advanced

Item type: skill
Key: frontend-ui-ux-system
Source: github.com/hashgraph-online/awesome-codex-plugins

github.com/hashgraph-online/awesome-codex-plugins