设计类 MCP / Skill 推荐

Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, heatmap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio and .excalidraw import support, plus lifecycle phase maps and onboarding guidance.

House rules for Odoo addon code: module structure, manifest, Python/ORM, fields, controllers, XML views and data, QWeb reports, access rights and record rules, performance, tests. Use when writing or reviewing any file in an Odoo addon outside static/ (for the JavaScript, Owl templates and SCSS under static/, see odoo-web-guidelines).

面向通用 agent 的 Cherry Studio 一方工具与内置 shell 路由。在支持 shell 的会话中处理直接的本地工作时:用 `bun <file>` 运行 JS/TS、用 `bun x` 运行一次性 JS 工具;用 `uv run [--with <pkg>] python` 运行 Python、用 `uvx` 运行一次性 Python CLI;搜索用 `rg`。在修改项目依赖、判断工具用临时还是复用方式、读取或转换本地 Office/PDF 文件、跨 Agent 会话协调或委派,或使用 Cherry 自有的 web/浏览器、知识库、持久记忆、日程/通知、IM 渠道、图像生成、产物报告、托管 CLI、技能或 MCP 服务器注册能力前先加载本指南——即使用户没有点名工具。在处理 shell/文件变通方案前先查阅;以实时工具 schema 为准。

维护并验证 OpenShell 仅限构建的 Windows MSVC 通道（x64 与 ARM64）。在处理 Windows 编译、`windows:*` mise 任务、不受支持的 Windows compute-driver 契约或 Windows 构建报告时使用。本技能不在 Windows 上实现 Docker、Kubernetes、Podman、VM、MXC 驱动、策略转换、MSI、服务或 supervisor 运行时支持。

Review UI4 CSS migrations for proper token usage. Checks that CSS variables are used instead of hardcoded values.

Design and review DeepSeek Harness client UI changes — visual token discipline, reuse-before-adding, feedback surfaces (toast vs in-place notice vs empty state), overlay and menu safety, platform window adaptation, loading states, and error copy placement. Use when adding or changing product-user-visible GUI behavior in packages/client, or when reviewing such a PR.

A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.

Design and implement CI/CD pipelines, Docker configurations, deployment strategies, and infrastructure automation with production-ready patterns.

Design, implement, review, or refactor native macOS 27 Golden Gate interfaces in SwiftUI or AppKit. Use when a Mac app must match Apple's current macOS 27 UI kit and restrained Liquid Glass language: integrated windows, full-height sidebars, native toolbars, flat lists, tables, and forms, clear pane boundaries, accessible materials, and removal of unnecessary nested cards, framed panels, or glassmorphism. Also use for Figma macOS 27 design-to-code work and audits of interfaces that feel too boxed.

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 工具类优先样式和基于 canvas 的视觉设计，打造美观、易访问的用户界面。用于构建 UI、实现设计体系、创建响应式布局、加入可访问组件（对话框、下拉菜单、表单、表格）、定制主题与配色、实现深色模式、生成视觉设计与海报，或在应用中确立一致的样式模式。

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 工具类优先样式和基于 canvas 的视觉设计，打造美观、易访问的用户界面。用于构建 UI、实现设计体系、创建响应式布局、加入可访问组件（对话框、下拉菜单、表单、表格）、定制主题与配色、实现深色模式、生成视觉设计与海报，或在应用中确立一致的样式模式。

在本地浏览器画布中打开计划与 HTML 产物，人可以在同一页面上标注元素、聊天并批准或要求修改。在展示计划供评审，或像“把这个挪一下、那个改一下”这类用指比用打字更方便的反馈时使用。

REST API 设计模式：资源命名、状态码、分页、过滤、错误响应、版本管理，以及生产 API 的限流。在设计或审查 REST 端点、资源命名、状态码、分页或版本管理时使用。

设计或评审基础设施、部署、CI/CD、Docker、Kubernetes、健康检查、回滚、特性开关、生产就绪以及移动端发布工作流。适用于 DevOps、平台、容器、流水线与发布相关任务。

构建或扩展 `shared/ui/*.astro`（或 `shared/components/**`）中的共享 Astro 组件——预览与文档共用的渲染库。当用户要求新组件、为现有组件新增 prop/变体/尺寸，或重构共享组件时使用。涵盖 Props 接口、属性名字典、类名组合、插槽、`as` 陷阱，以及新组件所需的配套工作（demo 页、文档、changeset）。

理解或修复 Tabler 资产流水线——`core/dist`、`tmp-assets/`、生成的 `public/` 目录、`copy-assets` Astro 集成、`build-css.ts`、vite/terser JS 构建与 turbo 开发依赖图。当资产缺失、过期、重复或跨构建膨胀，重启后 watcher 输出消失，页面对 `/dist/css/tabler.css` 返回 404，以及在修改 `.build/` 下内容、`astro.config.mjs` 中包的资产清单或 dev/build 脚本之前使用。

以设计师视角评审方案规划——交互式进行，类似 CEO 评审与工程评审。（gstack）

在真机上对 iOS 应用做视觉设计审计。（gstack）

Run PowerToys UITest.Next suites in persistent Hyper-V VMs over PowerShell Direct. Validate full default and constrained suites on Windows 10 and Windows 11, plus applicable ARM64 guests, then automatically hand implementation tasks to ui-tests-pipeline-ci for commit/push and CI validation. Local green is not end-to-end completion. Use for agentic UI-test iteration, reusable standard-user desktops, payload staging, evidence export, VM customization, clean baselines, or hosts without nested virtualization. Keywords: Hyper-V, local VM, virtual machine, PowerShell Direct, Copy-VMFile, VMBus, checkpoint, unattend, autounattend, ISO, Windows 10 LTSC, Windows 11, ARM64, Windows on ARM, UI tests, UITest.Next, winappcli, TRX, CI handoff.

仅限微软 FTE 的工作流：基于已有 Azure CLI 会话与 Azure DevOps REST API，验证环境配置、排队、自动等待并稳定运行 PowerToys UI Test Automation。在本地虚拟机套件通过后、被要求跑 UITests CI、做配置就绪预检、诊断反复 az login 提示或 401/403 权限错误、复用成功的构建、查看录制/产物，或管理三连跑限制时使用。内置 agent 持有的前台完成等待器。关键词：FTE、az、Azure CLI、Azure DevOps、pipeline、UI Test Automation、UITests CI、buildNow、specificBuildId、uiTestModules、CI flake。

将 PowerToys UI 测试从 WinAppDriver/Selenium 迁移并稳定到 Microsoft.PowerToys.UITest.Next 与 winappcli。适用于移植、新建 UITest 工程、CI flaky 测试、本地 Hyper-V 虚拟机持续验证、可重置的干净基线运行、Settings IPC 鉴权/测试签名、Explorer/Shell 选择、预览 handler、缩略图提供程序、快捷键激活、有状态进程生命周期、WinUI/WebView 合成视觉基线，以及跨窗口/前台失焦问题。涵盖 API、脚手架、测试设计、诊断、agent 化执行与 CI 加固。关键词：UI test、UITestAutomation.Next、winappcli、WinAppDriver、Selenium、Settings IPC、Authenticode、local VM、Hyper-V、checkpoint、flaky、CI stability、WebView2。

Builds and packages the Cypress Electron binary locally (yarn binary-build, binary-package, binary-zip, Docker/Linux parity), including non-interactive --version/--platform flags and unsetting ELECTRON_RUN_AS_NODE for agent hosts. Covers macOS signing, optional env speedups, dist smoke-test pitfalls, and why the tree is dirty after a build. Use when the user asks to build the Cypress binary, binary-package, electron MODULE_NOT_FOUND during binary-build, or local binary zip. For artifact debugging, use debugging-cypress-artifacts.

按 Linear issue 中描述的 Figma 规范,更新或构建 Metabase 设计体系组件(frontend/src/metabase/ui——Chip、Badge、Alert、Switch 等)。当工单要求改造现有 metabase/ui 组件样式或从 Figma 实现新组件时使用。涵盖:签出 issue、梳理组件(既有组件的用法/影响面,或新组件的脚手架)、构建 Storybook 展示矩阵(既有组件在改造样式前、新组件在其后)、依据精确的 Figma 令牌并与用户迭代完成样式,最后再提交并迁移调用点。

在本地浏览器画布中打开计划与 HTML 产物，人可以在同一页面上标注元素、聊天并批准或要求修改。在展示计划供评审，或像“把这个挪一下、那个改一下”这类用指比用打字更方便的反馈时使用。

使用 Ink（面向 CLI 的 React）与 @inkjs/ui 构建终端用户界面（TUI），采用响应式、会话驱动向导模式。当在 Node.js/TypeScript 中创建交互式 CLI 安装向导、设置流程或多步终端应用时使用。涵盖响应式屏幕尺寸解析、声明式流程管线、overlay 中断、会话状态管理、Ink 组件、Flexbox 终端布局，以及在各种终端环境下的优雅降级。

VS Code 的设计理念——一套用于以设计语言而非原始像素来思考 UI 的共享价值观→原则→手法词汇。在设计、构建、评审任何可视化界或给出反馈，决定圆角、间距、字级角色、图标尺寸、边框、颜色或动效，或把感觉不对的观察转化为具体、有原则的修改时使用。

用语义化 HTML、CSS 和直接的浏览器 API 编写 PostHog canvas——文档、文章、生成式图形、2D canvas 与 WebGL 体验，以及 React 组件不能提供有效结构的聚焦实验。在 building-canvases 把画布请求路由到纯 HTML/浏览器 API 实现之后使用。涵盖当前运行时要求的轻量组件包装、不依赖 Quill 的样式与主题、绘图画布，以及动画/清理模式。

使用 `depot build` 与 `depot bake` 配置并运行 Depot 远程容器构建。当构建 Docker 镜像、为 Depot 编写 Dockerfile、推送镜像到仓库、构建多平台/多架构镜像（linux/amd64、linux/arm64）、排查容器构建失败、优化 Dockerfile 分层缓存、使用 docker-bake.hcl 或 docker-compose 构建，或从 `docker build` / `docker buildx build` 迁移到 Depot 时使用。当用户提到 depot build、depot bake、容器构建、镜像构建，或询问 Depot 的构建缓存、构建并行度、临时仓库时也使用。

在为全新 UI 或改造现有 UI 提供有辨识度、有意图的视觉设计指导。帮助把握美学方向、字体排印，避免设计看起来像模板化的默认样式。

通过 @mui/material-nextjs、Emotion 缓存 provider、next/font、与 Tailwind/CSS Modules 并存的 CSS layers、Link 组件 prop 用法、CSS 主题变量 SSR 注意事项，以及 App Router 下 useSearchParams + Suspense 等，将 Material UI 与 Next.js App/Pages 路由集成。在安装或调试 Next.js 应用中的 MUI 时使用。

Tailwind CSS 的官方 daisyUI 组件库技能。当你编写 HTML 或 JSX 代码时必须使用它；即使用户没有要求也应使用。

Token 架构、组件规格说明与 slides 生成。三层 token（primitive→semantic→component）、CSS 变量、间距与字体排印尺度、组件规格、策略性 slide 产出。适用于设计 token、体系化设计与符合品牌规范的演示文稿。

以 Atelier Zero 视觉语言（Monocle / Apartamento / Études 编辑式拼贴）产出世界级的单页编辑型落地站——即 OpenDesign 自家营销页面所用的同一美学。代理从品牌简报填充类型化 `inputs.json`，可选经 gpt-image-2 生成 16 张拼贴素材，再由纯函数 compose 器输出自包含 HTML 文件。滚动显影动效与 Headroom 式吸顶导航自动装配。

当任务受益于 AI 生成的位图视觉（照片、插画、纹理、精灵图、样机、透明背景抠图）时生成或编辑位图图像。当 Codex 需要新建图像、变换既有图像或从参考衍生视觉变体，且产物应为位图素材而非仓库内的代码或矢量图时使用。若更适合编辑现有 SVG/矢量/代码原生资产、扩展既有图标或 logo 体系、或直接在 HTML/CSS/canvas 里画视觉，则不要使用。

关于如何使用 Design System 的样式与组件的规范。在 packages/frontend 中处理 .vue 文件时使用。涉及组件架构、样式、UI 改动或功能开发的场景都会触发。

Tinybird CLI 命令、工作流与操作。在执行 tb 命令、管理本地开发、部署或处理数据操作时使用。

为社交媒体、广告、网站 hero 区、创意素材与印刷设计 banner。提供多套美术方向与可选的生成图或用户素材。动作：设计、创建、生成 banner。平台：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、网站 hero、印刷。风格：极简、渐变、粗字排印、摄影、插画、几何、复古、玻璃拟态、3D、霓虹、双色调、编辑风、拼贴。

在用 Vitest + Playwright 对 OpenClaw Control UI 图形界面做端到端测试、修复或扩展时使用，覆盖 Mock 网关 WebSocket 流程、Mock 面板运行、截图/视频，以及可由代理验证的浏览器证明。

用 LobeHub 真实设计系统（@lobehub/ui + antd + antd-style token）与生产风格 React 产出可交互的单文件 HTML 设计原型，无需构建步骤，浏览器直接打开。当被要求为某个页面或流程出设计原型/可交互 mockup/交互原型/设计稿 HTML，或在投入实现前探索重设计时使用。

通过 twozero MCP 控制 TouchDesigner。

构建生产级、可访问、响应式的用户界面。在构建或修改界面与页面、创建组件、实现布局、满足 WCAG 可访问性要求、管理状态时使用，或当产出需要达到生产质感而非 AI 生成感时使用。

为任意领域设计与构建 AI agent。适用于用户：(1)要求“create an agent”“build an assistant”或“design an AI system”；(2)想理解 agent 架构、agentic 模式或自主 AI；(3)需要能力、subagent、规划或 skill 机制方面的帮助；(4)询问 Claude Code、Cursor 等 agent 内部实现；(5)想为业务、研究、创意或运营任务构建 agent。关键词：agent、assistant、autonomous、workflow、tool use、multi-step、orchestration。

阻止编码 agent 交付千篇一律的 UI。利用 UIZZE 的 80 万多个真实 Web 和 iOS 界面来构建贴合产品的界面、定义设计契约、覆盖必要状态并执行严格的完成度检查。在 Codex、Claude Code、Cursor、Copilot 或其他编码 agent 中设计、实现、重设计、评审或上线前审查 Web/iOS 界面时使用。可用 "anti-ui-slop"、"stop UI slop"、"ground this UI in real screens" 或 "run the UI finish gate" 触发。

用 Sigstore Cosign 签名与验证容器镜像溯源，涵盖基于密钥与免密钥 OIDC 签名（Fulcio、Rekor 透明日志）、SLSA attestation，以及通过 Kubernetes 准入控制强制执行签名验证。适用于为供应链安全给镜像签名、搭建免密钥 OIDC 签名、附加 attestation，或在准入端执行"仅允许已验证镜像"的策略。关键词：Cosign、Sigstore、Fulcio、Rekor、keyless、attestation、cosign verify、准入策略。不要用于基于 in-toto layout 的流水线 attestation——那用 implementing-supply-chain-security-with-in-toto。

用 Anchore Grype 扫描容器镜像、文件系统与 SBOM 中的已知 CVE，把 Syft 生成的 SBOM 软件包与 NVD、GitHub Advisories 及各 OS 专属源匹配，支持可配置的严重度阈值与失败门禁。适用于选定 Grype/Syft 工具链、扫描现成 SBOM 而非镜像，或按严重度做构建门禁。关键词：Grype、Syft、SBOM、NVD、GitHub Advisory、--fail-on、严重度阈值。若工具链是 Trivy 则不要使用——改用 scanning-docker-images-with-trivy。

用 Google distroless 基础镜像构建应用来缩减容器攻击面——只含应用运行时，无 shell、包管理器与 OS 工具——并采用适配 distroless 的多阶段构建模式及调试、扫描方法。适用于加固容器镜像、削减容器架构的攻击面，或回应关于臃肿基础镜像的评估发现。关键词：distroless、多阶段构建、无 shell、nonroot tag、debug image、scratch、攻击面。不要用于扫描镜像的已知 CVE——那用 scanning-docker-images-with-trivy。

用 Trivy 扫描 Docker 镜像中 OS 包与语言依赖的漏洞、错误配置、暴露的密钥与许可证违规，输出 SARIF、CycloneDX 或 SPDX。适用于扫描或卡点某个具体镜像、把镜像扫描接入 CI/CD，或在事故调查中检查镜像。关键词：Trivy、镜像扫描、--severity、--exit-code、SARIF、ignore 文件、.trivyignore。不要用于集群级扫描或非镜像目标——那用 performing-container-security-scanning-with-trivy；若工具链是 Grype 则用 scanning-container-images-with-grype。

面向已有品牌体系之外作品的美术方向指导。