agentic-website-design

Agentic 网站设计

构建达到生产质量的网站，让 AI 编码 Agent 完全掌控每一行代码。使用静态站点生成器（首选 Astro）——绝不要使用 Framer 或 Webflow 这类限制大模型控制能力的无代码工具。

核心原则

1. 完全掌控代码 — 大模型生成所有 HTML、CSS、JS 和内容。不使用拖放操作、可视化编辑器或黑盒。
2. 浏览器参与反馈 — Agent 必须查看自己构建的内容。每次更改后都使用浏览器工具对线上网站截图并检查。
3. 技能增强型提示 — 将专业工作委派给专用技能（frontend-design、copywriting 等），而不是试图在一个提示词中完成所有工作。
4. 持续迭代 — 绝不接受第一个输出。设定高标准并反复改进，直到结果出色。

---

技术栈选择

默认选择：Astro

Astro 是首选的静态站点生成器，因为它默认不输出 JS、支持任何 UI 框架，并让大模型完全掌控模板。

npm create astro@latest my-site
cd my-site
npm run dev

替代方案

生成器	使用场景
Astro	默认选择 — DX 最佳，采用岛屿架构
Next.js	需要 SSR、API 路由或 React 生态系统
Nuxt	基于 Vue 的项目
SvelteKit	基于 Svelte 的项目
11ty	尽可能简单的静态网站

选定一个并坚持使用。大模型必须完全掌控模板、样式和内容。

---

浏览器反馈循环

Agent 必须直观验证每次更改。没有浏览器访问权限，Agent 就是在盲目编码。

设置

Cursor：安装 Browser 插件（browser-tools MCP），让 Agent 能够访问截图、控制台日志和网络请求。

Claude Code：使用 Chrome DevTools 集成来截取屏幕截图并检查 DOM。

工作流

每次有意义的更改后：

1. 保存文件并等待热重载
2. 截取页面截图 — 捕获整个视口
3. 检查结果 — 检查布局、间距、颜色、排版
4. 找出问题 — 对齐不当、溢出、响应式布局异常、状态缺失
5. 修复并重新截图 — 重复操作，直到页面区域看起来正确

Loop:
  Make change → Save → Screenshot → Evaluate → Fix → Screenshot
  Exit when: section meets quality bar

绝不要跳过截图步骤。 视觉反馈循环正是优秀的 Agentic 设计与故障布局之间的区别。

有关浏览器工具设置的详情，请参阅 references/browser-setup.md。

---

技能增强型提示

将专业任务委派给专用技能。与通用提示相比，这样做能显著提升效果。

模式

处理网站的特定方面时，明确调用相关技能：

"Use the frontend-design skill to redesign the hero section with modern layout patterns"
"Use the copywriting skill to rewrite the homepage headline and subheading"
"Use the frontend-design skill to add micro-interactions to the CTA buttons"
"Use the copywriting skill to improve the feature descriptions — make them benefit-driven"

推荐技能

技能	用途
frontend-design	布局、视觉层级、组件模式、响应式设计
copywriting	标题、CTA、功能描述、品牌语调
seo	Meta 标签、结构化数据、性能、Core Web Vitals
accessibility	ARIA 标签、键盘导航、色彩对比度

组合技能

将多个技能串联起来，完成完整页面区域的工作：

1. "Use the copywriting skill to write compelling copy for the pricing section"
2. "Use the frontend-design skill to design the pricing cards layout with the copy above"
3. "Now screenshot and let's iterate on the visual design"

---

迭代改进工作流

这是最重要的部分。平庸输出与出色输出之间的差别在于迭代次数。

改进循环

Task Progress:
- [ ] Step 1: Generate initial version
- [ ] Step 2: Screenshot and evaluate
- [ ] Step 3: Identify the weakest element
- [ ] Step 4: Improve that element specifically
- [ ] Step 5: Screenshot and compare
- [ ] Step 6: Repeat steps 3-5 at least 3 more times
- [ ] Step 7: Final polish pass

设定高标准

每次更改后，询问：

• “现在改进你刚才完成的内容”
• “让动画更流畅、更有设计感”
• “这已经不错了，但还可以做得更好——顶尖设计机构会如何改进？”
• “加入细腻的微交互，让它显得更高级”
• “间距感觉不太对——收紧一些，并让布局更舒展”

绝不要满足于第一个版本。 每个页面区域都至少迭代改进 3 轮。

分章节处理方法

一次处理一个章节，充分打磨后再继续：

1. 主视觉区 — 最重要的部分。投入最多时间。打磨好标题、视觉效果和行动号召。
2. 社会认同 — 标志、评价、数据指标。让内容更可信。
3. 功能 — 表达清晰，以用户收益为导向，并配上辅助视觉元素或图标。
4. 定价 — 对比清晰，明确标出推荐方案。
5. 页脚 — 专业、完整、组织有序。

对于每个章节：生成 → 截图 → 评估 → 改进 → 截图 → 评估 → 改进 → 继续处理下一章节。

---

动画与微交互

动画能让普通页面脱颖而出，成为精致的产品。始终添加动画。

必备动画

元素	动画
主视觉区标题	加载时淡入并略微向上滑动
CTA 按钮	悬停时缩放并过渡颜色
功能卡片	滚动触发淡入，并依次错开显示
导航	平滑滚动，带背景模糊的粘性页眉
页面转场	路由之间淡入淡出
图片	延迟加载并淡入

实现

使用 CSS 动画和 IntersectionObserver 实现滚动触发效果。除非确有需要，否则避免使用体积较大的 JS 动画库。

/* Scroll-triggered fade-in */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

有关 Astro 专用动画模式，请参阅 references/animations.md。

提高质量要求

添加动画后：

• “缓动感觉是线性的——使用自定义 cubic-bezier，让动效更自然”
• “让功能卡片依次错开出现，不要同时动画”
• “为主视觉区背景添加细微的视差效果”
• “悬停状态需要更有个性——试试轻微旋转或阴影抬升效果”

---

响应式设计

每个页面都必须在手机、平板和桌面设备上正常显示。在所有断点下截图。

断点检查清单

- [ ] Mobile (375px) — single column, touch-friendly targets
- [ ] Tablet (768px) — adapted grid, readable line lengths
- [ ] Desktop (1280px) — full layout, max-width containers
- [ ] Wide (1536px+) — content doesn't stretch awkwardly

完成每个章节后，至少在手机和桌面端截图。继续之前先修复布局问题。

---

项目结构（Astro）

my-site/
├── src/
│   ├── layouts/
│   │   └── Layout.astro          # Base HTML shell
│   ├── components/
│   │   ├── Hero.astro
│   │   ├── Features.astro
│   │   ├── Pricing.astro
│   │   └── Footer.astro
│   ├── pages/
│   │   └── index.astro
│   └── styles/
│       └── global.css
├── public/
│   └── fonts/
├── astro.config.mjs
└── package.json

采用按章节划分组件的架构。每个章节都使用独立的 .astro 文件，便于迭代。

---

质量检查清单

认定页面完成之前：

Visual Quality:
- [ ] Every section screenshotted and reviewed at mobile + desktop
- [ ] Typography hierarchy is clear (max 2-3 font sizes per section)
- [ ] Color palette is consistent (3-5 colors max)
- [ ] Whitespace is generous and intentional
- [ ] Images are optimized and properly sized

Animations:
- [ ] Hero has entry animation
- [ ] Scroll-triggered animations on content sections
- [ ] Hover states on all interactive elements
- [ ] No janky or stuttering animations
- [ ] Animations respect prefers-reduced-motion

Content:
- [ ] Headlines are benefit-driven, not feature-driven
- [ ] CTAs are clear and compelling
- [ ] No lorem ipsum or placeholder content
- [ ] Copy reviewed with copywriting skill

Technical:
- [ ] Lighthouse score 90+ on all categories
- [ ] Responsive at all breakpoints
- [ ] Semantic HTML throughout
- [ ] Accessible (keyboard nav, ARIA labels, contrast)
- [ ] Fast load time (minimal JS, optimized assets)

---

其他资源

• 浏览器设置 — Cursor Browser 插件和 Claude Code Chrome 集成
• 动画 — Astro 动画模式、滚动效果和微交互
• 提示词模式 — 各设计阶段的示例提示词