技能介绍

要解决的问题

企业多产品线并存时，常遇到一个尴尬问题：页面已经上线，视觉也相对成熟，但缺少可复用、可交接的设计系统资产。手动从页面里抄颜色、字号、圆角、按钮状态，容易遗漏 Hover、Focus、Pressed 等细节；直接爬取网页文本又拿不到 Computed CSS 和设计 Token。这个技能的目标，是把已有 Web 页面的视觉规则反推成一套可落地规范，减少从竞品页面或存量系统中补齐设计资产时反复截图、复制 CSS、人工整理的成本。

技能如何工作

它不按“整页美化”思路工作，而是按设计系统层级拆解：

输入要求：提供目标页面的高清多状态截图，以及通过 F12 获取的关键组件 Computed CSS 或 :root 全局变量。
Token 提取：按顺序建立色彩、字体、间距、圆角、阴影等代号体系，例如 Primary、Tonal、Neutral/Surface、12/14/16/20/24/28px 字阶，以及 4px / 8px 栅格步长。
组件推导：围绕 Button、Card 等核心组件输出盒模型参数，包括 Height、Border-Radius、Padding、Gap 和前置图标间距。
状态与变体：覆盖 Filled、Tonal、Outlined、Text、Icon 等变体，并定义 Default、Hover、Focus、Pressed、Disabled 状态。
交付物：生成包含真实 CSS 代码表和可交互组件 Demo 的独立 HTML/CSS 文档，便于在沙盒中直接查看效果。

一个关键约束是图标颜色建议使用 color: inherit，避免在 Filled、Tonal 等不同底色下需要手工改写图标颜色。

适用边界

这个技能适合已有可访问 DOM 样式、能提供截图和 CSS 的 Web 页面。若组件样式被 Shadow Root 隔离，仅靠常规选择器可能不完整，需要补充定向脚本或额外截图。它也不适合把“视觉近似”直接等同于“业务可用”：最终 Token、组件命名和状态规则仍需要 UI/UX 负责人验收，前端工程师按实际工程体系接入。