设计类 MCP / Skill 推荐

通过实际运行验证对 Warp 无头 TUI 前端(crates/warp_tui)的改动——本地用 ./script/run-tui 运行,或在无头云运行器中用 WARP_API_KEY 的 dogfood 构建运行——并读回渲染出的屏幕内容(装有 tmux 时借助 tmux,否则直接读取)。凡改动 TUI 界面、渲染、输入或行为后需要确认真实屏幕效果时使用。

编写、校验并导出 Google 的 DESIGN.md 设计令牌规范文件。

使用 axe（Jest）与 IBM Equal Access（Playwright page.runA11yScan）编写和运行 Langflow 前端无障碍测试的参考指南。涵盖引擎/测试层级选型、POUR 清单、axe 与 IBM 规则差异、Radix/AG-Grid 组件注意事项以及 IBM 基线。在编写或审查 a11y 测试、调试具体 axe/IBM 违规项或为某个 UI 界面选择测试层时使用。不执行扫描、不审计整个界面、不做端到端 PR 修复——分别见 ibm-a11y-route-scan、ibm-a11y-level1-audit 与 ibm-a11y-pr-remediation。

管理并应用 Design 应用的品牌系统。在创建、导入、关联、查看设计系统 token、素材、字体、logo 与自定义指令，或遵循它们时使用。

在 Design 中生成或完善完整的交互式 HTML 原型。用于从提示词或选定设计出发，创建界面、变体、Alpine/Tailwind 原型、微调或视觉打磨。

Phoenix 前端的设计系统约定——布局、对话框、错误展示、BEM CSS 类命名与 CSS 设计令牌。在 app/src/ 中构建 UI、命名 CSS 类、创建或使用令牌、处理错误或设计对话框交互时使用。

在 ethereum.org Next.js 站点构建、重构或为任何 UI 编写样式时使用（`src/components/`、`app/`、`src/styles/`、`public/content/`，或任何影响渲染 UI 的 `.tsx`/`.mdx`/`.css` 改动）。提供规范的组件选型、设计令牌、RTL/i18n 规则、服务端/客户端指引，以及“用变体而非新组件”的模式，适配项目的 Tailwind v4 + Radix + shadcn 风格设计系统。

查找、保存、复制并改造 Design 模板。当用户提到某个模板、以往的设计，或想要一个可复用的起点时使用。

在 PostHog workflows 库中撰写、保存和编辑邮件模板——组合带 Liquid 个性化的邮件设计 JSON，通过 MCP 创建模板并往返编辑。当被要求为 workflows、broadcasts 或 campaigns 设计、构建、更新或修复邮件模板时使用。

将 React 设计体系推送到 claude.ai/design。运行一个转换器,打包真实组件代码(来自 Storybook 或独立包)并上传。当用户执行 /design-sync 或说 "sync my design system to Claude Design" 时使用。

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

指导开发者创建和更新 MCP 应用。覆盖完整生命周期：对照 UX 指南头脑风暴想法、初始化项目、实现工具/视图、调试、运行开发服务器、部署并将应用接入 ChatGPT。当用户想创建或更新 MCP 应用、MCP 服务器或使用 Skybridge 框架时使用

从访问模式、基数与生命周期出发设计关系型或文档型 schema。用于实体建模、在嵌入与规范化之间选择，或在实现前划定 schema 边界。

面向 Langfuse 的 Next.js、tRPC、BullMQ 与 TypeScript monorepo 的后端共享指南。在创建或审查 tRPC router、公共 REST 接口、BullMQ 队列处理器、后端服务、中间件、Prisma 或 ClickHouse 数据访问、OpenTelemetry 埋点、Zod 校验、环境变量配置，以及 web、worker 或 packages/shared 的后端测试时使用。

与产出形态无关的设计指导——适用于 CSS、PowerPoint、matplotlib、PDF 或任意视觉输出。另含一份面向幻灯片、文档与报告（非 Web 资产）的精选命名字体/配色主题目录。

处理共享 Design 原型上持久化、锚定到元素的评审意见，并以经过验证的编辑闭环。

使用 grype 扫描 Activepieces Docker 镜像的操作系统/基础镜像（deb）与应用（npm）中高危及严重级 CVE。列出最近发布的 3 个 tag 并让用户选择扫描对象，校验每个发现真实且可触达，并在隔离的 git worktree 中证明候选修复（重建镜像 + 重新扫描 + 测试 + 容器冒烟运行 + 代码库 diff）后才提出建议——修复绝不自动应用，由用户逐个决定。当用户要求用 grype 扫描镜像、分诊容器/镜像漏洞，或检查已发布 Docker 镜像的 CVE 时使用。

使用托管浏览器的最佳实践——处理登录墙、验证码、懒加载内容、付费墙与标签页清理。Target=camoufox 主力路径。

将 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 状态时使用。