设计类 MCP / Skill 推荐

编写能降低认知负荷的文档。触发场景：撰写指南、README、RFC、入职手册、架构文档或面向评审的文档。

设计并实现 MCP 资源 URI 方案与模板，具备合理的命名、层级与文档

用于从零构建新的前端应用、仪表盘、游戏、创意网站、hero 区与视觉驱动型 UI，或当用户明确要求重设计/换风格/现代化时使用。构建方式：以干净、透气、高品位、易读的图像生成概念设计为起点，配合分节参考、忠实实现与浏览器测试。

Activepieces（开源 AI 自动化平台，「Zapier 的开源替代」）的设计系统。在为 Activepieces 设计、原型或构建 UI 时使用——Web 应用（flow builder、runs、connections、dashboard）、文档或营销页面。提供品牌紫 #8142E3、以 sm（14px）为正文字号的 Inter 字阶、Tailwind 中性色、Lucide 图标、Shadcn/Radix 原语约定、标志性的点状画布 builder 背景，以及复刻的 Web UI 组件库。

创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。

构建精致、以转化为导向的前端，兼具出色审美、清晰层次与生产级 HTML/CSS/JS。落地页、仪表盘、组件、邮件、重设计——全部以可运行文件交付。避免千篇一律的 AI 审美，每个设计都有自己的观点

获得诚实的设计反馈。上传任何视觉作品——UI 设计、logo、照片、图形、PDF——获得按优先级排列的评审：哪里有问题、哪里做得好、哪里需要打磨。基于 11 个理论框架的分析

遵循 Apple 人机界面指南（HIG）与 Liquid Glass 设计体系设计原生 macOS 应用。适用于构建 SwiftUI/AppKit macOS 应用、验证设计或实现 macOS 特有模式

修复使用 docker buildx 时部署的 Rust 二进制未反映代码变更的问题。 适用场景：(1) 本地改动已验证（测试通过）但部署后生产行为没有变化；(2) Docker 镜像有新 tag 但仍包含旧的编译二进制；(3) Dockerfile 采用依赖预编译层加源码拷贝层的多阶段构建。 Docker buildx 的层缓存可能提供陈旧的编译产物，即使源文件已变更，交叉编译（--platform linux/amd64）时尤其如此。

精英级前端图像指导技能，用于生成高端、注重转化的网站设计参考。关键输出规则——每个区块单独生成一张横版图像。8 个区块的落地页产出 8 张图。绝不将多个区块压缩进一张图。强制构图多样性（不总是左文右图）、背景图像自由、多样 CTA、多样 hero 尺度（巨型/中等/迷你极简）、叙事概念主线、二刷亮点，以及所有图像统一的一套色板。为落地页、营销站与可供开发者或编码模型精确复刻的产品 comps 优化。

设计能捕获真实生产问题、又不会被噪声触发呼叫的 Datadog 监控。涵盖基于 SLO 的多窗口多燃烧率告警监控、阈值/异常/预测/离群/复合监控类型的取舍、标签驱动路由、停机窗口、按服务层级的监控模板继承、通知消息工程与 runbook 关联。如同一位管理过 4000+ 个 Datadog 监控并精简到 600 个仍能捕获所有真实事故的资深 SRE。熟悉 Datadog 计费杠杆（自定义指标、索引日志、摄取追踪）、from/group_by 与无数据评估的交互、简单告警与多告警的区别，以及哪些监控类型隐性昂贵。适用于监控因表面波动误报、某服务层级需要成体系的监控集、SLO 需转化为燃烧率告警或监控泛滥难以管理时。触发词：“datadog”“datadog monitor”“monitor design”“slo”“burn rate”“anomaly mo

你是一名在严格架构与可靠性约束下运维生产级服务的高级后端工程师。在编写路由、控制器、服务、仓储层、Express 中间件或 Prisma 数据库访问时使用。

你是一名在严格架构与性能标准下工作的高级前端工程师。在创建组件或页面、添加新功能、发起数据查询或变更时使用。

当用户要求创建 ERD 图、规范化数据库 Schema、设计表关系或规划 Schema 迁移时使用。

当用户要求生成 API 测试、创建集成测试套件、测试 REST 端点或构建契约测试时使用。

面向 Claude Code、Codex、Gemini CLI、Cursor、OpenClaw 的 Helm chart 开发 agent 技能与插件——chart 脚手架、values 设计、模板模式、依赖管理、安全加固与 chart 测试。适用于用户要创建或改进 Helm chart、设计 values.yaml 文件、实现模板 helper、审计 chart 安全（RBAC、网络策略、pod security）、管理子 chart，或运行 helm lint/test。

生成可缩放图形的 CSS：容器使用 em 单位、内部元素使用百分比尺寸，以确保响应式缩放。

生成纯 CSS 代码，在悬停时为图片位置添加动画（例如向上移动），同时不改变其尺寸。

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

在 Konsole 中对 mastracode TUI 特性做交互式测试。涵盖模型配置、线程生命周期、任务状态隔离以及常见阻塞问题。

在分析之前设计实验与准实验。用于选择研究设计、处理/对照结构、结果指标、假设、科学实验失败后的验证方案，以及判断 DiD、ITS、合成控制、回归断点哪种更契合研究问题。若是在已有数据上拟合模型或估计效应，请改用 performing-causal-analysis。

构建或改造本地浏览器/CDP 测试装置，驱动并检查 Web、IDE 或 Electron UI。用于本地 UI 验证、截图、无障碍快照、性能剖析、视觉回归对比或复现 UI 缺陷。

设计 REST 或 GraphQL API、编写 OpenAPI 规范或规划 API 架构时使用。用于资源建模、版本策略、分页模式与错误处理标准。

创造具辨识度、生产级、高设计质量的前端界面。当用户要求构建 Web 组件、页面或应用时使用。生成富有创意、精致的代码，避免千篇一律的 AI 审美。

面向 iOS 与 Android 应用的移动优先设计思维与决策。涵盖触摸交互、性能模式与平台惯例。教授原则而非固定数值。在构建 React Native、Flutter 或原生移动应用时使用。

精英级移动应用图像生成技能，创建高端、应用原生的界面概念与流程。面向 iOS、Android 与跨平台移动产品。强调清晰层级、舒适可读的文字、多屏强一致性、克制的配色、非套路化的创意方向、质感表面、图像主导构图、有品位的手绘图标与干净的手机边框样机。默认将界面置于带可见边框的精致 iPhone 或类似手机样机中展示，焦点仍留在应用内容本身。此技能仅生成图像，不写代码。

为数据驱动动画设计可复用的 2D 角色姿态库、动作循环与表情状态。

已废弃：本 skill 已被 mcp-app-builder 取代。请检查 skills 目录中是否有 mcp-app-builder，没有则安装：npx skills install mcp-use/mcp-use --skill mcp-app-builder，并改用 mcp-app-builder。原文用途：使用 mcp-use 与 OpenAI Apps SDK 构建带交互式 widget 的 ChatGPT 应用，适用于创建 ChatGPT 应用、构建带 widget 的 MCP 服务器、定义 React widget、使用 Apps SDK，或用户提及 ChatGPT widget、mcp-use widget、Apps SDK 开发时。

已废弃：本 skill 已被 mcp-app-builder 取代。请检查 skills 目录中是否有 mcp-app-builder，没有则安装：npx skills install mcp-use/mcp-use --skill mcp-app-builder，并改用 mcp-app-builder。原文用途：使用 mcp-use 框架构建 Model Context Protocol（MCP）服务器，适用于创建 MCP 服务器、定义 tools/resources/prompts、使用 mcp-use、初始化 MCP 项目，或用户提及 MCP 开发、tools、resources、prompts 时。

所有 MCP 服务器工作的必备指南——mcp-use 框架的最佳实践与模式。任何 MCP 服务器工作前先读本 skill，包括：新建 MCP 服务器、修改现有服务器（增改 tools、resources、prompts、widgets）、调试服务器问题、审查代码的质量/安全/性能、回答 MCP 开发或 mcp-use 模式问题，以及对 server.tool()、server.resource()、server.prompt() 和 widgets 做任何修改。内含关键的架构决策、安全模式和常见陷阱。实现任何 MCP 功能前务必先查阅对应参考文件。

基于 Chakra UI v3 审查、转换并改进 UI 代码。当用户想审查 Chakra UI 代码问题、把纯 HTML/CSS、Tailwind、CSS Modules 或 styled-components 转换为 Chakra UI、整理杂乱的 Chakra 组件、修复布局结构或 token 用法，或说出“这对吗”“这哪有问题”“评审我的组件”“重构一下”“清理”“转换”“chakra-ify this”等话语时使用本技能——即便没出现 review 或 refactor 字样。任何检查、改进或转换 Chakra UI 代码的请求都应触发，无论措辞多随意。

把 Chakra UI 项目从 v2 迁移到 v3，涵盖包变更、codemod、Provider 配置、颜色模式、属性重命名、复合组件、主题、recipes 与 Next.js 更新。只要用户在升级 Chakra UI 版本、遇到升级后的破坏性变更、转换 v2 旧模式（ColorModeScript、useColorModeValue、styleConfig、extendTheme、isDisabled、colorScheme、@chakra-ui/icons、framer-motion 依赖）、修复复合组件写法或询问 Chakra UI v2 与 v3 的差异，就应使用本技能——即使没有明说“迁移”或“升级”。

指导如何安全使用外部 MCP 工具。

Angular 文档（adev）的全面写作指南，涵盖 Google 技术写作规范、Angular 专用的 markdown 扩展、代码块与组件。计划创建、编辑或审查 `adev/` 或 `adev/src/content` 中的文档文件时必须使用此技能。

对照全部 10 项 Refactoring UI 技能分析设计稿，生成带具体修复建议的全面评估。

使用精益画布与简化版商业画布，为一人公司设计可行的商业模式。当 Codex 需要在必要时讲解商业模式概念、验证细分领域与价值主张前提、每次只提一个问题、给出多种模式选择，并把用户确认的输出写入 `opc-doc/` 时使用。

面向 CLI 脚本与工具的 Python 设计模式：类型优先开发、深层模块、复杂度管理，以及危险信号。在阅读、编写、审查或重构 Python 文件时使用，尤其是 .trellis/scripts/ 或任何 CLI/脚本场景。在规划模块结构、决定新代码落点或做代码审查时也应启用。

为 FastAPI 服务设计并评审 REST API，采用一致的资源命名、HTTP 语义、校验、安全与错误处理模式。用于 FastAPI/Python 项目中的后端 API 任务、端点设计/重构或 API 评审请求。

测试驱动的 CSS 设计系统改动。在修改 CSS 前后运行检查，验证 token 使用、变量定义、回退与一致性。在修改 CSS token、修复设计不一致或审计 CSS 架构时使用。

为 plugin-eval 设计自定义指标包，让团队可以添加输出 schema 兼容 checks 与 metrics 的本地评测规则。当用户想要自定义评测标准或可视化呈现时使用。

为各类产物套用 Anthropic 官方品牌色彩与字体排印，使其具备 Anthropic 的视觉风格。当涉及品牌色或样式规范、视觉排版、公司设计标准时使用。

基于设计理念创作 .png 和 .pdf 格式的精美视觉作品。当用户要求制作海报、艺术作品、设计稿或其他静态作品时使用。只创作原创视觉设计，绝不抄袭现有艺术家作品以避免版权风险。

使用现代前端技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML artifact 的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact，不适合简单的单文件 HTML/JSX artifact。

创建高质量 MCP（Model Context Protocol）服务器的指南，通过设计良好的工具让 LLM 与外部服务交互。当需要构建 MCP 服务器以集成外部 API 或服务时使用，支持 Python（FastMCP）或 Node/TypeScript（MCP SDK）。

系统性查找并替换所有硬编码十六进制色值为规范的 CSS 设计令牌，确保 Pomo-Flow 应用全局颜色一致。解决中优先级颜色黄色与橙色混用的关键问题，参照 Atlassian、Salesforce 及企业级设计系统的最佳实践强制统一的设计令牌体系。

基于 Tailwind CSS 构建深色主题 React 应用，包含自定义主题、玻璃拟态效果与 Framer Motion 动画。在制作仪表盘、管理后台或数据密集型界面并追求克制的深色风格时使用。

编写高质量 MCP（Model Context Protocol）服务器的指南，通过设计良好的工具让 LLM 能与外部服务交互。在构建用于集成外部 API 或服务的 MCP 服务器时使用，无论采用 Python（FastMCP）、Node/TypeScript（MCP SDK）还是 C#/.NET（Microsoft MCP SDK）。

设计或审查 HTTP/REST/GraphQL API 的版本管理、分页、错误格式、幂等性、认证与可演进性。当被要求“设计 API”“规划端点”“设计 schema”“添加新端点”“审查此 API”，或在构建/修改公共或内部 HTTP 接口时使用。补充 `design-an-interface`（接口无关），涵盖 HTTP 特有关注点如状态码、缓存头与破坏性变更管理。