设计类 MCP / Skill 推荐

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

带标注/红线的低保真线框图——桌面落地页/营销页以扁平灰盒画在浏览器边框内，叠加单一主色的编号标注针（①②③④⑤），并配右侧规格面板逐条列出每个编号针的简短工程/UX 说明。这是「线框 + 红线规格」风格——干净、扁平、低保真、非手绘。当需求提到「annotated wireframe」「redline wireframe」「wireframe with spec」「lo-fi landing wireframe」「low fidelity」「线框图」「标注线框」或「redline」时使用。

用于在浏览器中创建 3D 元素与交互体验的 Three.js 技能——场景、材质、控制器与后期处理。

Open Orbit 简报技能——当用户连接了两个及以上连接器时由 Orbit 流水线选用。从每个已授权连接器（GitHub、Linear、Notion、Slack、飞书、Calendar、Gmail、Drive、Sentry、Vercel 等）拉取过去 24 小时的活动，并在「我的设计」顶部渲染单一自适应 bento 网格仪表盘。每个连接器模块按返回数据的形态自选 UI 形式（列表、头像堆叠、状态环、热力图、文件网格、告警卡等），使布局随 Orbit 连接器生态的增长而扩展。不应手动触发此技能——它由 Orbit 的每日摘要调度器针对用户实时连接器数据调用。

OpenDesign 在 GitHub、Discord 与 X 上的社区增长战役：增长闭环、内容日历与漏斗数学。以面向增长团队与社区负责人的决策级营销 & GTM 幻灯片构建。

OpenDesign 在 GitHub、Discord 与 X 上的社区增长战役：增长闭环、内容日历与漏斗数学。以面向增长团队与社区负责人的决策级营销 & GTM 幻灯片构建。

使用 gh CLI 将本地 OpenDesign 插件发布到新的公开 GitHub 仓库。

当用户想把已验收的插件或制品打包成面向 OpenDesign 或其他目标仓库的 GitHub pull request 时使用此插件。

Open Orbit 简报技能——当 GitHub 是用户唯一连接的连接器，或用户显式将每日摘要限定在 GitHub 时，由 Orbit 流水线选用。从用户已授权的 GitHub 连接拉取过去 24 小时的 PR、评审请求、issue、CI 运行与合并，并按 GitHub 原生通知 + PR diff 的视觉语言渲染布局。不应手动触发此技能——它由 Orbit 的每日摘要调度器针对实时 GitHub 数据调用。

像素/精灵图风格的动画讲解幻灯片——全出血奶油色舞台、醒目的大字年份、动画像素吉祥物（如花札卡牌、蘑菇或 8-bit 主机）、动感日文展示字体、滴答走动的timeline 缎带。观感如同教育动效视频中的一帧——循环 CSS 关键帧、无 JS、可直接录屏成竖版视频。当需求提到「sprite animation」「pixel-art video」「8-bit explainer」「history of X explainer」「kinetic typography history」「Nintendo-style」「精灵图动画」「像素动画」或「复古动画」时使用。

为任意 HTML 制品套上一个侧边面板，提供实时参数化控件——主色、字号阶梯、密度、动效、主题——实时改写 CSS 自定义属性并持久化到 localStorage。让用户无需重新提示代理即可探索设计变体。当需求提到「variants」「side-by-side options」「tweak this」「let me adjust」「live knobs」或「实时调参」时使用。

为任意 HTML 制品套上一个侧边面板，提供实时参数化控件——主色、字号阶梯、密度、动效、主题——实时改写 CSS 自定义属性并持久化到 localStorage。让用户无需重新提示代理即可探索设计变体。当需求提到「variants」「side-by-side options」「tweak this」「let me adjust」「live knobs」或「实时调参」时使用。

单帧动效设计合成，含循环 CSS 动画——旋转字环、动画地球、滴落计时器、视差标签。渲染结果如同可直接交给 HyperFrames 或任意关键帧导出器的 hero 视频海报。当需求提到「motion design」「animated hero」「loop」「video poster」「title card」，或要将 Open Claude Design 搭配 HyperFrames 做动感导出时使用。

多帧游戏化移动应用原型——暗色展示舞台上的三个手机边框。第一帧：封面/海报；第二帧：今日任务，带 XP 缎带与等级条；第三帧：任务详情。鲜活的任務磁贴、等级缎带与底部标签栏。当需求提到「gamified app」「habit tracker」「RPG-style life app」「level-up app」「daily quests」「XP / streak app」或「ELI5-style explainer app」时使用。

低保真的多屏移动端流程线框——看板上并排三个或四个手机边框，展示串联的用户流程（引导 → 首页信息流 → 详情 → 确认）。设备内为灰盒内容，屏间用虚线箭头与编号步骤标签连接，另配少量批注气泡。观感如同像素未定稿前贴在白板上的应用流程图。当需求提到「mobile wireframe」「app flow」「user flow wireframe」「lo-fi mobile」「low fidelity」「线框图」「移动端线框」或「App 流程」时使用。

产品经理的年终自我复盘——职责、成果、成长与诉求，全部有证据支撑。以面向上级与评审委员会的决策级职业幻灯片构建。

对项目中的任意 HTML 制品执行 5 维专家设计评审——理念 / 视觉层级 / 细节 / 功能性 / 创新性，每项 0–10 分。输出一份自包含 HTML 报告，含雷达图、有证据支撑的分数，以及三个清单：保留 / 修复 / 快速改进。当需求要求「design review」「design critique」「5 维度评审」「design audit」或「我的设计哪里有问题」时使用。

创建可刷新、可审计的 OpenDesign 制品，由连接器或本地数据驱动。当用户要求实时仪表盘、可刷新报表、同步视图或可复用的数据驱动制品时触发。

创建可刷新、可审计的 OpenDesign 制品，由连接器或本地数据驱动。当用户要求实时仪表盘、可刷新报表、同步视图或可复用的数据驱动制品时触发。

自包含的 WebGL2 hero：活的 Voronoi 网络，特征点漂移、单元按主色着色、边界发光；移动光标可推动细胞。

自包含的 WebGL2 hero：压皱箔面上的薄膜干涉效果，配色随视角变化；移动光标可倾斜薄膜。

自包含的 WebGL2 hero：流动场域经旋转半色调网点筛分为双色印刷质感；移动光标可弯曲漂移。

自包含的 WebGL2 hero：层叠极光幕帘在散布繁星的夜空上扭曲变形；移动光标可摆动幕帘。

随滚动联动的纵向画廊（Three.js）：平面随滚动速度弯曲，在光标下经单纯形噪声产生涟漪，并带胶片颗粒感。

SVG 曲线连接器、便利贴节点与光标交互，营造白板头脑风暴的观感。

Open Orbit 简报技能——当 Notion 是用户唯一连接的连接器，或用户显式将每日摘要限定在 Notion 时，由 Orbit 流水线选用。从用户已授权的 Notion 连接拉取过去 24 小时的文档编辑、评论、提及与数据库行变更，并将摘要渲染为原生 Notion 页面（callout / 折叠块 / 数据库表原语）。不应手动触发此技能——它由 Orbit 的每日摘要调度器针对实时 Notion 数据调用。

Open Orbit 简报技能——当 Notion 是用户唯一连接的连接器，或用户显式将每日摘要限定在 Notion 时，由 Orbit 流水线选用。从用户已授权的 Notion 连接拉取过去 24 小时的文档编辑、评论、提及与数据库行变更，并将摘要渲染为原生 Notion 页面（callout / 折叠块 / 数据库表原语）。不应手动触发此技能——它由 Orbit 的每日摘要调度器针对实时 Notion 数据调用。

以 Live Artifact 渲染的 Notion 风格团队仪表盘。单页自包含 HTML 仪表盘，含 KPI、7 日迷你折线、实时活动流与关联数据库任务表——经由 Composio 连接器目录接入 Notion。按需及打开制品时刷新。未绑定连接器时回退到内置模拟数据，离线、截图与选择器预览中均可工作。

OpenDesign 的企业级 AI 采纳简报：本地优先的工作代理、风险控制、ROI 与落地计划。以面向管理层、IT 与安全的决策级 AI 素养幻灯片构建。

OpenDesign 的企业级 AI 采纳简报：本地优先的工作代理、风险控制、ROI 与落地计划。以面向管理层、IT 与安全的决策级 AI 素养幻灯片构建。

OpenDesign 采购与安全留守材料：买方可转发、可在内部审批的一页纸加附录。以面向采购委员会、安全与采购团队的决策级 B2B 销售幻灯片构建。

面向全体员工的 IT 安全意识培训——识别钓鱼邮件的征兆、演练与最初 60 秒该做什么。以决策级专业培训幻灯片形式构建。

将 python-pptx 导出结果与其源 HTML 演示文稿对照审查，识别布局/内容偏差（页脚溢出、内容裁切、缺失斜体/强调、样式丢失、节奏失衡的间距），并以严格的页脚导轨 + 光标流布局纪律重新导出。当用户的 .pptx 由 HTML 幻灯片生成并要求比较/审查/验证/修复导出时使用——包括「compare ppt with html」「fidelity audit」「fix the pptx」「ppt is cut off」「footer overlap」「italic missing in pptx」「re-export the deck」「pptx-html-fidelity-audit」等说法，或任何需要验证/修复 python-pptx 与 HTML 往返转换的场景。当用户并排展示 deck.html 与 deck.pptx 并调试视觉差异时也应触发。

将 python-pptx 导出结果与其源 HTML 演示文稿对照审查，识别布局/内容偏差（页脚溢出、内容裁切、缺失斜体/强调、样式丢失、节奏失衡的间距），并以严格的页脚导轨 + 光标流布局纪律重新导出。当用户的 .pptx 由 HTML 幻灯片生成并要求比较/审查/验证/修复导出时使用——包括「compare ppt with html」「fidelity audit」「fix the pptx」「ppt is cut off」「footer overlap」「italic missing in pptx」「re-export the deck」「pptx-html-fidelity-audit」等说法，或任何需要验证/修复 python-pptx 与 HTML 往返转换的场景。当用户并排展示 deck.html 与 deck.pptx 并调试视觉差异时也应触发。

当用户希望把已验收的 OpenDesign 制品转换为 Next.js App Router 交付物——整洁的组件、样式、资源与实现说明——时使用此插件。

针对 X/Twitter 公开舆情的调研，覆盖近期市场、公司、产品或社区讨论。当需求询问 X 上大家在说什么、Twitter 舆情、CT 情绪、公众观点、专家帖子，或围绕某只股票、板块、公司、产品或市场事件的社交反应时使用。

针对最近 30 天的社区与社交趋势调研。当需求询问当下大家在说什么、近期舆情、社区反应、社交背书、发布反响、趋势扫描或近 30 天背景时使用。

随滚动联动的瀑布流画廊（Three.js + GSAP）：每张图在进入视口时以像素/网格溶解方式显现，配分裂文字标题与点击全屏的 Flip 动画。

随滚动联动的 3D 图片画廊（Three.js）：Z 轴堆叠的图片在各自情绪化背景色间交叉淡入淡出，带速度呼吸感、发光光标轨迹，以及编辑风格的 CMYK/RGB/HEX/PMS 色卡。

基于 React 的程序化视频创作。适用于品牌讲解片、社媒剪辑、仪表盘转视频与可复现的动效图形。

GitHub 仓库分析仪表盘——star、fork、贡献者、issue、pull request、近期动态与头部贡献者。当需求要求 GitHub 仓库仪表盘、开源增长报告、仓库健康页面或 GitHub 分析视图时使用。

将 OpenDesign 作为 AI 工作流实例展示：本地代理如何读取你的文件并在你的桌面上完成设计——具体而实在。作为面向 AI 新手团队与管理层的决策级 AI 素养演示文稿构建。

GitHub 仓库分析仪表盘——star、fork、贡献者、issue、pull request、近期动态与头部贡献者。当需求要求 GitHub 仓库仪表盘、开源增长报告、仓库健康页面或 GitHub 分析视图时使用。

以并排三个手机边框渲染的多屏移动引导流程——启动页、价值主张、登录。含状态栏、滑动指示点与主 CTA。当需求提到「mobile onboarding」「iOS onboarding」「phone signup」或「移动端引导」时使用。

在页面内以像素级精确的 iPhone 15 Pro 边框中渲染的移动应用界面。通过复制种子文件 `assets/template.html` 并粘贴 `references/layouts.md` 中的一种界面原型构建。当需求提到「mobile app」「iOS app」「Android app」「phone screen」或「app UI」时使用。

生成带动画丰富度与视觉样式预览的 HTML 演示文稿。适用于在线主题演讲、嵌入式演讲与交互式简报。

全栈前端，支持电影感动画与通过 MiniMax API 生成的媒体内容和生成艺术。适用于首屏 hero 页面与展示型站点。

以克制的构图创建视觉表现出色的落地页、网站与应用 UI。OpenAI 生产级前端实战手册。