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