夜雨聆风
我用 Coze 做了一个公众号排版神器,这是我做过功能最完善的网站
大家好，我是一个公众号博主。
好像说了句废话！
哈哈哈!
最近我用 Coze 做了一个公众号排版工具，支持 Markdown 实时预览、多种风格一键切换、复制到公众号。
说实话，这是我用 Coze 做过的功能最完善、体验最好的一个网站！
今天想和大家分享我的制作过程，希望能给正在学习 Coze 的朋友一些参考。
💡 为什么做这个工具？
作为一个公众号博主，我一直有个痛点：
每次写完 Markdown 文章，复制到公众号编辑器后，格式就乱了。代码块没有高亮、标题没有样式、排版丑得想哭……
市面上的排版工具有不少，但要么功能复杂学习成本高，要么风格单一不够好看。于是我想：
能不能做一个简单好用、风格多样的排版工具？
答案是：可以！用 Coze 就能做！
🛠️ 技术选型
我选择的技术栈是：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
这套技术栈是 Coze 默认支持的，开箱即用，非常适合做这种工具类网站。
🎯 核心功能设计
1. 左右分栏布局
左边是 Markdown 编辑器，右边是实时预览。这是最经典的排版工具布局，所见即所得。
关键设计：
-
使用 CSS Flex 实现自适应布局 -
添加了可拖拽分隔条，可以自由调整左右比例（30%-70%） -
支持同步滚动，编辑和预览联动
2. 多风格切换
我设计了 9 种排版风格，每种风格都有独特的设计语言：
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
实现思路：
-
每种风格是一组 CSS 样式配置 -
使用 JS 对象存储样式，直接内联到 HTML 元素 -
这样生成的富文本公众号完美兼容
3. 一键复制到公众号
这是最核心的功能！
技术难点：公众号编辑器对 HTML 有严格限制，很多样式会被过滤掉。
我的解决方案：
-
使用内联样式（inline style），避免 class 被过滤 -
颜色使用 hex 格式，不用 rgb/rgba -
不使用外部 CSS 文件 -
复制时使用 Clipboard API写入富文本
4. 实时字数统计
显示当前文章的字数，帮助控制文章长度。
🎨 UI 设计心得
这次我花了很多精力在 UI 设计上，分享几个心得：
1. 建立设计系统
不要随手写颜色、间距、圆角。我建立了一套完整的 Design Token 系统：
/* 颜色系统 */
--warm-50: #FDF4F0; /* 暖棕 50 */
--warm-100: #FBE8E0; /* 暖棕 100 */
--warm-500: #E07A5F; /* 暖棕 500（主色）*/
/* 间距系统 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
/* 圆角系统 */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 12px;
这样做的好处是：
-
全局风格统一 -
后期调整方便 -
代码可读性高
2. 风格选择器的卡片化设计
我给每种风格设计了专属图标和渐变背景：
-
Claude：✨ Sparkles（闪光） -
技术教程：📚 BookOpen（打开的书） -
微信默认：💬 MessageCircle（对话气泡） -
Apple：📱 Layers（层叠） -
Medium：✏️ PenTool（钢笔）
选中时有渐变边框效果，视觉上更有辨识度。
3. 去掉多余的线条
一开始我的设计有很多分隔线、边框线。后来发现：
线越多，界面越乱。
最终我移除了：
-
导航栏底部边框 -
面板标题底部边框 -
卡片边框
界面瞬间变得干净清爽！
4. 参考优秀案例
我在网上看到一篇很棒的排版文章，专门分析它的设计特点：
-
标题使用 emoji + 彩色装饰线 -
不同功能区块用不同底色区分 -
列表使用菱形符号 ◆ 替代圆点 -
代码块使用深色背景 + 白色文字
然后我新增了一个「技术教程」风格，专门适配这种排版！
🐛 踩过的坑
坑 1：代码块文字是黑色的
我的代码块背景是深色的，但忘记设置文字颜色。结果代码看起来是一团黑……
解决方案：给 pre 标签添加 color: #f8f8f2（浅灰白色）。
坑 2：分隔条太细，交互体验差
一开始分隔条只有 1px，用户很难点中。
解决方案：参考 VS Code 和 Notion 的设计：
-
宽度 12px，更容易交互 -
默认透明，hover 时显示背景 -
添加点阵拖拽指示器
坑 3：TypeScript 类型报错
RefObject<HTMLDivElement | null> 不兼容 RefObject<HTMLDivElement>。
解决方案：修改 hook 的返回类型定义。
📝 开发流程总结
- 需求分析
：明确核心功能（编辑、预览、复制、风格切换） - 技术选型
：选择 Coze 支持的技术栈 - 功能开发
：先实现核心功能，再逐步完善 - UI 美化
：建立设计系统，统一视觉风格 - 测试修复
：发现 bug 及时修复 - 部署上线
：Coze 一键部署
🎉 最终成果
-
✅ 9 种排版风格，覆盖多种场景 -
✅ 实时预览，所见即所得 -
✅ 一键复制，公众号完美兼容 -
✅ 可拖拽布局，自由调整比例 -
✅ 同步滚动，编辑预览联动 -
✅ 专业 UI，Design Token 系统
💭 经验总结
- Coze 很强大
：不仅能做简单的网页，也能做功能完善的工具 - 设计要有系统
：不要随手写样式，建立 Design Token - 参考优秀案例
：看到好的设计，分析它为什么好 - 细节决定体验
：分隔条、滚动条、图标，每个细节都值得打磨 - 多测试多迭代
：发现问题就改，不要怕麻烦
🔗 访问地址
如果你想体验这个工具，可以访问：
https://c11f1308-7ad9-4d56-92a6-008cb640dde5.dev.coze.site
希望这篇文章对你有帮助！如果你也在用 Coze 做项目，欢迎交流～
觉得有用的话，点个「在看」吧！ 👇
对了，这篇文章也是用我开发的排版神器进行排版的，大家觉得效果怎么样？
