agentic-website-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Agentic Website Design

Agent驱动的网站设计

Build production-quality websites where the AI coding agent has full control over every line of code. Use static site generators (Astro preferred) — never no-code tools like Framer or Webflow that limit LLM control.

使用AI编码Agent构建生产级网站，让Agent完全控制每一行代码。使用静态站点生成器（优先选择Astro）——绝不使用Framer或Webflow这类限制LLM控制权的无代码工具。

Core Principles

核心原则

Full code control — The LLM generates all HTML, CSS, JS, and content. No drag-and-drop, no visual editors, no black boxes.
Browser-in-the-loop — The agent MUST see what it builds. Use browser tools to screenshot and inspect the live site after every change.
Skill-enhanced prompting — Delegate specialized work to dedicated skills (frontend-design, copywriting, etc.) instead of doing everything in one prompt.
Relentless iteration — Never accept the first output. Set a high bar and improve repeatedly until the result is exceptional.

完全代码控制权 —— LLM生成所有HTML、CSS、JS及内容。无拖拽操作、无可视化编辑器、无黑箱。
浏览器实时反馈循环 —— Agent必须能看到自己构建的成果。每次修改后，使用浏览器工具截图并检查实时站点。
技能增强型提示 —— 将专业工作委托给专门的技能（前端设计、文案撰写等），而非在单个提示中完成所有任务。
持续迭代优化 —— 绝不接受初次输出。设定高标准，反复改进直至结果达到卓越水平。

Stack Selection

技术栈选择

Default: Astro

默认选择：Astro

Astro is the preferred static site generator because it ships zero JS by default, supports any UI framework, and gives the LLM full template control.

bash

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

Astro是首选的静态站点生成器，因为它默认不加载JS，支持任意UI框架，并让LLM完全控制模板。

bash

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

Alternatives

替代方案

Generator	When to Use
Astro	Default choice — best DX, island architecture
Next.js	Need SSR, API routes, or React ecosystem
Nuxt	Vue-based projects
SvelteKit	Svelte-based projects
11ty	Simplest possible static sites

Pick one and stick with it. The LLM must have full control over templates, styles, and content.

生成器	使用场景
Astro	默认选择 —— 最佳开发体验，孤岛架构
Next.js	需要SSR、API路由或React生态的场景
Nuxt	Vue相关项目
SvelteKit	Svelte相关项目
11ty	极简静态站点

选定一个技术栈后坚持使用。LLM必须完全控制模板、样式和内容。

Browser Feedback Loop

浏览器反馈循环

The agent MUST visually verify every change. Without browser access, the agent is coding blind.

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

Setup

配置

Cursor: Install the Browser plugin (browser-tools MCP) to give the agent access to screenshots, console logs, and network requests.

Claude Code: Use the Chrome DevTools integration to capture screenshots and inspect the DOM.

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

Claude Code：使用Chrome DevTools集成来捕获截图并检查DOM。

Workflow

工作流

After every meaningful change:

Save files and wait for hot reload
Screenshot the page — capture the full viewport
Inspect the result — check layout, spacing, colors, typography
Identify issues — misalignment, overflow, broken responsive, missing states
Fix and re-screenshot — repeat until the section looks correct

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

Never skip the screenshot step. The visual feedback loop is what separates good agentic design from broken layouts.

For browser tool setup details, see references/browser-setup.md.

每次有意义的修改后：

保存文件并等待热重载
截图页面 —— 捕获完整视口
检查结果 —— 检查布局、间距、颜色、排版
识别问题 —— 对齐错误、内容溢出、响应式失效、状态缺失
修复并重新截图 —— 重复操作直至该部分符合要求

循环流程：
  做出修改 → 保存 → 截图 → 评估 → 修复 → 截图
  退出条件：该部分达到质量标准

绝不要跳过截图步骤。视觉反馈循环是区分优质Agent驱动设计与破碎布局的关键。

如需浏览器工具配置详情，请查看references/browser-setup.md。

Skill-Enhanced Prompting

技能增强型提示

Delegate specialized tasks to dedicated skills. This produces dramatically better results than generic prompting.

将特定任务委托给专门的技能。这比通用提示能产生显著更优的结果。

Pattern

模式

When working on a specific aspect of the site, invoke the relevant skill explicitly:

"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技能，采用现代布局模式重新设计Hero区域"
"使用copywriting技能重写首页标题和副标题"
"使用frontend-design技能为CTA按钮添加微交互"
"使用copywriting技能优化功能描述 —— 突出用户收益"

Recommended Skills

Skill	Use For
frontend-design	Layout, visual hierarchy, component patterns, responsive design
copywriting	Headlines, CTAs, feature descriptions, brand voice
seo	Meta tags, structured data, performance, Core Web Vitals
accessibility	ARIA labels, keyboard navigation, color contrast

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

Composing Skills

技能组合使用

Chain skills together for full-section work:

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"

将多个技能串联使用以完成完整区域的开发：

1. "使用copywriting技能为定价区域撰写有吸引力的文案"
2. "使用frontend-design技能结合上述文案设计定价卡片布局"
3. "现在截图，我们来迭代优化视觉设计"

Iterative Improvement Workflow

迭代改进工作流

This is the most important section. The difference between mediocre and exceptional output is iteration count.

这是最重要的部分。平庸输出与卓越输出的区别在于迭代次数。

The Improvement Loop

改进循环

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

任务进度：
- [ ] 步骤1：生成初始版本
- [ ] 步骤2：截图并评估
- [ ] 步骤3：识别最薄弱的元素
- [ ] 步骤4：针对性改进该元素
- [ ] 步骤5：截图并对比
- [ ] 步骤6：重复步骤3-5至少3次
- [ ] 步骤7：最终打磨阶段

Setting a High Bar

设定高标准

After every change, ask:

"Now improve what you just did"
"Make the animations smoother and more intentional"
"This is good, but push it further — what would a top design agency do differently?"
"Add subtle micro-interactions that make this feel premium"
"The spacing feels off — tighten it up and make it breathe properly"

Never settle on the first version. Always push for at least 3 rounds of improvement on each section.

每次修改后，提出以下要求：

"现在优化你刚完成的内容"
"让动画更流畅、更具目的性"
"目前不错，但要更进一步 —— 顶级设计机构会怎么做？"
"添加细微的微交互，让产品更显高端"
"间距看起来不太对 —— 调整间距，让布局更透气"

绝不要满足于第一个版本。每个部分至少要进行3轮改进。

Section-by-Section Approach

分区域处理方法

Work on one section at a time, fully polishing it before moving on:

Hero — Most important. Spend the most time here. Nail the headline, visual, and CTA.
Social proof — Logos, testimonials, metrics. Make it feel credible.
Features — Clear, benefit-driven, with supporting visuals or icons.
Pricing — Clean comparison, obvious recommended tier.
Footer — Professional, complete, well-organized.

For each section: generate → screenshot → critique → improve → screenshot → critique → improve → move on.

一次只处理一个区域，完全打磨好后再推进到下一个：

Hero区域 —— 最重要的部分。投入最多时间。确保标题、视觉效果和CTA完美。
社交证明区域 —— 品牌标识、客户评价、数据指标。让内容更具可信度。
功能区域 —— 清晰、突出用户收益，搭配辅助视觉或图标。
定价区域 —— 简洁的对比展示，明确推荐套餐。
页脚 —— 专业、完整、布局合理。

每个区域遵循：生成 → 截图 → 评审 → 改进 → 截图 → 评审 → 改进 → 推进。

Animations & Micro-Interactions

动画与微交互

Animations are what separate a flat page from a polished product. Always add them.

动画是区分普通页面与精致产品的关键。务必添加动画效果。

Must-Have Animations

必备动画

Element	Animation
Hero headline	Fade-in + slight upward slide on load
CTA buttons	Hover scale + color transition
Feature cards	Scroll-triggered fade-in with stagger
Navigation	Smooth scroll, sticky header with backdrop blur
Page transitions	Subtle fade between routes
Images	Lazy load with fade-in

元素	动画效果
Hero标题	加载时淡入并轻微向上滑动
CTA按钮	悬停时缩放 + 颜色过渡
功能卡片	滚动触发的淡入效果，按顺序出现
导航栏	平滑滚动、带背景模糊的粘性头部
页面切换	路由间的淡入淡出过渡
图片	懒加载并伴随淡入效果

Implementation

实现方式

Use CSS animations and

IntersectionObserver

for scroll-triggered effects. Avoid heavy JS animation libraries unless needed.

css

/* 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);
}

For Astro-specific animation patterns, see references/animations.md.

使用CSS动画和

IntersectionObserver

实现滚动触发效果。除非必要，避免使用重型JS动画库。

css

/* 滚动触发的淡入效果 */
.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。

Demanding Quality

追求高品质

After adding animations:

"The easing feels linear — use a custom cubic-bezier for more natural motion"
"Stagger the feature cards so they animate in sequence, not all at once"
"Add a subtle parallax effect to the hero background"
"The hover states need more personality — try a slight rotation or shadow lift"

添加动画后：

"缓动效果太线性了 —— 使用自定义cubic-bezier实现更自然的动效"
"让功能卡片按顺序动画出现，而非同时触发"
"为Hero背景添加细微的视差效果"
"悬停状态需要更具个性 —— 尝试轻微旋转或阴影提升效果"

Responsive Design

响应式设计

Every page MUST work on mobile, tablet, and desktop. Screenshot at all breakpoints.

每个页面必须适配移动端、平板和桌面端。在所有断点处截图验证。

Breakpoint Checklist

断点检查清单

- [ ] 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

After building each section, screenshot at mobile and desktop minimum. Fix layout issues before moving on.

- [ ] 移动端（375px）—— 单列布局，适合触摸的交互目标
- [ ] 平板端（768px）—— 适配网格，易读的行长度
- [ ] 桌面端（1280px）—— 完整布局，最大宽度容器
- [ ] 宽屏（1536px+）—— 内容不会尴尬地拉伸

构建完每个区域后，至少在移动端和桌面端最小尺寸下截图。修复布局问题后再推进。

Project Structure (Astro)

项目结构（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

Use component-per-section architecture. Each section is its own

.astro

file for clean iteration.

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

采用“一区域一组件”的架构。每个区域对应一个独立的

.astro

文件，便于清晰迭代。

Quality Checklist

质量检查清单

Before considering a page done:

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)

在认为页面完成前，完成以下检查：

视觉质量：
- [ ] 每个区域都在移动端和桌面端截图并评审
- [ ] 排版层级清晰（每个区域最多2-3种字号）
- [ ] 调色板一致（最多3-5种颜色）
- [ ] 留白充足且布局合理
- [ ] 图片已优化且尺寸合适

动画效果：
- [ ] Hero区域有入场动画
- [ ] 内容区域有滚动触发的动画
- [ ] 所有交互元素都有悬停状态
- [ ] 动画无卡顿或抖动
- [ ] 动画尊重prefers-reduced-motion设置

内容：
- [ ] 标题突出用户收益，而非功能
- [ ] CTA清晰且有吸引力
- [ ] 无Lorem Ipsum或占位内容
- [ ] 文案已通过copywriting技能评审

技术指标：
- [ ] Lighthouse各项评分均达90+
- [ ] 所有断点下响应式正常
- [ ] 全程使用语义化HTML
- [ ] 符合无障碍标准（键盘导航、ARIA标签、色彩对比度）
- [ ] 加载速度快（JS用量少、资源已优化）

Additional Resources

额外资源

Browser Setup — Cursor Browser plugin and Claude Code Chrome integration
Animations — Astro animation patterns, scroll effects, and micro-interactions
Prompting Patterns — Example prompts for each design phase

Browser Setup —— Cursor Browser插件和Claude Code Chrome集成配置
Animations —— Astro动画模式、滚动效果及微交互
Prompting Patterns —— 各设计阶段的提示示例