网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求"分析设计风格"、"提取设计规范"、"生成设计文档"、"从XX网站提取风格"、"分析这个页面的设计"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。
17 次安装
设计与多媒体
UI Scanner — Website Design System Extraction
试用Crawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns.
它能做什么
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.
技能文档
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.
相关技能
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 次安装1 星标
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 次安装
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...
用可量化的层级、间距、字号、配色与版式规则，绘制并诊断视觉作品。
作者 Iván138 次安装6 星标