Frontend Design

使用 Nano Banana Pro (Gemini 3 Pro Image) 生成或编辑图像。支持文生图、图生图及 1K/2K/4K 分辨率，适用于图像创建、修改及编辑请求，使用 --input-image 指定输入图像。

使用 Whisper CLI 进行本地语音转文字（无需 API 密钥）

使用 mcp-diagram-generator MCP 服务器生成和编辑图表。适用于新建图表、编辑现有 .drawio/.mmd/.excalidraw 文件、网络拓扑、架构图、流程图、泳道图、时序图、类图、ER 图及 Excalidraw 白板工作。当用户要求绘图时，始终使用此技能。

使用 ffmpeg 从视频中提取帧或短片。

提供 UI/UX 设计智能与实现指导，帮助打造精美界面。适用于 UI 设计、UX 流程、信息架构、视觉风格、设计系统/标记、组件规格、文案/微文案、无障碍及前端 UI（HTML/CSS/JS、React、Next.js、Vue、Svelte、Tailwind）生成/评审/改进。工作流包括：①新 UI 布局与样式生成；②现有 UI/UX 改进；③设计系统标记和组件规范产出；④ UX 建议转化为代码变更。

强大的AI自动化绘图与复杂信息可视化工具（基于 ContextWeave）。不仅支持代码与系统架构的可视化，更广泛适用于复杂逻辑梳理、知识库转换、业务流程图、思维导图及长文本的结构化信息图生成。通过深度的语义分析与请求编排，一键将晦涩文本与复杂知识转化为清晰直观的图形表达。

专家级前端设计指南，用于创建美观、现代的用户界面。适用于落地页、仪表板等各类UI设计。

使用 Remotion + React 进行程序化视频创作的完整工具包。涵盖动画、时间控制、渲染（CLI/Node.js/Lambda/Cloud Run）、字幕、3D、图表、文字特效、转场及媒体处理。适用于编写 Remotion 代码、构建视频生成流水线或创建数据驱动的视频模板。

{"translation":"含 TODO 跟踪、Graphite PR、GitHub Issues、Vercel 部署检查及短信通知的生产开发工作流。适用于启动新任务、修复 Bug、实现功能或任何需追踪进度与代码评审的开发工作。"}

架构优先工作流，用于将复杂项目委派给AI编码智能体，确保代码编写前即符合系统架构。

{"answer":"适用于复杂 TypeScript/Next.js/Convex 项目的多智能体编排。分阶段构建、功能验证，无乱局委派子代理的全套方案。"}

熟练实现 Next.js 15/16+ 中的 Clerk 认证，强化路由组保护、正确的 proxy.ts 模式、公共页面不使用 auth()，并避免常见陷阱