AgentSkillsCN

nebula-scrape-url

捕捉网页截图与 HTML，作为设计参考。适用于用户提供了 URL 并希望构建、重现或实现某项设计时使用。运行 `scripts/scrape-page.js` 以捕捉桌面、平板电脑与移动设备的截图及 HTML。不适用于 Figma、GitHub 或文档类 URL。

SKILL.md
--- frontmatter
name: nebula-scrape-url
description:
  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.

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