用Cline自动化创建简单网页的3个步骤【新手入门】
機械翻訳 / Machine-translated
A
AI Friends
4日前・5分で読める
機械翻訳 / Machine-translated
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
本文要点
Cline是一款运行在VSCode（代码编辑器）中的开源AI编程代理。与普通的代码补全工具不同，当你指示它"帮我做一个联系页面"时，它会自动创建HTML文件、用CSS完成设计，并进行运行验证。截至2026年8月，Cline的安装量已突破500万次，在GitHub上获得了超过6万颗星，是一款极受欢迎的工具。新手无需编写一行代码即可完成网页制作，是迈出编程学习第一步的理想选择。只需支付API费用（每月约5至50美元），无需昂贵的订阅套餐。
首先，在电脑上安装VSCode。可从官方网站免费下载。接着，在VSCode的扩展程序市场中搜索"Cline"并点击安装按钮。安装完成后，左侧边栏会出现一个新图标。
接下来，准备AI模型的API密钥（类似于认证用的钥匙）。由于Cline本身不自带AI，需要与Anthropic的Claude、OpenAI的ChatGPT、Google的Gemini等AI服务进行连接。推荐新手使用Claude（每月约20美元即可充分使用）。在Anthropic官方网站注册账号并获取API密钥后，将其粘贴到Cline的设置界面即可。至此，准备工作完成。
打开Cline的侧边栏，会显示一个类似聊天界面的输入框。在此用中文输入指令，例如"请帮我制作一个简单的自我介绍页面，包含标题、个人简介和社交媒体链接"，然后按回车键。
随后，Cline会自动制定工作计划，并询问"将创建index.html和style.css，是否继续？"。2026年版Cline新增了"Plan/Act模式"功能，在执行前会告知你将要进行的操作，让你放心确认。点击"OK"后，文件会被实际创建，代码写入的过程会实时显示。几秒到几十秒内即可完成，随后会询问"是否在预览中查看？"。
右键单击Cline创建的HTML文件，选择"Open with Live Server"（需要额外安装该扩展），即可在浏览器中打开实际页面。标题、个人简介和社交媒体链接应该会整齐排列显示。
如果有需要修改的地方，例如"想把字体颜色改成蓝色"或"想添加图片"，只需在Cline的聊天框中输入"将标题颜色改为蓝色"即可。Cline会自动编辑CSS文件。如此反复对话，便可将页面打磨成理想的样子。完成后，将HTML文件上传至服务器即可发布。即使是新手，也能在30分钟内完成第一个网页。
最常见的失败案例是API密钥输入错误。出现报错信息时，请在设置界面确认是否混入了多余的空格或换行符。此外，指令过于模糊也会导致结果偏离预期。与其说"帮我做一个漂亮的页面"，不如具体描述为"白色背景、黑色文字、居中对齐的简洁页面"，这是关键技巧。
另一个踩坑点是API使用费用的意外增加。在大型项目中反复修改会导致费用累积，因此建议最初从小任务练习，熟练后再挑战复杂工作。养成在Anthropic管理后台频繁查看使用量的习惯，会让你更安心。如果遇到报错而中断，可以查看Cline的聊天记录，确认在哪个阶段出现了问题，然后指示"请修复刚才的错误"，大多数情况下它会自动修正。
熟悉基本操作后，可以尝试更高级的用法。例如，指示"在这个页面上添加联系表单，并实现将输入内容通过邮件发送的功能"，Cline会同时编写前端和后端的代码。即使没有JavaScript或PHP的知识，也能完成一个可运行的表单。
此外，Cline也可用于改进现有代码。将旧的HTML文件导入Cline，并要求"将这段代码重写为现代响应式设计"，它会自动将其转换为支持手机端的最新代码。进一步地，如果指示"同时生成测试代码"，它还会生成用于质量检查的代码，足以应对实际工作级别的开发需求。在团队开发中，使用Cline的团队版套餐（每用户每月20美元，前10个席位免费），多人可共享相同配置，十分便利。
本文转载自 AI Friends。
