Frontend Studio

页面构建常在几个环节断裂：设计稿、动效、素材、文案分别由不同人负责，最后拼装时容易出现风格漂移、素材占位、动画掉帧，以及文案缺失。这个技能把五个能力编排成一条流水线，目标是从一句话需求直接产出可运行的页面，而不是只给出组件片段。

解决的问题

• 资产缺失或外链失效：用 unsplash、picsum、placeholder.com 之类链接充数，上线后经常失效。技能在第三阶段调用本地脚本生成图片、视频和音频，并统一落盘到 public/assets/{images,videos,audio}/，所有 <img>、<video>、<audio> 和 CSS background-image 都引用本地文件。
• 动效方案混乱：同一组件里 GSAP 和 Framer Motion 互相覆盖是常见坑。技能用 Tool Selection Matrix 把进入/退出交给 Framer Motion，滚动叙事交给 GSAP，循环图标交给 Lottie，3D 交给 R3F 并隔离到独立 Canvas，hover 和焦点态尽量用 CSS 实现。
• 动画性能失控：动画 width、height、top、left、margin、font-size 会触发重排。技能只允许动画 transform、opacity、filter、clip-path，并用 will-change、React.memo、contain 做隔离。
• 文案空洞：禁止 Lorem ipsum，要求用 AIDA、PAS、FAB 框架写真实文案，CTA 采用「动词 + 获得 + 紧迫或便利」的结构。

核心能力与流程

1. 设计架构：根据页面类型设置 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY 三个参数，然后规划区块和素材清单。
2. 动效架构：按区块选择工具，遵循「不混用 GSAP 和 Framer Motion」「R3F 独立 Canvas」「Lottie/GSAP/Three.js 懒加载」等冲突规则。
3. 资产生成：先解析类型、数量、风格和规格，生成提示词给用户确认，再执行脚本。命名统一为 {type}-{descriptor}-{timestamp}.{ext}，生成后压缩为 WebP、ffmpeg 压缩视频、音频做响度归一。
4. 文案与内容：按框架写标题、正文和 CTA，标题优先给出结果而非方法。
5. 构建 UI：脚手架后逐区块实现，遵循排版、颜色、卡片、状态、表单规则，并接入本地资产。
6. 质量闸门：检查禁止模式、可访问性和移动端降级。

技术约束

排版默认用 Geist/Outfit/Satoshi，明确不使用 Inter；仪表盘不用 Serif。颜色最多一个强调色，饱和度控制在低区间。卡片命名使用 PascalCase，如 HeroSection.tsx、HeroSection.vue。

动效按强度分级：1-2 只用 CSS transition，3-4 用 CSS keyframes 加 Framer 动画，5-6 加入 whileInView 和磁吸，7-8 用 GSAP ScrollTrigger 做钉住和横向劫持，9-10 才上 Three.js 粒子或 WebGL shader。所有动画都尊重 prefers-reduced-motion，移动端禁用 GSAP pin，粒子上限为桌面 800、平板 300、手机 100。

资产脚本依赖 MINIMAX_API_KEY，包括 minimax_tts.py、minimax_music.py、minimax_video.py、minimax_image.py，其中视频为异步流程（创建 → 轮询 → 下载）。提示词不要包含文字，图片生成后再用 WebP。

适用边界与注意点

适合需要快速产出完整前端页面的场景：着陆页、营销站、后台概览、内容展示页。它偏「设计工程」而非「无头 UI 库」，因此对排版、间距、动画和文案都有强约束。

注意几点：

• 使用前需自行安装依赖并配置 MINIMAX_API_KEY；生成图片、视频、音频会消耗外部 API 额度。
• 品牌覆盖时优先使用文档中的 Brand Override 色板和字体，否则严格按默认规则。
• 高饱和、纯黑、霓虹辉光、渐变标题文字、自定义光标、3 列等宽卡片、默认 shadcn/ui 组件都被禁止。
• 技能提供 prompt 和流程规范，最终视觉和文案仍需人工确认。