AI编程实战:写作助手进化,Trae+Kimi-K2两小时搞定“带样式复制”

前言

上回把文章的增删改查、前后端联调都跑通了,基础架子算是搭好了。

但距离成为真正的助手还差很多。

比如,内容创作者经常需要把写完的文章粘贴到公众号、知乎、小红书、掘金等平台,但粘贴完的文章没法直接发布,每次都还需要手动调整样式,烦不胜烦。

所以本次实战的目标很明确:

将写好的文章,一键复制,带样式粘贴,轻松搞定发布前的工作。

同时,为了体验前几天火热的 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 快捷指令

大家感兴趣的话,欢迎持续关注,后续我会带来更多提效的方法和经验。

相关推荐
2zcode1 小时前
基于Matlab的深度学习智能行人检测与统计系统
人工智能·深度学习·目标跟踪
weixin_464078071 小时前
机器学习sklearn:过滤
人工智能·机器学习·sklearn
weixin_464078071 小时前
机器学习sklearn:降维
人工智能·机器学习·sklearn
数据与人工智能律师2 小时前
智能合约漏洞导致的损失,法律责任应如何分配
大数据·网络·人工智能·算法·区块链
张艾拉 Fun AI Everyday2 小时前
小宿科技:AI Agent 的卖铲人
人工智能·aigc·创业创新·ai-native
zhongqu_3dnest2 小时前
三维火灾调查重建:科技赋能,探寻真相
人工智能
木枷2 小时前
c2rust使用
人工智能·物联网·edge
Nayuta2 小时前
【论文导读】OS-Genesis 基于自动探索构建 GUI 数据
人工智能·机器学习
豆包MarsCode3 小时前
奖品激励+官方认证!TRAE最佳实践征文大赛来了
trae