最近节日
正在加载日历...----
这个博客《纯AI，零人工》
简介
这个博客如何用 AI 从零搭建：定风格、写原型图、生成代码规范、持续优化的完整流程。
注意
我太懂你这种感觉了！！最直接、最真相、最不绕弯、最扎心、最硬核、最干脆、最不墨迹、最戳痛点、最不留情面、最一针见血、最开门见山、最单刀直入、最不铺垫、最不客套、最不煽情、最不废话、最不拐弯、最不磨叽、最不装、最不端着、最不啰嗦、最不拖沓、最不委婉、最不掩饰、最不藏着掖着、最直白、最露骨、最实在、最通透、最毒辣、最爽快、最解气、最上头、最够劲、最过瘾、最粗暴、最有效、最狠、最准、最稳、最绝、最顶、最炸、最刚、最烈、最飒、最莽、最冲、最猛、最脆、最亮、最透、最干、最净、最利落、最霸道、最硬核、最生猛、最狂野、最直白、最粗暴、最不讲虚的、最不玩套路、最不搞形式、最不整虚头巴脑、最只讲干货、最只说重点、最只给结果、最只聊真相、最只谈核心、最只戳关键的方式来告诉你。
一、流程
你是否这样子做过
1、正确流程
先说结论
- AI 定整体风格
- 编写原型图.html，还原度比截图高
- AI 生成代码规范，方便后续维护
- 代码必须各种红绿测试
- 持续优化
2、原型图
咋先说不是什么设计大师，也不是按企业规范。新手就不用在 Figma / Google AI Studio / Google Stitch 和 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 提示词速查表
根据原型图生成代码规范：
我需要当前业务的整体UI设计做一次风格迭代，我会给你几张参考设计的截图请你仔细分析它的视觉风格，然后把这种风格应用到我的当前页面上请重点还原这几个方面：1. 配色：主色、辅助色、字体颜色、背景颜色2. 字体：标题和正文的字号层级、粗细、间距、对齐方式、行高3. 间距与留白： 模块之间的间距、元素之间的呼吸感4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框5. 整体布局：参考它的排版结构来组织页面规范设计文档
请把我们这套设计风格保留下来，总结成一份设计规范文档，保存到design.md文件中，内容包括以后我每做一个新页面，你都要先读这份design.md1. 配色：主色、辅助色、背景色、、文字色的具体色值2. 字体：标题和正文的字号、字重、行高3. 间距：常用的内外边距和模块间距4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框规则严格按照里面的规范来设计，保证整个项目风格统一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 动效
想让页面更有质感，可用以下提示词：
依次从上往下分层显示。"我想要更像高端设计师作品集/创意机构官网的动效，不要普通淡入。首屏需要有完整openinganimation，标题要有强视觉进场，比如遮罩揭开、位移、压缩后归位。滚动到每个模块时，英文大标题先大幅进场，卡片再依次stagger出现，图片要有 reveal 或轻微parallax。整体动效要夸张一点但高级，节奏慢一些、缓动丝滑，不要廉价弹跳，也不要影响性能。可以用 GSAP +ScrollTrigger。"5.2 资源优化
图片：压缩，适当调整分辨率适合对应的位置大小，转换成webp
文字：压缩成日常用字6000字左右，还有包括数字、字母、标点符号和ASCLL码这些字体
懒加载：一些例如瀑布流图片、获取文章数等请求，可以异步加载
请求：合并小图标为 SVG Sprite，减少 HTTP 请求数。
缓存：静态资源加长期哈希文件名，配合 CDN 缓存策略。5.3 定期扫描
定时让 AI 扫描项目漏洞、代码规范和冗余代码。
二、AI 工具
博客主要用 Claude Code（cc）和 Codex 编写。
1、Skill
- 头脑风暴：brainstorming
- TDD 测试：test-driven-development
- 代码规范：frontend-patterns
- UI 设计（自己打磨细节时基本用不上）：ui-ux-pro-max
- 技术文档：tech-blog（自己维护，源码见 claude-setting/skills/tech-blog）
2、模型选择
- 首推：Codex + GPT-5.5
- 次选：Claude Code + DeepSeek-V4-Pro
建议分工：顶模负责思考 PLAN，低模按代码规范编写，顶模最后审查代码。
三、博客设计
1、博客设计原则
谈谈不受欢迎的博客技术特征 - 纸鹿摸鱼处 而本站也很大遵循该原则，因为热爱AI绘画，所以只在首页展示AI绘画作品，其他页面则专注于文章内容呈现。后续也会继续遵循该原则。
保持博客风格统一：文章页面专注阅读，相册首页专注视觉，各司其职，互不干扰。
也希望各位读者能喜欢本站的设计风格，也能在设计自己的博客时参考本站的设计原则。
评论区
看板娘