name: frontend-dev
description: |-
    全栈前端开发，融合高端UI设计、电影级动画、AI生成媒体资产、有说服力的文案写作和视觉艺术。构建完整、视觉惊艳的网页，包含真实媒体、高级动效和引人入胜的文案。

    适用场景：落地页建设、营销网站、产品页、仪表盘、生成媒体资产（图片/视频/音频/音乐）、撰写转化文案、生成式艺术创作、实现电影级滚动动画。
license: MIT
metadata:
    version: "1.0.0"
    category: frontend
    sources:
        - taste-skill by Leonxlnx (https://github.com/Leonxlnx/taste-skill) — Design engineering framework
        - canvas-design by Anthropic (https://github.com/anthropics/skills/tree/main/skills/canvas-design) — Static visual art workflow
        - algorithmic-art by Anthropic (https://github.com/anthropics/skills/tree/main/skills/algorithmic-art) — Generative art workflow
        - Framer Motion documentation
        - GSAP / GreenSock documentation
        - Three.js documentation
        - Tailwind CSS documentation
        - React / Next.js documentation
        - AIDA Framework (Elmo Lewis)
        - p5.js documentation

Frontend Studio

通过编排5种专业能力：设计工程、运动系统、AI生成资产、说服性文案和生成艺术，构建完整的、生产就绪的前端页面。

调用方式

/frontend-dev <request>

用户以自然语言提供请求（例如："为一个音乐流媒体应用构建一个落地页"）。

技能结构

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

资产命名： {type}-{descriptor}-{timestamp}.{ext}

按框架分类

纯 HTML

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

React / Next.js

project/
├── public/assets/        # 静态资产
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # 页面
└── package.json

Vue / Nuxt

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

Astro

project/
├── public/assets/
├── src/
│   ├── components/       # .astro, .tsx, .vue, .svelte
│   ├── layouts/
│   ├── pages/
│   └── styles/
└── package.json

组件命名： PascalCase（HeroSection.tsx、HeroSection.vue、HeroSection.astro）

---

合规性

本技能中的所有规则均为强制性。违反任何规则都会导致阻塞性错误——请在继续或交付前修复。

---

工作流程

阶段 1：设计架构

1. 分析请求——确定页面类型和上下文
2. 根据页面类型设置设计参数
3. 规划布局部分并确定资产需求

阶段 2：运动架构

1. 根据章节选择动画工具（参见工具选择矩阵）
2. 遵循性能护栏规划运动序列

阶段 3：资产生成

使用 scripts/ 生成所有图片/视频/音频资产。绝不使用占位符 URL（unsplash、picsum、placeholder.com、via.placeholder、placehold.co 等）或外部 URL。

1. 解析资产需求（类型、风格、规格、用途）
2. 精心构建提示，向用户展示，生成前确认
3. 通过脚本执行，保存到项目——在所有资产本地保存完成前不要进入阶段 5

阶段 4：文案与内容

遵循文案框架（AIDA、PAS、FAB）编写所有文本内容。不要使用 "Lorem ipsum"——编写真实的文案。

阶段 5：构建 UI

搭建项目并根据设计和运动规则构建每个部分。集成生成的资产和文案。所有 <img>、<video>、<source> 和 CSS background-image 必须引用阶段 3 中的本地资产。

阶段 6：质量关卡

运行最终检查清单（参见质量关卡部分）。

---

1. 设计工程

1.1 基准配置

根据用户请求动态调整。

1.2 架构约定

• 依赖验证： 在导入任何库之前检查 package.json。如果缺失则输出安装命令。
• 框架： React/Next.js。默认为服务器组件。交互式组件必须隔离为 "use client" 叶子组件。
• 样式： Tailwind CSS。在 package.json 中检查版本——绝不混用 v3/v4 语法。
• 反表情符号政策： 在任何地方绝不使用表情符号。仅使用 Phosphor 或 Radix 图标。
• 视口： 使用 min-h-[100dvh] 而非 h-screen。使用 CSS Grid 而非 flex 百分比计算。
• 布局： max-w-[1400px] mx-auto 或 max-w-7xl。

1.3 设计规则

1.4 反平庸技巧

• 液体玻璃： backdrop-blur + border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]
• 磁性按钮： 使用 useMotionValue/useTransform——连续动画绝不使用 useState
• 永久运动： 当 INTENSITY > 5 时，添加无限微动画（脉冲、浮动、闪烁）
• 布局过渡： 使用 Framer layout 和 layoutId 属性
• 交错： 使用 staggerChildren 或 CSS animation-delay: calc(var(--index) * 100ms)

1.5 禁止模式

1.6 创意宝库

1.7 Bento 范式

• 调色板： 背景 #f9fafb，卡片纯白色带 border-slate-200/50
• 表面： rounded-[2.5rem]，扩散阴影
• 排版： Geist/Satoshi，tracking-tight 标题
• 标签： 在卡片外部和下方
• 动画： 弹簧物理（stiffness: 100, damping: 20），无限循环，React.memo 隔离

5 种卡片原型：

1. 智能列表——使用 layoutId 自动排序
2. 命令输入——打字机效果 + 闪烁光标
3. 实时状态——呼吸指示器
4. 宽数据流——无限水平轮播
5. 上下文 UI——交错高亮 + 浮入工具栏

1.8 品牌覆盖

当品牌样式激活时：

• 深色：#141413，浅色：#faf9f5，中间色：#b0aea5，微妙色：#e8e6dc
• 强调色：橙色 #d97757，蓝色 #6a9bcc，绿色 #788c5d
• 字体：Poppins（标题），Lora（正文）

---

2. 运动引擎

2.1 工具选择矩阵

冲突规则 [强制]：

• 在同一个组件中绝不混用 GSAP 和 Framer Motion
• R3F 必须存在于隔离的 Canvas 包裹器中
• 始终懒加载 Lottie、GSAP、Three.js

2.2 强度等级

2.3 动画配方

参见 references/motion-recipes.md 获取完整代码。摘要：

2.4 性能规则

仅 GPU 属性（仅动画这些）： transform、opacity、filter、clip-path

绝不动画：width、height、top、left、margin、padding、font-size——如果需要这些效果，改用 transform: scale() 或 clip-path。

隔离：

• 永久动画必须位于 React.memo 叶子组件中
• will-change: transform 仅在动画期间使用
• 在重量级容器上使用 contain: layout style paint

移动端：

• 始终尊重 prefers-reduced-motion
• 在 pointer: coarse 设备上始终禁用视差/3D
• 粒子上限：桌面端 800，平板 300，移动端 100
• 在 < 768px 的移动设备上禁用 GSAP 固定

清理： 每个带有 GSAP/观察者的 useEffect 必须 return () => ctx.revert()

2.5 弹簧与缓动

2.6 无障碍

• 始终在运动代码中包裹 prefers-reduced-motion 检查
• 绝不以 > 3 次/秒的频率闪烁内容（癫痫风险）
• 始终提供可见的焦点环（使用 outline 而非 box-shadow）
• 对于动态揭示的内容，始终添加 aria-live="polite"
• 对于自动播放的动画，始终包含暂停按钮

2.7 依赖

npm install framer-motion           # UI（保持在顶层）
npm install gsap                    # 滚动（懒加载）
npm install lottie-react            # 图标（懒加载）
npm install three @react-three/fiber @react-three/drei  # 3D（懒加载）

---

3. 资产生成

3.1 脚本

环境变量：MINIMAX_API_KEY（必需）。

3.2 工作流程

1. 解析： 类型、数量、风格、规格、用途
2. 构建提示： 具体明确（构图、光照、风格）。在图片提示中绝不包含文字。
3. 执行： 向用户展示提示，必须先确认再生成，然后运行脚本
4. 保存： <project>/public/assets/{images,videos,audio}/ 并命名为 {type}-{descriptor}-{timestamp}.{ext}——必须本地保存
5. 后处理： 图片→WebP，视频→ffmpeg 压缩，音频→标准化
6. 交付： 文件路径 + 代码片段 + CSS 建议

3.3 预设快捷方式

3.4 参考

• references/minimax-cli-reference.md — CLI 标志
• references/asset-prompt-guide.md — 提示规则
• references/minimax-voice-catalog.md — 声音 ID
• references/minimax-tts-guide.md — TTS 用法
• references/minimax-music-guide.md — 音乐生成（提示、歌词、结构标签）
• references/minimax-video-guide.md — 摄像机命令
• references/minimax-image-guide.md — 比例、批量

---

4. 文案写作

4.1 核心任务

1. 吸引注意力 → 2. 创造渴望 → 3. 消除摩擦 → 4. 促进行动

4.2 框架

AIDA（落地页、电子邮件）：

注意力：  大胆的标题（承诺或痛点）
兴趣：    阐述问题（"是的，就是我"）
渴望：    展示转变
行动：    清晰的 CTA

PAS（痛点驱动型产品）：

问题：    清晰陈述
加剧：    制造紧迫感
解决方案： 你的产品

FAB（产品差异化）：

特性：    它做了什么
优势：    为什么重要
利益：    客户获得什么

4.3 标题

要具体。以结果为导向，而非方法。

4.4 CTA

糟糕： 提交、点击此处、了解更多

优秀： "开始我的免费试用"、"立即获取模板"、"预约我的战略电话"

公式： [行动动词] + [他们获得什么] + [紧迫感/便利性]

放置位置：首屏之上，价值点之后，长页面多个位置。

4.5 情感触发点

4.6 异议处理

放置在 FAQ、推荐信、CTA 附近。

4.7 证明类型

推荐信（含姓名/职位）、案例研究、数据/指标、社会证明、认证

---

5. 视觉艺术

理念先行的工作流程。两种输出模式。

5.1 输出模式

5.2 工作流程

步骤 1：理念创建

命名运动（1-2 个词）。阐述理念（4-6 个段落）涵盖：

• 静态：空间、形状、色彩、比例、节奏、层次
• 交互式：计算、涌现、噪声、参数化变化

步骤 2：概念种子

识别微妙、小众的参考——精致而非字面。爵士音乐家引用另一首歌。

步骤 3：创作

静态模式：

• 单页，高度视觉化，设计导向
• 重复图案、完美形状
• 来自 canvas-fonts/ 的稀疏排版
• 无重叠，适当边距
• 输出：.pdf 或 .png + 理念 .md

交互式模式：

1. 先阅读 templates/viewer.html
2. 保留 FIXED 部分（头部、侧边栏、种子控制）
3. 替换 VARIABLE 部分（算法、参数）
4. 种子随机性：randomSeed(seed); noiseSeed(seed);
5. 输出：单个自包含 HTML

步骤 4：精炼

精炼而非增添。使其清晰。打磨成杰作。

---

质量关卡

设计：

• [ ] 针对高变异设计的移动端布局折叠（w-full、px-4）
• [ ] 使用 min-h-[100dvh] 而非 h-screen
• [ ] 提供了空状态、加载状态、错误状态
• [ ] 在间距足够时省略卡片

运动：

• [ ] 根据选择矩阵使用正确的工具
• [ ] 同一组件中未混用 GSAP 和 Framer
• [ ] 所有 useEffect 都有清理返回值
• [ ] 尊重 prefers-reduced-motion
• [ ] 永久动画位于 React.memo 叶子组件中
• [ ] 仅动画 GPU 属性
• [ ] 重量级库已懒加载

通用：

• [ ] 在 package.json 中验证了依赖
• [ ] 无占位符 URL —— grep 输出中是否存在 unsplash、picsum、placeholder、placehold、via.placeholder、lorem.space、dummyimage。如果发现任何，立即停止并用生成的资产替换后再交付。
• [ ] 所有媒体资产作为本地文件存在于项目的资产目录中
• [ ] 资产提示在生成前已向用户确认

---

*React 和 Next.js 分别是 Meta Platforms, Inc. 和 Vercel, Inc. 的商标。Vue.js 是 Evan You 的商标。Tailwind CSS 是 Tailwind Labs Inc. 的商标。Svelte 和 SvelteKit 是其各自所有者的商标。GSAP/GreenSock 是 GreenSock Inc. 的商标。Three.js、Framer Motion、Lottie、Astro 以及所有其他产品名称是其各自所有者的商标。*