# Screenshot To Code > 截图转代码 - 将UI截图/设计稿转换为Vue/React/HTML组件代码 - Skill: `chainlesschain/screenshot-to-code` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add chainlesschain/screenshot-to-code` - Raw SKILL.md: https://api.skillmd.com/api/skills/chainlesschain/screenshot-to-code/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: chainlesschain (https://skillmd.com/u/chainlesschain) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/chainlesschain/screenshot-to-code --- # Screenshot to Code 技能 ## 描述将 UI 截图、设计稿或线框图转换为前端组件代码。支持 Vue SFC（默认）、React JSX 和纯 HTML 三种框架输出。利用 Vision AI 模型分析图片中的 UI 元素，生成结构化的组件代码。 ## 使用方法 ``` /screenshot-to-code [选项] <图片路径> ``` ## 选项 - `--analyze ` - 分析截图中的 UI 元素，不生成代码 - `--generate ` - 分析截图并生成组件代码 - `--framework vue|react|html` - 设置目标框架（默认: vue） ## 支持的图片格式 - PNG (`.png`) - JPEG (`.jpg`, `.jpeg`) - WebP (`.webp`) - GIF (`.gif`) ## 框架模板 ### Vue SFC (默认) ```vue ``` ### React JSX ```jsx import React, { useState } from "react"; import "./ComponentName.css"; export default function ComponentName() { return

{/* Generated layout */}

; } ``` ### Plain HTML ```html ``` ## 输出示例 ``` Screenshot Analysis: login-mockup.png ====================================== Image: 1920x1080 PNG (245 KB) Framework: Vue SFC Detected Elements: - Header with logo (top-left) - Login form (centered) - Email input - Password input - "Remember me" checkbox - Submit button - Footer with links Generated: LoginPage.vue (85 lines) ```