外部 AI(MCP)

安装 Halo MCP Server 1.3.0 及以上版本后,登录工坊会在「工具 → MCP 服务」中提供「登录界面设计」分类下的工具。Claude Code、Codex 等客户端连接后,可以直接创建和修改登录设计。

不需要安装 Skill。AI 连接后会先调用「获取设计指南」,读取设计格式和工作流程:保存前检查并修正,给出预览链接,启用前先征得你的同意。

接入步骤

打开「外观 → 认证界面」,切换到「AI 设计」标签。页面按四个步骤引导,并实时显示每一步的状态。

认证界面的 AI 设计页,标注四个接入步骤
① 安装并启用 MCP Server;② 创建访问密钥并勾选工具;③ 「打开 MCP 服务」进入密钥管理;④ 在 AI 客户端中连接。点击图片放大

安装并启用 MCP Server

在应用市场或插件管理中安装 MCP Server,支持的版本为 >=1.3.0 & <2.0.0。启用后回到「AI 设计」页,第一步会显示已就绪。

创建访问密钥

点击「打开 MCP 服务」,在 MCP 服务页新建访问密钥。

创建 MCP 密钥对话框,标注名称和只读预设
① 填写便于识别的名称,例如「登录设计」;② 可用「只读」等预设快速勾选,先体验时建议只开放只读工具。点击图片放大

勾选登录工坊的工具

在对话框中向下滚动到「登录工坊」分组。

MCP 密钥的工具列表中,登录工坊分组下的登录界面设计工具
③ 勾选「登录界面设计」可一次选中全部 9 个工具,也可以逐个勾选;④ 点击「创建」。点击图片放大
工具名称类型
获取设计指南auth-ui__get_design_guide只读
列出登录设计auth-ui__list_designs只读
获取登录设计auth-ui__get_design只读
检查登录设计auth-ui__lint_design只读
预览登录设计auth-ui__preview_design只读
创建登录设计auth-ui__create_design写入
更新登录设计auth-ui__update_design写入
启用登录设计auth-ui__activate_design写入
删除登录设计auth-ui__delete_design破坏性

新工具不会自动加入已有密钥。升级插件后如果工具有变化,需要回到这里重新勾选。

密钥只显示一次

创建后立即复制并妥善保存。不要把密钥写进配置文件、截图或提交到代码仓库;泄露后请在 MCP 服务中删除并重新创建。

在 AI 客户端中连接

回到「AI 设计」页的第三步,按页面给出的配置连接客户端。

客户端配置步骤,标注环境变量、客户端切换、复制按钮和第四步
① 先在终端中把密钥设为环境变量 HALO_MCP_TOKEN;② 切换 Claude Code 或 Codex;③ 复制配置;④ 连接后直接告诉 AI 你想要的登录页。点击图片放大
客户端配置位置说明
Claude Code项目根目录的 .mcp.json通过 Authorization: Bearer 读取环境变量
Codex~/.codex/config.toml通过 bearer_token_env_var 读取环境变量
其他客户端按客户端文档填写MCP 地址为站点的 /mcp,使用 Bearer 密钥

生产环境请使用 HTTPS 地址。

告诉 AI 你想要的登录页

连接成功后,用自然语言描述需求即可。页面右侧的「试试这样说」提供了示例,例如:

  • 给我的博客设计一个深色赛博朋克风格的登录页,左边放品牌介绍,背景要有极光动效,先给我预览链接。
  • 参考现在启用的登录设计,做一个更简洁的浅色版本,表单逐项浮现,不要直接启用。
  • 把当前登录页的主色改成 #e11d48,其他保持不变。
  • 检查所有登录设计里有没有会被过滤掉的 HTML 或无效颜色,并帮我修好。

AI 创建的设计会出现在「登录设计」列表中,可以继续在 设计工作室 中手动编辑。启用设计会立即改变所有访客看到的登录页,建议先打开 AI 给出的预览链接确认。

离线或自定义流程

「AI 设计」页第四步提供「下载 SKILL.md」。需要离线使用,或想按自己的流程约束 AI 时,可以把它放到客户端的 Skill 目录中。

外部 AI 可以设计了吗?

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