360 Secure SkillHub
360 安全技能中心

UI Scanner — Website Design System Extraction

面向 UI 还原与竞品设计分析:接收网站 URL,爬取页面并分类视觉元素,提取设计风格、配色体系、字体排版、组件样式与 UI 模式,最终以 YAML frontmatter + Markdown 结构写入设计规范文档。参考文件提供快速上手、输出模板、六个分析维度、提取方法与常见反模式说明。

openlark
openlark
热度 46.74
最近更新 2026-06-26 13:24:20
分类:数据依赖:联网浏览搜索 / 读写文件应用场景:UI 原型 / 研究 / 报告撰写

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add ui-scanner
Metadata
name
ui-scanner
description
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.