前言
最近用 Claude Code 做了件挺爽的事——从零开始，20 分钟搭出了一个功能完整的微信公众号文章一键排版工具。
不是 demo，不是半成品。是 17 套模板、Markdown 实时预览、代码高亮、一键复制粘贴到微信编辑器就能用的那种。
这篇文章记录一下整个过程，核心想说一件事： AI Coding 时代，个人开发者制作工具的效率天花板被彻底掀掉了。
背景：为什么要做这个工具
写公众号的人都知道，微信编辑器的排版能力约等于没有。想让文章好看，要么用些第三方工具，要么手动调 CSS。
但这些工具要么收费，要么模板审美不在线，要么操作繁琐。作为一个有代码洁癖的人，我想要的很简单：
-
写 Markdown，自动出好看的排版
-
一键复制，粘贴到微信编辑器就完事
-
模板够多，风格够用
-
纯前端，不依赖后端服务
这个需求不算复杂，但如果手写，Vue 3 + TypeScript + 排版引擎 + 17 套主题模板……少说也得两三天，且作者核心技术栈是后端。
用 Claude Code，我打算 20 分钟搞定。
第一步：先用AI做方案设计（5 分钟）
磨刀不误砍柴工。开 Claude Code 之前，我先在 Cursor 里用 Plan 模式让 AI 帮我做了一份完整的技术方案。写方案的工具不限，直接使用claudecode也可。
这一步产出了一个 200 多行的方案文档，包含：
-
技术选型 ：Vue 3 + TypeScript + Vite + markdown-it + CodeMirror 6 + highlight.js
-
页面布局 ：左右分栏（编辑器 + 手机预览框）
-
核心架构 ：排版引擎如何将 Markdown 转成微信兼容的 inline style HTML
-
模块设计 ：输入、渲染、模板、主题色、代码高亮、目录、复制等 9 大模块
-
目录结构 ：精确到每个文件的职责
-
实施步骤 ：6 个阶段的开发计划
方案文档就是整个项目的 “蓝图”。有了它，后面 Claude Code 才能一次性把活干对。
这里有个关键认知： AI Coding 不是打开终端就开始写代码，而是先设计后实现。 方案越清晰，AI 的执行效率越高。
第二步：一句话启动 Claude Code（正式开工）
方案准备好后，打开终端，启动 Claude Code，切到 Opus4.6 模型（高质量输出），然后发出第一条指令：
@微信公众号排版工具_1bca933f.plan.md 帮我这个方案实现吧。模板类型加上 Claude 文章风格，然后你再推荐几种其他风格
就这一句话。@ 引用了方案文件，告诉 Claude Code 按这份蓝图执行，顺便加上我的个性化需求。
然后，Claude Code 开始自动规划任务：
| 任务编号 | 任务内容 |
|---|---|
| #1 | 搭建 Vue 3 + TS + Vite 项目脚手架，安装所有依赖 |
| #2 | 实现模板与主题系统，定义 ThemeConfig，创建 9 套预设模板 |
| #3 | 实现排版引擎核心，配置 markdown-it + highlight.js |
| #4 | 实现编辑器与预览组件，集成 CodeMirror |
| #5 | 实现工具栏与辅助功能 |
| #6 | 一键复制与整体打磨 |
接下来就是看它全自动执行——创建项目、安装依赖、写类型定义、实现渲染引擎、写组件、处理 TypeScript 报错、构建验证。
16 分钟后， npm run build 通过，浏览器打开 localhost:5173，一个完整的排版工具出现在屏幕上。
没有手动写一行代码。
第三步：迭代增强（口语化指令连续迭代）
基础版跑起来后，我开始用自然语言连续追加需求：
第二句话——丰富模板库：
帮我多加几个模板类型，加几个带背景色或者图片的类型。参考下优秀的公众号文章模板风格，帮我增强这个软件
Claude Code 直接联网搜索了 2025-2026 年优秀公众号排版风格作为参考，然后扩展了 ThemeConfig 类型（加入 wrapper 背景样式和 category 分类），一口气新增了 7 套带背景的模板：信纸风、日落晚霞、中国红、星空夜、莫兰迪、赛博朋克、薄荷森林。并且升级了模板选择器 UI，加入分类标签页（全部/经典/背景/创意）。
第三句话——定制模板：
加一个类型 claude 带背景色的模板
几秒钟内新增了 claude-bg.ts ，Claude 品牌配色 + 温暖渐变背景。
第四句话——交互优化：
一键复制按钮帮我放到预览的菜单栏上，然后再加个功能，全屏预览弹出个窗口，单独查看预览效果
Claude Code 把复制按钮从工具栏迁移到预览面板头部，用 Vue Teleport 实现了全屏预览弹窗，支持手机/宽屏模式切换。
四句话，从零到一个功能丰富的完整工具。
最终成果
回顾一下最终产出——整个过程用了不到一个小时（含方案设计），核心开发只有 20 分钟：
功能清单：
-
双模式输入：Markdown（CodeMirror 6 语法高亮）+ 富文本粘贴
-
17 套预设模板：经典 9 套 + 背景 7 套 + 创意 1 套
-
主题色自定义：8 种预设色 + 自定义取色器
-
实时预览：左右分栏，右侧手机模拟框实时渲染
-
宽屏/全屏预览：支持多种预览模式
-
代码高亮：基于 highlight.js
-
自动目录生成
-
一键复制：
text/html格式写入剪贴板，粘贴到微信编辑器完美保留样式 -
导出长图 / PDF
-
响应式布局
技术栈：
Vue 3 + TypeScript + Vite + Pinia + CodeMirror 6 + markdown-it + highlight.js + html2canvas-pro + jsPDF + juice
代码量：
30+ 个文件，包含 17 个主题配置文件、6 个核心模块、6 个 Vue 组件。
如果这些全部手写，保守估计需要 2-3 天。Claude Code 把这个时间压缩到了 20 分钟。
我的 AI Coding 方法论
这次实践让我更加确认了一套 AI Coding 的高效工作流：
1. 方案先行，代码后写
不要上来就让 AI 写代码。先花 5 分钟做方案设计，把技术选型、模块划分、目录结构、实施步骤想清楚。方案越具体，AI 执行的质量和效率越高。
我用 Cursor 的 Plan 模式生成了一份 218 行的方案文档，这份文档就是 Claude Code 的 “施工图纸”。
2. 一次给足上下文
第一条指令就把方案文件 @ 进去，让 AI 一次性理解全貌。不要把需求拆成零碎的小片段一点点喂——那样 AI 容易跑偏，你还得反复纠正。
3. 用自然语言迭代
基础版跑起来后，用口语化的指令追加需求：“帮我多加几个模板”、“把按钮挪到那边去”、“加个全屏预览”。不需要写伪代码，不需要指定具体文件，Claude Code 自己会找到该改哪里。
4. 先跑通再优化
不要在第一轮就追求完美。先让它 build 通过、页面跑起来，然后在可以看到效果的基础上迭代。视觉反馈比代码 review 高效得多。
5. 选对模型
这次我用的是 Opus 4.6模型。对于从零搭建项目这种需要架构理解和大量代码生成的任务，Opus 的 “一次成功率” 明显高于轻量模型。模型费贵一点，但省下的是你反复调试的时间。AICoding发展至今，可以完全打消不信任AICoding的念头了。如果不达预期 1. 考虑用对的模型 2. 梳理你的提示词
写在最后
这次体验让我意识到，AI Coding 的价值不只是 “帮你写代码”——它彻底改变了个人开发者的能力边界。
以前，一个人想做一个工具，从设计到实现到迭代，至少需要几天。现在，有了好的方案 + Claude Code，20 分钟就能拿到一个可用的产品。
门槛不在编码能力，在于你是否能：
-
清晰地描述你想要什么 （方案设计能力）
-
用自然语言高效地迭代 （产品思维）
-
判断结果好不好、该往哪调 （审美和经验）
代码已经不是瓶颈了。想法才是。
独自探索有天花板，交流碰撞才能打开思路。
一起探索 AICoding、Agent 编排、效率工具。
欢迎大家加微信 （bingo906）~
工具已开源：github.com/bingo906/wx-art-formatter，纯前端项目， npm run dev 即可本地使用。如果你也在写公众号，欢迎 Star 体验。