shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程无需 API Key

本地UI设计稿逆向与组件契约生成器

local-ui-replica 是面向生产力级 AI Agent 工具的本地 Skill。它不内置也不下载任何模型，而是连接你已有的本地 VLM 模型服务（如 Ollama），通过 HTTP API 调用进行多步推理分析，产出完整前端契约包。

person作者: PBitWenhubModelScope
download下载资源包

本地UI设计稿逆向与组件契约生成器 (Local UI Replica)

将 UI 截图（设计稿、线上应用截图、手绘线框图）通过本地 VLM 模型服务逆向分析，一次性产出完整前端契约包：组件代码、TypeScript 类型定义、设计令牌、Mock 数据、API 契约、无障碍审计报告、联调清单。

核心特点

  • 不绑定特定模型：兼容任何本地 OpenAI 兼容 API（Ollama / vLLM / OpenVINO Model Server / LM Studio 等）
  • 不下载模型：连接你已有的本地模型服务，零等待
  • 轻量依赖：仅需 requests + Pillow，无需安装 OpenVINO / PyTorch 等重型框架
  • 完整契约：一次产出 7 类专业前端产物，而非单一代码片段
  • 双模式运行：Agent 模式无需任何配置即可使用；独立模式连接本地模型服务

Dual-Mode / 双模式说明

本技能支持两种运行模式：

模式一：Agent 模式（默认，无需配置）

当 Host（TRAE Work / Qoder / WorkBuddy）调用本技能时，Host 的 AI 直接按照下方「8 步推理管线」工作流执行：读取用户提供的截图 → 按每步 Prompt 分析 → 生成 7 类产物文件写入磁盘。

  • 无需 config.json
  • 无需启动额外模型服务
  • 无需安装 Python 依赖
  • Host AI 自身的视觉能力完成分析

工作流：Host 读取本 SKILL.md → 按「8 步推理管线」逐步执行 → 调用 scripts/client.py --assemble 组装产物文件

模式二：独立模式（纯本地，满足比赛「纯本地运行」要求）

在终端中执行 scripts\run.ps1，通过 config.json 连接本地 VLM 模型服务（Ollama / vLLM / OpenVINO MS / LM Studio）：

  • 需要 config.json 配置模型端点
  • 需要本地模型服务已启动
  • 纯本地推理，隐私不出机
终端 → run.ps1 → client.py → HTTP API → 本地模型服务 → 7 类产物

两种模式对比

| 维度 | Agent 模式 | 独立模式 | |------|-----------|---------| | 触发方式 | 在 TRAE Work 中对话 | 终端执行 run.ps1 | | AI 来源 | Host 自身 AI | 本地 VLM 模型服务 | | 需要 config.json | 否 | 是 | | 需要模型服务 | 否 | 是（Ollama 等） | | 纯本地运行 | 取决于 Host AI 部署方式 | 是（Localhost） | | 适用场景 | 日常开发、快速分析 | 隐私敏感、离线、比赛验证 |

When to Use / 使用场景

  • 用户有一张或多张 UI 截图，想还原成可用的前端组件代码
  • 需要从设计稿中提取设计令牌，生成设计系统配置
  • 需要为设计稿生成完整的「前端契约」：TypeScript 接口 + Mock 数据 + API 契约 + 联调清单
  • 需要对设计稿做无障碍（WCAG）预检
  • 团队需要将多个页面的设计稿交叉对比，提取一致的设计系统
  • 隐私敏感的设计资产需纯本地处理，不出机

前置条件

Agent 模式（默认）

无需任何前置条件。Host AI 直接按下方「8 步推理管线」工作流执行。

独立模式（可选）

需连接你已有的本地 VLM 模型服务。在 config.json 中配置：

{
  "model_endpoint": "http://localhost:11434/v1",
  "model_name": "qwen2.5-vl:7b",
  "api_key": "local-no-key",
  "temperature": 0.3,
  "max_tokens": 4096
}

支持的本地模型服务示例：

| 服务 | 默认端点 | 拉取模型命令 | |------|---------|-------------| | Ollama | http://localhost:11434/v1 | ollama pull qwen2.5-vl:7b | | vLLM | http://localhost:8000/v1 | vllm serve Qwen/Qwen2.5-VL-7B-Instruct | | OpenVINO Model Server | http://localhost:9000/v1 | 需自行部署 OpenVINO IR 模型 | | LM Studio | http://localhost:1234/v1 | GUI 中加载任意 VLM 模型 |

只要模型支持视觉输入（图片理解），均可使用。推荐使用 OpenVINO 优化的模型以获得 GPU/NPU 加速。

Architecture / 架构

Agent 模式流程

用户对话："帮我还原这张设计稿"
       │
       ▼
Host (TRAE Work / Qoder / WorkBuddy)
  ├─ 1. 读取 SKILL.md 匹配触发词
  ├─ 2. 读取用户提供的截图
  ├─ 3. 按下方「8 步推理管线」逐步分析
  │     Step 1: 视觉结构分析
  │     Step 2: 设计令牌提取
  │     Step 3: 组件代码生成
  │     Step 4: TypeScript类型定义
  │     Step 5: Mock数据生成
  │     Step 6: API契约定义
  │     Step 7: 无障碍审计
  │     Step 8: 联调清单生成
  └─ 4. 调用 scripts/client.py --assemble 写入 7 类产物文件

独立模式流程

┌──────────────────────┐         HTTP API        ┌─────────────────────────┐
│   Host (TRAE Work /  │ ───────────────────────►│  Local Model Service   │
│   Qoder / WorkBuddy) │   POST /v1/chat/        │  (Ollama / vLLM /       │
│         │             │   completions           │   OpenVINO MS / etc.)  │
│         ▼             │                         │  localhost:xxxx        │
│   scripts/run.ps1     │                         │  Any VLM ≤ 35B         │
│   → client.py         │◄───────────────────────│  (Qwen-VL / MiniCPM-V / │
│   → design_engine.py  │          Response       │   GLM-4V / etc.)       │
│   → output 7 files    │                         └─────────────────────────┘
└──────────────────────┘

Client/Server 架构：技能是 Client，你的本地模型服务是 Server。

8-Step Pipeline / 8 步推理管线

Agent 模式下，Host AI 按以下 8 步逐步执行分析。每步使用对应的 Prompt 分析截图，输出对应产物。

Step 1: 视觉结构分析 (structure)

分析截图的视觉结构，输出 JSON：布局类型（flex/grid/absolute/混合）、页面分区数组（name, role, approximate_position）、组件数组（name, type, parent_region, purpose）、组件嵌套关系树、响应式适配建议。多张截图时交叉对比，提取跨页面一致的布局模式。

Step 2: 设计令牌提取 (tokens)

从截图中提取设计令牌，输出 JSON：colors（name, hex, usage）、typography（name, font_family, size_px, weight, line_height, usage）、spacing（name, value_px, usage）、border_radius（name, value_px, usage）、shadows（name, css_value, usage）、breakpoints。多张截图时交叉对比，提取跨页面一致的令牌。提取完成后，将 JSON 转为 CSS 变量文件（:root { --color-primary: #xxx; ... }）。

Step 3: 组件代码生成 (code)

根据框架（react/vue/html）生成组件代码：语义化标签、结构清晰、样式引用设计令牌变量（如 var(--color-primary)，不硬编码）、响应式适配、Props 接口清晰定义、关键交互逻辑用注释标注。直接输出文件内容，不加 markdown 标记。

Step 4: TypeScript 类型定义 (types)

生成完整的 TypeScript 类型定义：组件 Props 接口（含 className、style 等标准属性）、API 响应类型、枚举类型（状态、类型等）、通用类型（分页、响应包装等）。直接输出 .ts 文件内容。

Step 5: Mock 数据生成 (mock)

基于类型定义生成 Mock 数据 JSON：数据结构完整覆盖所有 UI 展示字段、内容真实合理（人名、金额、日期等）、包含正常数据和边界数据（空列表、超长文本等）、数组至少 3 条记录。直接输出 JSON。

Step 6: API 契约定义 (api)

推断所需后端 API，输出 Markdown 表格：接口路径、HTTP 方法、请求参数（名称、类型、必填、说明）、响应字段（名称、类型、说明）、状态码及错误处理、分页/排序参数（如适用）。

Step 7: 无障碍审计 (a11y)

审查截图的 WCAG 合规性，输出 Markdown 报告：颜色对比度问题（前景/背景颜色及预估对比度比值）、文本大小问题、可交互元素问题（点击区域过小、缺少焦点指示）、语义结构问题（缺少 heading 层级、缺少 label）、其他 WCAG 违规。每条问题给出严重等级（Critical/Major/Minor）和修复建议。

Step 8: 联调清单生成 (checklist)

生成设计→开发联调清单（Markdown）：像素还原检查项（间距、字体、颜色、圆角是否一致）、交互逻辑检查项（hover/focus/active/disabled 状态）、边界场景检查项（空数据、加载中、错误态、超长文本）、响应式检查项、无障碍检查项、性能检查项。每项用 - [ ] 格式，可勾选。

Usage / 用法

Agent 模式（在 TRAE Work / Qoder / WorkBuddy 中对话调用）

用户在对话中提供截图并表达还原图设计稿的意图，Host 自动匹配本技能触发词，按「8 步推理管线」逐部分析，生成 7 类产物文件。

示例对话：

  • "帮我把这张设计稿还原成 React 组件" + 附带截图
  • "从这几张截图中提取设计系统" + 附带多张截图
  • "对这个页面做无障碍审计" + 附带截图

独立模式（终端调用）

Host 或用户通过 scripts\run.ps1 调用，需提前启动本地模型服务并配置 config.json。

参数说明

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | --images | string | 是 | 截图文件路径，逗号分隔。支持 .png/.jpg/.jpeg/.webp | | --framework | string | 否 | 目标框架：react(默认) / vue / html | | --output-dir | string | 否 | 输出目录，默认 ui-replica-output/ | | --mode | string | 否 | full(默认) / tokens-only / code-only / audit-only | | --config | string | 否 | 配置文件路径，默认 config.json |

Examples / 示例

| 场景 | 命令 | |------|------| | 单张设计稿→完整契约包 | scripts\run.ps1 --images "C:\designs\login.png" | | 多张截图→提取设计系统 | scripts\run.ps1 --images "p1.png,p2.png,p3.png" --mode tokens-only | | Vue 框架组件代码 | scripts\run.ps1 --images "dashboard.png" --framework vue --mode code-only | | 仅做无障碍审计 | scripts\run.ps1 --images "form.png" --mode audit-only | | 指定自定义配置 | scripts\run.ps1 --images "page.png" --config my-config.json |

Output / 输出说明

ui-replica-output/
├── component.tsx              # 组件代码（React/Vue/HTML）
├── types.ts                   # TypeScript 类型定义
├── design-tokens.css          # 设计令牌（CSS 变量）
├── design-tokens.json         # 设计令牌（结构化 JSON）
├── mock-data.json             # Mock 数据
├── api-contract.md            # API 契约文档
├── accessibility-report.md    # 无障碍审计报告
├── debug-checklist.md         # 前端联调清单
└── analysis.json              # 完整分析结果

Failure Handling / 失败处理

| 情况 | 现象 | 处理 | |------|------|------| | 模型服务未启动 | 连接拒绝错误 | 先启动本地模型服务（如 ollama serve） | | 图片格式不支持 | 提示格式错误 | 转为 PNG/JPG 后重试 | | 模型不支持视觉 | 返回错误 | 换用支持图片输入的 VLM 模型 | | 输出截断 | 部分产物不完整 | 在 config.json 中增大 max_tokens |