站内 AI 设计

安装 Halo AI Foundation 1.3.0 及以上版本后,设计工作室默认打开「AI」面板。用一句话描述想要的效果,AI 会修改当前设计,右侧立即刷新预览。

AI 遵循与 外部 AI(MCP) 相同的设计规范。保存、预览和启用都由工作室按钮完成,AI 不会自动保存或启用设计。

准备语言模型

先在 AI Foundation 中添加供应商和语言模型。打开工作室的 AI 面板,如果还没有可用模型,会看到提示。

AI 面板中未设置默认模型的提示和模型选择器
① 左侧「AI」面板;② 没有默认语言模型时的提示,可「前往设置」或「重新检测」;③ 也可以直接在输入框下方选择一个模型。点击图片放大

有两种做法,任选其一:

  • 在输入框下方的模型选择器中,为本次对话选择模型。浏览器会记住这次选择。
  • 在 AI Foundation 中设置默认语言模型,模型选择器保持「默认模型」即可。
AI Foundation 默认模型设置页
① 打开左侧「AI Foundation」;② 切换到「默认模型」;③ 在「默认语言模型」中选择模型;④ 点击「保存」。点击图片放大

描述想要的效果

回到工作室的 AI 面板,在欢迎页点选一个灵感,或直接输入需求。

AI 面板欢迎页,标注灵感按钮、输入框、模型选择器、允许 JS 和发送按钮
① 点击灵感按钮,会把示例需求填入输入框;② 输入或修改需求;③ 选择模型;④ 需要 AI 编写 JavaScript 时勾选「允许 JS」;⑤ 发送。点击图片放大

按 Enter 发送,Shift + Enter 换行。描述越具体,结果越接近预期,例如风格、主色、布局、背景动效和需要突出的文案。

等待生成

AI 正在生成设计,显示已用时间和停止按钮
① 生成中会显示已用时间;② 不想等待时点击停止按钮。点击图片放大

生成时间取决于模型响应速度。停止后当前设计保持不变。

检查结果

AI 回复结果,标注说明、修改范围、撤销按钮、预览和保存按钮
① AI 对本次修改的说明;② 修改范围、模型和用量等信息;③ 「撤销这次修改」恢复到修改前;④ 右侧预览已更新;⑤ 满意后点击「保存」或「保存并启用」。点击图片放大

AI 只返回需要改动的字段,插件合并到当前设计。结果会先经过检查:发现会被过滤的内容,或文字对比度低于 4.5:1 时,插件会自动让模型修正一次。剩下的问题会在回复中列出,例如「1 处内容会被忽略」,点击可以展开查看。

继续追问

在同一对话中追问「主色再亮一点」及 AI 的回复
① 追问会带上之前的需求,例如「主色再亮一点」;② AI 在上一次结果的基础上继续修改,同样可以撤销。点击图片放大

追问只需要说明这次想改什么。也可以随时切换到外观、动效等面板手动微调,再回到 AI 继续对话。

记得保存

AI 的修改只存在于当前编辑中。离开工作室前点击「保存」或「保存并启用」,否则修改会丢失。

关于 JavaScript

默认情况下,AI 不会编写 JavaScript。勾选「允许 JS」后,AI 才能修改「代码 → JavaScript」。JavaScript 不会在预览中运行,保存并启用后才会在站点生效,建议启用前检查代码内容。

AI 可以设计了吗?

可逐项勾选核对,离开本页后不保留勾选。