Agent Skills Hub

design-system-implementation

强制执行 UI 严格遵守项目设计系统的标记、组件与布局规范，以确保前端开发的一致性。

design-system-patterns

掌握设计系统架构：实现设计标记 (design tokens)、多品牌主题、组件库以及自动化设计转代码流程，建立可扩展的 UI 基础。

ui-design-system

专业 UI 设计系统工具包，涵盖设计代币生成、组件架构、响应式设计计算及开发人员交接文档，确保视觉一致性。

build-design-system

使用 Design Graph 方法论构建连贯且基于约束的设计系统。自动化设计令牌、排版比例、组件、变体及主题的创建过程。

design

协作式 UI 设计、线框图绘制与 Tailwind 优先的代码优化，打造独特且高质量的界面，避免生成式 AI 的通用设计模式。

pencil-ui-design

使用 Pencil MCP 进行工业级 UI 设计的完整工作流与组件库，包含颜色、字体、间距与阴影的标准化设计规范。

tailwind-design-system

利用 Tailwind CSS v4 构建可扩展的设计系统，包含 CSS 优先配置、设计标记、组件变体与响应式模式。

wednesday-design

UI/UX 设计助手，为 React/Next.js 项目强制执行组件库使用规范、可访问性与设计标记。确保使用 shadcn/ui、Aceternity 等核准库来保持视觉一致性。

visual-design-foundations

建立一致的视觉系统，包含设计代币、模块化排版系统、8点间距网格及无障碍色彩规范，以提升 UI 开发的一致性。

design-excellence

一套设计系统与反模式指南，让 AI 生成的界面更具人工质感。通过管理色彩、排版、间距与动画，为 Toh Framework 提供专业的视觉品质。

design-md

分析 Stitch 项目并将语义化设计系统合成为 DESIGN.md 文件，作为 AI 驱动 UI 生成的真实数据来源。

cloudscape-codegen

生成符合 Cloudscape Design System 的 React + TypeScript UI 代码，包含辅助功能、响应式布局及完善的状态处理。