这个博客《纯AI，零人工》

提示

本文关注 AI 辅助开发中的流程和验证，不把“零人工”作为实际交付承诺。本文记录使用 AI 辅助搭建和维护博客的实际流程：先确定视觉方向，再制作可验证的 HTML 原型，随后补齐项目规范、实现功能并执行测试。文章重点是协作边界和验证方法，不代表可以完全取消人工审查。

一、问题与目标#

直接让 AI 根据一句话需求生成完整项目，通常会导致页面风格、目录结构和实现细节同时失控。下面的流程将需求拆成可验证的阶段。

1、正确流程#

推荐流程如下：

AI 定整体风格
编写原型图.html，还原度比截图高
AI 生成代码规范，方便后续维护
代码必须各种红绿测试
持续优化

2、原型图#

这套流程不要求先完成专业设计稿，也不要求在设计工具和 IDE 之间反复同步。关键是先产出可以运行、可以对比的原型。

可以从 UI 组件库、开源项目和参考网页中提取布局与交互模式，再根据项目约束重新组合。使用外部素材时需要保留来源，并确认许可证允许使用。

2.1 原型图步骤#

在 UI 库或开源代码中找参考。
若只有代码或图片，让 AI 生成对应 HTML 原型。
对比原型是否符合需求。
让 AI 按代码规范把原型接入指定页面位置。
本地微调测试；除 Codex 外通常需多轮。

2.2 重点速查表#

常见模块：导航栏（logo、菜单、按钮）、Hero（banner、首屏展示字体、引导）、Content（图文、卡片、表格）、Footer（版权、联系信息）。

参考来源选择：

没灵感：刷网站库找审美参考。
挑现成组件：看组件库。
明确结果：抄对标网站。

2.3 推荐资源#

提示词优化：PromptPilot
网站参考：awwwards、OnePageLove、mobbin
UI 组件库：Uiverse、React Bits、CodePen、Magic UI、Aceternity UI
图标库：Iconify

2.4 提示词速查表#

根据原型图生成代码规范：

1
我需要当前业务的整体UI设计做一次风格迭代，我会给你几张参考设计的截图
2
请你仔细分析它的视觉风格，然后把这种风格应用到我的当前页面上
3
请重点还原这几个方面：
4
1. 配色：主色、辅助色、字体颜色、背景颜色
5
2. 字体：标题和正文的字号层级、粗细、间距、对齐方式、行高
6
3. 间距与留白： 模块之间的间距、元素之间的呼吸感
7
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框
8
5. 整体布局：参考它的排版结构来组织页面

规范设计文档

1
请把我们这套设计风格保留下来，总结成一份设计规范文档，保存到design.md文件中，内容包括
2
以后我每做一个新页面，你都要先读这份design.md
3
1. 配色：主色、辅助色、背景色、、文字色的具体色值
4
2. 字体：标题和正文的字号、字重、行高
5
3. 间距：常用的内外边距和模块间距
6
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框规则
7
严格按照里面的规范来设计，保证整个项目风格统一

3、设置规范#

接手新项目时，不建议一上来就执行 /init 初始化。原因如下：

技术栈不熟悉：无法判断实现阻力，容易踩坑。
代码质量未知：若项目本身混乱，初始化会让问题更难处理。
来回纠错成本高：报错、样式失效、需求被忽略等问题会反复出现。”报错你没看到嘛“、”画面怎么黑了“、“不要无视我的需求”、“不用抱歉，帮我改对啊”、“怎么切换页面后css失效了啊”。。。

3.1 正确流程#

让 AI 先深度分析项目结构、开发注意事项和目录树，输出架构图、模块依赖、核心数据流。
重点询问：坑点、配置方式、调试方法、部署注意事项。输出一份「新人上手清单」和「常见翻车现场合集」。
踩坑完成后，再执行 /init；让 AI 按企业级规范、解耦模块边界生成 claude.md 代码规范。
检查 claude.md：例如若其中提到提交代码规范，而你有对应 skill，可改为让其使用指定 skill。
再让 AI 做一次头脑风暴，按企业级规范对齐内容，迭代一次。

3.2 TDD是神#

4、开发#

获取原型 HTML。
头脑风暴学习原型图，明确需求并对齐，生成 PLAN。
按代码规范开发。非 Codex 场景需提醒使用 TDD 相关测试 skill，避免白屏测试。
检查交互：无卡顿、断层、闪烁，确认节流、防抖、重排处理到位；检查性能损耗和代码规范。
确认整体无问题后再提交。

5、优化#

开发完成后仍需持续优化。

5.1 动效#

想让页面更有质感，可用以下提示词：

1
依次从上往下分层显示。"我想要更像高端设计师作品集/创意机构官网的动效，不要普通淡入。首屏需要有完整openinganimation，标题要有强视觉进场，比如遮罩揭开、位移、压缩后归位。滚动到每个模块时，英文大标题先大幅进场，卡片再依次stagger出现，图片要有 reveal 或轻微parallax。整体动效要夸张一点但高级，节奏慢一些、缓动丝滑，不要廉价弹跳，也不要影响性能。可以用 GSAP +ScrollTrigger。"

5.2 资源优化#

1
图片：压缩，适当调整分辨率适合对应的位置大小，转换成webp
2

3
文字：压缩成日常用字6000字左右，还有包括数字、字母、标点符号和ASCLL码这些字体
4

5
懒加载：一些例如瀑布流图片、获取文章数等请求，可以异步加载
6

7
请求：合并小图标为 SVG Sprite，减少 HTTP 请求数。
8

9
缓存：静态资源加长期哈希文件名，配合 CDN 缓存策略。