# Nebula Scrape Url

> Capture web page screenshots and HTML for design reference. Use when the user provides a URL and asks to build, recreate, or implement a design. Runs `scripts/scrape-page.js` to capture desktop/tablet/mobile screenshots and HTML. Not for Figma, GitHub, or documentation URLs.

- Skill: `acquia/nebula-scrape-url` (Agent Skill)
- Install (CLI): `npx skillmds@latest add acquia/nebula-scrape-url`
- Raw SKILL.md: https://api.skillmd.com/api/skills/acquia/nebula-scrape-url/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: acquia (https://skillmd.com/u/acquia)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/acquia/nebula-scrape-url

---


# Scraping URLs for design reference

**This applies to web page URLs only.** Do not use this for:

- Figma URLs (use the Figma MCP instead)
- GitHub URLs (read the code directly)
- Documentation URLs (read or search as needed)

## Workflow

1. **Run the scraper** to capture screenshots and HTML:

   ```bash
   node scripts/scrape-page.js <url>
   ```

2. **Review the output** in `scraped/<timestamp>/`:
   - `screenshot-desktop.png` - Desktop layout reference
   - `screenshot-tablet.png` - Tablet layout reference
   - `screenshot-mobile.png` - Mobile layout reference
   - `page.html` - Full HTML for structure reference

3. **Use the screenshots** to understand the visual design (layout, spacing,
   colors, typography).

4. **Use the HTML** to understand the content structure and hierarchy.

5. **Build the components** using the `nebula-component-creation` skill.

## Example

User prompt: "Build me this page: https://example.com/pricing"

1. Run: `node scripts/scrape-page.js https://example.com/pricing`
2. Review the screenshots to understand the layout
3. Review the HTML to understand the structure
4. Create components that match the design using Tailwind CSS