MiniMax Frontend Dev — MiniMax 前端开发人员

前端工作室构建 通过编排 5 项专业能力：设计工程、运动系统、AI 生成资产、说服性文案和生成艺术，创建完整的、可用于生产的前端页面。 调用 /frontend-dev <请求> 用户以自然语言（例如“为音乐流媒体应用构建一个登录页面”）提供他们的请求。

技能结构 frontend-dev/ ├── SKILL.md # 核心技能（本文件） ├── scripts/ # 资产生成脚本 │ ├── minimax_tts.py # 文本转语音 │ ├── minimax_music.py # 音乐生成 │ ├── minimax_video.py # 视频生成（异步） │ └── minimax_image.py # 图像生成 ├── references/ # 详细指南（按需阅读） │ ├── minimax-cli-reference.md # CLI 标志快速参考 │ ├── asset-prompt-guide.md # 资产提示工程规则 │ ├── minimax-tts-guide.md # TTS 使用和语音 │ ├── minimax-music-guide.md # 音乐提示和歌词格式 │ ├── minimax-video-guide.md # 相机命令和模型 │ ├── minimax-image-guide.md # 比例和批量生成 │ ├── minimax-voice-catalog.md # 所有语音 ID │ ├── motion-recipes.md # 动画代码片段 │ ├── env-setup.md # 环境设置 │ └── troubleshooting.md # 常见问题 ├── templates/ # 视觉艺术模板 │ ├── viewer.html # p5.js 交互式艺术基础 │ └── generator_template.js # p5.js 代码参考 └── canvas-fonts/ # 静态艺术字体（TTF + 许可）

项目结构 资产（通用） 所有框架使用相同的资产组织： assets/ ├── images/ │ ├── hero-landing-1710xxx.webp │ ├── icon-feature-01.webp │ └── bg-pattern.svg ├── videos/ │ ├── hero-bg-1710xxx.mp4 │ └── demo-preview.mp4 └── audio/ ├── bgm-ambient-1710xxx.mp3 └── tts-intro-1710xxx.mp3

资产命名：{类型}-{描述}-{时间戳}.{扩展名}

按框架划分 框架 资产位置 组件位置 Pure HTML ./assets/ 内联或 ./js/ React/Next.js public/assets/ src/components/ Vue/Nuxt public/assets/ src/components/ Svelte/SvelteKit static/assets/ src/lib/components/ Astro public/assets/ src/components/

Pure HTML 项目 ├── index.html ├── assets/ │ ├── images/ │ ├── videos/ │ └── audio/ ├── css/ │ └── styles.css └── js/ └── main.js # 动画（GSAP/原生）

React / Next.js 项目 ├── public/assets/ # 静态资产 ├── src/ │ ├── components/ │ │ ├── ui/ # 按钮、卡片、输入 │ │ ├── sections/ # 英雄、功能、CTA │ │ └── motion/ # RevealSection、StaggerGrid │ ├── lib/ │ ├── styles/ │ └── app/ # 页面 └── package.json

Vue / Nuxt 项目 ├── public/assets/ ├── src/ # 或 Nuxt 根目录 │ ├── components/ │ │ ├── ui/ │ │ ├── sections/ │ │ └── motion/ │ ├── composables/ # 共享逻辑 │ ├── pages/ │ └── assets/ # 处理后的资产（可选） └── package.json

Astro 项目 ├── public/assets/ ├── src/ │ ├── components/ # .astro、.tsx、.vue、.svelte │ ├── layouts/ │ ├── pages/ │ └── styles/ └── package.json

组件命名：帕斯卡命名法（HeroSection.tsx、HeroSection.vue、HeroSection.astro）

合规性 本技能中的所有规则都是强制性的。违反任何规则都是一个阻塞错误 - 在继续或交付之前修复。

工作流程 第 1 阶段：设计架构 分析请求 - 确定页面类型和上下文 根据页面类型设置设计参数 规划布局部分并确定资产需求

第 2 阶段：运动架构 根据部分选择动画工具（参见工具选择矩阵） 规划运动序列，遵循性能防护栏

第 3 阶段：资产生成 使用 scripts/ 生成所有图像/视频/音频资产。永远不要使用占位符 URL（unsplash、picsum、placeholder.com、via.placeholder、placehold.co 等）或外部 URL。 解析资产要求（类型、样式、规格、用途） 制作优化的提示，显示给用户，确认后生成 通过脚本执行，保存到项目 - 不要在所有资产保存到本地之前继续到第 5 阶段

第 4 阶段：文案和内容 遵循文案框架（AIDA、PAS、FAB）来制作所有文本内容。不要使用“Lorem ipsum” - 编写真实的文案。

第 5 阶段：构建 UI 搭建项目并按照设计和运动规则构建每个部分。集成生成的资产和文案。所有 、 和 CSS 背景图像必须引用第 3 阶段的本地资产。

第 6 阶段：质量门 运行最终检查清单（参见质量门部分）。

• 设计工程

1.2 体系结构约定 依赖项验证：在导入任何库之前检查 package.json。