本文档介绍了Screenshot-to-Code应用程序，这是一个由AI驱动的工具，可以将屏幕截图模型、Figma设计甚至屏幕录制转换为功能代码，支持多种AI模型。有关特定子系统的更详细信息，请参阅系统架构页面。
Screenshot-to-Code通过利用AI模型分析图像并生成各种技术栈的相应代码，充当了视觉设计与工作代码实现之间的桥梁。本Wiki页面涵盖了
来源： README.md1-38 frontend/src/App.tsx1-40
该应用程序包含两个主要组件
来源： README.md10-17 frontend/src/lib/stacks.ts1-11 backend/llm.py19-34
典型用户工作流程遵循以下步骤
来源： frontend/src/App.tsx168-229 backend/routes/generate_code.py159-437
该应用程序由几个关键组件协同工作组成
系统采用有限状态机方法，具有三个主要状态
这些状态决定了显示的用户界面和可用的操作
来源： frontend/src/types.ts22-26 frontend/src/App.tsx55-57 frontend/src/App.tsx380-390
前端围绕这些应用程序状态进行组织，并使用Zustand进行状态管理
来源： frontend/src/App.tsx17-18 frontend/src/App.tsx27-56 frontend/src/App.tsx380-390
后端提供代码生成所需的API端点
来源： backend/routes/generate_code.py38-159 backend/llm.py42-309
系统支持多种AI模型用于代码生成
| 模型 | 提供商 | 备注 |
|---|---|---|
| GPT-4o | OpenAI | 推荐模型 |
| Claude 3.7 Sonnet | Anthropic | 根据文档显示的最佳模型 |
| Claude 3.5 Sonnet | Anthropic | 替代模型 |
| Gemini | 替代模型 |
来源： README.md19-23 backend/llm.py19-34
该应用程序可以生成多种技术栈的代码
| 栈 | 组件 | 生产就绪 |
|---|---|---|
| HTML + Tailwind | HTML, Tailwind CSS | 是 |
| HTML + CSS | HTML, CSS | 是 |
| React + Tailwind | React, Tailwind CSS | 是 |
| Bootstrap | Bootstrap | 是 |
| Vue + Tailwind | Vue, Tailwind CSS | Beta |
| Ionic + Tailwind | Ionic, Tailwind CSS | Beta |
| SVG | SVG | Beta |
来源： README.md9-17 frontend/src/lib/stacks.ts1-23 backend/prompts/types.py14-22
代码生成工作流程涉及多个步骤
过程中的关键步骤：
来源： frontend/src/App.tsx168-229 backend/routes/generate_code.py41-74 backend/routes/generate_code.py409-436
该应用程序包含一个版本控制系统来跟踪生成代码的更改
此版本控制系统允许用户
来源： frontend/src/App.tsx37-44 frontend/src/App.tsx178-204
该应用程序可以以多种方式部署