KUI

帮助中心

KUI 插件使用说明与常见问题解答

一、快速入门

1. 工具条与入口

  • 竖排工具条：锚定在 Sketch 工作区右侧，图标依次为：组件规范、图标、表格、图表、填充、栅格、标注导出、AI 助手
  • 快捷键：Ctrl + Alt + K（macOS 为 Control + Option + K）切换工具条显示/隐藏
  • 插件设置：点击左上角 KUI Logo，可设置外观（跟随 Sketch/明亮/暗黑）

二、核心功能使用指南

1. AI 助手

智能工具 - 网页转 Sketch

  • • 离屏加载：输入 URL 或本地 HTML 路径，选择「还原方式」（自动/html2sketch/内置结构/整页截图）
  • • 导入通道：插件 API（默认）或 Sketch MCP
  • • 本地 HTTP 预览：可选启动本地预览服务，优先 Edge/Chrome 打开

智能工具 - Sketch 转前端

  • • 导出 .vue / .html：先选父文件夹，多选时每项一个文件
  • • HTML 导出：默认几何像素级（绝对定位+渐变/阴影/变换），可选 AI 多模态辅助
  • • Vue 导出：默认关键字映射，可选 AI 辅助（生成 Arco Vue SFC）
  • • 导出结果：包含 Vite 工程（npm install → npm run dev 即可预览）

智能工具 - 图片处理

  • • 抠图/换背景/变清晰/去水印/调色：选择位图图层后，选择对应工具，经 OpenAI 兼容多模态处理后写回
  • • 生成创意：根据当前选中页面+文档色板+描述生成新位图

2. 设计标注导出

  • • 导出离线标注包：与 MarkLion 类似的目录结构
  • • 功能：画板总览、图层树、测距、属性展示、代码片段（CSS/Android/iOS/HTML/Vue）、切图下载
  • • 支持 file:// 直接打开：无需服务器

3. 组件规范

  • • Ant Design / Arco Design：浏览示意组件，一键插入（支持明暗/尺寸切换）
  • • Arco 皮肤：从主题 URL/npm 包导入，保存多套皮肤，生成规范画板与色板变量

4. 图标

  • • Iconfont：公共搜索、我的项目管理
  • • IconPark：分类浏览、搜索，支持「应用到选中」批量替换符合命名前缀的图层

三、常见问题与解决办法

AI 助手类问题

Sketch 转前端类问题

网页转 Sketch 类问题

设计标注导出类问题

四、高级技巧

1. 图层命名约定（Sketch 转 Vue）

  • • button / 按钮 → <a-button>
  • • input / 输入 → <a-input>
  • • card / 卡片 → <a-card>
  • • form / 表单 → <a-form>
  • • table / 表格 → <a-table>
  • • modal / 弹窗 → <a-modal>
  • • drawer / 抽屉 → <a-drawer>
  • • tabs / 标签页 → <a-tabs>

2. 快捷操作

  • • 组件快捷菜单：右键画布调出，快速插入常用组件
  • • 全选/剪切/删除：浮层聚焦时快捷键转发到 Sketch 原生行为
  • • 填充面板：图片分类网格点击即填充选中图层

五、技术支持与故障排查

日志与调试

  • • AI 助手浮层可开启「调试」模式查看详细日志
  • • 版本问题完整记录在 docs/KUI-版本问题与修复.md
  • • 功能迭代记录在 docs/KUI-版本功能记录.md

恢复与重置

  • • 历史会话：AI 对话支持历史会话恢复
  • • 皮肤列表：如列表空白，可切换到 Arco 皮肤 Tab 重新拉取清单