frontend-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Studio

前端工作室

Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.

通过协调5种专业能力，构建完整的、可投入生产的前端页面：设计工程、动效系统、AI生成资产、有说服力的文案和生成式艺术。

Invocation

调用方式

/frontend-dev <request>

The user provides their request as natural language (e.g. "build a landing page for a music streaming app").

/frontend-dev <request>

用户以自然语言提供需求（例如："为音乐流媒体应用搭建着陆页"）。

Skill Structure

技能结构

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)

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 格式及许可证）

Project Structure

项目结构

Assets (Universal)

通用资产结构

All frameworks use the same asset organization:

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

Asset naming:

{type}-{descriptor}-{timestamp}.{ext}

所有框架采用相同的资产组织方式：

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

资产命名规则：

{类型}-{描述}-{时间戳}.{扩展名}

By Framework

分框架结构

Framework	Asset Location	Component Location
Pure HTML	`./assets/`	N/A (inline or `./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	`./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

纯HTML

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

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

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

project/
├── public/assets/        # 静态资产
├── src/
│   ├── components/
│   │   ├── ui/           # 按钮、卡片、输入框
│   │   ├── sections/     # 首页横幅、功能区、行动召唤区
│   │   └── motion/       # 渐显区块、交错网格
│   ├── lib/
│   ├── styles/
│   └── app/              # 页面文件
└── 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

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

Component naming: PascalCase (

HeroSection.tsx

HeroSection.vue

HeroSection.astro

)

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

组件命名规则： 大驼峰式（

HeroSection.tsx

HeroSection.vue

HeroSection.astro

）

Compliance

合规要求

All rules in this skill are mandatory. Violating any rule is a blocking error — fix before proceeding or delivering.

本技能中的所有规则均为强制性要求。违反任何规则均会导致阻塞性错误——需修复后再继续或交付。

Workflow

工作流程

Phase 1: Design Architecture

阶段1：设计架构

Analyze the request — determine page type and context
Set design dials based on page type
Plan layout sections and identify asset needs

分析需求——确定页面类型和应用场景
根据页面类型设置设计调节项
规划布局区块并确定资产需求

Phase 2: Motion Architecture

阶段2：动效架构

Select animation tools per section (see Tool Selection Matrix)
Plan motion sequences following performance guardrails

为每个区块选择合适的动画工具（参考工具选择矩阵）
遵循性能约束规划动效序列

Phase 3: Asset Generation

阶段3：资产生成

Generate all image/video/audio assets using

scripts/

. NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.

Parse asset requirements (type, style, spec, usage)
Craft optimized prompts, show to user, confirm before generating
Execute via scripts, save to project — do NOT proceed to Phase 5 until all assets are saved locally

使用

scripts/

生成所有图片/视频/音频资产。严禁使用占位符URL（unsplash、picsum、placeholder.com等）或外部URL。

解析资产需求（类型、风格、规格、用途）
编写优化后的提示词，展示给用户，必须在生成前获得确认
通过脚本执行生成，保存到项目中——所有资产保存到本地后，才能进入阶段5

Phase 4: Copywriting & Content

阶段4：文案撰写

Follow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use "Lorem ipsum" — write real copy.

遵循文案框架（AIDA、PAS、FAB）撰写所有文本内容。严禁使用"Lorem ipsum"占位文本——需撰写真实有效的文案。

Phase 5: Build UI

阶段5：UI构建

Scaffold the project and build each section following Design and Motion rules. Integrate generated assets and copy. All

<img>

<video>

<source>

, and CSS

background-image

MUST reference local assets from Phase 3.

搭建项目结构，按照设计和动效规则构建每个区块。整合生成的资产和文案。所有

<img>

、

<video>

、

<source>

标签及CSS

background-image

必须引用阶段3生成的本地资产。

Phase 6: Quality Gates

阶段6：质量检查

Run final checklist (see Quality Gates section).

运行最终检查清单（参考质量检查项部分）。

1. Design Engineering

1. 设计工程

1.1 Baseline Configuration

1.1 基线配置

Dial	Default	Range
DESIGN_VARIANCE	8	1=Symmetry, 10=Asymmetric
MOTION_INTENSITY	6	1=Static, 10=Cinematic
VISUAL_DENSITY	4	1=Airy, 10=Packed

Adapt dynamically based on user requests.

调节项	默认值	范围
DESIGN_VARIANCE	8	1=对称布局，10=非对称布局
MOTION_INTENSITY	6	1=静态，10=电影级
VISUAL_DENSITY	4	1=宽松，10=紧凑

根据用户需求动态调整上述参数。

1.2 Architecture Conventions

1.2 架构规范

DEPENDENCY VERIFICATION: Check
```
package.json
```
before importing any library. Output install command if missing.
Framework: React/Next.js. Default to Server Components. Interactive components must be isolated
```
"use client"
```
leaf components.
Styling: Tailwind CSS. Check version in
```
package.json
```
— NEVER mix v3/v4 syntax.
ANTI-EMOJI POLICY: NEVER use emojis anywhere. Use Phosphor or Radix icons only.
Viewport: Use
```
min-h-[100dvh]
```
not
```
h-screen
```
. Use CSS Grid not flex percentage math.
Layout:
```
max-w-[1400px] mx-auto
```
or
```
max-w-7xl
```
.

依赖验证： 导入任何库前检查
```
package.json
```
。若缺失，输出安装命令。
框架： React/Next.js。默认使用Server Components。交互式组件必须隔离为
```
"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 Design Rules

1.3 设计规则

Rule	Directive
Typography	Headlines: `text-4xl md:text-6xl tracking-tighter` . Body: `text-base leading-relaxed max-w-[65ch]` . NEVER use Inter — use Geist/Outfit/Satoshi. NEVER use Serif on dashboards.
Color	Max 1 accent, saturation < 80%. NEVER use AI purple/blue. Stick to one palette.
Layout	NEVER use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts.
Cards	NEVER use generic cards when DENSITY > 7. Use `border-t` , `divide-y` , or spacing.
States	ALWAYS implement: Loading (skeleton), Empty, Error, Tactile feedback ( `scale-[0.98]` ).
Forms	Label above input. Error below. `gap-2` for input blocks.

规则类别	要求
排版	标题： `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 Anti-Slop Techniques

1.4 高级优化技巧

Liquid Glass:

backdrop-blur

border-white/10

shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]

Magnetic Buttons: Use
```
useMotionValue
```
/
```
useTransform
```
— never
```
useState
```
for continuous animations
Perpetual Motion: When INTENSITY > 5, add infinite micro-animations (Pulse, Float, Shimmer)
Layout Transitions: Use Framer
```
layout
```
and
```
layoutId
```
props

Stagger: Use

staggerChildren

or CSS

animation-delay: calc(var(--index) * 100ms)

液态玻璃效果：

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 Forbidden Patterns

1.5 禁用模式

Category	Banned
Visual	Neon glows, pure black (#000), oversaturated accents, gradient text on headers, custom cursors
Typography	Inter font, oversized H1s, Serif on dashboards
Layout	3-column equal card rows, floating elements with awkward gaps
Components	Default shadcn/ui without customization

类别	禁用内容
视觉效果	霓虹发光、纯黑色（#000）、过饱和强调色、标题渐变文字、自定义光标
排版	Inter字体、超大H1标题、仪表盘中使用衬线字体
布局	三等分卡片行、间隙不协调的浮动元素
组件	未自定义的默认shadcn/ui组件

1.6 Creative Arsenal

1.6 创意方案库

Category	Patterns
Navigation	Dock magnification, Magnetic button, Gooey menu, Dynamic island, Radial menu, Speed dial, Mega menu
Layout	Bento grid, Masonry, Chroma grid, Split-screen scroll, Curtain reveal
Cards	Parallax tilt, Spotlight border, Glassmorphism, Holographic foil, Swipe stack, Morphing modal
Scroll	Sticky stack, Horizontal hijack, Locomotive sequence, Zoom parallax, Progress path, Liquid swipe
Gallery	Dome gallery, Coverflow, Drag-to-pan, Accordion slider, Hover trail, Glitch effect
Text	Kinetic marquee, Text mask reveal, Scramble effect, Circular path, Gradient stroke, Kinetic grid
Micro	Particle explosion, Pull-to-refresh, Skeleton shimmer, Directional hover, Ripple click, SVG draw, Mesh gradient, Lens blur

类别	可用模式
导航	停靠栏放大、磁吸按钮、粘性菜单、动态岛、径向菜单、快速拨号、巨型菜单
布局	便当盒网格、瀑布流、色彩网格、分屏滚动、幕布渐显
卡片	视差倾斜、聚光灯边框、玻璃态、全息箔、滑动堆叠、变形模态框
滚动	粘性堆叠、横向滚动 hijack、Locomotive 序列、缩放视差、进度路径、液态滑动
画廊	穹顶画廊、封面流、拖拽平移、手风琴滑块、悬停轨迹、故障效果
文字	动态跑马灯、文字遮罩渐显、乱码解密、圆形路径、渐变描边、动态网格
微交互	粒子爆炸、下拉刷新、骨架屏闪光、方向感知悬停、点击涟漪、SVG绘制、网格渐变、镜头模糊

1.7 Bento Paradigm

1.7 便当盒范式

Palette: Background
```
#f9fafb
```
, cards pure white with
```
border-slate-200/50
```
Surfaces:
```
rounded-[2.5rem]
```
, diffusion shadow
Typography: Geist/Satoshi,
```
tracking-tight
```
headers
Labels: Outside and below cards
Animation: Spring physics (
```
stiffness: 100, damping: 20
```
), infinite loops,
```
React.memo
```
isolation

5-Card Archetypes:

Intelligent List — auto-sorting with
```
layoutId
```
Command Input — typewriter + blinking cursor
Live Status — breathing indicators
Wide Data Stream — infinite horizontal carousel
Contextual UI — staggered highlight + float-in toolbar

调色板： 背景
```
#f9fafb
```
，卡片纯白+
```
border-slate-200/50
```
外观：
```
rounded-[2.5rem]
```
，扩散阴影
排版： Geist/Satoshi字体，
```
tracking-tight
```
标题
标签： 置于卡片外部下方
动画： 弹簧物理效果（
```
stiffness: 100, damping: 20
```
）、无限循环、
```
React.memo
```
隔离组件

5种卡片原型：

智能列表——通过
```
layoutId
```
自动排序
命令输入框——打字机效果+闪烁光标
实时状态——呼吸式指示器
宽数据流——无限横向轮播
上下文UI——交错高亮+浮动工具栏

1.8 Brand Override

1.8 品牌样式覆盖

When brand styling is active:

Dark:
```
#141413
```
, Light:
```
#faf9f5
```
, Mid:
```
#b0aea5
```
, Subtle:
```
#e8e6dc
```
Accents: Orange
```
#d97757
```
, Blue
```
#6a9bcc
```
, Green
```
#788c5d
```
Fonts: Poppins (headings), Lora (body)

当启用品牌样式时：

深色：
```
#141413
```
，浅色：
```
#faf9f5
```
，中性色：
```
#b0aea5
```
，柔和色：
```
#e8e6dc
```
强调色：橙色
```
#d97757
```
，蓝色
```
#6a9bcc
```
，绿色
```
#788c5d
```
字体：Poppins（标题），Lora（正文）

2. Motion Engine

2. 动效引擎

2.1 Tool Selection Matrix

2.1 工具选择矩阵

Need	Tool
UI enter/exit/layout	Framer Motion — `AnimatePresence` , `layoutId` , springs
Scroll storytelling (pin, scrub)	GSAP + ScrollTrigger — frame-accurate control
Looping icons	Lottie — lazy-load (~50KB)
3D/WebGL	Three.js / R3F — isolated `<Canvas>` , own `"use client"` boundary
Hover/focus states	CSS only — zero JS cost
Native scroll-driven	CSS — `animation-timeline: scroll()`

Conflict Rules [MANDATORY]:

NEVER mix GSAP + Framer Motion in same component
R3F MUST live in isolated Canvas wrapper
ALWAYS lazy-load Lottie, GSAP, Three.js

需求	工具
UI 进入/退出/布局动画	Framer Motion — `AnimatePresence` , `layoutId` , 弹簧效果
滚动叙事（固定、 scrub）	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 Intensity Scale

2.2 动效强度等级

Level	Techniques
1-2 Subtle	CSS transitions only, 150-300ms
3-4 Smooth	CSS keyframes + Framer animate, stagger ≤3 items
5-6 Fluid	`whileInView` , magnetic hover, parallax tilt
7-8 Cinematic	GSAP ScrollTrigger, pinned sections, horizontal hijack
9-10 Immersive	Full scroll sequences, Three.js particles, WebGL shaders

等级	技术方案
1-2 微妙	仅CSS过渡，时长150-300ms
3-4 流畅	CSS关键帧 + Framer动画，交错元素≤3个
5-6 丝滑	`whileInView` 、磁吸悬停、视差倾斜
7-8 电影级	GSAP ScrollTrigger、固定区块、横向滚动 hijack
9-10 沉浸式	完整滚动序列、Three.js粒子、WebGL着色器

2.3 Animation Recipes

2.3 动画方案

See

references/motion-recipes.md

for full code. Summary:

Recipe	Tool	Use For
Scroll Reveal	Framer	Fade+slide on viewport entry
Stagger Grid	Framer	Sequential list animations
Pinned Timeline	GSAP	Horizontal scroll with pinning
Tilt Card	Framer	Mouse-tracking 3D perspective
Magnetic Button	Framer	Cursor-attracted buttons
Text Scramble	Vanilla	Matrix-style decode effect
SVG Path Draw	CSS	Scroll-linked path animation
Horizontal Scroll	GSAP	Vertical-to-horizontal hijack
Particle Background	R3F	Decorative WebGL particles
Layout Morph	Framer	Card-to-modal expansion

完整代码请参考

references/motion-recipes.md

。摘要：

方案	工具	适用场景
滚动渐显	Framer	进入视口时淡入+滑动
交错网格	Framer	列表元素顺序动画
固定时间线	GSAP	横向滚动+固定区块
倾斜卡片	Framer	鼠标跟踪3D透视效果
磁吸按钮	Framer	跟随光标移动的按钮
文字解密	原生JS	矩阵风格的文字解码效果
SVG路径绘制	CSS	滚动关联的路径动画
横向滚动	GSAP	垂直转横向滚动 hijack
粒子背景	R3F	装饰性WebGL粒子
布局变形	Framer	卡片转模态框的展开动画

2.4 Performance Rules

2.4 性能规则

GPU-only properties (ONLY animate these):

transform

opacity

filter

clip-path

NEVER animate:

width

height

top

left

margin

padding

font-size

— if you need these effects, use

transform: scale()

clip-path

instead.

Isolation:

Perpetual animations MUST be in
```
React.memo
```
leaf components
```
will-change: transform
```
ONLY during animation
```
contain: layout style paint
```
on heavy containers

Mobile:

ALWAYS respect
```
prefers-reduced-motion
```
ALWAYS disable parallax/3D on
```
pointer: coarse
```
Cap particles: desktop 800, tablet 300, mobile 100
Disable GSAP pin on mobile < 768px

Cleanup: Every

useEffect

with GSAP/observers MUST

return () => ctx.revert()

仅使用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

必须返回

() => ctx.revert()

进行清理

2.5 Springs & Easings

2.5 弹簧与缓动

Feel	Framer Config
Snappy	`stiffness: 300, damping: 30`
Smooth	`stiffness: 150, damping: 20`
Bouncy	`stiffness: 100, damping: 10`
Heavy	`stiffness: 60, damping: 20`

CSS Easing	Value
Smooth decel	`cubic-bezier(0.16, 1, 0.3, 1)`
Smooth accel	`cubic-bezier(0.7, 0, 0.84, 0)`
Elastic	`cubic-bezier(0.34, 1.56, 0.64, 1)`

效果	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 Accessibility

2.6 无障碍访问

ALWAYS wrap motion in
```
prefers-reduced-motion
```
check
NEVER flash content > 3 times/second (seizure risk)
ALWAYS provide visible focus rings (use
```
outline
```
not
```
box-shadow
```
)
ALWAYS add
```
aria-live="polite"
```
for dynamically revealed content
ALWAYS include pause button for auto-playing animations

必须将动效包裹在
```
prefers-reduced-motion
```
检查中
严禁内容闪烁频率>3次/秒（可能引发癫痫）
必须提供可见的焦点环（使用
```
outline
```
而非
```
box-shadow
```
）
必须为动态显示的内容添加
```
aria-live="polite"
```
必须为自动播放的动画添加暂停按钮

2.7 Dependencies

2.7 依赖安装

bash

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)

bash

npm install framer-motion           # UI动效（置于顶层依赖）
npm install gsap                    # 滚动动效（懒加载）
npm install lottie-react            # 图标动画（懒加载）
npm install three @react-three/fiber @react-three/drei  # 3D效果（懒加载）

3. Asset Generation

3. 资产生成

3.1 Scripts

3.1 脚本说明

Type	Script	Pattern
TTS	`scripts/minimax_tts.py`	Sync
Music	`scripts/minimax_music.py`	Sync
Video	`scripts/minimax_video.py`	Async (create → poll → download)
Image	`scripts/minimax_image.py`	Sync

Env:

MINIMAX_API_KEY

(required).

类型	脚本	执行方式
文本转语音	`scripts/minimax_tts.py`	同步
音乐生成	`scripts/minimax_music.py`	同步
视频生成	`scripts/minimax_video.py`	异步（创建→轮询→下载）
图片生成	`scripts/minimax_image.py`	同步

环境变量：

MINIMAX_API_KEY

（必填）。

3.2 Workflow

3.2 工作流程

Parse: type, quantity, style, spec, usage
Craft prompt: Be specific (composition, lighting, style). NEVER include text in image prompts.
Execute: Show prompt to user, MUST confirm before generating, then run script

Save:

<project>/public/assets/{images,videos,audio}/

{type}-{descriptor}-{timestamp}.{ext}

— MUST save locally

Post-process: Images → WebP, Videos → ffmpeg compress, Audio → normalize
Deliver: File path + code snippet + CSS suggestion

解析： 确定类型、数量、风格、规格、用途
编写提示词： 内容需具体（构图、光线、风格）。图片提示词中严禁包含文字。
执行： 向用户展示提示词，必须在生成前获得确认，然后运行脚本

保存： 保存至

<project>/public/assets/{images,videos,audio}/

，命名格式为

{类型}-{描述}-{时间戳}.{扩展名}

——必须保存到本地

后处理： 图片转WebP格式，视频通过ffmpeg压缩，音频标准化
交付： 提供文件路径+代码片段+CSS建议

3.3 Preset Shortcuts

3.3 预设快捷指令

Shortcut	Spec
`hero`	16:9, cinematic, text-safe
`thumb`	1:1, centered subject
`icon`	1:1, flat, clean background
`avatar`	1:1, portrait, circular crop ready
`banner`	21:9, OG/social
`bg-video`	768P, 6s, `[Static shot]`
`video-hd`	1080P, 6s
`bgm`	30s, no vocals, loopable
`tts`	MiniMax HD, MP3

快捷指令	规格
`hero`	16:9比例，电影级风格，无遮挡文字区域
`thumb`	1:1比例，主体居中
`icon`	1:1比例，扁平化，干净背景
`avatar`	1:1比例，人像，已适配圆形裁剪
`banner`	21:9比例，适配社交平台OG图
`bg-video`	768P分辨率，6秒时长， `[固定镜头]`
`video-hd`	1080P分辨率，6秒时长
`bgm`	30秒时长，无 vocals，可循环
`tts`	MiniMax HD 音质，MP3格式

3.4 Reference

3.4 参考文档

```
references/minimax-cli-reference.md
```
— CLI flags
```
references/asset-prompt-guide.md
```
— Prompt rules
```
references/minimax-voice-catalog.md
```
— Voice IDs
```
references/minimax-tts-guide.md
```
— TTS usage
```
references/minimax-music-guide.md
```
— Music generation (prompts, lyrics, structure tags)
```
references/minimax-video-guide.md
```
— Camera commands
```
references/minimax-image-guide.md
```
— Ratios, batch

```
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. Copywriting

4. 文案撰写

4.1 Core Job

4.1 核心目标

Grab attention → 2. Create desire → 3. Remove friction → 4. Prompt action

吸引注意力 → 2. 激发欲望 → 3. 消除顾虑 → 4. 促进行动

4.2 Frameworks

4.2 文案框架

AIDA (landing pages, emails):

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

PAS (pain-driven products):

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

FAB (product differentiation):

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

AIDA（着陆页、邮件）：

ATTENTION:  醒目标题（承诺或痛点）
INTEREST:   阐述问题（"对，这就是我遇到的情况"）
DESIRE:     展示转变效果
ACTION:     清晰的行动召唤

PAS（痛点驱动型产品）：

PROBLEM:    明确陈述问题
AGITATE:    强化紧迫感
SOLUTION:   你的产品

FAB（产品差异化）：

FEATURE:    产品功能
ADVANTAGE:  功能带来的优势
BENEFIT:    用户获得的实际价值

4.3 Headlines

4.3 标题公式

Formula	Example
Promise	"Double open rates in 30 days"
Question	"Still wasting 10 hours/week?"
How-To	"How to automate your pipeline"
Number	"7 mistakes killing conversions"
Negative	"Stop losing leads"
Curiosity	"The one change that tripled bookings"
Transformation	"From 50 to 500 leads"

Be specific. Lead with outcome, not method.

公式	示例
承诺型	"30天内将打开率提升一倍"
疑问型	"还在每周浪费10小时吗？"
教程型	"如何自动化你的工作流"
数字型	"7个毁掉转化率的错误"
否定型	"别再流失潜在客户"
好奇型	"让预订量翻三倍的一个改变"
转变型	"从50个到500个潜在客户"

标题需具体。优先突出结果，而非方法。

4.4 CTAs

4.4 行动召唤（CTA）

Bad: Submit, Click here, Learn more

Good: "Start my free trial", "Get the template now", "Book my strategy call"

Formula: [Action Verb] + [What They Get] + [Urgency/Ease]

Place: above fold, after value, multiple on long pages.

不佳示例： 提交、点击这里、了解更多

优秀示例： "开启我的免费试用"、"立即获取模板"、"预约我的策略咨询"

公式： [动作动词] + [用户获得的价值] + [紧迫感/便捷性]

放置位置：首屏、价值点之后、长页面多次出现。

4.5 Emotional Triggers

4.5 情感触发词

Trigger	Example
FOMO	"Only 3 spots left"
Fear of loss	"Every day without this, you're losing $X"
Status	"Join 10,000+ top agencies"
Ease	"Set it up once. Forget forever."
Frustration	"Tired of tools that deliver nothing?"
Hope	"Yes, you CAN hit $10K MRR"

触发类型	示例
错失恐惧（FOMO）	"仅剩3个名额"
损失恐惧	"每多一天不用这个工具，你就损失X美元"
身份认同	"加入10000+顶级代理机构"
便捷性	"一次设置，终身无忧"
挫败感	"受够了毫无效果的工具？"
希望感	"没错，你也能实现月收入1万美元"

4.6 Objection Handling

4.6 异议处理

Objection	Response
Too expensive	Show ROI: "Pays for itself in 2 weeks"
Won't work for me	Social proof from similar customer
No time	"Setup takes 10 minutes"
What if it fails	"30-day money-back guarantee"
Need to think	Urgency/scarcity

Place in FAQ, testimonials, near CTA.

用户异议	回应方式
太贵了	展示投资回报率："2周内即可回本"
对我没用	展示同类客户的成功案例
没时间	"设置仅需10分钟"
万一失败了怎么办	"30天无理由退款保证"
我需要考虑一下	强调紧迫感/稀缺性

放置位置：FAQ、客户证言、CTA附近。

4.7 Proof Types

4.7 信任证明类型

Testimonials (with name/title), Case studies, Data/metrics, Social proof, Certifications

客户证言（带姓名/职位）、案例研究、数据/指标、社交证明、认证资质

5. Visual Art

5. 视觉艺术

Philosophy-first workflow. Two output modes.

以理念为核心的工作流程。两种输出模式。

5.1 Output Modes

5.1 输出模式

Mode	Output	When
Static	PDF/PNG	Posters, print, design assets
Interactive	HTML (p5.js)	Generative art, explorable variations

模式	输出格式	适用场景
静态	PDF/PNG	海报、印刷品、设计资产
交互式	HTML（p5.js）	生成式艺术、可探索的变体效果

5.2 Workflow

5.2 工作流程

Step 1: Philosophy Creation

步骤1：理念构建

Name the movement (1-2 words). Articulate philosophy (4-6 paragraphs) covering:

Static: space, form, color, scale, rhythm, hierarchy
Interactive: computation, emergence, noise, parametric variation

命名艺术风格（1-2个词）。阐述核心理念（4-6段），涵盖：

静态作品：空间、形态、色彩、比例、节奏、层级
交互式作品：计算逻辑、涌现性、噪声、参数化变化

Step 2: Conceptual Seed

步骤2：概念灵感

Identify subtle, niche reference — sophisticated, not literal. Jazz musician quoting another song.

确定一个微妙、小众的参考——需精致，而非直白。类似爵士音乐家引用其他作品的方式。

Step 3: Creation

步骤3：创作

Static Mode:

Single page, highly visual, design-forward
Repeating patterns, perfect shapes
Sparse typography from
```
canvas-fonts/
```
Nothing overlaps, proper margins
Output:
```
.pdf
```
or
```
.png
```
+ philosophy
```
.md
```

Interactive Mode:

Read
```
templates/viewer.html
```
first
Keep FIXED sections (header, sidebar, seed controls)
Replace VARIABLE sections (algorithm, parameters)
Seeded randomness:
```
randomSeed(seed); noiseSeed(seed);
```
Output: single self-contained HTML

静态模式：

单页，视觉冲击力强，设计导向
重复图案、完美几何形状
使用
```
canvas-fonts/
```
中的稀疏字体
元素无重叠，边距规范
输出：
```
.pdf
```
或
```
.png
```
+ 理念说明
```
.md
```

交互式模式：

先阅读
```
templates/viewer.html
```
保留固定区块（页眉、侧边栏、灵感控制区）
替换可变区块（算法、参数）
种子化随机数：
```
randomSeed(seed); noiseSeed(seed);
```
输出：单一自包含HTML文件

Step 4: Refinement

步骤4：优化

Refine, don't add. Make it crisp. Polish into masterpiece.

做减法，而非加法。让作品更简洁。打磨成精品。

Quality Gates

质量检查项

Design:

Mobile layout collapse (
```
w-full
```
,
```
px-4
```
) for high-variance designs
```
min-h-[100dvh]
```
not
```
h-screen
```
Empty, loading, error states provided
Cards omitted where spacing suffices

Motion:

Correct tool per selection matrix
No GSAP + Framer mixed in same component
All
```
useEffect
```
have cleanup returns
```
prefers-reduced-motion
```
respected
Perpetual animations in
```
React.memo
```
leaf components
Only GPU properties animated
Heavy libraries lazy-loaded

General:

Dependencies verified in
```
package.json
```
No placeholder URLs — grep the output for
```
unsplash
```
,
```
picsum
```
,
```
placeholder
```
,
```
placehold
```
,
```
via.placeholder
```
,
```
lorem.space
```
,
```
dummyimage
```
. If ANY found, STOP and replace with generated assets before delivering.
All media assets exist as local files in the project's assets directory
Asset prompts confirmed with user before generation

React and Next.js are trademarks of Meta Platforms, Inc. and Vercel, Inc., respectively. Vue.js is a trademark of Evan You. Tailwind CSS is a trademark of Tailwind Labs Inc. Svelte and SvelteKit are trademarks of their respective owners. GSAP/GreenSock is a trademark of GreenSock Inc. Three.js, Framer Motion, Lottie, Astro, and all other product names are trademarks of their respective owners.

设计：

高差异化设计的移动端布局适配（
```
w-full
```
,
```
px-4
```
）
使用
```
min-h-[100dvh]
```
而非
```
h-screen
```
提供空状态、加载状态、错误状态
无需卡片的场景使用间距替代

动效：

根据选择矩阵使用正确的工具
同一组件中未混合GSAP和Framer Motion
所有
```
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及其他产品名称均为其各自所有者的商标。",