> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 界面设计师

> 在 WorkBuddy 安装 superun 界面设计师「苏小匠」，基于现有代码、页面链接或设计素材创建和美化网页界面。

## 1. 概述

界面设计师「苏小匠」专注页面创建和视觉美化，可依据现有代码、页面链接、截图、设计稿、品牌素材、参考图或 HTML 调整布局与风格。在 WorkBuddy 应用市场中显示为「superun 界面设计师」。

## 2. 安装

### 方式一：从 WorkBuddy 应用市场使用（推荐）

1. 打开 WorkBuddy 左侧「专家·技能·连接器」，进入顶部「专家」页面，并在下方选择「专家」。
2. 在右上角搜索框输入 `superun 界面`，找到「superun 界面设计师」。
3. 点击专家卡片查看介绍，再点击详情中的「召唤」。
4. 进入「新建任务」后，确认已选中「superun 界面设计师」。将预填示例替换为自己的页面设计需求，按需选择工作空间，附上截图、代码或设计素材，然后发送。后续在同一个任务中查看预览、提出修改。

![WorkBuddy 应用市场中的 superun 界面设计师](https://mintcdn.com/uxarts-dc22e128/qBBfIJtGjUHB-zfG/images/workbuddy-market/design-expert.png?fit=max\&auto=format\&n=qBBfIJtGjUHB-zfG\&q=85\&s=1a262d9122f80731a3c23b5b88554671)

在 WorkBuddy 应用市场的「专家」中搜索 superun 界面

### 方式二：通过对话安装或更新

复制下面整段内容，发送给 WorkBuddy。安装和更新使用同一段指令。

```text theme={null}
请使用 WorkBuddy 内置 expert-manager，帮我安装或更新 superun 界面设计师「苏小匠」。

下载入口：https://www.superun.com/web-api/packages/superun-ui-expert/workbuddy/expert/download
版本信息：https://www.superun.com/web-api/packages/superun-ui-expert/workbuddy/expert/latest

1. 每次执行都重新请求版本信息，取得 revision、version.id、version.version、version.downloadUrl、version.sha256 和 version.size。以本次返回的 version.downloadUrl 下载安装包；使用固定下载入口时须跟随重定向。不要沿用历史对话中的 CDN 地址、旧 ZIP 或旧解压目录。
2. 核对下载文件的 SHA-256 和字节大小，再次查询版本信息。如 revision 或 version.id 已变化，重新获取最新包并校验；尚未上线、下载失败或校验不通过时停止并告诉我原因，保留现有专家。不能仅凭版本号相同就跳过更新。
3. 在新的临时目录解压，保留 workbuddy-expert 目录中的隐藏文件及完整内容。自动解析 WORKBUDDY_CONFIG_DIR，未设置时使用 ~/.workbuddy；目标目录为该配置目录下的 plugins/marketplaces/my-experts/plugins/superun-design-expert。先检查是否已安装：未安装时安装完整包；已安装时记录原版本，再用校验通过的完整新包替换，避免残留旧文件。不影响其他专家。
4. 使用 expert-manager 自带的 validate_expert.py 校验安装目录；通过后用 register_expert.py 注册，并关联当前真实 WorkBuddy 会话。安装失败时报告原因。
5. 安装或更新成功后，若当前配置目录下存在 plugins/cache/my-experts/superun-design-expert 旧缓存，仅清理该专家的缓存；没有缓存则跳过。回读安装内容，核对与本次安装包一致。
6. 告诉我本次是全新安装还是更新、安装后的版本、安装包的 SHA-256 和使用入口；更新时同时说明原版本，无法读取时如实说明。检查“专家·技能·连接器 → 专家 → 我的专家”中能否找到「苏小匠」对应的 superun 界面设计师；无法直接检查客户端时说明尚未验证，并提示我打开确认。需要重开会话或重启客户端时，只提示相应一步。
```

## 3. 使用说明

### 开始美化页面

在「苏小匠」新对话中描述页面、期望效果和需要保留的内容，也可附上现有代码、页面链接、截图、设计稿、品牌素材、参考图或 HTML：

```text theme={null}
请使用界面设计师苏小匠帮我重新设计这张产品页截图里的页面，让它更清爽现代；保留产品名称、价格和购买入口，并先给我看预览。
```

首次使用时按提示登录 superun 并完成浏览器授权。这个专家会直接进入页面美化流程；后续若出现风格选择或问题，请查看页面内容后再作决定。

### 查看预览与继续调整

打开 WorkBuddy 展示的页面预览，检查布局和视觉效果。想继续修改时在同一对话说明细节，例如：“标题更醒目，按钮保持品牌蓝，手机页面改为单列卡片。”已有项目也可提供原项目链接或编号，让专家据此继续。

### 后续开发

本专家适合快速创建或美化页面。需要新增业务功能、检查代码、接管本地开发或上线时，请使用 [superun 软件开发专家团](https://docs.superun.com/superun/third-party-apps/workbuddy/experts/squad.md)继续完成产品交付。

也可以安装[界面设计师技能](https://docs.superun.com/superun/third-party-apps/workbuddy/skills/ui-design.md)，在普通 WorkBuddy 对话中调用相同的云端设计能力。专家与技能分别安装。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.