写轮眼觉醒!我不需要懂设计,因为OpenClaw可以帮我完美复刻

5 分钟，我让 AI 把一篇公众号”扒”成了自己的主题

昨天写了一篇关于AI Agent如何选择的文章AI Agent 选购指南：从编程小白到极客大神的决策地图，细心的朋友可能会注意到该文章的排版UI跟之前有了很大不同。

今天就趁热打铁，聊一聊我是如何用AI帮我改变微信公众号UI设计的。

说起来，我之前也写过一篇微信公众号自动排版发布的文章公众号排版太丑？OpenClaw+Obsidian搞定自动排版+发布，今天提到的软件插件如何安装均在该文章中有介绍，有兴趣的可以去看一下，以下不再赘述。

在我之前的文章里，我也介绍过了，这个插件中的文章模板是可以做个性化的。但是做个性化有个痛点：需要自己修改CSS文件，对于代码一窍不通的我来说，这无疑是个巨大挑战。

于是我在后来的文章中都是套用这个插件提供的默认模板，其实效果也不错。

直到有一天，我刷到一篇讲 OpenClaw 6.1 的公众号文章，文章内容倒是没啥稀奇，但是里面的排版跟UI样式我还蛮喜欢。特别是那个加粗字体的红紫渐变，还真是蛮漂亮。

我的第一想法是：这个模板要是能直接套用到我的文章里就好了！

只是这个模板搞不好是什么微信排版平台里的模板，免费收费还不确定，我也懒得去找。

这时我脑袋里冒出一个大胆的想法：

我的OpenClaw的大模型是有多模态功能的，能否直接识别文章中的图片并复刻这些UI设计到我自己的模板上？

动手：让 AI 觉醒”写轮眼”

这种UI复刻，如果要人工做，恐怕要自己打开 Chrome 开发者工具，一个元素一个元素地翻 style 属性，抄 CSS，再翻译成 mp-publisher 自定义主题的语法。整个过程没个把小时下不来。

但现在不一样了。我直接把这篇文章丢给OpenClaw（冈格博士），让他自己分析这个效果是怎么实现的。不到 1 分钟，他就给我吐回来 4 类效果的 CSS 蓝图：

元素	渐变方式	关键属性
加粗	`background-clip: text` 把渐变当文字蒙版	`linear-gradient(135deg, #4158D0, #C850C0)`
引用块	4px 顶边 + 16px 圆角 + 紫阴影	`border-color: #C850C0`
inline code	浅蓝底 + 蓝字 + 6px 圆角	`bg: #f0f2ff` / `color: #4158D0`
分隔线 hr	`transparent → 紫 → transparent` 渐隐	`height: 2px` / `width: 60%`
章节标题 h2	渐变胶囊 `20px 20px 20px 4px` 不对称圆角	`background: linear-gradient(90deg, 蓝, 紫)`

更有趣的是：他还给我罗列了多种色彩配比推荐：如果想更骚气，可以试玫红 → 紫红/落日橙粉/极光紫青。

既然你都这样说了，那就改一个我看看预览了一下，加粗后字体完美复刻了该公众号文章中的设计。

能改好一个就能改无数个

于是，我让他继续生成别的配色方案，我来挑选看有没有喜欢的。五分钟时间，他一口气生成了7种方案。我逐一看过去，删除了其中3种不好看的，保留了4种看上去还顺眼的。

主题	渐变方向	笔记框顶边	code 标签色
Gradient	蓝 → 紫	`#C850C0`	`#4158D0`
Gradient4	紫 → 桃红	`#FF0080`	`#FF0080`
Gradient5	深红 → 金	`#F5AF19`	`#870000`
Gradient6	青 → 薄荷	`#00C9FF`	`#00C9FF`