前言

作为后端开发人员，前端一直处于一知半解的水平，很多时候一些css也写不明白，打页面html框架时也可能不知道怎么组织比较合理，更不用说搞一些有设计感、有个性化，美观又充满生动效果的组件和页面了。

好在当下AI发展得十分迅速，很多难题都可以交给AI处理，我们只需要当个甲方指指点点，然后验收成果就可以了。以AI为辅助，能够帮助我们成为全栈开发人员，或者拓展我们在很多方向上的开发能力。

由于我个人不擅长前端开发，对于设计也缺乏基本的专业素养，很难开发出好看的页面来。甚至在很多时候，一想到自己写出的东西很难看，就直接一开始丧失了动力，最终达成零收获。

于是我尝试借助AI进行前端开发，并取得一些心得。为了进一步提升开发的专业性、可靠性，我认为非常有必要总结出一套规范化的开发工作流，并在后续的实践中不断完善，从而拓展出一个具备相对坚实基础的前端开发能力。

成果概览

目前我在实践中有一些成果，如halo博客主题Klasspace（完成度尚可），情侣空间小程序（进行中），后台管理系统页面（进行中），包括了几个开发方向的探索。

先从整体上感受一下AI开发的效果（阶段性截图不代表最终成果）：

Klasspace主题，包含多个页面，支持多端尺寸适配，亮暗主题切换（基于GPT5.5）：

情侣空间小程序，13+功能页面UI初版设计，处于探索阶段（基于GPT5.5）：

更多成果还有待实践和打磨......

但是就目前而言，个人感觉还是相当不错的。

实践经验

我会从一开始失败的经验说起，这样通过对比，可以更为清晰地体会到这个工作流带来的质量提升效果。

直接prompt生成

最开始让AI帮忙写页面，没有任何范式，纯粹就是许愿+抽卡。直接跟AI说要开发一个什么页面，详细一些的再加上有什么功能需求，不过得到的效果也很差哈哈。

一般能够得到的都是死亡渐变色，或者非常具有AI味的简单排版，然后采用各个emoji表情包。虽然也说不上特别丑吧，但是也完全谈不上好看和具有设计感。

一份无效的prompt：

我想开发一个 Halo 2.x 主题，请你作为顶级品牌设计师、数字艺术总监、UI/UX 设计师、交互动效设计师和前端设计顾问，帮我设计一个“极具个人风格、不容易撞车、具有高级感”的博客主题方案。

我的目标不是普通博客模板，而是一个具有强识别度、强视觉记忆点、适合作为个人品牌主页的 Halo 主题首页，并延伸到整站设计。

【核心目标】

  1. 强烈个人风格：不是通用型博客皮肤，而是有鲜明气质和独特叙事感。

  2. 避免撞车：不要做成常见的 SaaS 官网风、普通极简博客风、千篇一律的卡片风。

  3. 高级感：克制、精致、统一、有审美，不廉价，不堆砌特效。

  4. 首页第一屏必须有“大屏背景 + 3D 氛围 + 动效体验”。

  5. 最终设计必须可落地为 Halo 主题，不能只是概念海报。

【我的人设 / 品牌气质】
请围绕以下人格特征设计：

  • 我希望整体感觉是：有思想深度、有设计品位，但不浮夸

  • 不要做成营销落地页风、商业公司官网风

  • 不要太花哨，不要过度霓虹，不要廉价赛博朋克

  • 不要用烂大街的“玻璃拟态 + 渐变球 + 漂浮卡片”直接套模板

【主题定位】

  • 产品类型：Halo 博客主题

  • 场景：个人博客 / 技术写作 / 项目记录 / 思考输出 / 个人品牌主页

  • 目标用户：对内容、审美和阅读体验有要求的人

  • 设备：桌面优先，同时兼顾移动端

  • 模式：支持浅色模式与深色模式

【首页设计重点】
请重点设计首页，尤其是 Hero 首屏区域。
首页必须具备：

  1. 全屏视觉首屏

  2. 有沉浸感的大屏背景

  3. 背景带有 3D 视觉元素

  4. 背景或前景有高级、克制、流畅的动效

  5. 同时不能影响文字可读性和页面性能

  6. 页面要有“这是某个人的站，而不是某个现成模板”的独特感

【请先帮我完成“概念层设计”】
先输出 3 个不同方向的视觉概念，每个方向都要包含：

  1. 概念名称

  2. 核心气质

  3. 视觉母题 / 隐喻

  4. 为什么不容易撞车

  5. 适合什么样的个人品牌表达

  6. 首页首屏的核心画面构成

  7. 3D 背景建议

  8. 动效建议

  9. 色彩气质建议

  10. 风险点（比如容易过头、容易廉价的地方）

这 3 个方向必须明显不同，不要只是换颜色。

【在给出 3 个方向后，请继续深入其中最优方案，并完整展开】
请选择最适合“个人风格强 + 高级感 + 不易撞车”的那个方向，继续输出完整方案，内容包括：

一、品牌气质与设计叙事

  1. 这个主题的人格画像

  2. 整体审美关键词

  3. 设计叙事主线

  4. 如何通过视觉建立“个人识别度”

  5. 如何避免看起来像现成模板

二、首页信息架构

请输出首页模块结构，并说明每个模块的作用、顺序和理由。
建议包含但不限于：

  1. 顶部导航

  2. 首屏 Hero

  3. 个人简介 / 核心标签

  4. 精选文章

  5. 最新文章

  6. 专题 / 分类入口

  7. 项目展示

  8. 思考碎片 / 引言区

  9. 页脚

每个模块请说明：

  • 模块目标

  • 内容构成

  • 桌面端布局

  • 移动端布局

  • 与整体气质的关系

三、首页首屏 Hero 深度设计

这是最重要的部分，请重点展开。

请详细设计首页第一屏，包括：

  1. 页面构图

  2. 文案层级（主标题、副标题、介绍语、CTA）

  3. 前景信息区域排版

  4. 背景的 3D 场景构成

  5. 背景中的主要元素是什么

  6. 这些元素如何表达“个人气质”

  7. 动效如何发生

  8. 动效节奏如何控制

  9. 鼠标移动 / 滚动时的交互反馈

  10. 浅色 / 深色模式下的变化

  11. 如何保证文字可读性

  12. 如何保证不是“只有炫技没有内容”

【特别要求：3D 背景设计】
首页首屏必须有高级的 3D 视觉背景，但要克制，不要廉价。
请至少给出以下内容：

  • 3D 场景风格建议

  • 3D 元素类型（例如抽象雕塑、几何结构、空间装置、流体、粒子、参数化结构、半透明材料、镜面材质、石材/金属/雾面材质等）

  • 元素组合逻辑

  • 主次层次

  • 光影方案

  • 景深建议

  • 材质建议

  • 画面氛围

  • 背景如何与文字共存

  • 是否适合使用 Three.js / spline 风格 / WebGL / CSS 动效模拟

  • 如何在不喧宾夺主的情况下营造高级感

【特别要求：动效设计】
动效必须高级、细腻、克制，不要廉价。
请输出：

  1. 首屏入场动效

  2. 背景持续呼吸感动效

  3. 鼠标轻微视差 / 跟随

  4. 滚动联动效果

  5. 按钮 hover

  6. 导航栏显隐/吸附

  7. 卡片 hover

  8. 页面转场建议

  9. 动效节奏规范（快慢、延迟、缓动）

  10. 哪些地方必须动，哪些地方不要乱动

要求：

  • 动效要服务于气质，不要为了炫而炫

  • 页面不能过于飘、晃、闪

  • 不要过量粒子特效

  • 不要过量发光效果

  • 不要低端炫酷风

四、视觉语言系统

请输出完整视觉语言，包括：

  1. 配色系统

  2. 字体系统

  3. 字重层级

  4. 字号层级

  5. 留白系统

  6. 栅格系统

  7. 圆角系统

  8. 边框系统

  9. 阴影系统

  10. 材质语言

  11. 图标风格

  12. 插图 / 背景装饰风格

要求：

  • 色彩不要俗气

  • 配色要体现高级感和独特气质

  • 请优先使用“功能性命名”，不要直接用 red、blue、purple 命名

  • 请说明“适用场景”和“不要怎么用”

五、核心组件设计

请设计以下组件：

  1. 顶部导航栏

  2. Hero 区按钮

  3. 文章卡片

  4. 标签 / 分类标签

  5. 个人信息卡

  6. 项目展示卡

  7. 页脚

  8. 搜索入口

  9. 分页

  10. 空状态

每个组件请输出：

  • 视觉风格

  • 信息结构

  • 尺寸建议

  • 状态（默认 / hover / active / disabled）

  • 适用场景

  • 不要怎么设计

六、文章详情页延展

虽然首页是重点，但请同步给出文章详情页风格延展规则：

  1. 标题区

  2. 元信息

  3. 正文排版

  4. 图片样式

  5. 代码块样式

  6. 引用块样式

  7. 目录 TOC

  8. 上一篇 / 下一篇

  9. 评论区

要求：

  • 正文可读性优先

  • 和首页气质一致

  • 不要因为首页很炫，正文却很普通割裂

七、移动端适配

请说明：

  1. 移动端首页首屏如何简化

  2. 3D 背景如何降级

  3. 动效如何减弱

  4. 导航如何折叠

  5. 信息密度如何控制

  6. 如何保留高级感和个性，而不变成普通移动端页面

八、实现建议（前端可落地）

请从前端实现角度给建议：

  1. 哪些部分适合用纯 CSS 实现

  2. 哪些部分适合用 Canvas / WebGL / Three.js / Spline

  3. 哪些地方要注意性能

  4. 首屏动画性能优化建议

  5. Halo 主题实现时模块如何拆分

  6. 哪些设计适合做成可配置项

  7. 如何保持 SEO 和可访问性

  8. 如何避免首屏背景影响加载速度

  9. 如何为低性能设备提供降级方案

九、设计红线 / 禁用规则

请明确指出：

  1. 哪些设计会显得廉价

  2. 哪些设计会让主题撞车

  3. 哪些设计会破坏高级感

  4. 哪些动效会让人厌烦

  5. 哪些配色容易翻车

  6. 哪些 3D 表现方式容易俗气

十、最终开发交付物

最后请输出：

  1. 一份完整设计总结

  2. 一套 Design Tokens（CSS variables）

  3. 一套适合 AI 继续生成静态页面的页面提示词

  4. 一套适合生成首页 HTML/CSS 原型的提示词

  5. 一套适合进一步转成 Halo Thymeleaf 模板的提示词

【额外要求】

  • 编码采用UTF-8

  • 不要只给抽象形容词，要给具体规则

  • 不要输出平庸通用模板方案

  • 要主动帮我创造“独特视觉母题”

  • 设计必须有记忆点

  • 高级感来自秩序、节制、材质、比例、留白、动效节奏，而不是堆砌特效

  • 请用专业、系统、可落地的方式输出

并不是说prompt没作用，而是直接通过prompt进行页面代码输出质量很差。

而且一上来就立了很多规矩，会很大程度扼杀大模型的创造力。

这里使用superpower进行风格和设计的确定。采用这种对话形式多轮迭代，效果是很差的，AI完全就是在猜，你完全就是在抽卡，而且大概率抽不到好卡，因为只要第一次输出第一版的代码后，AI就只会一直在这种风格上做小改动，很难出好设计。

而且这种提问就很摸不着头脑，因为我从这些文字表述是很难也很难想象和掌握具体的视觉效果。

每次这样提一点，改一点，是很累的，而且完全是无用功。

由于太丑陋了我没有截图保存。这里就不展示效果图了（后续编辑可能会补上类型参考）。

使用skill

在参考学习了别人的开发过程后，发现使用skill的话能够在一定程度上提高页面效果，但是终究是有限的。而且由于使用了skill里规定的设计规则，一般产出风格都会更趋向固定，比较适合个性化低一些的场景，如后台管理页面。

此外，使用skill也会增加token的消耗速度，使用不当会白白耗费很多资源。

例如上述我就使用了superpower，不断提问我需要什么设计，到头来也纯抽卡，浪费了很多token效果也不好。感觉在使用上是很不恰当的。

由于基于大模型的生成基本还是抽卡，加上我本身使用skill也较少，因此我也不能判断使用了skill是否确确实实地提高了质量。还是有待后续多实践吧。

完整工作流（持续优化）

我的方法不一定是最优，仅供参考，持续迭代更新优化。

需要注意的是，先出设计稿后出设计文档，与先出设计文档再出设计稿，其实都可以尝试。

我个人比较建议先出图，因为可以发挥大模型的创造力，而不会受规范文档限制。

接下来按步骤详细讲解整个开发的流程：

1. 确定初始需求

先跟AI对话讨论，明确这个项目的目标，包括应用类型、功能清单、页面清单、目标用户人群等等。

然后可以根据项目的这些特性和内容确立适合的视觉风格，如商务、清新、可爱、亲和、酷炫、简约、个性化，等等等等。

也可以再增加一些自己的需求，如：采用具有海报风格且占据大部分屏幕空间的首屏；采用手绘可爱动物作为插画和背景图；全局都要使用赛博朋克风格一样的视觉效果。

确定一个初始版的需求文档，作为后续开发的基础。

2. 搜集适合的参考图片（效果会更好）

可以去一些网站浏览一些好的设计图，然后作为参考给AI识别，提取其中的视觉要素，如排版、字体、颜色等。

尽量使用一些风格接近需求的图片，不然可能会达不到比较好的效果。

推荐网站：

3. 绘制原型设计稿

使用需求文档和参考图片，尝试让AI使用生图模型绘制一张设计稿。

让AI绘制时，尽量先局部再全体。

比如一个网站有多个页面，如果全部一起绘制，可能由于模型能力限制无法绘制得很详细和精美，而且修改起来也很麻烦。

所以先优先绘制能体现整体风格的首页、组件设计等，确定一稿的设计方案后，再依次绘制其他页面的图片，效果会好一些。

GPT支持多张图片同时产出，所以可以让他一次性多出几张图，然后再挑选和慢慢抽卡，提高效率。

如果是APP应用，尺寸较小，就可以同时多页面一起产出。

此外，GPT在web端可以给图片添加标注评论，在某些地方直接打标注，让其更精确地知道要调整哪里。

GPT出图其实是很高的，尽量让他自由创作，充分发挥AI的创造力和设计能力，很有可能给你带来一些眼前一亮的效果。

先输出了设计文档再出设计稿也是可以尝试的：

4. 输出切片素材（非必须）

如果你的设计里，主要就是很多图片图标，或者一些手绘风格的贴图，那就需要让AI将设计稿中的贴图元素提取出来，然后重新绘制，让我们后续页面代码可以直接使用这些素材资源，复刻设计稿的效果。

5. 输出设计规范文档

当所有页面都绘制完成，且在反复修改和抽卡后，达到了令人满意的效果，那就可以让AI输出设计的文档了。

主要内容包括整体风格、字体使用规范、组件设计等等。文档最好是按模块或页面来区分，避免所有内容保存在同一份文档里。

到目前依然是在一个对话里，如果是在app应用可以直接让agent直接输出文件。我这里为了节省额度是在网页对话，所以就手动copy了。

6. 输出代码

有了设计稿的图片，以及我们规范的设计规范文档作为提示词，就可以尝试输出页面代码了。

这部分才是抽卡的重中之重，不要期待一次就能出完美成果，不断打磨才能得到满意的结果。AI只能作为辅助帮我完成大而粗糙的整体，那些小细节才是我们花费人工最多的地方。

不知道为什么我的提示词不见了，我的输入大概就是：根据设计稿图片，结合设计规范文档，生成页面代码，要求严格复刻，对应的图片资源按需设置在合适的位置。

7. 打磨细节

大模型输出了很多代码，不一定能够满足我们的要求，比如输出了不需要的逻辑代码、代码不符合实际要求、不支持亮暗色切换、没有适应性布局、效果不贴合设计稿原型，以及可能文件结构混乱没有合理规划等等。

这些其实是使用大模型的可能出现的结果，不可能避免，只能靠我们一点点调试了。

使用规范的、工程化的agent开发工作流，可以在一定程度上提高开发效果和效率。比如使用agent.md规范定义每次代码工作必须遵守的内容，如开发页面要适配适应性布局、按规范的文件目录结构组织、修改后必须归档写入日志，等等。

这部分我还在研究学习中，有待完善。

8. 效果对比

简单展示一下对比图，当然不是最终成果，设计上也有调整和修改。仅供参考：

小技巧

使用生图模型绘图

Agent工具通常会默认使用html直接生成页面设计稿，但是大部分情况下直接出来的效果很差，也缺乏设计感。对于图标、贴图等，也会常常使用绘图函数之类的方式生成，效果也很差。

所以不要采用在agent工具里采用默认方式生成这种视觉资源，而是必须强制使用生图模型输出：

由于gpt-image-2生成的图像质量是很高的，大部分情况下都可以直接拿来当设计稿原型图。

尽量使用tailwind

由于tailwind是直接将样式写在html标签上的，AI阅读起来非常方便，内容紧凑也具有更好的上下文。如果采用传统三件套的话，会拆分很多css文件，而样式类一多检索起来非常麻烦，即便做好了很多模块划分、文件层级划分，也依然很容易随着迭代逐渐变得混乱和难以维护。

在这种情况下，AI就需要花费更多资源进行检索、识别和理解。

多开新会话

这个其实是使用大模型的基本操作规范了。这里我简单提一下。

总所周知，大模型上下文窗口有限，对话内容过多时，要么丢弃要么压缩，但无论哪种方式都可能会导致语义丢失，导致后续的模型输出质量越来越差。

所以每当发现回答结果不尽人意，就可以考虑开新会话了。

或者在开发时，我建议一个模块、一个页面、不想关操作，都尽量开新会话，避免糅杂在一起导致上下文污染，大模型无法正确识别意图。

按点提需求

提出不合理的地方，或者一些修改要求时，可以使用分点描述的形式，如：

1.调整头像大小

2.修改文字字体大小，要居中

3.XXXXXXXXXXXXXXXXXXX

这样的好处是，可以让大模型更确切地理解需求，然后合理组织执行。也方便我们按点检查修改的结果。

节省流派

下面介绍一些节省token和省钱路线的实践方法：

  • 生图小技巧：使用生图时，不要在codex客户端直接请求，因为会直接消耗额度，特别抽卡或多轮迭代下，会消耗非常多的token。我们可以直接到web上生成即可，这样不会消耗我们使用codex的额度，有利我们进行代码开发工作。

  • 多agent/模型厂商协作：codex没额度了咋办？大的方向以及视觉相关的工作，尽量交给codex处理。但如果是改改小问题，以及一些代码相关工作，可以试试国产agent工具和模型，如deepseek，其实也可以达到不错的效果。

FAQ

用不用Figma？

我是程序员不是专业设计师，这方面没实践研究过。如果能把设计稿图片高质量地转成Figma设计文件，那会更好，可以得到一个容易修改的效果图，方便与甲方进行博弈。

为什么有了设计稿图片还需要设计文档？

因为多模态对图片的识别终归是有限的，无法掌握页面所有语义，如果只有设计稿，那么产生的页面代码可能会达不到我们的期望。有了这份文档，我们才能让AI更精确掌握页面需求，也方便我们调整页面内容描述。