Agent Skills
› NeverSight/learn-skills.dev
› nebula-scrape-url
nebula-scrape-url
GitHub用于捕获指定网页的截图和HTML，为设计参考提供视觉布局和内容结构依据。适用于用户要求基于URL重建或实现设计时。不支持Figma、GitHub或文档链接。
Trigger Scenarios
用户提供URL并要求构建或重现页面设计
需要获取网页的多端截图（桌面/平板/手机）及HTML源码以分析布局和结构
Install
npx skills add NeverSight/learn-skills.dev --skill nebula-scrape-url -g -y
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
-
Run the scraper to capture screenshots and HTML:
node scripts/scrape-page.js <url> -
Review the output in
scraped/<timestamp>/:screenshot-desktop.png- Desktop layout referencescreenshot-tablet.png- Tablet layout referencescreenshot-mobile.png- Mobile layout referencepage.html- Full HTML for structure reference
-
Use the screenshots to understand the visual design (layout, spacing, colors, typography).
-
Use the HTML to understand the content structure and hierarchy.
-
Build the components using the
nebula-component-creationskill.
Example
User prompt: "Build me this page: https://example.com/pricing"
- Run:
node scripts/scrape-page.js https://example.com/pricing - Review the screenshots to understand the layout
- Review the HTML to understand the structure
- Create components that match the design using Tailwind CSS
Version History
- e0220ca Current 2026-07-05 23:01
