网页设计风格提取器
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，将 @user_8ca1e380/webpage-style-extractor-py 安装到我的 AI 助手中。
技能介绍
解决什么问题
网页视觉风格常被总结为主色、字体、圆角、间距等碎片化描述，直接复制页面 CSS 又容易混入一次性 class、动态注入样式和响应式细节。问题不在缺少说明，而在说明缺少可追溯的样式来源。这个技能面向工程师，用来从公开页面中提取可复用的设计参数，形成能继续驱动前端实现的风格指南。
如何工作
技能以 webpage-style-extractor-py/scripts/extract_page_info.py 为工具入口，先用 Playwright 加载目标页面，再采集：
- CSS 变量：
--color-*、--spacing-*、--radius-*等设计令牌 - 计算样式：按钮、卡片、输入框、导航、链接等组件样式
- 颜色与排版：主色、文字色、背景色、字体家族、字号、行高
- 交互状态：
:hover、:active、:focus、:focus-visible、transition与@keyframes - 页面截图：用于人工核对提取结果
随后按行业特征分析色彩系统、排版层级、组件样式、布局间距和动效规则，并输出目标页面的风格 SKILL 文件与 result_validation.html 验证页。资料中特别强调不能拿通用模板、猜测 #2563EB 或默认 Inter 字体替代真实页面数据。分析阶段也会区分工具型 SKILL 与最终输出 SKILL：前者承载提取脚本，后者固化已提取的设计参数，方便直接用于页面重构或风格迁移。
适用边界
该流程适合分析公开可见、可加载的静态或 JS 渲染页面；需要登录、付费或动态授权的内容不在范围内。对于重度前端框架生成的页面，仍需等待关键节点渲染完成，并核对计算样式是否包含业务动态注入值。输出的是设计参数与实现示例，不是像素级复刻，也不应绕过目标站点的版权或知识产权约束。
使用场景
- 前端复刻参考页时，需要把按钮、卡片、间距和主色从原站提取成可复用参数。
- 做视觉验收前，核对目标页悬停、按下、焦点状态样式是否被完整提取。
- 迁移旧官网视觉时，需要导出 CSS 变量、字体层级和组件圆角，形成新版风格指南。
- 复刻行业官网风格时，按科技、食品、医疗等页面提取色彩、组件和行业元素。
适合人员
- 负责官网视觉还原的前端工程师，需要把参考页按钮、卡片和间距参数化。
- 做产品 UI 迁移的设计师，需要导出旧站色彩、字体和组件样式作为新规范。
- 维护营销页的开发者，需要核对 hover、focus、transition 等交互状态实现。
- 复刻行业官网的独立开发者，需要按科技、医疗、食品等提取行业元素。
相关技能
调用 Mew 图像与设计 API，将宠物照片转为主题角色并合成带标题的电影海报，同时保留宠物识别特征。
使用 FunASR 对音频和音视频文件进行转录，可切换 SenseVoice 或 Nano 模型，并支持常见音频格式。
将角色图构建为桌面宠物，支持九种表情、独立动画、点击交互、自动游走、透明置顶窗口和打包。
通过分步选择题确认业务、配色与布局，输出可编辑的 .drawio 专业技术架构图。