chainlesschain Screenshot to Code 技能
描述
将 UI 截图、设计稿或线框图转换为前端组件代码。支持 Vue SFC（默认）、React JSX 和纯 HTML 三种框架输出。利用 Vision AI 模型分析图片中的 UI 元素，生成结构化的组件代码。
使用方法
/screenshot-to-code [选项] <图片路径>
选项
--analyze <image>- 分析截图中的 UI 元素，不生成代码--generate <image>- 分析截图并生成组件代码--framework vue|react|html- 设置目标框架（默认: vue）
支持的图片格式
- PNG (
.png) - JPEG (
.jpg,.jpeg) - WebP (
.webp) - GIF (
.gif)
框架模板
Vue SFC (默认)
<template>
<div class="component-name">
<!-- Generated layout -->
</div>
</template>
<script setup>
import { ref } from "vue";
// Generated logic
</script>
<style scoped>
/* Generated styles */
</style>
React JSX
import React, { useState } from "react";
import "./ComponentName.css";
export default function ComponentName() {
return <div className="component-name">{/* Generated layout */}</div>;
}
Plain HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* Generated styles */
</style>
</head>
<body>
<!-- Generated layout -->
</body>
</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)