用途：在 skillshare 项目的两个前端（ui/ 为 React 19 + Vite + Tailwind CSS v4，website/ 为 Docusaurus 3 + 自定义 CSS）中统一执行设计系统，适用于构建或修改仪表盘、官网页面与组件时。两套系统共用语义色名但视觉处理不同：仪表盘走极简风格（干净圆角 4/8/12px、pill 按钮，DM Sans，平面背景 #f7f6f3，细阴影）；官网走手绘风（wobbly 圆角、硬偏移阴影、点阵背景、虚线边框、波浪下划线，字体 IBM Plex Sans / Inter / JetBrains Mono）。
主要能力：提供设计令牌与颜色语义（text-pencil、text-pencil-light、text-muted-dark、text-success/warning/danger/blue、bg-surface、bg-paper、border-muted），强调每个视觉区域最多一个强调色，同一状态只用圆点或徽章之一；规定页面结构固定顺序 PageHeader → 工具栏（分段控件/下拉筛选）→ 摘要行或统计卡 → 内容区（表格/卡片列表/卡片网格）→ 底部对话框；给出组件库 API（Card、Button、Badge、PageHeader、EmptyState、ConfirmDialog、DialogShell、Input、Select、Checkbox、Spinner、Tooltip、SegmentedControl、Pagination、StatusBadge、Skeleton、Toast、FilterTagInput、IconButton）；规定统计展示（1-3 项用内联摘要，仅 KPI 概览用统计卡）、列表模式选择、按钮变体（danger 用于不可逆删除、secondary 用于可逆移除、ghost 用于取消、primary 用于正向操作）、分隔线统一用 border-dashed border-pencil-light/30、动画与键盘快捷键（?、/、g d/s/t/l、r，仅在无输入框聚焦时生效，和弦超时 500ms，需注册到 KeyboardShortcutsModal）；无障碍要求（focus:ring-2 focus:ring-blue/20、触控目标 ≥44px、对比度 4.5:1、图标按钮 aria-label、对话框 role/aria-modal/焦点陷阱、Select 用 combobox 角色）；数据获取用 @tanstack/react-query，查询键见 ui/src/lib/queryKeys.ts，API 客户端见 ui/src/api/client.ts；官网端列出 CSS 变量与 Docusaurus 类名（按钮、markdown h2、admonition、菜单激活态、代码块阴影等）。
使用方式：参考实现为 ui/src/pages/LogPage.tsx，完整风格指南见随技能附带的 references/STYLE_GUIDE.md；$ARGUMENTS 为正在处理的文件或区域。涉及令牌/组件之外的 UX 设计决策（布局策略、信息层级、交互模式、微文案或从零设计新页面）时，另调用 /ui-ux-pro-max。
限制与注意：Card 默认 overflow-hidden，绝对定位子元素（下拉、提示）会被裁剪，需传 overflow 属性或加 className="!overflow-visible"；不要用 window.confirm()、自定义空状态、内联样式写设计令牌、用表情充当状态图标、左侧色条表示状态，或混用分隔线透明度；下拉不应放在 flex-wrap 标题行内；新增快捷键须登记，避免覆盖浏览器原生快捷键。提交前按清单核对组件复用、页面结构、颜色令牌、分隔线、空状态、破坏性操作确认、aria-label、快捷键注册、animate-fade-in 与暗色模式。资料未提供具体收费、价格与平台信息。