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 快捷指令

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

相关推荐
NAGNIP6 小时前
一文搞懂深度学习中的通用逼近定理!
人工智能·算法·面试
冬奇Lab7 小时前
一天一个开源项目(第36篇):EverMemOS - 跨 LLM 与平台的长时记忆 OS,让 Agent 会记忆更会推理
人工智能·开源·资讯
冬奇Lab7 小时前
OpenClaw 源码深度解析(一):Gateway——为什么需要一个"中枢"
人工智能·开源·源码阅读
AngelPP11 小时前
OpenClaw 架构深度解析:如何把 AI 助手搬到你的个人设备上
人工智能
宅小年11 小时前
Claude Code 换成了Kimi K2.5后,我再也回不去了
人工智能·ai编程·claude
九狼11 小时前
Flutter URL Scheme 跨平台跳转
人工智能·flutter·github
ZFSS11 小时前
Kimi Chat Completion API 申请及使用
前端·人工智能
天翼云开发者社区12 小时前
春节复工福利就位!天翼云息壤2500万Tokens免费送,全品类大模型一键畅玩!
人工智能·算力服务·息壤
知识浅谈12 小时前
教你如何用 Gemini 将课本图片一键转为精美 PPT
人工智能
豆包MarsCode13 小时前
一文快速理解 Spec 模式
trae