agentic-website-design

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: agentic-website-design
description: Design and build websites using AI coding agents with static site generators. Covers Astro-first workflow, iterative visual refinement via browser feedback, skill-enhanced prompting (frontend-design, copywriting), animations, and high-bar polish loops. Use when building a website with an AI agent, designing landing pages, or iterating on web design with LLM assistance.
---

# Agentic Website Design

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.

## Core Principles

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

---

## Stack Selection

### Default: 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
```

### 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.

---

## Browser Feedback Loop

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

### 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.

### Workflow

After every meaningful change:

1. **Save files** and wait for hot reload
2. **Screenshot the page** — capture the full viewport
3. **Inspect the result** — check layout, spacing, colors, typography
4. **Identify issues** — misalignment, overflow, broken responsive, missing states
5. **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](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"
```

### 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 |

### Composing Skills

Chain skills together for full-section work: