# Step 1: Render the Target Website

## Your Task

Use Playwright to capture the target website in its fully rendered state.

## Why This Step Matters

Many modern websites use JavaScript to render content. A simple HTTP request won't capture:
- Dynamically loaded images
- CSS animations that affect layout
- JavaScript-rendered components
- Lazy-loaded content

## How to Execute

```ts
import {renderPageWithExtraction} from './plugin';

const render = await renderPageWithExtraction({
  url: 'TARGET_URL',
  viewport: {width: 1440, height: 900},
  extraWaitMs: 3000, // Wait for animations to settle
});
```

## What You Get

| Property | Description |
|----------|-------------|
| `render.html` | Full rendered HTML |
| `render.screenshot` | PNG buffer of the page |
| `render.fonts` | Extracted font information |
| `render.colors` | Extracted color values |
| `render.requests` | Network requests made |

## Save the Screenshot

```ts
import {saveScreenshot} from './plugin';
await saveScreenshot(render.screenshot, './output/original-screenshot.png');
```

## Completion Criteria

- [ ] Page fully rendered (no loading spinners visible)
- [ ] Screenshot captured
- [ ] Fonts and colors automatically extracted
- [ ] Network requests logged (for asset discovery)

## Next Step

Proceed to [step2-scrape.md](step2-scrape.md)