核心任务

任务背景： 品牌故事往往以文字文档或 PPT 形式存在，缺乏沉浸式的呈现方式。一个优秀的品牌页应该像一本可以滚动翻阅的视觉杂志，通过精心设计的排版、动效和节奏，让访客在浏览过程中自然地理解品牌理念、感受品牌调性。

具体目标：

将品牌故事拆解为 4-8 个叙事节点，每个节点对应一个视觉章节

研究对标品牌网站，提取视觉灵感和设计参考

设计符合品牌调性的高级视觉风格系统（配色、字体、排版、动效）

生成滚动式互动网页，包含时间线、里程碑、产品演进等模块

确保页面在视觉上具有"高级感、优雅、简约"的品质，避免廉价或过度装饰

关键约束：

视觉风格必须与品牌调性一致（例如：科技品牌→冷静克制，美妆品牌→温暖柔和）

动效要克制有度，服务于叙事而非炫技

页面加载速度和交互流畅度需保证良好体验

在执行任务前，先要求用户提供品牌故事、背景、价值观等相关的资料。

Step 1: 理解品牌故事与提取叙事结构

目标: 深入理解品牌故事的核心内容,识别关键叙事节点和情感曲线。

行动:

仔细阅读用户提供的品牌故事文案「{品牌故事文案}」,识别以下要素:

-品牌起源/创立背景

-核心理念/价值观

-关键里程碑事件(产品发布、获奖、用户突破等)

-创始人故事或团队故事(如有)

-品牌愿景/未来方向

-将故事拆解为 4-8 个叙事节点,每个节点包含:

-节点标题(简短有力,5-10 字)

-核心信息(1-2 句话概括)

-情感基调(例如:温暖、坚定、突破、展望)

构建叙事流程,确定节点之间的逻辑关系和情感递进

质量标准:

-叙事节点数量适中(过少显得单薄,过多导致冗长)

-每个节点有明确的叙事目的,避免信息重复

-整体叙事有起承转合,有情感高潮点

Step 2: 研究对标品牌与视觉灵感收集

目标: 根据品牌调性，搜索并分析同类型或相似气质的优秀品牌网站，提取视觉灵感和设计参考。

行动:

1、确定对标搜索方向：

根据 Step 1 提取的品牌调性关键词（如「{品牌调性关键词}」），构建搜索策略

确定 2-3 个搜索维度：

同行业标杆（如：同为国货美妆的优秀品牌）

同调性跨界（如：同样强调"东方美学"的其他品类品牌，茶饮、家居等）

设计获奖案例（如：Awwwards、FWA 上相似风格的获奖网站）

2、搜索并筛选对标品牌：

使用搜索工具，搜索关键词如：

"{行业} + 品牌官网 + 设计"

"{调性关键词} + brand website + award"

"best {行业} website design 2024"

筛选出 3-5 个视觉风格值得参考的品牌网站

优先选择：高端定位、设计精良、有滚动叙事特点的网站

3、深度分析对标网站：

对每个对标网站进行视觉拆解，记录以下要素：

配色方案：主色调、背景色、强调色的搭配方式

字体运用：标题与正文的字体选择、大小层级

排版特点：留白比例、网格系统、对齐方式

动效风格：滚动触发方式、动画时长、视差效果

叙事结构：章节划分、内容节奏、视觉焦点

截取关键页面或模块作为视觉参考

4、提炼设计启发：

总结对标网站的共性特点（如："这类品牌普遍使用大面积留白+衬线标题+渐显动效"）

识别可借鉴的独特设计手法（如："A品牌的时间线用横向滚动，很有新意"）

标注需要避免的设计陷阱（如："B品牌动效过多，显得花哨"）

形成 3-5 条明确的设计启发，作为后续设计的指导原则

质量标准:

对标品牌数量适中（3-5 个），覆盖同行业和跨界参考

分析维度全面，涵盖配色、字体、排版、动效、结构

设计启发具体可执行，而非泛泛的"要高级"

明确区分"可借鉴"和"需避免"的设计元素

完成研究后，和用户确认交付是否满意。如不满意，根据用户的反馈重新调整，直到用户满意为止。

Step 3: 定义品牌视觉风格系统

目标: 基于对标研究结果，结合品牌自身调性，设计一套高级、优雅、简约的视觉风格系统。

行动:

综合 Step 1 的品牌调性分析和 Step 2 的对标研究结果，确定视觉调性关键词

设计配色方案：

主色调：选择 1-2 个能代表品牌气质的主色（提供色值）

辅助色：2-3 个用于层次区分和视觉点缀的辅助色

背景色：优先使用柔和的米白、浅灰或深色背景，避免纯白（#FFFFFF）

强调色：用于 CTA 按钮或关键信息高亮的高对比度颜色

参考对标品牌的配色规律，确保配色方案符合行业审美标准

选择字体组合：

标题字体：选择具有设计感和品牌气质的字体（例如：衬线体显优雅，无衬线体显现代）

正文字体：高可读性的字体，与标题形成层次对比

避免使用过于常见的系统字体（如 Arial、宋体）

定义排版原则：

留白策略：大量留白营造高级感，避免信息拥挤

网格系统：使用规整的网格布局，保持视觉秩序

对齐方式：优先使用左对齐或居中对齐，避免两端对齐

确定动效风格：

滚动视差（Parallax）：不同层级元素以不同速度移动，营造空间感

渐显动画（Fade-in）：内容随滚动逐渐显现，节奏优雅

微动效：hover 状态、按钮交互等细节动效，提升精致感

动效时长：控制在 0.3-0.8 秒，避免过快或过慢

借鉴对标品牌中效果优秀的动效手法，避免已标注的设计陷阱

质量标准:

配色方案符合品牌调性，色彩搭配和谐不刺眼

字体选择具有设计感，避免廉价或过时的字体

排版呼吸感强，留白充足，信息层级清晰

动效克制有度，服务于叙事而非炫技

风格系统与对标研究中的优秀案例保持同等品质水准

完成定义之后，和用户确认交付是否满意。如不满意，根据用户的反馈重新调整，直到用户满意为止。

Step 4: 设计页面结构与交互流程

目标: 规划页面的整体结构和滚动交互流程，确保叙事节奏流畅。

行动:

设计页面整体结构，包含以下模块：

开场模块（Hero Section）：

品牌名称/Logo

一句话品牌 Slogan 或核心理念

引导滚动的视觉提示（例如：向下箭头动画）

可选：全屏背景视频或大图

叙事章节模块（根据 Step 1 的节点设计）：

每个节点对应一个独立的视觉章节

章节之间通过滚动过渡，可使用分隔线、留白或过渡动画

每个章节包含：标题、正文、配图/插画、时间标记（如适用）

时间线模块（可选，适合有明确时间节点的品牌）：

垂直或横向时间轴

关键年份/日期标注

每个时间点的事件描述和配图

产品/里程碑展示模块：

网格或卡片式布局

产品图片+简短描述

hover 效果：放大、显示更多信息等

创始人/团队故事模块（如有）：

人物照片+故事文案

可使用左右分栏或全屏沉浸式布局

结尾模块（Closing Section）：

品牌愿景或展望未来的文案

CTA 按钮（例如："了解更多"、"探索产品"、"联系我们"）

社交媒体链接或联系方式

规划滚动交互流程：

确定每个模块的滚动触发点（例如：滚动到视口 50% 时触发动画）

设计模块之间的过渡效果（淡入淡出、视差滚动、元素位移等）

确保滚动节奏自然，避免过于频繁的动效导致视觉疲劳

参考对标品牌中效果优秀的交互设计

设计响应式布局策略（确保在桌面端和移动端都有良好体验）

质量标准:

页面结构逻辑清晰，叙事流程自然流畅

每个模块有明确的视觉焦点，避免信息混乱

滚动交互节奏适中，不会让用户感到突兀或疲劳

响应式设计考虑周全，移动端体验不打折扣

Step 5: 撰写网页生成指令（Instruction）

目标: 将视觉风格系统和页面结构转化为清晰、详细的网页生成指令，供 generateWebpage 工具执行。

行动:

撰写结构化的 instruction，包含以下部分：

1. 整体风格描述：

用自然语言详细描述视觉风格（基于 Step 3 的风格系统）

示例："采用东方美学的克制优雅风格。背景使用柔和的米白色（#F9F7F2），主色调为温润的茶色（#8B7355）和淡雅的粉色（#E8D5C4）。标题使用衬线字体，正文使用无衬线字体，大量留白营造高级感。动效以渐显和视差滚动为主，节奏舒缓优雅。"

2. 页面结构说明：

按模块顺序描述页面结构

示例："页面从全屏 Hero Section 开始，展示品牌名称和 Slogan，背景为品牌主视觉图片，带有向下滚动提示。接下来是 4 个叙事章节，每个章节包含标题、正文和配图，采用左右交替的分栏布局。然后是垂直时间线模块，展示品牌发展历程。最后是结尾模块，包含品牌愿景和 CTA 按钮。"

3. 交互细节说明：

描述关键的交互效果和动画

示例："滚动时，章节内容以渐显动画进入视口。背景图片以较慢速度滚动，形成视差效果。时间线节点在滚动到对应位置时高亮显示。产品卡片 hover 时轻微放大并显示阴影。"

4. 内容占位符标记：

明确标注哪些内容需要从用户提供的素材中提取

示例："品牌名称使用「{品牌名称}」，Slogan 使用「{品牌 Slogan}」。叙事章节内容从「{品牌故事文案}」中提取。时间线事件从「{里程碑列表}」中提取。产品图片使用「{产品图片素材}」。"

5. 技术实现提示（可选）：

如有特殊技术需求，可简要说明

示例："使用 Intersection Observer API 实现滚动触发动画。使用 CSS Grid 实现响应式布局。"

质量标准:

Instruction 描述清晰详细，AI 能够准确理解设计意图

视觉风格描述具体（颜色有色值，字体有类型，动效有时长）

内容占位符标记明确，AI 知道从哪里获取数据

整体 instruction 长度适中（过短信息不足，过长可能导致理解偏差）

输出互动式品牌页（HTML 网页）：

包含完整的品牌故事叙事

具有滚动交互和动效

响应式设计，适配桌面端和移动端

视觉风格符合"高级、优雅、简约"标准

内容结构:

开场模块（Hero Section）

4-8 个叙事章节

时间线/里程碑模块（如适用）

产品展示模块（如适用）

创始人/团队故事模块（如适用）

结尾模块（Closing Section）

质量标准:

视觉品质：配色和谐高级，字体选择得当，排版清晰优雅，留白充足

交互体验：滚动流畅，动效自然克制，响应及时，移动端体验良好

内容完整性：品牌故事关键信息完整，叙事逻辑清晰，图文匹配准确

审美标准：整体呈现出高级感、优雅感和简约感，避免廉价或过度装饰

行业对标：视觉品质达到对标品牌的同等水准

风格与呈现

核心审美原则:

高级感：通过克制的配色、精致的字体、充足的留白和细腻的动效营造

优雅感：节奏舒缓，过渡自然，避免突兀或生硬的视觉元素

简约感：去除不必要的装饰，每个元素都有明确的功能和意义

视觉参考方向:

高端品牌官网（如 Apple、Aesop、Muji）

设计类杂志网站（如 It's Nice That、Awwwards 获奖作品）

艺术展览类网站（注重留白和视觉节奏）

Step 2 中研究的对标品牌网站

避免的风格:

过度装饰、元素拥挤的"淘宝风"

过于花哨、动效过多的"炫技风"

配色刺眼、排版混乱的"廉价风"

过于保守、缺乏设计感的"模板风"