frontend-dev

前端工作室

通过编排 5 项专业能力，构建完整、可用于生产环境的前端页面：设计工程、动效系统、AI 生成素材、说服性文案和生成式艺术。

调用方式

/frontend-dev <request>

用户使用自然语言提出请求（例如“为音乐流媒体应用构建一个落地页”）。

技能结构

frontend-dev/
├── SKILL.md                      # Core skill (this file)
├── scripts/                      # Asset generation scripts
│   ├── minimax_tts.py            # Text-to-speech
│   ├── minimax_music.py          # Music generation
│   ├── minimax_video.py          # Video generation (async)
│   └── minimax_image.py          # Image generation
├── references/                   # Detailed guides (read as needed)
│   ├── minimax-cli-reference.md  # CLI flags quick reference
│   ├── asset-prompt-guide.md     # Asset prompt engineering rules
│   ├── minimax-tts-guide.md      # TTS usage & voices
│   ├── minimax-music-guide.md    # Music prompts & lyrics format
│   ├── minimax-video-guide.md    # Camera commands & models
│   ├── minimax-image-guide.md    # Ratios & batch generation
│   ├── minimax-voice-catalog.md  # All voice IDs
│   ├── motion-recipes.md         # Animation code snippets
│   ├── env-setup.md              # Environment setup
│   └── troubleshooting.md        # Common issues
├── templates/                    # Visual art templates
│   ├── viewer.html               # p5.js interactive art base
│   └── generator_template.js     # p5.js code reference
└── canvas-fonts/                 # Static art fonts (TTF + licenses)

项目结构

素材（通用）

所有框架都使用相同的素材组织方式：

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	./assets/	N/A（内联或 ./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/

纯 HTML

project/
├── index.html
├── assets/
│   ├── images/
│   ├── videos/
│   └── audio/
├── css/
│   └── styles.css
└── js/
    └── main.js           # Animations (GSAP/vanilla)

React / Next.js

project/
├── public/assets/        # Static assets
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # Pages
└── package.json

Vue / Nuxt

project/
├── public/assets/
├── src/                  # or root for Nuxt
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # Shared logic
│   ├── pages/
│   └── assets/           # Processed assets (optional)
└── 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 基础配置

参数	默认值	范围
DESIGN_VARIANCE	8	1=对称，10=非对称
MOTION_INTENSITY	6	1=静态，10=电影感
VISUAL_DENSITY	4	1=疏朗，10=密集

根据用户请求动态调整。

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 设计规则

规则	指令
排版	标题：text-4xl md:text-6xl tracking-tighter。正文：text-base leading-relaxed max-w-[65ch]。绝不使用 Inter——使用 Geist/Outfit/Satoshi。仪表板上绝不使用衬线字体。
颜色	强调色最多 1 种，饱和度 < 80%。绝不使用 AI 紫色/蓝色。坚持使用单一配色方案。
布局	当 VARIANCE > 4 时，绝不使用居中主视觉。强制采用分屏或非对称布局。
卡片	当 DENSITY > 7 时，绝不使用通用卡片。使用 border-t、divide-y 或间距。
状态	始终实现：加载中（骨架屏）、空状态、错误状态、触觉反馈（scale-[0.98]）。
表单	标签置于输入框上方。错误提示置于下方。输入区块使用 gap-2。

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 禁用模式

类别	禁用项
视觉	霓虹辉光、纯黑（#000）、过饱和强调色、标题上的渐变文字、自定义光标
排版	Inter 字体、过大的 H1、仪表板上使用衬线字体
布局	等宽的三列卡片行、间距别扭的浮动元素
组件	未经自定义的默认 shadcn/ui

1.6 创意工具箱

类别	模式
导航	Dock 放大、磁吸按钮、黏性菜单、动态岛、径向菜单、速拨菜单、超级菜单
布局	Bento 网格、瀑布流、彩色网格、分屏滚动、帷幕揭示
卡片	视差倾斜、聚光边框、玻璃拟态、全息箔片、滑动堆叠、形变模态框
滚动	粘滞堆叠、横向接管、Locomotive 序列、缩放视差、进度路径、液态滑动
画廊	穹顶画廊、Coverflow、拖动平移、手风琴滑块、悬停轨迹、故障效果
文本	动态跑马灯、文字遮罩揭示、扰码效果、圆形路径、渐变描边、动态网格
微交互	粒子爆炸、下拉刷新、骨架屏闪烁、定向悬停、涟漪点击、SVG 绘制、网格渐变、镜头模糊

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 工具选择矩阵

需求	工具
UI 进入/退出/布局	Framer Motion——AnimatePresence、layoutId、弹簧效果
滚动叙事（固定、擦动）	GSAP + ScrollTrigger——帧级精准控制
循环图标	Lottie——延迟加载（约 50KB）
3D/WebGL	Three.js / R3F——隔离的 <Canvas>，独立的 "use client" 边界
悬停/聚焦状态	仅 CSS——零 JS 开销
原生滚动驱动	CSS——animation-timeline: scroll()

冲突规则［强制］：

• 绝不在同一组件中混用 GSAP + Framer Motion
• R3F 必须位于隔离的 Canvas 包装器中
• 始终延迟加载 Lottie、GSAP、Three.js

2.2 强度等级

等级	技术
1-2 轻微	仅使用 CSS 过渡，150-300ms
3-4 平滑	CSS 关键帧 + Framer 动画，交错动画 ≤3 个项目
5-6 流畅	whileInView、磁吸悬停、视差倾斜
7-8 电影感	GSAP ScrollTrigger、固定区段、横向滚动劫持
9-10 沉浸式	完整滚动序列、Three.js 粒子、WebGL 着色器

2.3 动画方案

完整代码请参阅 references/motion-recipes.md。摘要：

方案	工具	用途
滚动显示	Framer	进入视口时淡入并滑动
交错网格	Framer	按顺序播放列表动画
固定时间线	GSAP	带固定效果的横向滚动
倾斜卡片	Framer	跟随鼠标的 3D 透视效果
磁吸按钮	Framer	吸引光标的按钮
文字扰乱	Vanilla	矩阵风格的解码效果
SVG 路径绘制	CSS	与滚动关联的路径动画
横向滚动	GSAP	将垂直滚动劫持为横向滚动
粒子背景	R3F	装饰性 WebGL 粒子
布局变形	Framer	卡片展开为模态框

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 弹簧与缓动

感觉	Framer 配置
干脆	stiffness: 300, damping: 30
平滑	stiffness: 150, damping: 20
弹跳	stiffness: 100, damping: 10
厚重	stiffness: 60, damping: 20

CSS 缓动	值
平滑减速	cubic-bezier(0.16, 1, 0.3, 1)
平滑加速	cubic-bezier(0.7, 0, 0.84, 0)
弹性	cubic-bezier(0.34, 1.56, 0.64, 1)

2.6 无障碍

• 始终在 prefers-reduced-motion 检查中包裹动画
• 切勿让内容每秒闪烁超过 3 次（有癫痫风险）
• 始终提供可见的焦点环（使用 outline，而非 box-shadow）
• 对动态显示的内容始终添加 aria-live="polite"
• 自动播放的动画始终包含暂停按钮

2.7 依赖项

npm install framer-motion           # UI (keep at top level)
npm install gsap                    # Scroll (lazy-load)
npm install lottie-react            # Icons (lazy-load)
npm install three @react-three/fiber @react-three/drei  # 3D (lazy-load)

---

3. 资源生成

3.1 脚本

类型	脚本	模式
TTS	scripts/minimax_tts.py	同步
音乐	scripts/minimax_music.py	同步
视频	scripts/minimax_video.py	异步（创建 → 轮询 → 下载）
图像	scripts/minimax_image.py	同步

环境变量：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 预设快捷方式

快捷方式	规格
hero	16:9，电影感，适合放置文字
thumb	1:1，主体居中
icon	1:1，扁平风格，干净背景
avatar	1:1，肖像，适合圆形裁剪
banner	21:9，OG/社交媒体
bg-video	768P，6s，[Static shot]
video-hd	1080P，6s
bgm	30s，无人声，可循环
tts	MiniMax HD，MP3

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（着陆页、电子邮件）：

ATTENTION:  Bold headline (promise or pain)
INTEREST:   Elaborate problem ("yes, that's me")
DESIRE:     Show transformation
ACTION:     Clear CTA

PAS（由痛点驱动的产品）：

PROBLEM:    State clearly
AGITATE:    Make urgent
SOLUTION:   Your product

FAB（产品差异化）：

FEATURE:    What it does
ADVANTAGE:  Why it matters
BENEFIT:    What customer gains

4.3 标题

公式	示例
承诺	"30 天内将打开率提高一倍"
提问	"还在每周浪费 10 小时吗？"
操作指南	"如何自动化你的工作流"
数字	"导致转化率下降的 7 个错误"
否定	"别再流失潜在客户"
好奇心	"让预约量翻三倍的一个改变"
转变	"从 50 个潜在客户增长到 500 个"

具体明确。突出结果，而非方法。

4.4 CTA

不佳： 提交、点击此处、了解更多

出色： "开始我的免费试用"、"立即获取模板"、"预约我的策略咨询"

公式： [行动动词] + [对方将获得的内容] + [紧迫性/便捷性]

位置：首屏、价值内容之后，以及较长页面中的多个位置。

4.5 情感触发点

触发点	示例
错失恐惧	"仅剩 3 个名额"
害怕损失	"不使用它的每一天，你都在损失 $X"
地位	"加入 10,000 多家顶尖机构"
便捷	"设置一次，一劳永逸。"
挫败感	"受够了毫无用处的工具？"
希望	"没错，你也能实现每月 10K 美元的经常性收入"

4.6 异议处理

异议	回应
太贵了	展示投资回报率："两周内即可回本"
对我没用	提供相似客户的社会证明
没时间	"设置只需 10 分钟"
万一失败呢	"30 天退款保证"
需要考虑一下	强调紧迫性/稀缺性

放在常见问题解答、客户评价中，以及 CTA 附近。

4.7 证明类型

客户评价（附姓名/职位）、案例研究、数据/指标、社会证明、认证

---

5. 视觉艺术

以理念为先的工作流。两种输出模式。

5.1 输出模式

模式	输出	适用场景
静态	PDF/PNG	海报、印刷品、设计素材
交互式	HTML (p5.js)	生成式艺术、可探索的变化

5.2 工作流

步骤 1：创作理念

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

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

步骤 2：概念种子

找出一个微妙、细分的参考——要精妙，而非直白。就像爵士乐手引用另一首曲子。

步骤 3：创作

静态模式：

• 单页、视觉表现力强、以设计为核心
• 重复图案、完美形状
• 使用 canvas-fonts/ 中的精简字体
• 避免任何重叠，确保边距恰当
• 输出：.pdf 或 .png + 理念 .md

交互式模式：

1. 首先阅读 templates/viewer.html
2. 保留固定区域（页眉、侧边栏、种子控制项）
3. 替换可变区域（算法、参数）
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——搜索输出中的 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 以及所有其他产品名称均为各自所有者的商标。