使用教程

这是什么

非鱼是一个本地设计文件管理工具。你把 Sketch / Figma 设计稿导入进来,它就能让 AI(如 Cursor、Claude)直接"看到"你的设计,然后:

• AI 照着设计稿写代码(React / HTML,带设计令牌变量)
• AI 帮你改设计稿(换色、改文案、调间距,可预览可回滚)
• 导出切图(SVG/PNG)、整页 HTML、.fig 文件

01安装

安装客户端(macOS)

1. 下载安装包(Apple Silicon 选 flyu-x.x.x-mac-arm64.dmg,Intel 选 flyu-x.x.x-mac-x64.dmg)
2. 双击打开 dmg,把「非鱼」拖进「应用程序」
3. 首次打开如果被系统拦截(提示"无法验证开发者"):右键点应用图标 → 打开 → 在弹窗里再点"打开"。只需操作一次

02配置 AI 客户端

让 AI 能连上非鱼,只需四步:

1. 先启动非鱼客户端(MCP 服务随客户端自动启动)
2. 客户端右上角 设置 → MCP 使用配置,点「复制配置」
3. 粘贴到你的 AI 工具里(见下表)
4. 重启 AI 工具,让它能调用名为 flyu 的工具就成功了

复制出来的配置长这样(端口和 token 每人不同,直接用复制的就行):

{
  "mcpServers": {
    "flyu": {
      "type": "http",
      "url": "http://127.0.0.1:32677/mcp",
      "headers": { "Authorization": "Bearer xxxxxxxx" }
    }
  }
}

03客户端功能

文件库(首页)

• 导入文件:点「导入」按钮,选一个或多个 .sketch / .fig 文件
• 文件夹管理:文件可以移动到文件夹,左侧栏切换
• 重命名 / 删除:文件卡片上的操作菜单

文件详情页

• 点开任意文件,左侧是页面和图层树,右侧是实时预览
• 图层树中右键任意图层:
  • 复制代码:直接复制该图层的 CSS / iOS (Swift) / Android (Compose) 代码,不打开 AI 也能快速取样式
  • 复制节点 ID:把节点 ID 贴给 AI,可以让它精确操作这个图层
• 文件每次被修改(包括 AI 修改)会生成版本,可切换查看历史版本
• AI 修改设计后,客户端 3 秒内自动刷新,你能立刻看到效果

设置

• MCP 使用配置:查看连接地址、复制配置、重新生成 token(旧 token 会立即失效)

04话术示例:让 AI 干活

配置好 MCP 后,不需要记任何命令,用大白话跟 AI 说就行。AI 会自动调用非鱼的工具。下面是实测好用的话术。

场景 1:把设计稿变成代码(最常用)

帮我实现 FLYU 里【文件名】的【页面名或节点 ID】,参考它的设计生成 React 组件。

AI 会自己:找到文件 → 截图看设计 → 提取结构和色值 → 写出代码。

只有模糊印象时也可以:

库里有个 Ant Design 的文件,帮我找到 Button 相关的页面并实现它。

想边看边调:

先别写代码,把【页面名】渲染出来给我看看。

这个文件的主色和字号梯度是什么?列成 CSS 变量给我。

把你实现的版本也渲染出来,和设计稿截图放一起对比,有差异就继续改。

场景 2:改设计稿(说人话就能改)

把【页面名】的主色 #07c160 换成 #1890ff,先 dryRun 给我看改哪些,确认后执行。

标题字号统一改成 20px,改完截图给我看效果。

把所有"限时价"改成"秒杀价"。

做个暗色版,别动原稿。

刚才那版不对,回滚。

场景 3:导出

把【页面名】里的图标都导成 SVG 给我。

这个页面整页导出 HTML 到文件,我要在浏览器里打开对稿。

这个节点导成 vw 单位的代码,我要用在移动端 H5。

说话技巧

两句万能模板,值得贴在桌面上:

实现:用 FLYU 把【文件名】的【页面名】实现成 React 组件:
截图看稿 → 提取色值做变量 → 提取结构 → 按我的组件库收敛 → 渲染对比。

修改:把【文件名】的【什么】改成【什么】,dryRun 先看再执行,完事截图对比。

05问题排查

日志在哪

遇到问题先翻日志(客户端运行期间按天滚动记录):

~/Library/Application Support/flyu/logs/flyu_date.log

用「控制台」app 或文本编辑器打开即可。日志里 token、邮箱等敏感信息已自动打码,可以放心截图反馈。

数据都在哪

~/Library/Application Support/flyu/
├── app.db        # 设计稿数据库(所有解析结果)
├── files/        # 导入的原始文件
├── assets/       # 图片资产
├── exports/      # AI 导出的 HTML / SVG / PNG / .fig 都在这
├── logs/         # 日志
└── mcp-token     # MCP 连接令牌

Q&A