工具集

把模糊的界面想法整理成设计优先的生成提示词：按目标、尺寸、布局、字体、配色、图像风格、精确文案、约束与反向提示词填写模板，每次只改一个变量迭代，文字易出错时先出图再到 Figma 排版。

把任意文件夹变成 Markdown 任务看板：让 Claude Code、Codex 先把需求拆成带验收标准的任务，人审阅后再动手，终端和浏览器里都能拖动管理，也可以不用 Git 做个人计划。需要 Node.js 或 Homebrew，本地运行、无需账号。

参照 Stripe、Linear、Apple、Vercel 的风格为网页产品建立统一的动效体系：可复用的动效基元、时长与缓动默认值、错峰编排、滚动与悬停交互，并要求只动 transform 与 opacity、支持 prefers-reduced-motion。

用 GSAP ScrollTrigger 搭建滚动叙事式产品页：固定主画面，随滚动逐步揭示界面状态、功能层与数据视图，区块之间用缩放、遮罩或模糊过渡；要求及时清理触发器、小屏简化编排、不遮挡文字与按钮。

用 GSAP ScrollTrigger 让标题与短文案在进入视口时逐词从遮罩下方升起，提供不依赖付费 SplitText 插件的拆词代码、默认时长与错峰、React 清理写法，保留 aria-label 并支持减少动态效果。

用 IntersectionObserver 加 Tailwind 任意值动画类实现元素进入视口时的入场动画，给出关键帧与观察器代码片段，可调整触发阈值、rootMargin、时长、延迟以及是否只播放一次。

用 GSAP 编写或调试网页动画：补间、时间线与位置参数、缓动、错峰，以及 ScrollTrigger 的固定与滚动联动；说明优先动 transform、在 React 中用 gsap.context() 清理、图片加载后刷新等常见问题。

为 SaaS、应用或服务设计或重写高转化落地页：先问清唯一的转化动作、受众、顾虑与证明素材，按首屏、论证、异议处理的结构编排，并提供版式类型、标题与 CTA 文案模板及 SEO 建议。

实现无缝循环的跑马灯，用于滚动展示标识、用户评价、截图或标签：复制一份元素序列，用线性 transform 从 0 平移到 -50%，固定元素宽度、边缘渐隐，并照顾 prefers-reduced-motion。

用 Matter.js 实现 2D 物理交互：搭建 Engine、Render、Runner 与刚体，按需加入鼠标拖拽约束，并给出单页应用中停止运行、移除画布的清理步骤；需求不明时先问清画布尺寸与渲染方式。

用多层 backdrop-filter 与渐变遮罩在页面顶部或底部做出由弱到强的渐进模糊，提供可直接粘贴的 HTML 与 CSS，可调整高度、模糊层级、方向与 z-index，且不拦截点击。

用 Tailwind CSS 实现界面的通用指南：响应式与状态变体、深色模式、克制使用任意值、优先拆组件再用 @apply，以及动态拼接类名导致生产环境缺样式等常见问题，附按钮与首屏版式示例。

用 Three.js 构建或调试网页 3D 场景：场景、相机、渲染器、光照与材质，GLTF 加载与控制器，以及限制设备像素比、处理窗口缩放、释放 WebGL 资源等性能要点，减少动态效果时只渲染静帧。

在 Jupyter Notebook 与普通 Python 脚本或 Markdown 之间互相转换、双向同步的工具，让 agent 能像改普通文本一样修改科研和教学用的 notebook，版本对比也更清楚。需要本机 Python 环境，用 pip 安装。

开源的 AI 原生矢量设计工具，桌面应用内置 MCP 服务器，可在应用里一键接入 Claude Code、Codex，让 agent 用自然语言读写 .op 设计稿、套用风格指南，并导出 React、Vue、Flutter、SwiftUI 等代码。需先安装桌面应用。

向 arXiv 投稿前清理 LaTeX 工程：删除注释、辅助文件和未被引用的 tex 与图片，可按需压缩图片，避免内部批注随源码公开。Google Research 出品，macOS 可用 Homebrew 安装。

Python 编写的网页正文提取库与命令行：抓取网页，可跟随站点地图与 RSS 批量采集，去除页眉页脚等噪声，输出 TXT、Markdown、JSON、XML 等格式并附元数据，也能离线处理已下载的 HTML。

借助 Figma 插件与本地 WebSocket 服务，让 agent 读取并直接修改设计稿：建框架与文本、调整自动布局和样式、批量替换文案。需安装 Bun，现由 Grab 维护。

Anthropic 官方的系统级沙箱命令行：无需容器即可限制 agent、MCP 服务器与任意命令的文件和网络访问，macOS 用 sandbox-exec、Linux 用 bubblewrap。目前是研究预览版。

CI/CD 配置的安全静态分析工具：找出 GitHub Actions 工作流中的模板注入、凭据泄露、权限过大等问题，也覆盖 Dependabot 与 pre-commit 配置，部分问题可自动修复。

指导 agent 新建 Remotion 视频项目与合成：先检查当前目录再用 create-video 脚手架初始化，动手写画面前先打开 Remotion Studio 预览，并按需参考视频布局、多场景与剪辑时间线等指南。Remotion 官方技能，需要 Node.js 与 Git。

让编码 agent 用简短的 Puppeteer 脚本控制真实 Chrome，命名页面跨调用保持状态，可取无障碍树快照、截图并自测网页改动。需先全局安装 dev-browser CLI，仅支持 macOS 与 glibc Linux。

告诉 agent 如何导出 Remotion 作品：用 npx remotion render 渲染视频、npx remotion still 渲染静帧，用 --frames 一次导出多帧图片，并可按说明输出透明背景的视频。Remotion 官方技能。

配合 n8n-mcp 使用的 14 个技能，外加钩子提醒层：教 agent 写对 n8n 表达式、配置节点、套用工作流模式、修复校验错误，也能部署自托管 n8n。需要先配置 n8n-mcp。