图片转代码

给 IMG2HTML 一张界面图片（App 界面、设计稿，或在别处看到的组件），它会为你写出代码：先生成使用 Tailwind CSS 的 HTML，需要组件时再在编辑器里转成 React、Vue 或 Angular。

本页的示例是一个移动端习惯打卡 App 界面。它展示了 App UI 的典型结果：结构和状态都对，要修改的地方少而具体。

把图片转成代码查看示例

设计稿

生成的 HTML 以 390 像素宽度渲染：问候语、进度环、带勾选和未勾选方框的习惯列表，以及固定在底部的标签栏 — 生成的页面

一个移动 App 的设计稿

输入： 移动 App 界面设计稿（PNG，864 x 1536）

做对了什么

问候语（名字用青绿色强调色）、日期和圆角摘要卡片。
用 SVG 绘制的进度环，填充比例对应 5 个中的 3 个，旁边是“Keep going!”提示。
五行习惯的勾选和未勾选状态都正确，底部标签栏使用 Font Awesome 图标，当前标签带下划线。

需要手动修改的地方

每个习惯的 emoji 图标被写成了以 emoji 为文字的 placehold.co 图片，显示出来是空白方块。直接使用 emoji，或换成你自己的图标。
标签栏固定在屏幕底部，但列表没有留出内边距，所以挡住了最后一个习惯。给列表加上与标签栏等高的底部内边距。

habit-app-mockup.html（body 的开头几行）

 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">

打开完整的生成页面（191 行）

读懂生成的代码

这个 191 行的文件从上到下对应图片：一个包含问候语的头部区块，一张用内联 SVG 画进度环的摘要卡片，每个习惯一个 div，以及固定在底部、用作标签栏的 nav。颜色取自图片（青绿色以 Tailwind 任意值的形式写入），勾选框是带 Font Awesome 对勾的样式化 div，而不是表单控件。如果需要能切换，把它们改成复选框或按钮，并在你的框架里加上状态。

拿到能直接放进应用的代码

转换图片，按目标设备的宽度检查预览。
修改模型无从得知的部分：你用的图标库、应该动态化的数据，以及固定栏下方的间距（这里标签栏挡住了最后一个习惯）。
在编辑器里把输出切换为 React、Vue 或 Angular。代码会变成一个组件，你可以再拆成更小的组件，比如重复五次的 HabitRow。

适合图片转代码的输入

从设计工具以 1x 或 2x 导出的图片，文字清晰。
每张图片只放一个界面，这样每次转换对应一个页面或一个组件。
用真实文案而不是 lorem ipsum，因为文字会原样转录，你可以直接保留。

对于能在浏览器里看到的网页，截图转代码页面有一个桌面端示例。设计稿 Frame 的导出方法见 Figma 转 HTML 教程。开始之前想从设计稿里取准确的颜色，可以用免费的图片取色器。

图片转代码常见问题

图片转代码支持哪些编程语言？

转换生成的是使用 Tailwind CSS 的 HTML。在编辑器里可以把它转成内联 CSS 的 HTML、ReactJS、VueJS 或 AngularJS 组件，也可以输入其他框架名。本页只展示默认的 Tailwind HTML 输出。

适用于移动 App 设计吗？

适用，但生成的是网页。上面的习惯打卡 App 被转成了 390 像素宽、底部固定标签栏的页面。这很适合做 Web 应用或原型的基础；如果是原生 App，可以把它当作布局和文案的参考。

图标是怎么处理的？

常见的界面图标（首页、图表、对勾、用户、设置）会映射到 Font Awesome 5。emoji、品牌标志和自定义图标在那里不一定有，可能会以占位图或近似图标返回，就像这个示例一样。

能识别手绘或低质量的图片吗？

人能看清的，它就能识别。清晰的纸质线框图手机照片可以转换（图片转 HTML 页面上有一个示例）；模糊的文字、极小的标签和严重的 JPEG 压缩痕迹会导致文字被猜错，所以请检查文案。