frontend-dev by minimax-ai/skills
npx skills add https://github.com/minimax-ai/skills --skill 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 + 许可证)
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
所有框架使用相同的素材组织结构:
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
素材命名: {类型}-{描述}-{时间戳}.{扩展名}
| 框架 | 素材位置 | 组件位置 |
|---|---|---|
| 纯 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/ |
project/
├── index.html
├── assets/
│ ├── images/
│ ├── videos/
│ └── audio/
├── css/
│ └── styles.css
└── js/
└── main.js # 动画(GSAP/原生)
project/
├── public/assets/ # 静态素材
├── src/
│ ├── components/
│ │ ├── ui/ # Button, Card, Input
│ │ ├── sections/ # Hero, Features, CTA
│ │ └── motion/ # RevealSection, StaggerGrid
│ ├── lib/
│ ├── styles/
│ └── app/ # 页面
└── package.json
project/
├── public/assets/
├── src/ # 或 Nuxt 的根目录
│ ├── components/
│ │ ├── ui/
│ │ ├── sections/
│ │ └── motion/
│ ├── composables/ # 共享逻辑
│ ├── pages/
│ └── assets/ # 处理后的素材(可选)
└── package.json
project/
├── public/assets/
├── src/
│ ├── components/ # .astro, .tsx, .vue, .svelte
│ ├── layouts/
│ ├── pages/
│ └── styles/
└── package.json
组件命名: PascalCase (HeroSection.tsx, HeroSection.vue, HeroSection.astro)
本技能中的所有规则都是强制性的。违反任何规则都是阻塞性错误——在继续或交付之前必须修复。
使用 scripts/ 生成所有图像/视频/音频素材。绝不使用占位符 URL(unsplash, picsum, placeholder.com, via.placeholder, placehold.co 等)或外部 URL。
遵循文案框架(AIDA, PAS, FAB)来撰写所有文本内容。不要使用“Lorem ipsum”——撰写真实的文案。
搭建项目并根据设计和动效规则构建每个部分。集成生成的素材和文案。所有 <img>、<video>、<source> 和 CSS background-image 必须引用阶段 3 中的本地素材。
运行最终检查清单(参见质量门控部分)。
| 参数 | 默认值 | 范围 |
|---|---|---|
| DESIGN_VARIANCE | 8 | 1=对称,10=非对称 |
| MOTION_INTENSITY | 6 | 1=静态,10=电影级 |
| VISUAL_DENSITY | 4 | 1=宽松,10=紧凑 |
根据用户请求动态调整。
package.json。如果缺失,输出安装命令。"use client" 叶子组件。package.json 中的版本——绝不混合使用 v3/v4 语法。min-h-[100dvh] 而非 h-screen。使用 CSS Grid 而非 flex 百分比计算。max-w-[1400px] mx-auto 或 max-w-7xl。| 规则 | 指令 |
|---|---|
| 排版 | 标题: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。 |
backdrop-blur + border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]useMotionValue/useTransform——绝不使用 useState 进行连续动画layout 和 layoutId 属性staggerChildren 或 CSS animation-delay: calc(var(--index) * 100ms)| 类别 | 禁止项 |
|---|---|
| 视觉 | 霓虹发光、纯黑(#000)、过饱和的强调色、标题上的渐变文字、自定义光标 |
| 排版 | Inter 字体、过大的 H1、仪表板上的衬线字体 |
| 布局 | 3列等宽卡片行、带有尴尬间隙的浮动元素 |
| 组件 | 未经定制的默认 shadcn/ui |
| 类别 | 模式 |
|---|---|
| 导航 | 停靠栏放大、磁性按钮、粘性菜单、动态岛、径向菜单、快速拨号、巨型菜单 |
| 布局 | 便当网格、瀑布流、色度网格、分屏滚动、幕布揭示 |
| 卡片 | 视差倾斜、聚光灯边框、玻璃态拟物、全息箔、滑动堆叠、变形模态框 |
| 滚动 | 粘性堆叠、水平劫持、机车序列、缩放视差、进度路径、液体滑动 |
| 画廊 | 穹顶画廊、封面流、拖拽平移、手风琴滑块、悬停轨迹、故障效果 |
| 文本 | 动态跑马灯、文本遮罩揭示、乱码效果、环形路径、渐变描边、动态网格 |
| 微交互 | 粒子爆炸、下拉刷新、骨架屏微光、定向悬停、涟漪点击、SVG 绘制、网格渐变、镜头模糊 |
#f9fafb,卡片纯白色带 border-slate-200/50rounded-[2.5rem],扩散阴影tracking-tightstiffness: 100, damping: 20),无限循环,React.memo 隔离5 种卡片原型:
layoutId 自动排序当品牌样式激活时:
#141413,浅色:#faf9f5,中间色:#b0aea5,柔和色:#e8e6dc#d97757,蓝色 #6a9bcc,绿色 #788c5d| 需求 | 工具 |
|---|---|
| UI 进入/退出/布局 | Framer Motion — AnimatePresence, layoutId, springs |
| 滚动叙事(固定、擦除) | GSAP + ScrollTrigger — 帧级精确控制 |
| 循环图标 | Lottie — 懒加载(~50KB) |
| 3D/WebGL | Three.js / R3F — 隔离的 <Canvas>,独立的 "use client" 边界 |
| 悬停/聚焦状态 | 仅 CSS — 零 JS 开销 |
| 原生滚动驱动 | CSS — animation-timeline: scroll() |
冲突规则 [强制]:
| 等级 | 技术 |
|---|---|
| 1-2 细微 | 仅 CSS 过渡,150-300ms |
| 3-4 平滑 | CSS 关键帧 + Framer animate,错开 ≤3 项 |
| 5-6 流畅 | whileInView,磁性悬停,视差倾斜 |
| 7-8 电影级 | GSAP ScrollTrigger,固定部分,水平劫持 |
| 9-10 沉浸式 | 完整滚动序列,Three.js 粒子,WebGL 着色器 |
完整代码请参见 references/motion-recipes.md。摘要:
| 配方 | 工具 | 用途 |
|---|---|---|
| 滚动揭示 | Framer | 进入视口时的淡入+滑动 |
| 错开网格 | Framer | 顺序列表动画 |
| 固定时间线 | GSAP | 带固定的水平滚动 |
| 倾斜卡片 | Framer | 鼠标跟踪 3D 透视 |
| 磁性按钮 | Framer | 吸引光标的按钮 |
| 文本乱码 | 原生 | 矩阵式解码效果 |
| SVG 路径绘制 | CSS | 滚动关联的路径动画 |
| 水平滚动 | GSAP | 垂直到水平劫持 |
| 粒子背景 | R3F | 装饰性 WebGL 粒子 |
| 布局变形 | Framer | 卡片到模态框的扩展 |
仅 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-motionpointer: coarse 时禁用视差/3D清理: 每个带有 GSAP/观察器的 useEffect 必须 return () => ctx.revert()
| 感觉 | 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) |
prefers-reduced-motion 检查中outline 而非 box-shadow)aria-live="polite"npm install framer-motion # UI(保持在顶层)
npm install gsap # 滚动(懒加载)
npm install lottie-react # 图标(懒加载)
npm install three @react-three/fiber @react-three/drei # 3D(懒加载)
| 类型 | 脚本 | 模式 |
|---|---|---|
| TTS | scripts/minimax_tts.py | 同步 |
| 音乐 | scripts/minimax_music.py | 同步 |
| 视频 | scripts/minimax_video.py | 异步(创建 → 轮询 → 下载) |
| 图像 | scripts/minimax_image.py | 同步 |
环境变量:MINIMAX_API_KEY(必需)。
<project>/public/assets/{images,videos,audio}/ 作为 {类型}-{描述}-{时间戳}.{扩展名}——必须本地保存| 快捷方式 | 规格 |
|---|---|
hero | 16:9,电影级,文字安全区 |
thumb | 1:1,居中主体 |
icon | 1:1,扁平,干净背景 |
avatar | 1:1,肖像,准备圆形裁剪 |
banner | 21:9,OG/社交 |
bg-video | 768P,6s,[静态镜头] |
video-hd | 1080P,6s |
bgm | 30s,无人声,可循环 |
tts | MiniMax HD,MP3 |
references/minimax-cli-reference.md — CLI 标志references/asset-prompt-guide.md — 提示词规则references/minimax-voice-catalog.md — 语音 IDreferences/minimax-tts-guide.md — TTS 使用references/minimax-music-guide.md — 音乐生成(提示词、歌词、结构标签)references/minimax-video-guide.md — 摄像机命令references/minimax-image-guide.md — 比例、批量AIDA(落地页、邮件):
注意: 大胆的标题(承诺或痛点)
兴趣: 阐述问题(“是的,这就是我”)
渴望: 展示转变
行动: 清晰的行动号召
PAS(痛点驱动型产品):
问题: 清晰陈述
激化: 使其紧迫
解决方案: 你的产品
FAB(产品差异化):
功能: 它做什么
优势: 为什么重要
好处: 客户获得什么
| 公式 | 示例 |
|---|---|
| 承诺 | “30 天内将打开率翻倍” |
| 提问 | “还在每周浪费 10 小时吗?” |
| 如何 | “如何自动化你的流程” |
| 数字 | “扼杀转化的 7 个错误” |
| 否定 | “停止流失潜在客户” |
| 好奇 | “使预订量翻三倍的一个改变” |
| 转变 | “从 50 到 500 个潜在客户” |
要具体。以结果为导向,而非方法。
差: 提交、点击这里、了解更多
好: “开始我的免费试用”、“立即获取模板”、“预约我的策略通话”
公式: [行动动词] + [他们得到什么] + [紧迫性/便捷性]
位置:首屏、价值展示后、长页面的多个位置。
| 触发点 | 示例 |
|---|---|
| 错失恐惧症 | “仅剩 3 个名额” |
| 损失恐惧 | “没有这个,你每天损失 $X” |
| 地位 | “加入 10,000+ 顶级机构” |
| 便捷 | “设置一次,永久忘记。” |
| 挫败感 | “厌倦了毫无成果的工具?” |
| 希望 | “是的,你可以达到 $10K MRR” |
| 异议 | 回应 |
|---|---|
| 太贵 | 展示投资回报率:“2 周内回本” |
| 对我不适用 | 来自类似客户的社会证明 |
| 没时间 | “设置只需 10 分钟” |
| 如果失败怎么办 | “30 天退款保证” |
| 需要考虑 | 紧迫性/稀缺性 |
放置在常见问题解答、推荐语、行动号召附近。
推荐语(带姓名/职位)、案例研究、数据/指标、社会证明、认证
哲学优先的工作流程。两种输出模式。
| 模式 | 输出 | 何时使用 |
|---|---|---|
| 静态 | PDF/PNG | 海报、印刷品、设计素材 |
| 交互式 | HTML (p5.js) | 生成式艺术、可探索的变体 |
命名运动(1-2 个词)。阐述哲学(4-6 段),涵盖:
识别微妙、小众的参考——精致,而非字面。像爵士音乐家引用另一首歌。
静态模式:
canvas-fonts/ 的稀疏排版.pdf 或 .png + 哲学 .md交互式模式:
templates/viewer.htmlrandomSeed(seed); noiseSeed(seed);精炼,而非添加。使其清晰。打磨成杰作。
设计:
w-full, px-4)用于高差异设计min-h-[100dvh] 而非 h-screen动效:
useEffect 都有清理返回prefers-reduced-motionReact.memo 叶子组件中通用:
package.json 中验证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 以及所有其他产品名称均为其各自所有者的商标。
每周安装量
110
代码库
GitHub 星标数
3.5K
首次出现
6 天前
安全审计
安装于
codex108
cursor107
opencode107
cline106
gemini-cli106
kimi-cli106
Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.
/frontend-dev <request>
The user provides their request as natural language (e.g. "build a landing page for a music streaming app").
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)
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}
| 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/ |
project/
├── index.html
├── assets/
│ ├── images/
│ ├── videos/
│ └── audio/
├── css/
│ └── styles.css
└── js/
└── main.js # Animations (GSAP/vanilla)
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/ # or root for Nuxt
│ ├── components/
│ │ ├── ui/
│ │ ├── sections/
│ │ └── motion/
│ ├── composables/ # Shared logic
│ ├── pages/
│ └── assets/ # Processed assets (optional)
└── package.json
project/
├── public/assets/
├── src/
│ ├── components/ # .astro, .tsx, .vue, .svelte
│ ├── layouts/
│ ├── pages/
│ └── styles/
└── package.json
Component naming: PascalCase (HeroSection.tsx, HeroSection.vue, HeroSection.astro)
All rules in this skill are mandatory. Violating any rule is a blocking error — fix before proceeding or delivering.
Generate all image/video/audio assets using scripts/. NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.
Follow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use "Lorem ipsum" — write real copy.
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.
Run final checklist (see Quality Gates section).
| 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.
package.json before importing any library. Output install command if missing."use client" leaf components.package.json — NEVER mix v3/v4 syntax.min-h-[100dvh] not h-screen. Use CSS Grid not flex percentage math.max-w-[1400px] mx-auto or max-w-7xl.| 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 (). |
backdrop-blur + border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]useMotionValue/useTransform — never useState for continuous animationslayout and layoutId propsstaggerChildren or CSS | 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 |
| 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 |
#f9fafb, cards pure white with border-slate-200/50rounded-[2.5rem], diffusion shadowtracking-tight headersstiffness: 100, damping: 20), infinite loops, React.memo isolation5-Card Archetypes:
layoutIdWhen brand styling is active:
#141413, Light: #faf9f5, Mid: #b0aea5, Subtle: #e8e6dc#d97757, Blue #6a9bcc, Green #788c5d| 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 — |
Conflict Rules [MANDATORY]:
| 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 |
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 |
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() or clip-path instead.
Isolation:
React.memo leaf componentswill-change: transform ONLY during animationcontain: layout style paint on heavy containersMobile:
prefers-reduced-motionpointer: coarseCleanup: Every useEffect with GSAP/observers MUST return () => ctx.revert()
| 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) |
prefers-reduced-motion checkoutline not box-shadow)aria-live="polite" for dynamically revealed contentnpm 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)
| 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).
<project>/public/assets/{images,videos,audio}/ as {type}-{descriptor}-{timestamp}.{ext} — MUST save locally| 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] |
references/minimax-cli-reference.md — CLI flagsreferences/asset-prompt-guide.md — Prompt rulesreferences/minimax-voice-catalog.md — Voice IDsreferences/minimax-tts-guide.md — TTS usagereferences/minimax-music-guide.md — Music generation (prompts, lyrics, structure tags)references/minimax-video-guide.md — Camera commandsreferences/minimax-image-guide.md — Ratios, batchAIDA (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
| 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.
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.
| 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" |
| 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.
Testimonials (with name/title), Case studies, Data/metrics, Social proof, Certifications
Philosophy-first workflow. Two output modes.
| Mode | Output | When |
|---|---|---|
| Static | PDF/PNG | Posters, print, design assets |
| Interactive | HTML (p5.js) | Generative art, explorable variations |
Name the movement (1-2 words). Articulate philosophy (4-6 paragraphs) covering:
Identify subtle, niche reference — sophisticated, not literal. Jazz musician quoting another song.
Static Mode:
canvas-fonts/.pdf or .png + philosophy .mdInteractive Mode:
templates/viewer.html firstrandomSeed(seed); noiseSeed(seed);Refine, don't add. Make it crisp. Polish into masterpiece.
Design:
w-full, px-4) for high-variance designsmin-h-[100dvh] not h-screenMotion:
useEffect have cleanup returnsprefers-reduced-motion respectedReact.memo leaf componentsGeneral:
package.jsonunsplash, picsum, placeholder, placehold, via.placeholder, lorem.space, dummyimage. If ANY found, STOP and replace with generated assets before delivering.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.
Weekly Installs
110
Repository
GitHub Stars
3.5K
First Seen
6 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex108
cursor107
opencode107
cline106
gemini-cli106
kimi-cli106
AI Elements:基于shadcn/ui的AI原生应用组件库,快速构建对话界面
66,200 周安装
static/assets/ |
src/lib/components/ |
| Astro | public/assets/ | src/components/ |
scale-[0.98]| Forms | Label above input. Error below. gap-2 for input blocks. |
animation-delay: calc(var(--index) * 100ms)animation-timeline: scroll()| Framer |
| Card-to-modal expansion |
| Smooth accel | cubic-bezier(0.7, 0, 0.84, 0) |
| Elastic | cubic-bezier(0.34, 1.56, 0.64, 1) |
video-hd | 1080P, 6s |
bgm | 30s, no vocals, loopable |
tts | MiniMax HD, MP3 |