技能说明
适合营销落地页、产品展示站、仪表盘和作品集；支持 React、Next.js、Tailwind CSS、纯 HTML 等方向。生成素材时需要 MINIMAX_API_KEY，并且要把媒体保存到项目本地，生产交付前检查性能、可访问性和素材授权。
关于此技能
MiniMax 官方前端工作室技能，把视觉设计、动效、素材生成和转化文案组合成完整网页制作流程。
核心能力
高辨识度页面设计
覆盖 React、Next.js、Tailwind CSS、纯 HTML 等常见前端项目，先确定页面方向、布局、字体和配色。
动效与交互体系
按页面节奏选择 Framer Motion、GSAP、Three.js 等方案，并强调懒加载、移动端适配和减少动态效果。
本地素材与真实文案
通过 MiniMax API 生成图片、视频、音频或音乐素材，要求素材保存到项目本地并避免占位图与 Lorem ipsum。
适用场景
营销落地页
从品牌方向、首屏、卖点、信任证明到 CTA，制作有完整转化路径的页面。
产品展示与仪表盘
搭建产品页、展示站和数据面板，补齐加载、空状态、错误状态与响应式布局。
电影感网页体验
为品牌站和作品集规划滚动叙事、视差、3D 或生成艺术效果，同时检查性能与可访问性。
使用步骤
- 01
第一步：确认项目与视觉方向
说明页面类型、技术栈、目标用户、品牌约束、动效强度和素材需求。
- 02
第二步：准备依赖和素材
先检查 package.json；需要生成素材时配置 MINIMAX_API_KEY，确认提示词后再调用脚本，并把结果存入本地 assets。
- 03
第三步：实现并过质量检查
完成页面、动效和文案后，检查移动端、减少动态效果、焦点状态、性能、占位链接和本地媒体文件。
常见问题
需要 MiniMax API 密钥吗？+
只有生成图片、视频、音频、音乐或 TTS 等素材时需要 MINIMAX_API_KEY；纯页面设计可以只使用前端指导。
支持哪些 Agent？+
README 明确提供 Claude Code、Cursor、Codex 和 OpenCode 的安装方式，也可用于其他兼容 SKILL.md 的 Agent。
使用时有哪些限制？+
仓库处于 Beta，技能、接口和配置可能变化；素材生成前要确认提示词并注意 API 成本、素材版权和项目安全。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/08/31
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
git clone https://github.com/MiniMax-AI/skills.git ~/.codex/minimax-skills && mkdir -p ~/.agents/skills && ln -s ~/.codex/minimax-skills/skills ~/.agents/skills/minimax-skills