图片转代码

先解决什么问题

标准 AI 生成网站时常常直接输出一段自由发挥的代码，结果很容易退化成几种老套路：把多个区块压进一张模糊大图，文字缩到读不清；首屏永远是居中的暗色 Hero；卡片里再套卡片，间距靠猜，字层级混乱，各种 pill、label 和假 UI 术语堆满屏幕。设计看起来不错，却很难提取真实结构，代码也很难落地。

图片优先的工作流程

这个技能要求模型先自己生成设计图，再做深度图像分析，最后才写前端实现。顺序是硬性的：

• 第一步：针对 Hero、Landing、品牌页或产品页，先生成可分析的视觉稿
• 第二步：对生成图做结构拆解，读取排版、层级、间距和组件关系
• 第三步：基于分析结果输出实现友好的区块代码，而不是重新自由发挥

输入通常是“做一个有质感的官网首屏”或“设计一个多段式落地页”这类视觉导向需求。覆盖范围包括 Hero 区、营销站、品牌编辑页、产品页、作品集和需要多段式高质量首屏改版的场景。

适用边界与注意点

它只适合以视觉表现为核心的网站任务。纯逻辑后台、表单流程、以表格和文字为主的文档站，不是它的强项。如果你的使用场景是“做一个很炫的首页”或“把概念设计变成可落地的前端骨架”，这套流程才有价值。

同时，最终代码质量高度依赖生成图的视觉效果。如果模型在第一步输出的图像本身平庸、拥挤或结构不清，后续分析也只能基于平庸的输入。因此，提示词里需要明确要求有层级、留白、可读字号和真实视口感，而不是只喊“高端”“大气”。

另外，技能强调“在小笔记本视口里也真实可信”，所以首屏不要堆满信息。先出图、再看图、最后写码，才是它区别于普通代码生成器的地方。