前言
上回把文章的增删改查、前后端联调都跑通了,基础架子算是搭好了。
但距离成为真正的助手还差很多。
比如,内容创作者经常需要把写完的文章粘贴到公众号、知乎、小红书、掘金等平台,但粘贴完的文章没法直接发布,每次都还需要手动调整样式,烦不胜烦。
所以本次实战的目标很明确:
将写好的文章,一键复制,带样式粘贴,轻松搞定发布前的工作。
同时,为了体验前几天火热的 Kimi-K2
模型,今天所有过程将会使用其作为主力模型。
项目介绍
为了方便新读者理解,简单回顾下实战的项目情况。
现有的文章写作工具都有些不太满意,再加上 AI 辅助写一个小工具比较简单,就想自己搭建一套写作助手。
- 实现基本的写作管理。
- 方便输出为各平台样式。
- 支持定义各种 AI 快捷操作。
本次分享主要实现核心功能------"输出为各平台样式"。
本次实战案例以往文章:
实战记录
整个实操环境:TRAE IDE
+ KImi-K2
。
主要包括以下步骤:
- 初版生成
- 复制效果修复
- 切换样式及自定义
初版生成
指令
diff
工作台界面最右侧增加右边栏,右边栏垂直排列多个图标,分别是AI、公众号、知乎、设置,并保持样式与现有样式统一。
- AI:点击后向左展开"AI"面板,再次点击收起面板。
- 公众号:点击后复制渲染后的html,方便直接带样式粘贴到公众号编辑器中。
- 知乎:点击后复制渲染后的html,方便直接带样式粘贴到知乎编辑器中。
- 设置:点击向左展开"设置"面板,再次点击收起面板,内容是普通表单,实现系统设置效果。
指令写的比较细,因为对于 UI 类型的任务,指令越清晰,AI 越不容易发散。
并且,强烈建议保证结构上的条理性,比如,4 个图标入口,就分为了 4 条子项说明。
打好地基才能盖高楼,初版结果越好,后续的调整和完善就越少嘛。
过程
AI 在这个阶段主要就是理解指令目标、了解工作环境、封装组件。

然后在执行过程中如果碰到问题,也会自行修复。

任务完成后,Trae 会自动进行应用启动,因此,发送指令前记得关闭前端应用。
结果
截图是在除了最终效果后截的,有 5 个图标,实操到这一步时,应该是只有 4 个的。

整体的 UI 效果也比较符合我的预期。
复制效果修复
测试复制粘贴效果时,发现粘贴到公众号编辑器中的居然都是 HTML 代码。

不过没关系,简单描述,交给 Trae 即可。
指令
粘贴到公众号编辑器中都是代码,应该是带有样式的文本
过程
分析指令进行修复,并在修复过程中,自动进行优化出来。

结果
修复完成后,我们再次点击"复制到公众号"。

可以看到,文本及样式已经正常显示了,效果如下:

切换样式及自定义
至此,单纯"输出为各平台样式"的功能其实已经可以了。
但是,目前的一套样式可不够,我们文章效果想要好看,必然要进行不同平台的定制适配。
下面,我们就来实现"样式切换及自定义"功能的开发。
指令
在右边栏增加一个"样式"图标入口,在设置图标上面。
点击该图标,打开样式面板。
面板顶部是样式下拉选择,并实现下拉选择不同样式时,文章渲染效果更改。
样式下拉选择下面是该样式文件的文本域,可以直接修改样式,并在点击保存按钮后实现实时样式修改。
这里有个小地方提醒下,指定"样式"图标的位置时,没有写"第x个",而是选择了"在设置图标上面"(上下文中某个已经理解的元素)",这样,AI 会理解更加到位。
过程
先是根据指令,分解、规划任务。

然后实现界面代码,并增加交互效果,最后还自行发现一个语法错误并修复。

结果
生成结果如下。

由于右边栏宽度有限,标签和控件横向布局不太合适,我们稍微优化下。
样式面板中样式选择和样式代码等标签改为上下结构

是不是很简单?
接下来,我们看看最终效果。
最终效果
普通写作

复制粘贴效果

更改样式

结语
今天,主要通过 Trae
+ Kimi-K2
实现了"写作助手"带样式复制到各平台的功能。
从打开 Trae 到实现最终效果,差不多是 2 个小时,其中还包括第一次 Claude 4 的失败尝试。
尤其是第一次使用 Kimi-K2
完成实战任务,整体体验非常不错。不论是指令识别、上下文分析、任务规划与执行,确实当得上最近的热度。
该实战案例接下来的计划:
- 上传图片
- AI 快捷指令
大家感兴趣的话,欢迎持续关注,后续我会带来更多提效的方法和经验。