记得今年初,我正在Pinterest上闲逛寻找设计灵感,突然,一张设计图吸引了我的目光------简洁的布局、恰到好处的留白、模块化的组件排列,这不正是我最近在思考的"设计系统化"的完美体现吗!
I offer Wix services | Site web design, Plans de conception web, Portfolio webdesign

作为一名有两年经验的前端开发者,在项目初期,我的大部分工作内容就是将设计图转化为前端代码。但这次,我想尝试不同的方式------让AI来帮忙完成这个转换过程。
Step1:V0.dev------惊喜与失望并存
我之前项目上的前端TL为我们推荐了V0.dev,操作十分简单------直接把那张设计图拖进输入框,点击生成,然后...很快,第一个AI生成的页面就出现在我面前:
第一眼看上去,确实像模像样!标题、描述文字、按钮,基本元素都在该在的位置。但当我仔细对比原设计图时,问题开始浮现:
- 卡片边缘的圆角半径明显不对
- 一些 flex 比例控制的布局不符合预期
- 还有一些复杂样式例如渐变色等都变成了纯色硬过度

虽然这部操作非常方便快捷,但这次尝试证明了一点:AI确实能理解设计图的基本结构,只是在细节还原和关联性理解上还有很大提升空间。
Step2:Cursor------分而治之
我决定换种策略。这次我选择了Cursor------相较于网页版的一键生成,AI编程助手可以更加有针对性的调整代码(而且V0.dev的每日使用次数有限,用于调试有些浪费)。我的新计划是:把设计图切成小块,让AI逐个击破。

首先,我在Figma里给原设计图加上了清晰的辅助线,明确划分出:
- 顶部的导航区
- 中部的核心内容区
- 底部的页脚信息
⠀我截取了顶部区域,连同我的详细说明一起发给Cursor:
请基于这个Header设计生成代码,要求:
- 使用Flex布局
- logo居左,导航菜单居中
- 右侧是登录/注册按钮
- 整体高度80px,背景半透明
这次的结果明显好多了!AI准确地还原了布局结构,虽然有些间距还是需要微调,但至少不再是完全跑偏的状态。
但当我进展到"Latest Stories"这个复杂板块时,又遇到了新挑战。这个部分包含:

- 一个主标题
- 三张图文混排的卡片
- 每张卡片都有独特的悬停效果
- 卡片之间还有微妙的视觉关联
⠀我尝试了各种提示词组合:
- "生成一个三栏布局,每栏包含图片和文字..."
- "创建三个新闻卡片,要有悬停效果..."
- "使用Grid实现图文混排..."
AI每次都能生成看似合理的代码,但总有些细节不对劲。经过多次尝试后,我决定放弃100%AI生成,接受了90%的AI生成代码,剩下10%手动调整。
Step3:Figma助攻------突破性的进展
"既然AI对平面图的理解有限,为什么不先用Figma把设计图的结构明确出来呢?"
说干就干,我把原设计图导入Figma,开始按照开发习惯拆解"图层":
- 最底层:背景色和装饰元素
- 中间层:内容容器和留白
- 上层:文本和图片内容

这个过程有点类似于顺应我往常的开发习惯,拆解设计图,逐渐揭示出隐藏的结构。我在Figma中建立了清晰的层级关系,给每个组件都起了有意义的名称,而不是默认的"rectangle"或"container"。 当我把这个结构化后的Figma文件通过插件转换成HTML,再导入Cursor进行调整时,AI现在能够准确识别出哪些样式应该放在父容器,哪些应该放在子元素------这正是之前手动调整最费时的部分。
Step4:组件化------有效提升效率
随着实践的深入,我摸索出了一套相对高效的工作流程。现在的我不再机械地把设计图扔给AI然后祈祷好运,而是现在脑海中盘算每一步操作,将我这套规则交给AI:
- 设计解构阶段 :从前端开发角度结构图面层次
- 组件规划阶段 :识别可复用的模式,规划组件结构
- AI生成阶段 :分步骤指导AI生成基础代码
- 人工优化阶段 :调整那些AI尚未理解,或调试难度较大,不如手动调整
比如在处理卡片组件时,可以定义接口:
typescript
interface CardProps {
imageUrl: string;
title: string;
description: string;
hoverEffect?: 'zoom' | 'fade' | 'lift';
theme?: 'light' | 'dark';
}

然后让AI基于这个规范生成代码,而不是自由发挥。这种方式生成的组件不仅符合设计需求,还能在整个项目中保持一致性。
Step5:工具探索------开拓视野
在基本流程跑通后,我开始好奇,现在有哪些design-to-code的产品?于是开启了一段工具探索之旅:
Webflow 体验 :

- 优点:可视化编辑强大,响应式设计工具完善
- 缺点:学习曲线陡峭,代码导出需要付费
- 适合场景:不需要深度定制的营销页面
⠀Framer 尝试 :

- 惊喜:基于React的理念,组件化工作流很顺手
- 不足:复杂交互实现起来还是有限制
- 亮点:布局逻辑特别清晰,适合前端思维
⠀Same.new 评测 :

- 自动分析设计图结构
- 生成清晰的组件层次
- 产出可维护的React代码
- 甚至生成了完整的文档!
虽然还有些小bug,但感受到简单的 design-to-code 应该在不远的将来,就能一键实现了。
Step6:尝试理解AI的思维方式
为了更好地与AI协作,我开始研究这些工具背后的工作原理。通过阅读论文和开发者博客,我拼凑出了AI布局生成的大致流程:
- 视觉特征提取 :识别设计图中的色彩、形状、文字等基本元素
- 层级关系推断 :分析哪些元素属于同一组,如何嵌套
- 代码模式匹配 :在训练数据中寻找相似的设计模式
- 语法规则应用 :确保生成的代码符合语言规范
经过一次次的实践,我大致总结了如下经验:
- 分而治之 :把大设计图拆解成小模块,AI处理起来更精准
- 明确规范 :提前定义好设计系统,避免AI自由发挥
- 混合工作流 :AI生成+人工调整,效率最高
通过这套方法,原本需要1天的开发调试工作,现在可以用几句prompt,在半个小时内完成,而且页面效果符合预期。尤其是当我在项目上,与非前端技术栈的小伙伴pair完成开发工作时,他对AI转化的效果感到震惊,期待我能做出更多分享~
而我现在回望这段探索历程,我意识到这不仅仅是一次工具使用的尝试,更是对前端开发工作方式的重新思考。未来的前端开发者可能需要具备这些新能力:
- 设计翻译能力 :将视觉设计准确转化为AI能理解的规范
- 提示工程技能 :有效指导AI生成所需代码
- 质量把控意识 :识别AI输出的潜在问题
- 系统思维 :构建可维护的组件体系
⠀"技术会变,但解决问题的思维不会。"