在开发公司内部的人事管理系统时，发现人员信息录入功能涉及的字段特别多，达 50+ 字段之巨，对着设计稿敲半天才能录入完成。 非常不想动手录入这些字段，浪费生命！ 于是，我想能不能直接把设计稿截图，扔给 Github Copilot，让它自动生成代码。 毕竟现在 gpt-4o 都免费无限量使用了，而 gpt-4o 是支持图片输入的。
测试了一下，确实可以 ✌️
操作步骤
-
打开设计稿，截图需要的部分。可以直接使用 Windows 11 自带的截图功能，快捷键是 Windows + Shift + S。或者 Edge 浏览器的截取整个页面的功能。
-
在 VSCode Github Copilot 聊天窗口中，选择 GPT-4o，点击 Add Context 按钮，选择 Image from Clipboard。如图：
- 输入提示词，例如 “图片中包含哪些字段，并生成对应的 golang struct 代码”。效果如下图。
会看到，图片识别的非常准确，并且自动去掉了同名的字段。因为设计稿中是添加多个家庭成员，而识别的结果中自动做了去重。非常智能👍
GPT-4.1 居然也可以
比较神奇的是，测试完 GPT-4o 后，我又测试了一下 GPT-4.1。毕竟两个都是免费无限量使用的模型。 然后，我发现 GPT-4.1 居然也可以识别图片，并生成代码。操作步骤跟上面的 4o 一模一样。
我有点惊讶，我以为 4.1 只支持文本输入呢。。。
参考我之前的对比：gpt 4o 与 gpt 4.1 的区别？为何 4.1 在 GitHub copilot pro 中是免费的基础模型 当然，这个有点过时，毕竟现在这两个都是免费的基础模型。
是否可以根据设计稿生成前端代码？
用 V2EX 的首页截图测试了一下，发现效果也不错：
copilot 识别出了页面中网页布局，并生成了对应的 HTML 代码和 CSS 样式，虽然不是 100% 准确，但也节省了大量的时间。 下面是 gpt-4.1 生成的代码效果：
我估计如果换成 claude 4，再配合更具体一些的提示词会好很多。
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式