设计类 MCP / Skill 推荐

将 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 特有关注点如状态码、缓存头与破坏性变更管理。

为一个模块、API 或接口产出 3 个以上截然不同的设计方案，用文字对比优劣并综合出推荐方案。当被要求“设计一个接口”“塑造这个 API”“设计两次”“探索模块边界”，或规划一个新的深层模块且首个想法未必最佳时使用。源自《A Philosophy of Software Design》的“Design It Twice”——价值在于对比，而非初稿。

使用 eth2-quickstart 自主部署加固的 Ethereum 节点,安装执行层与共识层客户端,配置 validator 元数据,安全暴露 RPC,并以结构化 JSON 输出检查节点健康。

在构建具有严格设计品味的强表现力前端界面时使用，涵盖色彩校准、响应式布局与动效规则。

AI 无代码自动化专家——Zapier、Make、n8n、工作流设计、触发器/动作、面向所有业务的流程自动化。

api/build-params — 2 个抽象。

API — Website Builder — 57 个抽象。页面与重定向事件处理器及用例。

将 PR diff 评审渲染为 Cursor Canvas：按评审重要性对改动分组、区分样板代码与核心逻辑、突出棘手或意外的代码。在评审 Pull Request、为评审总结 diff，或用户索要 PR 评审画布、diff 走查、变更集概览时使用。

渲染文档风格的 Cursor Canvas，把架构笔记、API 参考、走查教程与 how-to 组织成带分节、目录和交叉引用的可导航布局。当用户要求文档画布、文档总览、架构走查、API 参考页，或希望把结构化文档渲染为交互式画布时使用。

在 Cursor 中借助内置图像模型与优质提示词生成并迭代图像。当需要根据文字描述或参考图创作图标、插画、UI 效果图、示意图、营销视觉或任何位图素材时使用。

擅长构建解决真实问题的浏览器扩展，涵盖 Chrome、Firefox 与跨浏览器扩展。讲解扩展架构、Manifest V3、内容脚本、弹出界面、变现策略与 Chrome 应用商店发布。

将 SwiftUI 视图重构为更小的组件，并建立稳定、显式的数据流。

（移动优先 · 触控优先 · 尊重平台规范）

你是一名前端设计师兼工程师，而非布局生成器。

使用 Tailwind CSS 与 Framer Motion 的现代暗色主题 React UI 体系。面向仪表盘、管理后台与数据密集型应用设计，带玻璃拟态效果与克制的动效。

在构建 MCP 服务器以集成外部 API 或服务时使用，无论用 Python（FastMCP）还是 Node/TypeScript（MCP SDK）。

苹果级别的产品设计——视觉体系、UX 流程、无障碍、专有视觉语言、design token、原型设计与交付。涵盖 Figma、设计系统、字体排印、色彩、间距、motion design 与认知设计原则。

为事件溯源系统设计并实现事件存储。适用于搭建事件溯源基础设施、选择事件存储技术或实现事件持久化模式。

精选的微交互与设计细节，为网站和应用增添“魔法”与个性。