Gemini CLI做UI：生成可编辑知识库首页

用 Gemini CLI 做知识库 UI，可以把搜索、分类和结果状态直接生成为可编辑设计稿。连接 Pixso 远程 MCP 后，先明确用户怎样找答案，再沿用团队组件创建首页，补齐搜索有结果、无匹配和失败后的下一步。设计师可以继续改文字、调布局和评审；真实搜索接口与网页部署留到后续开发。

下面以一个产品知识库首页为例：用户既能输入问题，也能按主题查找教程。Pixso MCP把设计文件交给 Gemini CLI 读取和编辑，设计师负责决定信息主次、检查搜索状态，并把初稿收敛成团队能维护的界面。

知识库首页先解决“找得到”

一句“生成一个简洁的知识库首页”，通常只能得到搜索框和几排卡片。真正决定首页是否好用的是：用户知道自己要找什么，还是只知道大致方向；搜索失败之后，页面还能不能帮他继续找。

这次练习把两类入口放在不同位置。知道问题的用户先用搜索，例如“如何导出图片”；不知道功能名称的用户浏览“快速开始、设计与编辑、团队协作、开发与集成”四个主题。最近更新放在后面，用来帮助回访用户发现变化，不抢占第一次访问的主入口。

先准备几条长度接近正式内容的标题，例如“从其他工具迁入项目后，如何检查字体与图片”。如果初稿只有四五个字的短标题，换成真实内容时，卡片和列表很容易被撑乱。这里不需要准备全部文档，但至少要有一条长标题、一条较长说明和一个没有更新内容的分类。

Gemini CLI连接Pixso远程MCP

本教程使用 Google 的 Gemini CLI。它与 Gemini 网页中的 Canvas、第三方 Gemini Design MCP 是不同入口；这里连接的设计服务是 Pixso。已经能正常使用 Gemini CLI 后，在练习目录添加远程服务：

gemini mcp add --transport http --scope project pixso https://pixso.cn/mcp
gemini mcp list
gemini

进入 Gemini CLI 后，按认证提示完成 Pixso 授权。需要主动发起授权时输入：

/mcp auth pixso
/mcp

手动配置时，把下面的服务项合并到项目的 .gemini/settings.json，保留文件中已有设置。Gemini CLI的Streamable HTTP地址使用httpUrl；其 url 字段用于 SSE，不要照搬其他客户端的字段。

{
  "mcpServers": {
    "pixso": {
      "httpUrl": "https://pixso.cn/mcp",
      "trust": false
    }
  }
}

Google 登录用于使用模型，Pixso OAuth 用于访问设计文件，两者分别授权。Pixso MCP 需要全功能席位或研发席位；这次要创建和修改图层，目标文件还需要可编辑权限。公网服务使用上面的地址，私有化环境使用所属企业的服务地址。完整连接说明见Pixso远程MCP配置指南，字段和命令可查Gemini CLI的MCP配置文档。

在 Pixso 准备一个专用工作区域，复制目标图层链接交给 Gemini。远程连接通过链接定位云端对象，不依赖你电脑上恰好选中了什么。先让它读取目标并返回名称，再开始写入；如果读到的不是知识库工作区域，应先修正链接。

让Gemini先读组件和样式

已有产品要增加知识库时，最重要的约束往往已经在设计系统里：正文颜色、标题层级、输入框高度、焦点样式和卡片圆角。让模型重新发明一套，初稿可能很好看，放回产品却像另一个品牌。

先给一轮只读任务，让 Gemini 找出能够沿用的资源。Pixso MCP 提供组件、样式和变量读取能力，Agent 可以据此了解真实对象，而不是从一张截图猜颜色和字号。

读取这个Pixso目标区域和相关设计资源，暂不修改画布。找出可用于知识库首页的输入框、按钮、主题卡片、文字样式和颜色变量。把已找到的对象与缺少的对象分别列出；没有对应组件时说明需要新建，不要声称已经复用了不存在的组件。根据“搜索优先、分类辅助、更新在后”的任务顺序，给出首页结构。

读完后，可以比较两个有实质差别的方案：一个把搜索作为首屏中心，下面接分类；另一个把分类目录放左侧，搜索和文章列表放右侧。对于第一次访问、尚不熟悉文档结构的用户，本例采用前者，减少初次进入就需要理解的目录层级。若知识库已经有大量熟悉分类的内部用户，持续可见的左侧目录则更有价值。

这一步的结果应当能说清“为什么这样安排”。“更现代、更高级”不能回答搜索框为什么比最近更新更靠前，也无法指导下一轮改稿。

把布局方案变成可编辑对象

新版 Pixso 远程 MCP 支持通过 apply_design 创建和调整图层。任务描述要写清目标工作区域、页面结构与保留范围；具体调用参数由 Agent 依据当前工具定义组织，不必把整页设计手工写成一段接口 JSON。

在指定工作区域中新建“知识库-首页”画板，保留原有页面。首页面向第一次使用产品的人，顺序为搜索、四个主题分类、常用任务、最近更新。沿用刚才读到的文字和颜色规范；搜索输入框、主题名称、说明文字和文章标题保持可编辑。四个主题为快速开始、设计与编辑、团队协作、开发与集成。不要添加无依据的阅读量、评分和“最热门”标签。先完成桌面布局，完成后返回新画板链接并截图。

检查结果时，先在图层列表里确认搜索区、分类区和更新区是独立区域，再选中一个标题修改文字。若只能移动一整张图片，得到的还不是这次需要的可编辑稿。卡片中的图标也应能与文字分别调整，不要用一张带字图片替代整张卡片。

可编辑并不等于结构已经合理。四个分类如果外观相同却各自有不同的间距，后续会越来越难维护。可以让 Gemini 继续读取相关节点，统一卡片内部的标题、说明、入口位置；已有组件可用时再建立对应关系，没有组件时先把重复结构整理一致，不要仅通过重命名就声称完成了组件化。

桌面稿确定后，再补手机布局。搜索保留在前，主题分类改为适合窄屏的排列，最近更新按列表展示。手机端应该减少同屏并列的信息，而不是把所有文字和卡片等比例缩小。实际文案换行后，按钮与卡片仍要有明确可点击的范围。

补齐搜索前后的页面状态

知识库最容易漏掉的不是首页，而是用户已经输入问题之后的页面。把搜索有结果、无匹配和加载失败画在同一工作区域，团队才能讨论清楚下一步行为，而不是把所有情况都画成空白。

例如搜索“导出”时，等待期间保留输入并显示正在查询；结果返回后可以展示“导出图片”和“导出资源的格式选择”。搜索一个没有匹配内容的词时，页面应保留这个词并给出清除入口。加载失败则使用“暂时无法加载搜索结果，请重试”，避免让读者误以为知识库没有相关答案。

可以这样补稿：

在首页旁边补三张搜索状态画板：有结果、无匹配、加载失败。三张稿沿用同一搜索框和内容宽度，关键词始终保留。无匹配提供清除关键词和主题入口；加载失败提供重试，不展示“0条结果”。文章标题与摘要长度使用刚才准备的内容。不要把这些状态覆盖到首页上。

设计稿说明的是界面与交互约定，并没有因此接入真实检索服务。进入开发时，还要把搜索字段、结果排序、分页与访问权限交给工程实现；设计师此时已经把错误和空结果的区别交代清楚。

改第二版时，指出对象和问题

“再精致一点”会让模型同时改颜色、间距和内容，刚确认的结构容易被打散。更有效的反馈包含三个信息：改哪个区域、当前哪里不好用、改后应该怎样。保留范围也要明确。

只调整“知识库-首页”的分类区。第二张卡片说明较长，导致四张卡片入口不齐；保持标题字号不变，让说明区容纳三行文字，并把入口放到一致位置。保留搜索区、最近更新与现有颜色。修改后截取分类区，并检查是否存在文字溢出。

截图可以比较视觉结果，check_layout 可以帮助发现对齐和嵌套问题。二者配合使用：若某张卡片在截图中看起来偏高，先查其容器和间距，别直接把整张卡片压缩；若结构检查没有报错，也要继续阅读长标题和说明，工具无法替你判断文章名称是否容易理解。

如果请求超时，先回到目标画板查看是否已经创建内容。重复发送“新建首页”可能产生两套画板。已有结果时继续针对节点修改，只有确认没有生成结果，才重新执行创建。若提示权限不足，检查文件编辑权限和席位；调整配色提示词解决不了权限问题。

怎样判断这份设计能交给团队

交付前，从读者、设计和后续实现三个角度走一遍。读者能否第一眼找到搜索，搜索失败后有没有继续查找的入口；设计对象能否分别修改，分类卡片与结果列表是否沿用同一套文字和颜色规则；开发是否能从状态稿判断加载失败、无结果和正常结果的区别。

• 换入一条长标题，检查卡片和结果列表，不用缩小字体掩盖容纳问题。
• 查看桌面与手机稿，确认主任务顺序一致，窄屏没有被侧栏和装饰挤占。
• 核对画板名称和版本，让团队能区分首页、搜索结果与失败状态。
• 保留确认后的组件、样式和关键交互说明，避免下一轮生成重新发明一套。

接下来可以直接在 Pixso 中调整图层、组织组件、邀请同事评审。需要把设计做成网页时，再阅读把Pixso设计稿接进现有前端项目的方法。Gemini负责把需求推进为设计对象，设计师的价值在于让这些对象构成清楚、完整、可维护的使用体验。