frontend-dev

前端工作室

通过编排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

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

按框架

框架	资产位置	组件位置
纯 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/`

纯 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

组件命名： 帕斯卡命名法（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

搭建项目并按照设计和动效规则构建每个区块。集成生成的资产和文案。所有 <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 种卡片原型：

智能列表——使用 layoutId 自动排序
命令输入——打字机效果 + 闪烁光标
实时状态——呼吸指示器
宽数据流——无限水平轮播
上下文 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 animate，交错 ≤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	光标吸引按钮
文字乱码	原生	矩阵风格解码效果
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（保持在顶层）
npm install gsap                    # 滚动（懒加载）
npm install lottie-react            # 图标（懒加载）
npm install three @react-three/fiber @react-three/drei  # 3D（懒加载）

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 工作流

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

3.3 预设快捷方式

快捷方式	规格
`hero`	16:9，电影级，文字安全区
`thumb`	1:1，居中主体
`icon`	1:1，扁平，干净背景
`avatar`	1:1，肖像，可圆形裁剪
`banner`	21:9，OG/社交
`bg-video`	768P，6秒，`[Static shot]`
`video-hd`	1080P，6秒
`bgm`	30秒，无 vocals，可循环
`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 核心任务

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

4.2 框架

AIDA（落地页、邮件）：

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

PAS（痛点驱动产品）：

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

FAB（产品差异化）：

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

4.3 标题

公式	示例
承诺	"30 天内打开率翻倍"
问题	"还在每周浪费 10 小时？"
如何做	"如何自动化你的管道"
数字	"扼杀转化的 7 个错误"
负面	"停止失去线索"
好奇心	"一个让预订量翻三倍的变化"
转变	"从 50 个线索到 500 个"

要具体。以结果而非方法开头。

4.4 CTA

糟糕： 提交、点击这里、了解更多

优秀： "开始免费试用"、"立即获取模板"、"预约策略通话"

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

位置：首屏上方、价值之后、长页面多处。

4.5 情感触发点

触发点	示例
错失恐惧症	"仅剩 3 个名额"
损失恐惧	"没有这个，你每天损失 X 元"
地位	"加入 10,000+ 顶级机构"
便利	"设置一次。永远忘记。"
挫败感	"厌倦了毫无结果的工具？"
希望	"是的，你可以达到 10K MRR"

4.6 异议处理

异议	回应
太贵	展示 ROI："两周内回本"
对我没用	类似客户的社会证明
没时间	"设置只需 10 分钟"
如果失败怎么办	"30 天退款保证"
需要考虑	紧迫感/稀缺性

位置：FAQ、推荐信、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

交互模式：

先阅读 templates/viewer.html
保留固定部分（头部、侧边栏、种子控制）
替换可变部分（算法、参数）
种子随机性：randomSeed(seed); noiseSeed(seed);
输出：单个自包含 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 以及所有其他产品名称是其各自所有者的商标。

你可能还喜欢

fix

247Kfrontend

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

facebook

获取

motion-advanced

237Kfrontend

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

affaan-m

获取

next-cache-components-adoption

141Kfrontend

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

vercel

获取

继续探索

浏览 frontend 热门 Skills 最近更新