Profile My skills Saved Collections Edit profile Submit a skill

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.

acquia ab09339 1.5 KB Updated
Design & Media

File contents

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:

    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

acquia/nebula/tree/main/.agents/skills/nebula-scrape-url commit ab093394f5

Browse category

Frequently asked questions

npx skillmds@latest add acquia/nebula-scrape-url