domains / families / design / extract-design

extract-design

separate

Use this skill when the user wants to extract a webpage's design language into a reusable HTML style reference file, including typography, colors, spacing, surfaces, components, states, themes, motion, code-block styles, background atmosphere, decorative motifs, and art direction. The output should be a universal style specimen HTML for future AI-generated pages, not a 1:1 copy of the original page. Extracted style files are saved to the skill's own `assets/theme/` directory, never to the user's project.

When to use

• 提取某个网页的视觉风格
• 让 AI 学习一个网站的设计语言并生成同风格页面
• 从网页中抽取字体、字号、字色、背景样式、图片背景、条纹/网格/纹理、动画、卡片样式、代码块样式
• 将网页风格沉淀为一个可复用的 HTML 参考文件
• 构建设计样张页 / style specimen / design reference file
• 将一个具体网页抽象成更通用的设计系统表达
• 抽取整页“氛围感 / atmosphere / art direction”，而不仅是组件样式
• 仅截图网页

When not to use

• screenshot webpage only
• copy page DOM or download resources
• fix single CSS issue
• pixel-level 1:1 replication
• export raw CSS dump

Skill page

Source