网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求"分析设计风格"、"提取设计规范"、"生成设计文档"、"从XX网站提取风格"、"分析这个页面的设计"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。
17 installs
Design & media
UI Scanner — Website Design System Extraction
Try itCrawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns.
What it does
Crawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns. Output a structured design specification document for UI generation. Suitable for competitive design analysis, UI restoration, design system reverse engineering, style migration, and similar scenarios.
The skill document
UI Scanner — Website Design System Extraction
Automatically crawl a website URL and reverse-engineer its visual design system, outputting a structured design specification document.
Workflow
URL input → page crawl → visual element classification → style extraction → structured output → write to file
Routing Table
| Scenario | Reference File |
|---|---|
| Quick start, minimal workflow | quick-start.md |
| Output format, YAML template, field descriptions | output-template.md |
| Detailed explanation of 6 analysis dimensions | analysis-dimensions.md |
| Extraction methods, CSS sources, inference rules | extraction-methods.md |
| Common mistakes and anti-patterns | anti-patterns.md |
Output
Results are written to {domain}_design.md using standard YAML frontmatter + Markdown structure. See output-template.md for the complete template and field descriptions.
Related skills
Analyzes UI screenshots and generates a reusable .skill file that captures the product's complete design system. Triggers when the user provides UI screensho...
Improve websites and web apps with clearer layout, better visual hierarchy, modern UI styling, responsive checks, and polished frontend design suggestions or code changes.
2 installs1 stars
General-purpose web-intelligence utilities via the Crawlora API — scrape any URL to clean markdown/HTML, extract schema-conforming JSON from a page, fingerprint a site's tech stack, geocode addresses, compare cost of living between cities/countries (Numbeo), look up a company's import/export trade records (ImportYeti), check a domain's traffic (SimilarWeb), or resolve a brand's identity from its domain. Use for one-off utility lookups that don't fit a specific platform skill.
1 installs
Fetch web pages and generate AI-powered summaries using Ollama LLM. Use when you need to (1) scrape and summarize web articles, (2) extract key points from w...
Create and critique visual artifacts with quantified rules for hierarchy, spacing, type scale, color, and layout.
by Iván138 installs6 stars