Cline编程实战：LLM工作流分享

近几个月，我开始着手改造一个业余项目——bot.eofferte.eu 的 UI/UX。这是一个 SaaS 平台，可以自动完成 Telegram 上的 Amazon 联盟营销，并简化 Amazon Associates 的接入流程。

项目架构很简单：后端使用 Go 和 labstack/echo 框架，UI 则通过 Go 标准库中的 html/template package 完成渲染。为了加快开发速度并改善整体用户体验，我尝试将 Cline 的 VSCode plugin 作为主要的 AI 编程助手。下面是我的详细使用体验。

前端开发实验

作为一名主要专注于后端开发的程序员，UI/UX 一直是我的短板。由于我对现代 Web 框架了解有限，并且普遍不喜欢写 CSS，前端开发对我来说尤其令人头疼。不过，借助 AI 工具，我把这个弱项变成了一个快速提升的机会。

效果立竿见影，而且非常显著。我让 LLM 重新设计了网站的每一个页面：

• Landing Page 得到了彻底改造
• 管理界面，也就是用户配置服务的地方，获得了大幅升级
• 整体设计从基础水准提升到了专业级别

除了视觉层面的改进，LLM 在生成和完善隐私政策、服务条款及其他必要的合规文档方面也展现出了极高的价值。

我尝试了两个主流模型：

• Claude Sonnet 3.5：

  • 性能：响应速度极快
  • 准确性：对 Web 技术（HTML、CSS、JavaScript）理解深入
  • 有效性：能够智能推荐 Font Awesome、Bootstrap 等框架，同时改善美观度和功能性
  • 局限性：Context Window 的限制经常导致复杂任务被中断

• 性能：响应速度极快

• 准确性：对 Web 技术（HTML、CSS、JavaScript）理解深入

• 有效性：能够智能推荐 Font Awesome、Bootstrap 等框架，同时改善美观度和功能性

• 局限性：Context Window 的限制经常导致复杂任务被中断

• Gemini：

  • 性能：处理速度比 Sonnet 慢
  • 优势：更大的 Context Window，可以处理更全面的指令
  • 通用性：更适合需要分析大量上下文的任务

• 性能：处理速度比 Sonnet 慢

• 优势：更大的 Context Window，可以处理更全面的指令

• 通用性：更适合需要分析大量上下文的任务

AI 推荐合适框架并创建统一设计的能力带来了颠覆性的变化，尤其是对前端经验有限的人而言。

通过 Prompt Engineering 取得成功

Cline 可以分析已打开的文件并理解代码仓库的上下文，因此用起来非常直观。一个典型案例是重新设计我们的 bot 管理界面（bot.html）。

原来的设计要求用户在一次会话中填写一张很长的表单。为了改善用户体验，我决定使用 Enchanter.js 实现一个分步骤向导。这个集成过程凸显了精准进行 Prompt Engineering 的重要性：

analyze bot.html - it's a Go (golang) html template.

bot.html contains both html template code and JavaScript. Both are mixed with Go template syntax.

You need to rewrite bot.html using static/enchanter.js in order to convert the form in bot.html to a guided wizard.

Do not touch any JavaScript already present in bot.html and ignore every JavaScript error.

Your <form> tag should wrap the .nav and .tab-content elements. The footer of the form must contain "Back", "Next" and "Finish" buttons with the data-enchanter attributes.

这个 prompt 之所以成功，是因为它做到了以下几点：

• 建立上下文：清楚说明了技术栈和文件结构
• 界定范围：给出了具体的实现要求
• 设定边界：避免对 JavaScript 进行不必要的修改
• 明确需求：详细描述了实现向导所需的确切结构

后端开发心得

后端开发的经历揭示了 AI 辅助开发中的一个关键区别。项目的后端使用 Go，bot 组件则使用 Python，它们分别带来了不同的启示：

• 专业能力至关重要：

  • 具备扎实的领域知识时，AI 会成为强大的效率加速器
  • AI 提出的代码完善与优化建议尤其有价值
  • 重复性任务可以得到高效处理

• 具备扎实的领域知识时，AI 会成为强大的效率加速器

• AI 提出的代码完善与优化建议尤其有价值

• 重复性任务可以得到高效处理

• 非专业人士面临的陷阱：

  • 领域知识有限时，很容易接受 AI 给出的次优建议
  • 理解底层技术是与 AI 高效协作的关键
  • 代码审查能力对于质量保证仍然不可或缺

• 领域知识有限时，很容易接受 AI 给出的次优建议

• 理解底层技术是与 AI 高效协作的关键

• 代码审查能力对于质量保证仍然不可或缺

其中有一次，我在已经明确知道自己会如何实现某个函数的情况下，让 ChatGPT 帮我编写它。这一点非常重要，因为如果不知道预期结果是什么，也不理解每一行代码的作用，我最终可能会得到一个错误的实现。

我要求实现的是一个计算字符串相似度得分的简单函数。由于 bot 会通过 Amazon 上的关键词搜索来发布优惠信息，PA-API 很可能在一次请求中返回同一产品的多个版本，例如同一型号相机的蓝色版本和黑色版本。

通过一个非常精确、同时包含有效示例的 prompt，最终生成的函数与我设想中用于解决这个问题的实现非常接近。

I need a function that for similar strings returns me a similarity score.

The case that I need to address is, for example:

string A: "Canon EOS 2000D DSLR Camera and EF-S 18-55 mm f/3.5-5.6 IS II Lens - Black"
string B: "Canon EOS 2000D + EF-S 18-55mm III Lens - Easy-to-use DSLR Camera with a Versatile Lens, Ideal for Portraits and Landscapes"

Should return a similarity score higher, since they are referring to the same camera

from sklearn.feature_extraction.text import TfidfVectorizer
from sklearn.metrics.pairwise import cosine_similarity
import re

def compute_similarity(string_a: str, string_b: str) -> float:
    """
    Computes a similarity score between two strings based on their content.

    Args:
        string_a (str): The first string.
        string_b (str): The second string.

    Returns:
        float: A similarity score between 0 and 1, where higher indicates more similarity.
    """
    def preprocess(text):
        """
        Preprocess the input text: remove special characters, lowercase, and tokenize.
        """
        # Remove non-alphanumeric characters and lowercase
        return re.sub(r'\W+', ' ', text).lower()

    # Preprocess the input strings
    clean_a = preprocess(string_a)
    clean_b = preprocess(string_b)

    # Use TF-IDF to vectorize the strings
    vectorizer = TfidfVectorizer().fit([clean_a, clean_b])
    vectors = vectorizer.transform([clean_a, clean_b])

    # Compute cosine similarity
    similarity = cosine_similarity(vectors[0], vectors[1])
    return float(similarity[0][0])

生成代码只用了几秒钟，再加上一分钟阅读并确认函数是否完成了我的要求。生产力提升非常显著，因为如果由我亲自编写这个函数，至少要花费三到四倍的时间。

多语言内容生成

内容翻译是最令人印象深刻的应用之一。这项服务需要支持多个 Amazon Affiliate 地区：AU、BR、CA、EG、FR、DE、IN、IT、JP、MX、NL、PL、SG、SA、ES、SE、TR、AE、UK 和 US。

bot 的功能包括发布 Telegram 消息和生成文章（platinum plan），使用以 JSON 格式存储的消息模板。例如，US.json 中包含如下结构化消息：

"NOW_AVAILABLE_MESSAGE": "💰*{title}*💰\r\n\r\n Is now available at only 💣 *{new_price}{currency}* 💣\r\n\r\n ➡️ [Go to the offer]({url})"

只需要一个精心编写的 prompt，就能完成整个翻译过程：

Translate - if not already translated in the target language - all the JSON files in the defaults folder.

Translate only the text in the TELEGRAM section to the target language, keeping the markdown formatting, the JSON structure, the variables, the emojis, and the line breaks.

The target language is identified by the two-letter code in the filename. For example, SE.json means Swedish, FR.json means French, etc.

Do not translate files already in the target language.

模型高效地处理了每一个文件：

• 根据文件名中的代码识别目标语言
• 保留技术元素，包括 markdown、变量和格式
• 确保不同翻译之间的一致性
• 跳过已经完成翻译的内容

例如，模型正确生成了阿拉伯语译文，同时保留了格式、变量和 emoji：

"NOW_AVAILABLE_MESSAGE": "💰*{title}*💰\r\n\r\nمتوفر الآن بسعر 💣 *{new_price}{currency}* 💣 فقط\r\n\r\n➡️ [اذهب إلى العرض]({url})"

挑战与注意事项

尽管整体体验非常积极，但过程中也出现了一些挑战：

• 上下文管理：Claude Sonnet 3.5 的 Context Window 限制要求谨慎拆分任务
• 性能取舍：需要在速度（Sonnet）与容量（Gemini）之间取得平衡
• 专业能力要求：后端开发凸显了人类专业经验的重要性
• 质量保证：要维持代码标准，持续审查仍然必不可少

AI 辅助开发从根本上改变了我的编程方式。在前端任务中，Cline 配合 Claude Sonnet 3.5 等模型的价值不可估量，可以快速解决设计难题。在后端开发中，如果由经验丰富、能够有效验证和整合 AI 建议的开发者来引导，这些工具同样能发挥出色的作用。

成功的关键在于认识到：AI 工具是现有技能的强大放大器，而不是基础知识的替代品。它们擅长加快开发周期、改善设计并简化工作流，在超出个人核心专业领域的任务中尤其如此。

专用编程模型与通用 LLM 之间存在显著差异。虽然两者都有价值，但像 Claude Sonnet 3.5 这样针对开发任务优化的模型，可以在编程场景中提供更聚焦、更高效的辅助。