vibecoding-animated-websites

Vibe 编程动画网站

何时使用此技能

• 用户要求“vibe 编程”或构建“动画网站”时。
• 用户想要高端、奢华或纯粹以美学为导向的 Web 体验时。
• 用户在 Web 设计语境中提到“Antigravity”、“Google Whisk”或“Google Flow”时。

工作流

• 步骤 1：研究与情绪板
  • 如果用户未提供，请询问或明确业务、审美风格和具体颜色。
  • 获取参考图片（3–5 个高端网站的截图）。
• 步骤 2：项目设置与自定义规则
  • 使用语义化 HTML5、8px 网格、prefers-reduced-motion 和 CSS 变量颜色初始化项目。
• 步骤 3：初始构建
  • 根据用户提供的具体信息执行初始构建提示词。
• 步骤 4：Hero 素材创建
  • 生成“起始状态”图片。
  • 生成“结束状态”图片（相同主体，呈现混乱／动态效果）。
• 步骤 5：动画生成
  • 创建状态之间的过渡动画。
• 步骤 6：素材转换
  • 将视频转换为图像序列。
• 步骤 7：实现
  • 使用图像序列实现滚动控制动画。
• 步骤 8：优化
  • 添加深色／浅色模式切换。
  • 优化功能、客户评价和排版。

说明

1. 研究与输入

重要：如果用户尚未提供以下信息，必须先询问，再继续：

1. 业务名称／类型
2. 期望的审美风格（例如：奢华、极简、赛博朋克）
3. 配色方案

操作：研究参考图片，或搜索“奢华网站设计趋势”，以确定“氛围”。

2. 自定义规则（应用于所有提示词）

将以下规则应用于所有生成步骤：

1. 语义化 HTML5：使用 <header>、<main>、<section>、<article>、<footer>。
2. 8px 网格：所有外边距／内边距都必须是 8px 的倍数（例如：16px、32px、64px）。
3. 无障碍性：
   • 必须遵循 @media (prefers-reduced-motion: reduce)。
   • 文本应使用高对比度。
4. 主题：所有颜色均使用 CSS 变量（--color-bg、--color-text、--color-accent）。

3. 提示词与模板

初始构建提示词

首次生成代码时使用此模板：

Create a landing page for [Business Name]. [Aesthetic] aesthetic.
Colors: [Specific Colors].
Rules: Semantic HTML, 8px grid, CSS vars.
Sections:
- Hero (Headline + CTA)
- Features (Craftsmanship/Details)
- Testimonials
- Final CTA
Typography: [Elegant/Bold/Modern]

Hero 图片生成（Google Whisk / 图像生成工具）

状态 1（静态）：

[Product/Object] wrapped/still, [Background Color] background, studio lighting, high definition, [Aesthetic] style.

状态 2（动态）：

[Product/Object] exploding/unwrapping/in-motion, particles flying, [Background Color] background, dramatic, chaotic, beautiful.

动画提示词（Google Flow / 视频生成工具）

Smooth, cinematic transition showing [Product] changing from [State 1] to [State 2].

4. 实现细节

• 图像序列：不要使用大型视频文件实现滚动效果。应将 JPEG 序列加载到 <canvas> 中，或根据滚动位置切换 <img> 的 src。
• 深色／浅色模式：
  • 添加切换按钮。
  • 使用 JS 在 <body> 上切换 dark-mode 类。
  • 根据该类更新 CSS 变量。

5. 最终优化

• 如果动画显得过于急促，请放慢速度。
• 确保不同层级的排版清晰区分（H1、H2 与正文）。
• 在客户评价部分添加“社会认同”元素。