web-style-extractionlisted

# 网页风格提取辅助技能 > 触发条件：当用户要求"参考某个网站的风格做 deck"、"照着 XX 网站的配色做"、"学习这个网页的视觉风格"时启用。 > > 本技能是 `html-deck-pipeline-skill` 的子技能，不单独使用。 ## 定位 从参考网站中提取视觉设计特征，产出可被 `style-contract` 和 `style-showcase` 直接使用的结构化设计参数。 ## 前置依赖 - 网页抓取能力：`internal-skill/scrapling-web-fetch/SKILL.md` - 风格契约编写规范：`references/06-style-contract-authoring-guide.md` ## 网页抓取策略 当需要补充官网、文档站、文章、列表页、详情页等网页资源时，使用内置 scrapling 技能完成"网页抓取 → 内容清洗 → 结构化提取 → 证据落盘"，减少反复人工审批与逐页确认次数。 ### 触发条件 命中以下任一信号时必须切换到 scrapling：批量抓取、列表页递归详情页、401/403、登录限制、Cloudflare、动态渲染、滚动加载、证据链采集。 若只是单个公开静态页面且无需批量抓取，可沿用内置网页读取；一旦出现阻断或需要过程资产，立即回到 scrapling 流程。 ## 工作流程 ### 1. 抓取参考网站 使用 scrapling 抓取目标网站的关键页面（首页、列表页、详情页），保存为 HTML + 截图： ```bash python internal-skill/scrapling-web-fetch/scripts/fetch_page.py --url <url> --output process-assets/html/ ``` 至少抓取 2-3 个页面以覆盖不同页面类型。 ### 2. 提取设计 Token 从抓取的 HTML 中提取以下信息： | 类别 | 提取内容 | 对应 Token | |------|---------|-----------| | **配色** | 背景色、文字色、强调色、边框色、阴影 | `--bg`, `--text`, `--accent`, `--border`, `--shadow` | | **字体** | 字体族、标题/正文字号阶梯、字重 | `--font-main`, `--font-code`, `--text-base`, `--text-hero` | | **间距** | 内边距、卡片间距、章节间距 | `--panel-pad`, `--space-section` | | **圆角** | 按钮、卡片、面板的 border-radius | `--radius-sm`, `--radius-md`, `--radius-lg` | | **组件** | 卡片样式、表格样式、标签/chip 样式、引用样式 | components.css 规则 | ### 3. 生成风格资产 基于提取的 Token 生成两个文件： **style-contract-{style-id}.md**：描述设计决策、配色体系、字体策略、组件约束、禁止项。 **style-showcase-{style-id}.html**：7 页风格展示页（封面、导航、流程、证据、对比、行动、收口），使用提取的 Token 渲染。 ### 4. 注册风格 将生成的文件放入 `examples/