Coderick AI 上线可视化编辑与 AI 生图：小改不花 Credit，大改更精准

更新要点

SiteGround 旗下 AI 建站/Vibe Coding 产品 Coderick AI 上线两项重要功能：

1. Visual Edit：在预览界面里直接点选元素修改，不用回到聊天框写 prompt，不消耗 Credit。
2. AI 图像生成：在预览里点任意图片，直接调用 AI 生成替换，不用离开项目、不用手动上传。
3. Edit with AI（定向改写）：选中一个 section 或元素再让 AI 改写，只动那一块，其他部分不变。

面向的场景：项目已经成型，改一个错别字、换一个按钮颜色、调一张图——这些微调不值得每次都写一整段 prompt 再烧一遍 Credit。

为什么这个更新重要

用过 AI 建站工具的都知道，最初的"一句话生成一个网站"体验很惊艳，但真正耗时间的是后续微调：

• 标题里有个错字，重新描述一遍上下文再让 AI 改。
• 按钮颜色跟品牌色不搭，写 prompt 让它换，结果 AI 顺手把整个 section 都重排了。
• 想加一张配图，得离开项目去别处生图，再下载再上传。

Coderick AI 这次的更新，把"生成"与"编辑"这两个动作拆开：生成用聊天，编辑用可视化。日常微调走 Visual Edit（零 Credit）；确实需要 AI 帮忙的，走 Edit with AI（只动选中的部分）。

三大功能细看

1. Visual Edit：所见即所得，零 Credit

打开 Coderick AI 项目 → 切换到 Visual Edit 模式 → 在预览里直接点击任何文本、按钮、图片、链接、section 就能改。

具体能做什么：

• 改标题、改副标题、修错别字。
• 换按钮文案、换链接地址。
• 调整颜色、间距、字体大小（跟随站点主题变量）。
• 替换图片：可以直接上传本地图，上传替换本身也不消耗 Credit。

改完点 Save 保留，点 Exit 放弃。整个过程不进聊天框、不写 prompt、不烧 Credit。

2. AI 图像生成：在项目里就地生图

以前要给 Coderick AI 项目加一张配图，流程是：离开 Coderick → 找图或去 Midjourney/DALL·E 生成 → 下载 → 回到 Coderick → 上传。上下文一路丢失，节奏也被打断。

现在：

• 在预览里点任何一张图片。
• 选择"AI 生图"，输入描述。
• 生成的图片直接出现在原来的位置，能立刻在页面语境里判断合不合适。
• 不满意可以再生成一次，或者直接换成本地上传的图。

对做落地页、小项目的人来说，少一次工具切换就是少一次分心。

3. Edit with AI：定向改写一个 section

介于"手动改一个字"和"让 AI 重做整站"之间的场景，比如：

• 定价区块想换一种排版思路。
• 顶部导航想换个设计方向。
• 某个 section 的调性想改（更活泼 / 更商务）。

这类改动太大，手动改累；太小，犯不着让 AI 重跑整个项目。

操作方式：在 Visual Edit 里选中那个 section 或元素 → 点 Edit with AI → Coderick AI 聊天框会"锁定"到你选中的这一块 → 描述你要什么 → AI 只改这一块，其他地方原样不动。

官方定位区别：

• 主聊天框：全项目级操作，比如新增页面、结构性改动。
• Edit with AI：定向操作，只针对一个 section 或元素。
• 好处是 prompt 更短，副作用更少，结果更精准。

Credit 消耗规则

Coderick AI 的 Credit 消耗一直是用户关心的问题，这次更新让规则更清晰：

| 操作 | 是否消耗 Credit | |------|----------------| | Visual Edit 里改文字、换按钮、调颜色 | 否 | | Visual Edit 里上传本地图替换 | 否 | | Visual Edit 里用 AI 生图 | 是（走 AI 生成） | | Edit with AI 定向改写一个 section | 是（但只针对局部，比全项目 prompt 便宜） | | 主聊天框做全项目级修改 | 是（正常消耗） |

思路是"AI 用在真正需要 AI 的地方，其他都省下来"。

使用步骤

1. 打开 Coderick AI 里的任意项目。
2. 点击 Visual Edit 按钮，从聊天式构建切换到可视化编辑。
3. 点选预览里的任何元素——文本、按钮、图片、链接——直接改。
4. 想生成新图：点已有图片 → 选 AI 图像生成。
5. 想大改一个 section：选中它 → 点 Edit with AI → 描述你要什么。
6. 全部改完点 Save 保留，或 Exit 放弃。

谁最该关注这次更新

• 独立开发者/一人公司：项目多、每个都需要微调，Visual Edit 的零 Credit 直接省成本。
• 设计师/前端：习惯"看到什么改什么"的工作流，比在聊天框描述"把那个左上角的按钮"要自然得多。
• 小团队：非技术同事也能改文案、换图，不用每次都来找工程师重跑 prompt。
• Vibe Coding 玩家：Coderick AI 本来就是 SiteGround 主打的 Vibe Coding 产品，这次更新把"从想法到上线"的后半段（微调）也拉进 AI 工作流。

火箭云的看法

Coderick AI 是 SiteGround 在 AI 建站赛道的主打产品，跟 Wix ADI、Framer AI、v0 是一个赛道的。它的差异化优势是跟 SiteGround 主机深度绑定——生成的项目直接跑在 SiteGround 上，不用另找托管。

这次 Visual Edit 更新看起来是"小功能"，但方向对了：AI 建站的下一波竞争不在"能不能一句话生成一个站"，而在"生成之后能不能舒服地改"。零 Credit 微调 + 定向 AI 改写，本质上是把 AI 从"每次都要请出来"变成"该出手时才出手"。

对中文用户来说，Coderick AI 目前主要面向英文场景，AI 生图对中文文字渲染仍然一般。但如果你的项目是英文出海站、SaaS 落地页、个人作品集，值得试一下——14 天免费试用期够做完一个项目再决定要不要续费。

原文来自 SiteGround 官方博客，作者 Dimitar Ganev（AI 产品方向专家）。火箭云仅做要点整理与中文本地化，功能细节以 Coderick AI 官方文档为准。