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

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

2026年6月14日星期日 · #学习文档 AI / 前端 / 博客 · 1908 字 10 分钟 ·
-浏览量
 ·
简介

这个博客如何用 AI 从零搭建：定风格、写原型图、生成代码规范、持续优化的完整流程。

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

注意

我太懂你这种感觉了！！最直接、最真相、最不绕弯、最扎心、最硬核、最干脆、最不墨迹、最戳痛点、最不留情面、最一针见血、最开门见山、最单刀直入、最不铺垫、最不客套、最不煽情、最不废话、最不拐弯、最不磨叽、最不装、最不端着、最不啰嗦、最不拖沓、最不委婉、最不掩饰、最不藏着掖着、最直白、最露骨、最实在、最通透、最毒辣、最爽快、最解气、最上头、最够劲、最过瘾、最粗暴、最有效、最狠、最准、最稳、最绝、最顶、最炸、最刚、最烈、最飒、最莽、最冲、最猛、最脆、最亮、最透、最干、最净、最利落、最霸道、最硬核、最生猛、最狂野、最直白、最粗暴、最不讲虚的、最不玩套路、最不搞形式、最不整虚头巴脑、最只讲干货、最只说重点、最只给结果、最只聊真相、最只谈核心、最只戳关键的方式来告诉你。

流程#

你是否这样子做过

1、正确流程#

先说结论

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

2、原型图#

咋先说不是什么设计大师，也不是按企业规范。新手就不用在 Figma / Google AI Studio / Google Stitch 和 IDE 之间反复对齐。

参考我的邪修大发直接从现成 UI 库、开源代码、参考网页中挑元素拼接。

原型图步骤#

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

重点速查表#

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

参考来源选择：

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

推荐资源#

提示词速查表#

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

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

规范设计文档

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

3、设置规范#

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

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

正确流程#

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

TDD是神#

4、开发#

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

5、优化#

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

动效#

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

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

资源优化#

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


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


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


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


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

定期扫描#

定时让 AI 扫描项目漏洞、代码规范和冗余代码。

AI 工具#

博客主要用 Claude Code（cc）和 Codex 编写。

Skill#

  • 头脑风暴：brainstorming
  • TDD 测试：test-driven-development
  • 代码规范：frontend-patterns
  • UI 设计（自己打磨细节时基本用不上）：ui-ux-pro-max
  • 技术文档：tech-blog（自己维护，源码见 claude-setting/skills/tech-blog）

模型选择#

  • 首推：Codex + GPT-5.5
  • 次选：Claude Code + DeepSeek-V4-Pro

建议分工：顶模负责思考 PLAN，低模按代码规范编写，顶模最后审查代码。

博客设计#

博客设计原则#

谈谈不受欢迎的博客技术特征 - 纸鹿摸鱼处 而本站也很大遵循该原则，因为热爱AI绘画，所以只在首页展示AI绘画作品，其他页面则专注于文章内容呈现。后续也会继续遵循该原则。

保持博客风格统一：文章页面专注阅读，相册首页专注视觉，各司其职，互不干扰。

也希望各位读者能喜欢本站的设计风格，也能在设计自己的博客时参考本站的设计原则。

这个博客《纯AI，零人工》
https://tblog.mmzhiku.xyz/posts/ai/ai-blog-ai-zero-editing/
作者
MmzMing
发布于
2026-06-14
许可协议
CC BY-NC-SA 4.0
主页
Prompt 收录

评论区

分享你的想法，与大家交流讨论

GitHub | QQ | B站 | 邮箱
RSS | |
-- | --
© 2026 MmzMing
粤ICP备2026073665号-1 | 公安网备 粤公网安备44060602003342号
框架 Astro | 主题 Firefly
看板娘
公告
友链 互换友链

正在招募技术类博客友链，要求原创、稳定更新。点击了解更多。

查看详情
维护 服务器升级

本周日凌晨 2:00-4:00 进行服务器维护，期间站点可能短暂无法访问。

欢迎 关于我的介绍

欢迎来到我的博客，我是深耕java、python和react技术开发。热爱技术、持续学习，欢迎同好交流探讨，也欢迎大佬互换友链。

查看详情
音乐
封面

音乐

暂未播放

0:00
0:00
暂无歌词
标签
# AI 6 # 认证 5 # 安全 4 # 登录 3 # Skill 2 # Redis 2 # Bitmap 2 # 部署 2 # Java 2 # 并发编程 2 # 性能优化 2 # 前端 1 # 博客 1 # Prompt 1 # 工作流 1 # RAG 1 # Cloudflare 1 # 缓存设计 1 # 高性能 1 # Bot 1 # Umami 1 # Vercel 1 # 线程池 1 # 虚拟线程 1 # 分布式 1 # JWT 1 # OAuth2 1 # MinIO 1 # 对象存储 1 # 扫码登录 1 # WebSocket 1 # Agent 1 # Oracle 1 # 数据库 1
目录
工具

隐私政策

更新日期： 2026 年 7 月 15 日
生效日期： 2026 年 7 月 15 日

适用范围#

本政策适用于 MmzMing 的博客（以下简称“本站”）。本站是个人博客，用于发布和分享内容；不提供账户注册、支付、定位或广告投放服务。访问本站、发表文章评论或在留言板留言前，请阅读本政策。

信息收集与使用#

本站只在提供内容、评论和留言功能，以及维护站点安全所需的范围内处理信息。

  • 访问与统计信息：访问页面时，统计服务可能处理访问时间、页面地址、来源页、浏览器和设备相关信息，用于了解内容访问情况、排查故障和改进站点。
  • 评论信息：使用文章评论功能时，Waline 可能处理您主动提交的昵称、邮箱、站点链接和评论内容；还可能处理 IP 地址等必要信息，用于防止垃圾评论、滥用和维护服务安全。评论内容、昵称和站点链接（如填写）可能公开展示在文章下方；邮箱不会公开展示。
  • 留言信息：留言板使用 Waline /guestbook/ 频道。Waline 可能处理您主动提交的昵称、可选邮箱、站点链接、留言内容和图片，以及浏览器、操作系统、IP 地址等必要的反滥用信息。默认情况下，留言图片以内嵌数据随留言提交；如站点维护者配置了远程图片上传接口，图片会先发送至该接口并在留言中保存返回的图片地址。留言内容、昵称、图片和站点链接（如填写）可能公开展示；邮箱和 IP 地址不会在留言板公开展示。
  • AI 对话信息：使用 AI 搜索时，本站会处理您提交的问题以及最近 6 条对话历史，用于检索博客内容并生成回答。问题和对话历史会发送至 ModelScope，或在第三方接口不可用时由 Cloudflare Workers AI 处理。请勿在 AI 对话中提交密码、Token、身份证件、联系方式或其他敏感信息。

请不要在评论或留言中提交身份证件、银行卡、住址、密码或其他不必要的敏感个人信息。

第三方服务#

为实现本站功能，以下第三方会在各自服务范围内处理相关数据：

  • Umami：用于匿名化的网站访问统计和出站链接点击统计，帮助我了解本站的使用情况。
  • Waline：用于文章评论、留言板及访问量统计。服务会按照其自身规则处理您在评论或留言时提交的信息及必要的反滥用信息。
  • Cloudflare：为本站提供静态资源分发、AI Worker、Vectorize 和相关基础设施。留言板不使用项目 Worker 或 KV 存储。
  • ModelScope：为 AI 搜索提供文本向量和对话模型服务，会处理您提交的问题及发送给模型的最近对话历史。
  • Cloudflare Workers AI：在未配置第三方 AI 接口时提供文本向量和对话模型服务，并处理相同的 AI 请求数据。
  • unpkg：用于加载 Waline 的前端脚本、样式和表情资源；请求这些资源时，您的浏览器会与该服务建立连接。

第三方服务可能有独立的隐私政策和数据保存规则。请在使用相关功能前查阅其规则；本站无法控制其独立的数据处理活动。

本站主要使用浏览器本地存储（Local Storage 或 Session Storage）保存使用偏好，例如主题颜色、明暗模式、文章列表视图和音乐播放设置。留言板会在本地保存匿名资料、未发送草稿和登录状态，以便恢复输入与会话；管理员登录状态仅保存在当前会话。AI 搜索的会话标题和完整对话也会保存在当前浏览器的 Local Storage 中，最长保存 7 天；您可以在 AI 面板中使用“清空全部会话”立即删除这些数据。

本站不主动设置用于广告定向的第一方 Cookie。评论、统计或资源服务可能按照其自身规则使用 Cookie 或类似技术。您可以通过浏览器设置查看、删除或限制 Cookie 和本地存储；清除后，部分偏好或互动状态可能会恢复为默认值，评论功能也可能受到影响。

信息公开、保存与安全#

评论和留言属于公开互动内容，提交后可能被搜索引擎收录、被他人引用或在缓存中短暂保留。请谨慎决定发布内容。除非您提出删除请求、内容违反规则或法律法规另有要求，公开内容会持续保留以维持讨论上下文。

本站会采取合理措施保护数据安全，包括使用 HTTPS、输入校验、内容转义和访问频率限制。但互联网传输和第三方服务均无法保证绝对安全，请理解并自行承担公开发布信息的相应风险。

你的权利#

你可以通过 784774835@qq.com 联系我，申请查询、更正或删除由本站直接保存的评论、留言或相关公开内容。为保护他人权益，请在请求中提供足以定位内容的信息，并说明你与该内容的关系；必要时可能需要进行合理核验。

对于由 Waline、Umami、Cloudflare 或 unpkg 独立处理的数据，你也可以直接向对应服务提供方行使相关权利。删除公开评论或留言后，第三方缓存、搜索引擎索引或他人转载的副本可能无法立即同步删除。

未成年人条款#

未满 14 周岁的未成年人应在监护人同意和指导下使用本站的评论、留言等互动功能。监护人如发现未成年人未经同意提交了个人信息，可通过上述联系方式与我联系，我会在合理范围内协助处理。

政策更新与联系#

我可能因本站功能或适用规则变化更新本政策，更新后的版本将在本站公布并标明日期。继续使用相关功能即表示你已阅读并理解更新后的政策。

如对本政策或数据处理有疑问，请联系 784774835@qq.com。

用户协议

更新日期： 2026 年 5 月 19 日
生效日期： 2026 年 5 月 19 日

适用范围#

本协议适用于你访问 MmzMing 的博客，以及使用文章评论、留言板等互动功能的行为。继续浏览本站或提交评论、留言，即表示你已阅读、理解并同意遵守本协议及本站的隐私政策。

评论及留言规则#

请在交流中保持友善、理性和尊重。你不得利用本站发布、传播或实施以下行为：

  • 发布任何违反中华人民共和国法律法规的内容。
  • 发布任何侵犯他人合法权益的内容，包括但不限于隐私、名誉、肖像、著作权、商标权和其他知识产权。
  • 恶意攻击、辱骂、骚扰、威胁、歧视其他用户或任何第三方。
  • 发布垃圾广告、恶意推广、刷屏、灌水，或与讨论主题明显无关的重复内容。
  • 利用本站进行网络诈骗、钓鱼、传播恶意软件，或发布可能危害网络和信息安全的内容。
  • 绕越或试图绕越本站的审核、限流、封禁等管理措施。
  • 冒充他人、伪造身份，或收集、公开他人的个人信息。

内容与访问管理#

你应对自己发布的评论和留言负责，并保证拥有发布该等内容所需的合法权利。论坛管理员有权在不另行通知的情况下删除违规内容、限制或封禁违规账号，或限制其继续使用本站互动功能。

如发现涉嫌违法犯罪、严重侵权或危及本站安全的内容，本站可保留相关记录，并在法律法规要求或必要时向有关部门提供协助。对管理措施有疑问时，可通过文末联系方式说明情况；本站会结合实际情况处理，但不承诺恢复已删除内容或访问权限。

知识产权与内容授权#

本站原创文章、页面设计和其他受保护内容的权利归作者或权利人所有。未经授权，请勿复制、转载、镜像或用于商业用途；法律法规允许的合理使用除外。

你发布评论或留言时，授予本站为展示、存储、备份、审核、删除和维护互动功能所必需的非独占、免费的使用许可。该许可不改变你对原创内容依法享有的权利。

免责声明#

本站内容仅用于个人记录、学习交流和一般信息参考，不构成任何专业意见、承诺或担保。你应结合自身情况独立判断，并对据此采取的行动负责。

评论、留言和外部链接中的内容由其发布者或运营者负责，不代表本站立场。本站会在合理范围内处理明显违规内容，但不保证所有内容均及时发现，也不对第三方网站的可用性、内容、安全性或隐私实践承担责任。

因网络故障、不可抗力、第三方服务异常、维护升级或超出合理控制范围的原因导致本站暂时无法访问、内容延迟或数据丢失的，本站会尽力恢复，但不承担由此产生的间接损失。

未成年人条款#

未满 14 周岁的未成年人应在监护人同意和指导下使用评论、留言等互动功能。监护人应协助未成年人理解本协议，并对其使用行为进行必要的引导。

其他条款#

我可以根据本站功能、管理需要或法律法规变化更新本协议，更新后的版本将在本站公布并标明日期。继续使用本站即视为接受更新后的协议。

本协议的订立、执行和解释适用中华人民共和国法律。因本协议或使用本站产生争议时，双方应先友好协商；协商不成的，依法向有管辖权的人民法院解决。

如对本协议或内容管理有疑问，请联系 784774835@qq.com。