Back to Details

screenshot-to-code

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Screenshot to Code

截图转代码

Convert UI screenshots into production-ready code with accurate styling and structure.
将UI截图转换为样式和结构精准的生产级代码。

How This Works

工作原理

When a user provides a screenshot of a UI design:
  1. Analyze the visual design thoroughly
  2. Generate clean, modern code that recreates it
  3. Provide complete, runnable implementation
当用户提供UI设计的截图时：
  1. 全面分析视觉设计
  2. 生成可还原设计的简洁、现代代码
  3. 提供完整的可运行实现方案

Instructions

操作指南

1. Analyze the Screenshot

1. 分析截图

Examine the image carefully and identify:
  • Layout structure: Grid, flexbox, or custom positioning
  • Components: Buttons, inputs, cards, navigation, modals, etc.
  • Visual details: Colors, fonts, spacing, borders, shadows, borders-radius
  • Responsive considerations: Mobile vs. desktop layout cues
仔细查看图片并识别：
  • 布局结构：Grid、flexbox或自定义定位
  • 组件：按钮、输入框、卡片、导航栏、模态框等
  • 视觉细节：颜色、字体、间距、边框、阴影、圆角
  • 响应式考量：移动端与桌面端布局提示

2. Determine the Framework

2. 确定框架

Ask the user which framework they prefer:
  • React (with Tailwind CSS or styled-components)
  • Vue.js
  • Plain HTML/CSS
  • Next.js
Default: If not specified, use React with Tailwind CSS for modern designs, or plain HTML/CSS for simple pages.
询问用户偏好的框架：
  • React（搭配Tailwind CSS或styled-components）
  • Vue.js
  • 纯HTML/CSS
  • Next.js
默认设置：若未指定，现代设计使用React + Tailwind CSS，简单页面使用纯HTML/CSS。

3. Generate Complete Code

3. 生成完整代码

Create the implementation:
For React/Vue:
  • Build component hierarchy (break into logical components)
  • Use semantic HTML elements
  • Implement modern CSS (flexbox, grid, custom properties)
  • Include prop types and sensible defaults
For HTML/CSS:
  • Use semantic HTML5 structure
  • Write clean, organized CSS (consider using BEM naming)
  • Make it responsive by default
Critical requirements:
  • Match colors EXACTLY (extract hex codes from screenshot)
  • Match spacing and proportions as closely as possible
  • Use appropriate semantic elements (header, nav, main, section, etc.)
  • Include accessibility attributes (alt text, ARIA labels where needed)
创建实现方案：
针对React/Vue：
  • 构建组件层级结构（拆分为逻辑组件）
  • 使用语义化HTML元素
  • 实现现代CSS（flexbox、Grid、自定义属性）
  • 包含属性类型和合理默认值
针对HTML/CSS：
  • 使用语义化HTML5结构
  • 编写简洁、有条理的CSS（可考虑使用BEM命名规范）
  • 默认实现响应式设计
关键要求：
  • 精准匹配颜色（从截图中提取十六进制代码）
  • 尽可能贴近原设计的间距和比例
  • 使用合适的语义化元素（header、nav、main、section等）
  • 包含无障碍属性（必要时添加替代文本、ARIA标签）

4. Make It Responsive

4. 实现响应式设计

  • Use responsive units (rem, em, %, vw/vh) rather than fixed pixels
  • Add breakpoints for mobile, tablet, desktop if the design suggests it
  • Use 
    min()
    , 
    max()
    , 
    clamp()
    for fluid typography where appropriate
  • 使用响应式单位（rem、em、%、vw/vh）而非固定像素
  • 若设计有提示，为移动端、平板、桌面端添加断点
  • 适当时使用
    min()
    、
    max()
    、
    clamp()
    实现流式排版

5. Deliver Complete Implementation

5. 交付完整实现方案

Provide:
  1. Complete code (all files needed, fully functional)
  2. File structure (explain what each file does)
  3. Usage instructions (how to run/use the code)
  4. Notes on design decisions (any assumptions or interpretations)
提供：
  1. 完整代码（所需的所有文件，可直接运行）
  2. 文件结构（说明每个文件的作用）
  3. 使用说明（如何运行/使用代码）
  4. 设计决策说明（任何假设或解读）

Output Format

输出格式

jsx
// Example structure for React + Tailwind
import React from 'react';

export default function ComponentName() {
  return (
    <div className="...">
      {/* Component structure */}
    </div>
  );
}
Always include:
  • All necessary imports
  • Any required dependencies
  • Clear comments for complex sections
  • Suggestions for improvements or next steps
jsx
// Example structure for React + Tailwind
import React from 'react';

export default function ComponentName() {
  return (
    <div className="...">
      {/* Component structure */}
    </div>
  );
}
需始终包含：
  • 所有必要的导入语句
  • 任何所需依赖
  • 复杂部分的清晰注释
  • 改进建议或后续步骤

Best Practices

最佳实践

  • Accuracy: Match the design as closely as possible
  • Modern CSS: Prefer Grid/Flexbox over floats or tables
  • Accessibility: Include ARIA labels, alt text, semantic HTML
  • Performance: Optimize images, use efficient selectors
  • Maintainability: Write clean, well-organized code with comments
  • Responsiveness: Design mobile-first when possible
  • 精准性：尽可能贴近原设计
  • 现代CSS：优先使用Grid/Flexbox而非浮动或表格
  • 无障碍性：包含ARIA标签、替代文本、语义化HTML
  • 性能：优化图片，使用高效选择器
  • 可维护性：编写简洁、结构清晰的代码并添加注释
  • 响应式：尽可能采用移动端优先设计

Common Patterns

常见模式

Navigation Bars: Flexbox with space-between, sticky positioning Card Grids: CSS Grid with auto-fit/auto-fill for responsiveness Hero Sections: Full-height with centered content, background images Forms: Proper labels, validation states, accessible inputs Modals: Fixed positioning, backdrop, focus management
导航栏：使用space-between的Flexbox、粘性定位 卡片网格：使用auto-fit/auto-fill的CSS Grid实现响应式 Hero区域：全屏高度+居中内容、背景图片 表单：正确的标签、验证状态、无障碍输入框 模态框：固定定位、背景遮罩、焦点管理

When You Can't Match Exactly

无法精准匹配时的处理

If the screenshot is unclear or ambiguous:
  • Make reasonable assumptions based on common UI patterns
  • Note your interpretation in comments
  • Suggest alternatives the user might prefer
  • Ask for clarification on critical decisions
如果截图模糊或存在歧义：
  • 根据常见UI模式做出合理假设
  • 在注释中说明你的解读
  • 建议用户可能偏好的替代方案
  • 对关键决策向用户寻求澄清

Example Workflow

示例工作流

User provides: Screenshot of a landing page with hero section, feature cards, and footer
Your response:
  1. Analyze: Hero with large headline, 3-column feature grid, simple footer
  2. Ask: "Would you like this in React with Tailwind or plain HTML/CSS?"
  3. Generate: Complete implementation with responsive design
  4. Deliver: All code files with clear structure and usage instructions
Remember: The goal is to produce code so clean and accurate that it could be deployed immediately with minimal modifications.
用户提供：包含Hero区域、功能卡片和页脚的着陆页截图
你的响应：
  1. 分析：带有大标题的Hero区域、3列功能网格、简洁页脚
  2. 询问：“你希望使用React + Tailwind还是纯HTML/CSS来实现？”
  3. 生成：带响应式设计的完整实现方案
  4. 交付：所有代码文件，附带清晰的结构和使用说明
注意：目标是生成足够简洁精准的代码，只需极少修改即可直接部署。