设计类 MCP / Skill 推荐

将 I-Lang 协议格式编写的结构化设计简报解析为具体的设计规范。通过明确要求调色板、字体、布局、情绪、密度与约束等维度，消除“做得专业点”这类模糊请求的歧义。触发关键词：design brief、create a design brief、ilang brief、structured brief。

从导入的源码、截图或 Figma 导出中提取设计令牌（颜色/字体/间距），产出 token-map 消费的规范化令牌集合。

从产品方向到组件体系收敛，设计、探索、实现、打磨、重设计并评审 Epicenter 界面。用于共创界面、追问「别的应用怎么做」、对比 UI 方向或同类产品、把粗略功能想法变成可构建的 Svelte 界面、选择 @epicenter/ui 组件、修改 packages/ui，或替换堆满 class 的标记与本地界面原语。纯 CSS 小修不属于本技能范围，除非它暴露出更大的模式问题。

审查 UI 代码是否符合 emcn 设计系统——组件、设计令牌、模式与约定。

通过托管的 Design MCP 应用进行 UI/UX 探索、并列设计方向、交互原型预览、用户选择、迭代，以及设计到代码的交接。

按 SQLite Sync 约束为 `crates/cloudsync` 设计或评审 schema，而非套用泛泛的 SQLite 建议。在添加同步表、修改同步列或规划对 CloudSync 安全的迁移时使用。

在 `apps/desktop` 中构建以 SQLite 为后端的响应式 UI，对读取、选择、表单、写入与加载状态采用稳定模式。在实现或审查基于 `useDrizzleLiveQuery` 与 SQLite 变更的界面时使用。

使用并行子代理为一个模块生成多种差异极大的接口设计方案。当用户想设计 API、探索接口选项、比较模块形态，或提到“design it twice”时使用。

配置 ConfigMap 相关操作，属于 DevOps Advanced 的自动激活 skill。在配置系统或服务时使用。触发词：kubernetes configmap handler、kubernetes handler、kubernetes。

构建数据库表结构相关操作，属于 Backend Development 的自动激活 skill。触发词：database schema designer、database designer、database。在处理表结构设计功能时使用。

根据风格描述从内置设计系统库中匹配最合适的设计系统，提供设计规范供后续设计工作使用。

面向 Web UI 的反模板化前端设计——落地页、作品集、营销/产品站点及改版。阅读需求、推断合适方向，交付不显模板化的界面。适用时使用真正的设计系统，改版时先做审计，严格执行预飞检查。不适用于移动应用。

Node.js/Express/TypeScript 微服务的完整后端开发指南。在创建路由、控制器、服务、repository、middleware，或使用 Express API、Prisma 数据库访问、Sentry 错误追踪、Zod 校验、unifiedConfig、依赖注入或异步模式时使用。涵盖分层架构（routes → controllers → services → repositories）、BaseController 模式、错误处理、性能监控、测试策略，以及从遗留模式的迁移。

React/TypeScript 应用的前端开发准则。包含 Suspense、懒加载、useSuspenseQuery、按 features 目录组织文件、MUI v7 样式、TanStack Router、性能优化与 TypeScript 最佳实践等现代模式。在创建组件、页面、功能模块、拉取数据、写样式、路由或处理前端代码时使用。

打造独特、生产级、高设计质量的前端界面。在构建 Web 组件、页面、产物、海报或应用（网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 做样式美化）时使用。生成富有创意的精致 UI，避免千篇一律的 AI 审美。

按写作指南审查或撰写文档/文案。当被要求“审查我的文档”“检查写作风格”“审计文案”“评审文档语气语调”“对照写作手册检查此页”时使用——并在编写或编辑 docs/src/content/docs/ 下的内容时主动应用，这是本仓库的默认文档风格。

在编写 React 组件、从 Mantine v6 迁移到 v8 或编写样式代码时应用 Lightdash 前端样式指南。在编辑 TSX 文件、修复样式问题，或用户提到 Mantine、样式、CSS modules 时使用。

分析分支或 PR，自动捕获其变更触及的每个 UI 界面前后截图，再做像素级差分呈现实际变化，并组装成可直接放进 PR 的前后对比拼图。通用且 diff 驱动：从 diff 推导捕获目标（变更的工具/路由 → URL）而非手工列举界面，「前」从基础分支捕获、「后」从头部分支捕获，仅保留视觉上确有差异的视图。每次对比自动裁剪到实际变化区域（差异像素包围盒），仅当变更覆盖大部分页面时才回退整页。用于前后截图、分支/PR 视觉差分、「给 PR 描述配截图」「展示 UI 改了什么」或 UI 变更并排对比。接受 PR 编号/URL（经 gh 解析）或分支名；默认当前分支对比其基础分支。参数：--scope <selector>、--base <ref|merge-base>、--theme light|dark|both、--all（捕获每条路由而非仅变更处）。

对当前分支功能做完整的 UI 调查。枚举每个视图与状态（空态、有数据、加载、错误、每个对话框/菜单/面板、响应式断点、浅色+暗色+RTL），用内置 Playwright 工装捕获，汇总为带全局明暗切换滑杆的单图 HTML 走查，随后跑两轮审查：视觉/一致性（对齐、间距、专业感、明暗一致、对比度、截断）与 UX/易用性（流程、可发现性、可供性、空态/错误态、预期）。当被要求做 UI 走查、截图审查、设计或 QA 巡检、「找出可以更易用/更好的地方」或前端工作合并前使用。加 --fix 自动应用安全的前端修复并重新捕获；--theme 限定主题；--no-rtl 跳过 RTL。

NIC 的 Docker 镜像构建系统、Dockerfile 结构、镜像变体、构建脚本与 Makefile 目标。在构建容器镜像、修改 Dockerfile、新增镜像变体、调试镜像构建或处理构建脚本时使用。

在任何视觉产物开工前产出结构化设计规范（DESIGN.md + 结构布局 + 决策记录）——这一“蓝图”阶段让 AI 生成的设计摆脱模板感。当用户要求设计、规划、做样机或重构任何视觉输出时使用——PPT/幻灯片、落地页、仪表盘、海报、图表、信息图、营销页、UI 组件、原型、插画——即便他们只说“做个关于 X 的幻灯片”或“帮我搭一个 Y 页面”。当用户要求以原则驱动、规格先行的方式（而非表面修饰）批判或改进既有设计时也触发。不要在用户已提供完整 DESIGN.md 且只想写实现代码时触发（交给 frontend-design 或直接实现）。

打造独具特色、生产级品质的 UI。在创建或重塑面向用户的界面、组件、页面、布局、视觉重设计、响应式行为、加载/错误/空状态，或涉及无障碍的前端工作时使用。

使用 hadolint、Trivy 和 Grype 审计 Docker 镜像与 Dockerfile 的安全漏洞、臃肿问题和最佳实践违规，输出带严重度分级和可执行修复建议的结构化报告。当用户想检查 Docker 镜像安全问题、扫描容器漏洞、审计 Dockerfile、加固镜像、缩小镜像体积、减少攻击面、查看容器 CVE，或问“这个 Dockerfile 安全吗”“扫描我的镜像”“检查我的容器漏洞”“怎么让镜像更小”“审计我的 Docker 配置”“加固这个容器”时使用。用户刚创建或修改 Dockerfile 并希望出货前验证时也应触发。

构建新 UI 或重塑既有 UI 时提供独特而有意图的视觉设计指引。只要任务产出或修改用户会看到的渲染内容——网站、落地页、Web 应用、仪表盘、React/HTML/Vue 组件、带视觉输出的 artifact、风格 overhaul，或“让它更好看”的请求——即使用户从没说“设计”二字也应使用。涵盖美学方向、字体排印、环境约束（字体、Tailwind、素材），以及何时应归于惯例而非追求独特。

当用户询问 GitNexus 本身——可用工具、如何查询知识图谱、MCP 资源、图 schema 或工作流参考——时使用。示例：“有哪些 GitNexus 工具？”“我该怎么用 GitNexus？”

审查文档是否符合 Writing Guidelines。当被要求“review my docs”“check writing style”“audit prose”“review docs voice and tone”或“check this page against the writing handbook”时使用。

将 Figma 驱动的应用部署到 Vercel、Cloud Run 与 Fly.io。用于把 webhook 接收端、design token API 或连接 Figma 的 Web 应用部署到生产平台。触发语如 “deploy figma”、“figma Vercel”、“figma production deploy”、“figma Cloud Run”。

审查 CSS 的特异性与层叠层级（cascade layer）纪律、设计令牌（自定义属性）一致性，以及响应式策略正确性（容器查询 vs 媒体查询），在特异性大战、硬编码值导致的令牌漂移、不回流布局违反 WCAG 1.4.10/1.4.4 等问题恶化为不可维护样式表之前将其拦截。

Sentry 布局与文本原语的使用指南。在实现 UI 组件、布局或排版时使用。强制优先使用核心组件而非 styled components。

现代 React UI 模式，覆盖加载状态、错误处理与数据获取。在构建 UI 组件、处理异步数据或管理 UI 状态时使用。

审查 UI/前端代码，准确告诉你它为什么“看起来像 AI 生成”——以及如何修复。当 React/Tailwind/HTML 界面看起来怪异、平庸或未完善，或你想在发布前获得设计评分、让 UI 更专业精致时使用。

构建生产级 UI。在创建或修改用户界面、构建组件、实现布局、管理状态时使用，或当产出需要真正达到生产质量而非 AI 生成感时使用。

前端设计的机械化实现不变量：令牌架构、排版层级、加载顺序、FOUT 预防、界面稳定性、动效时长、色彩语义。构建组件、页面或设计系统时与 design 配合使用。（美学方向见……）

UX/可用性审计——针对可交互 UI 的启发式评估（不只是视觉打磨）。当某个 UI“感觉不对”“用起来难受”、学习成本高、需要一堵说明墙，或在交付交互工具/编辑器/应用前，与 design 一同加载。

为前端设计提供方向与意图。与 design 技能配合，用于定义目的、基调、领域、色彩世界和审查标准；借鉴电影、建筑、营销、UX、汽车与工业设计等跨领域视角。

设计——空间构图

面向前端的视觉哲学与艺术指导。在创作高概念作品、营销活动页，或用户提出视觉哲学、宣言式主张、如艺术品般过目不忘的美学时使用。

针对用户描述的任何系统或领域，生成完整、可直接投产的 REST API 端点规范。当用户询问 API 设计、API 端点、REST API、API URL，或说“某功能需要哪些端点……”“为……设计一个 API”时使用。

指导稳定的 API 与接口设计。在设计 API、模块边界或任何公开接口时使用；在创建 REST 或 GraphQL 端点、定义模块间类型契约、确立前后端边界时使用。

审查 UI 代码在设计系统一致性、无障碍性与最佳实践方面的合规性

审查 GitHub PR 中的 UI/UX 改动：启动 MLflow Web 应用，通过无头 agent-browser 操作改动涉及的界面，并为工作流写出一份 Markdown 格式的 UI 审查评论内容（结论与截图）。

审计并修复 Web UI 中的视觉层次、间距、配色与层次感。当用户提到“我的 UI 看起来不对劲”（或业余/不专业）、“修复设计”、“Tailwind 样式”、“色板”、“视觉层次”、“设计系统”、“间距标度”或“组件样式”时使用。也在构建一致的设计令牌、创建深色主题、提升数据可视化清晰度或上线前打磨 UI 细节时触发。覆盖灰度优先工作流、受约束的设计标度、阴影与组件样式。字体选择参见 web-typography；可用性审计参见 ux-heuristics

openzeppelin-contracts 的 API 设计规则。在 contracts/ 下新增、修改或审查任何合约时使用。涵盖 virtual、memory 与 calldata 的选择、public 与 external 的取舍、重载、空操作与 revert 的区别、_update 单一 override 模式、内部与外部接口拆分、_msgSender 以及 override 扩展点。

设计一次性 HTML 产物（落地页、演示文稿、原型）。

通过 `onyx-cli image` 调用工作区已配置的图像生成服务，生成或编辑位图（照片、插画、纹理、精灵图、样机、Logo、信息图）。适用于需要产出全新位图、变换已有图像或基于参考图派生变体的任务；若结果更适合用代码原生 SVG/矢量，或直接在 HTML/CSS/canvas 中绘制，则不要使用。若尚未配置图像生成服务，请提示用户前往 /admin/configuration/image-generation 完成设置。

当你已有设计简报或设计策略、需要把实现拆成可评审的小块时使用。产出带逐项验证标准的分步实施计划。

如何编写 DESIGN.md 文件——在任何 UI 构建前必须存在的机器可读设计令牌 + 人类理由格式。YAML front-matter 令牌架构（颜色、字体、间距、圆角、组件）、类型系统、令牌引用及标准章节顺序。

依据 MUI 官方指南选择正确的 Material UI 样式方案（sx、styled、主题覆盖、全局 CSS）。在对 @mui/material 组件做样式、定制主题、覆盖插槽，或比较 sx 与 styled 时使用。