YOHO AI

标签： 设计稿转代码

  • Figma Make 现在可以直接编辑你的生产代码库了

    设计师和程序员之间的”交接”永远是个麻烦。设计稿画得漂漂亮亮，到了工程师手里要重新写一遍代码，中间总有信息损耗。Figma 这个月悄悄把这件事的边界推前了一步。

    Figma Make 现在不只是帮你”生成”代码了——它真的能直接编辑你仓库里的生产代码。

    以前叫”应用构建器”，现在叫”可视化软件编辑器”

    Figma Make 是 Figma 在 2025 年推出的 AI 功能，原本的定位是让设计师（或者不会写代码的人）用自然语言描述，然后自动生成一个可交互的应用原型。

    这次更新的重点是：Make 不再只是”生成原型”，它现在可以通过 Figma 桌面应用 连接到你的生产环境或者沙盒代码仓库，然后直接在 Figma 的界面里编辑真实代码。

    Figma Make 代码库可视化编辑器
    Figma Make 现在成为可视化软件编辑器（图片来源：Figma / The Verge）

    新增的编辑面板，能调的东西还挺细

    配合这次更新，Figma 还在 Make 里加了一个专门的编辑面板。你能在这个面板里直接调整布局、颜色、字体大小、各种视觉效果——这些改动能直接反映到连接的代码库里。

    这背后的逻辑是：设计师在 Figma 里改 design token，Figma 通过某种机制把对应的代码变更同步到仓库。目前 Figma 官方没有详细披露技术实现细节，但方向很清楚——让设计到代码的链路尽可能短。

    和 GitHub Copilot、Cursor 不是一个赛道

    有人会问：这东西和 GitHub Copilot 或者 Cursor 有什么区别？区别其实挺大。

    Copilot 和 Cursor 是给程序员用的，核心场景是在写代码的过程中获得 AI 辅助。Figma Make 这个新功能的受众更像是产品经理、设计师、或者全栈工程师里偏前端的人——他们想在”看到的”和”跑起来的”之间减少摩擦。

    换个角度说：Copilot 帮你写代码，Figma Make 让你在设计工具里直接”看见”代码长什么样、甚至直接改它。一个在编辑器里，一个在设计画布里。

    这件事的真正意义是：设计稿和最终产品之间的那道墙，又薄了一层。

    目前还在早期，但方向值得盯着

    目前这个功能需要通过 Figma 桌面应用才能用，并且要自己配置代码仓库的连接。对于已经用 Figma 做设计管理的团队来说，这个功能的吸引力是显而易见的——少一个”翻译”环节，就少一层出错的可能。

    Figma 没有披露支持哪些框架、怎么处理合并冲突、代码同步的机制细节。这些都会在后续的实测中逐渐浮出水面。但大方向已经很清楚：设计工具不再满足于只做”设计”，它想往下游走一步。

  • Screenshot to Code：72.7K Stars！截图秒变代码，让前端开发效率提升10倍

    Screenshot to Code：72.7K Stars！截图秒变代码，让前端开发效率提升10倍

    Screenshot to Code 演示

    上传截图，AI自动生成对应代码

    🚀 项目简介

    Screenshot to Code 是一款AI驱动的开发辅助神器，只需上传一张网页截图、线框图或Figma设计稿，即可自动生成干净的可用代码。支持 HTML+CSS、React、Vue、Bootstrap 等多种技术栈，让设计稿到代码的转换从数小时缩短到几秒钟。

    ⚙️ 安装要求和过程

    💡 环境要求

    • Python 3.9+（后端依赖）
    • Node.js 18+（前端依赖）
    • Poetry（Python 依赖管理，推荐）
    • Docker（可选，快速部署方式）
    • API密钥：OpenAI / Anthropic / Google Gemini（三选一即可）

    🚀 快速安装步骤

    方式一：本地源码运行（推荐开发调试）

    # 1. 克隆项目
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# 2. 配置API密钥（后端）
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env

# 3. 安装依赖并启动后端
poetry install
poetry run uvicorn main:app --reload --port 7001

# 4. 新终端启动前端
cd ../frontend
yarn
yarn dev

    启动后访问 http://localhost:5173 即可使用。

    方式二：Docker 一键运行（推荐快速体验）

    # 在项目根目录执行
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

    ✨ 核心功能

    🎯 截图转代码

    上传任意网页截图或设计稿，AI自动分析布局结构，生成对应前端代码，支持多种技术栈自由切换。

    🔄 多模型支持

    内置支持 Claude Opus/Sonnet、GPT-4.5/4.1、Gemini 3 Flash/Pro 等顶级模型，也支持自定义API兼容接口。

    🛠️ 多技术栈输出

    支持 HTML+CSS、HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic+Tailwind、SVG 等主流技术栈。

    🎬 录屏转原型（实验性）

    支持上传网站操作录屏视频，AI直接生成可交互的功能原型，非常适合产品快速验证和演示。

    🔒 隐私优先，本地可控

    支持通过 Ollama 运行本地开源模型，所有数据不出本地；也可自托管 Docker 版本，完全掌控数据隐私。

    🎬 典型使用场景

    📌 场景一：设计师交付前端代码

    设计师完成 Figma 设计稿后，开发人员只需截图上传，即可快速获得可运行的前端代码骨架，大幅减少从设计到代码的重复劳动。实测可将一个中等复杂度页面从 2小时 缩短到 30秒 出初稿。

    🎓 场景二：学习前端的新手临摹练习

    想临摹一个漂亮的网页但不懂怎么实现？截一张图上传，AI 帮你生成完整代码，新手可以在生成的代码基础上学习和修改，快速提升前端技能。

    🚀 场景三：产品快速原型验证

    产品经理用录屏功能记录期望的操作流程，Screenshot to Code 直接生成可交互的 HTML 原型，团队可以在此基础上快速评审和迭代，不需要写一行代码。

    💎 推荐理由

    我第一次用这个工具的时候，简直惊呆了——随手截了一张纽约时报首页的截图上传，不到 20秒 就生成了一个几乎一模一样的 HTML 页面，连字体、间距、配色都还原得非常到位！

    最让我惊喜的是它对 Tailwind CSS 的支持——生成的代码不是一堆乱七八糟的行内样式，而是结构清晰、可直接维护的 Tailwind 类，这对实际项目来说太重要了。

    当然也要说一下不足：复杂交互（比如多步骤表单、动画过渡）还是需要人工补充；如果使用 OpenAI/Claude 的 API，每次生成会产生一定的 API 费用（不过项目支持 Ollama 本地模型，可以零成本使用）。总体来说，这是目前 「设计稿转代码」 这个细分领域里最成熟、最好用的开源方案，没有之一。

    📥 下载地址

    — 由 WorkBuddy AI 自动采集撰写 · 开源项目系列第43期 —