Skill: 从已有网页逆向生成高保真设计系统 (Reverse-Engineering Design Systems)

1. 技能定义与人货场映射 (Context & Operational Mapping)

• 场 (Scenario - 适用场景)：企业多产品线并行时，需要快速复刻优秀竞品视觉 DNA、收拢老旧存量系统的样式割裂，或从已落地的 Web 页面反向补齐设计系统（Design System）资产。
• 货 (Goods - 交付物资产)：原子级 Token（色彩/字体/阴影/间距/圆角）规范、组件级多变体盒模型（CSS/HTML/SVG）、多状态交互实时渲染 Demo 文档。
• 人 (People - 协作分工)：UI/UX 负责人（主导框架与验收标尺） $leftrightarrow$ AI 助理（执行代码级抓取、变体枚举与 HTML/CSS 规范书写） $leftrightarrow$ 前端工程师（无缝对接 Token 落地）。

2. 核心工作流与操作指令 (Step-by-Step Workflow)

第一阶段：场域构建与资产输入 (Input Acquisition)

【禁止盲目爬取】常规网页文本爬取无法获得设计 Token。必须采用双轨输入法：

1. 视觉轨 (Visual Input)：提供目标网页的高清、多状态（Hover/点击后）原尺寸截图。
2. 代码轨 (Code Input)：通过浏览器 F12 开发者工具，复制目标关键组件的 Computed CSS Styles 或全局 CSS 变量（如 :root { --color-primary: ... }）。

第二阶段：原子 Token 解构逻辑 (Atomic Token Extraction)

AI 助理需按照以下严格顺序提取并定义全局变量：

• 色彩系统 (Color)：主色 (Primary)、次色 (Tonal)、中性色纽带 (Neutral/Surface) 及 AI/功能融合色。
• 文本系统 (Typography)：Font-Family、字阶阶梯（如 12/14/16/20/24/28px）、字重 (Font-Weight) 的应用映射。
• 空间骨架 (Spacing & Radius)：圆角梯度、全局内边距 (Padding) 与外边距 (Margin) 的栅格步长（推荐 4px / 8px 步长）。

第三阶段：组件级多变体与盒模型推导 (Component Specification)

以最核心的“按钮 (Button)”与“卡片 (Card)”为例，反向推导必须包含以下四类核心属性：

1. 真实盒模型参数 (Box Model Specs)：明确定义 Height, Border-Radius, Padding, Gap（含前置图标间距）。
2. 多变体矩阵 (Variant Matrix)：
   • Filled (主 CTA)、Tonal (次级)、Outlined (低强调)、Text (内联)、Icon (纯图标按钮)。
3. 多状态联动机制 (State Interaction)：
   • 明确配置：Default $rightarrow$ Hover (+白/黑纯色覆盖 8%) $rightarrow$ Focus (聚焦环像素与色彩) $rightarrow$ Pressed $rightarrow$ Disabled (置灰透明度比例)。
4. 图标整合标准 (Iconography)：
   • 推荐采用内联 SVG 或标准化可变轴字体图标（如 Material Symbols）。
   • 【铁律】图标颜色严禁写死。样式必须配置为 color: inherit，强制其动态跟从各变体按钮的文本色（如 Filled 状态下图标自动转白，Tonal 状态下自动变为主色）。

第四阶段：自动化校验与沙盒交付 (Verification & Delivery)

1. 阴影与图层分层校验 (Shadow Root / Depth)：检测系统组件是否使用了 Shadow Root 导致样式被隔离（如高级输入框/富文本/Chip 标签）。若常规选择器未抓取成功，须编写定向脚本或提供补充截图。
2. 沙盒实时渲染 (Sandbox Sandbox)：最终交付物必须为一份独立的、自包含的 HTML/CSS 文档。
   • 文档内须包含真实的 CSS 样式代码表以及可供交互点击的实时组件 Demo 演示，确保所见即所得、像素级还原。

3. AI 提示词脚手架 (AI Prompt Template)

当你需要让 AI 助理执行此任务时，请直接发送以下指令：

你现在是一位精通企业级（B端）设计系统的 UI 专家。请根据我提供的内容，逆向反推这套界面的设计系统。
请遵循以下步骤：
1. 提取原子 Token：按色彩、字体、间距、圆角、阴影的顺序建立代号体系。
2. 解构核心组件：推导组件在 Filled/Tonal/Outlined/Text/Icon 五种变体下的高、宽、圆角、Padding、Gap 真实盒模型参数。
3. 补充完整交互状态：为每个组件定义 Default, Hover, Focus, Pressed, Disabled 状态的样式逻辑。
4. 【技术铁律】请确保图标类（Icon）组件的颜色属性采用继承逻辑（inherit），严禁将其写死为特定暗色，使其能完美适配各种深浅色底。
5. 交付：输出一份结构清晰的 Markdown 规范文件，并附带可供在沙盒中渲染组件 Demo 的完整 HTML/CSS 代码代码。