Agentic 驱动的高质量网页生成
用户对生成网页的满意度达到 80%，我沉淀出一套可复用的 Agentic 高质量整站生成方法。
结果展示
整站生成的实现思路
Generate Website Skills
整站生成以 Website Design 技能为主技能，主技能按需调用下列子技能，子技能内维护参数与生成细则，主技能负责触发时机与和整站叙事衔接：
| 子技能 | 典型用途 |
|---|---|
| launch-video | 启动页沉浸式视频及与首页的衔接 |
| hero-video | 无独立启动页时的 Hero 背景视频 |
| image-enhancement | 用户上传图的商业级增强后再入站 |
| gen-logo | 需独立品牌标识资产时的 Logo 生成与规范化输出 |
Prompt Design
一、角色与输出标准
指令将模型置于 顶级品牌网页设计 语境：默认追求商业与奖项级站点常见的排版精度、空间层次、动效节制与数字旗舰质感；可点名对标方向（如丝滑长滚动排版、空间沉浸、动态字型气质、极简静奢等），用于拉高审美下限，而非泛泛「好看」。
二、设计调研（Design Research）
在动笔面前，须完成可核验的调研输出：列举 3 个当前视觉/排版水准高的真实网站（可跨界或同业），分别拆解其视觉语言、与当前项目的可迁移点，并明确写出将借鉴哪一类顶级工作室核心手法（借鉴方法，非复刻页面）。本环节以 Agent 已开通联网搜索为前提，用于查证站点、风格与公开信息。
三、网站视觉风格
结合 行业与品牌，从下列方向中择定主风格（可复合但需有主次）：瑞士国际主义、极简、便当网格（Bento）、新粗野主义、深色模式、扁平化、瑞士风、像素艺术、多巴胺、文字主导、非对称布局、日式极简等。若用户提供了 UI 参考图，整站气质以参考为优先。
四、设计系统
- 品牌配色：遵循 60-30-10，精选 不超过 3 种符合调性的纯色；大胆且和谐，强化品牌识别。色彩以 HSL + CSS 变量 落表，便于主题与维护（产线禁滥用渐变）。
- 品牌字体：标题体突出品牌性格，正文保证可读；从既定推荐字体池中选型（涵盖现代无衬线、人文衬线、展示字、技术感、中文正文等类别）。
- 品牌标识：需要独立 Logo 资产时，由主技能按需拉起 gen-logo 子技能，与导航、Favicon、首启动效等引用一致。
- 图标：在 Lucide、Iconoir、Remix Icon、Pixel Art Icons 等指定开源库中选用，与站气质一致。
- 工程底座（与视觉并行约束）：Tailwind v3 + shadcn/ui、framer-motion；移动优先、渐进增强、WCAG AA，保证可交付代码质量。
五、严格禁区（Designs to Avoid）
在已定视觉风格前提下，单独列出该风格下绝不可妥协的模式（如廉价卡片堆砌、Bootstrap 感、俗套渐变与配色、用 404 充内容、滥用阴影与描边、生产环境占位文案等），与风格定义成对出现，避免模型「为了填满页面」牺牲气质。
六、整体页面与区块设计
- 页面整体：说明整页的视觉起伏与阅读节奏——如何用排版、留白与空间纵深引导视线与情绪，而非平铺模块列表。
- 区块细化（重点）：按信息架构拆出合适数量的区块；逐块写清布局结构、层级、材质与动效气质，并覆盖 入场 / 滚动 / 指针悬停 等交互预期；单块设计说明保持高信息密度（产线对齐长描述档位），追求高级、克制、不浮夸。
- 导航：组件化导航，小屏可折，文案清晰，焦点与无障碍可管。
- 视觉素材清单：凡页面依赖的成片素材，须输出清单：编号、类型（图片 / 视频）、是否透明背景、内容描述，供生成与工程对齐。
七、网站首次启动体验（三选一）
- 选项 1 · 经典加载：克制、优雅的 Logo 精细化加载动画（可与 gen-logo 产出配合）；首屏背景为与主题匹配的图片，或 Canvas 实时生成艺术。
- 选项 2 · 无独立启动页：主技能拉起 hero-video，跳过启动页壳，直接进入首页。
- 选项 3 · 启动页：主技能拉起 launch-video，按启动页规则产出沉浸式开场并与首页衔接。
八、上传图增强
用户上传的素材默认走 image-enhancement：将普通产品/品牌照提升为商业级广告视觉；流程为 增强 → 再入站，禁止未经处理直接使用原图作为主视觉。品类模板、光型与背景变体等由该子技能维护。
九、整页生成图（工程侧）
站内需生成的图片，按用途分流：须叠在版式上的（Logo、透明底产品等）与全幅画面（Hero、通栏等）走不同生成通道，与工具参数一致，保证边缘与画质。