> ## 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.

# 界面设计师

> 在 Qoder 使用 superun 界面设计师，通过云端创建和美化网页界面，查看真实预览并持续调整。

superun 界面设计师专注页面创建与视觉美化。可以提供现有代码、页面链接、截图、设计稿、品牌素材、参考图或 HTML，说明希望保留和调整的内容。

这个独立专家通过云端执行，不提供云端与本地的模式选择。

## 安装

本文使用 Qoder 桌面端的操作入口。尚未安装客户端时，前往 [Qoder 官方下载页](https://qoder.com.cn/download)，选择桌面版；IDE、CLI 的安装界面与本文不同。

### 方式一：从 Qoder 扩展市场安装

1. 打开左侧 **扩展 → 插件**，搜索 `superun`，在结果中选择 **superun 界面设计师**。
2. 若当前市场中有对应条目，打开详情，核对名称、发布者和能力说明后点击 **安装**。
3. 在 **已安装** 中确认 **superun 界面设计师** 已添加。市场条目会受账号、组织及上架状态影响；找不到时使用下面的 ZIP 导入方式。

### 方式二：下载并导入 ZIP

[下载插件 ZIP](https://www.superun.com/web-api/packages/superun-ui-expert/qoder/plugin/download) · [查看当前版本](https://www.superun.com/web-api/packages/superun-ui-expert/qoder/plugin/latest)

1. 下载完整 ZIP，保留原文件，无需解压或重新压缩。
2. 在 **扩展 → 插件 → 添加插件 → 上传 Plugin** 中选择刚下载的 ZIP。
3. 完成导入后，在 **已安装** 中确认 `superun-ui-expert`；如有启用提示，按提示启用。

更新时重新下载最新包，通过同一插件导入入口按提示更新。插件包含的技能由插件统一管理，无需另装同名独立技能。

安装入口说明可参考 [Qoder 官方插件文档](https://docs.qoder.cn/qoder/plugins)。

## 首次运行

新建任务，在输入框输入 `/`，选择 **superun 界面设计师** 对应的主技能，再补充具体需求并发送。菜单中的主技能可能仍显示为 `superun-ui-expert:superun-ui-expert` 等技术标识，按实际菜单核对。

按提示准备 Node.js 22 或更高版本、npm 和 superun CLI 等运行环境，在系统浏览器登录自己的 superun 账号并完成授权，再返回原任务。Qoder 登录与 superun 授权分别完成；无需把密码或访问令牌贴到对话里。恢复登录或等待中断后，继续原任务，避免重复提交已启动的操作。

## 开始设计

```text theme={null}
用 superun 界面设计师重新设计这张产品页截图里的页面，让它更清爽现代。保留产品名称、价格和购买入口，手机上使用单列布局，先给我看预览。
```

附上需要实际读取的截图或资料。专家会进入页面美化流程；出现风格选择或问题时，查看实际方案后再回答。高级设计师的费用和耗时以本次委托前提示为准，确认后再继续。

## 预览与持续修改

打开回复中的真实预览链接，检查布局、视觉层级和手机页面。继续修改时，在同一任务中说明「标题更醒目，按钮保持品牌蓝」等具体要求。

已有项目可提供原项目链接或编号，在核对目标后继续调整。预览表示本轮设计效果，不能据此认定已经接通真实业务或正式上线。

## 后续开发

需要新增业务功能、接管本地开发或完成应用交付时，使用[创作插件](https://docs.superun.com/superun/third-party-apps/qoder/plugin.md)。这个专家以插件安装，无需再安装一个界面设计师 Skill。


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