图片转代码

问题在哪

用 AI 做营销站、落地页或改版时，输出很容易滑向同一套「默认审美」：整页压成一张大图、首屏信息过载、居中深色 Hero、左右图文复读、字号层级发虚、间距含糊，以及「卡片套卡片」的栅格 spam。更麻烦的是，很多流程要么只给你一张好看但拆不动的参考图，要么跳过视觉直接写代码，最后实现和意图对不上。

技能怎么工作

本技能把 视觉任务 钉死在固定顺序上，且不可跳过可用时的出图环节：

1. 先出设计图：针对 hero、多区块落地页、产品页、作品集等，生成偏艺术指导、可落地的区块级参考，而不是泛化 mockup。
2. 再深度读图：把生成图当作唯一视觉真源，分析排版、层级、留白与可读性（含小屏笔记本视口下的现实感）。
3. 最后写前端：在分析结论之上实现 HTML/CSS（或你栈里的前端），要求结构清晰、便于工程师照着建。

它刻意对抗的典型失败包括：文字过小、标签/假 UI 文案过多、区块图数量过少、以及出图后对设计的「泛化重译」。

适用与边界

适合 视觉质量敏感 的场景：品牌编辑页、创业官网、营销站整页或多 section 改版。若任务几乎不涉及版面（纯逻辑、API、后端），不必强行走三遍流程；但若用户明确要「看起来像成品站」的界面，必须先图后码。