设计交付与原型预览,自托管

好设计,
值得好好交付。

从 Sketch、Figma 到 Axure、HTML,让设计与原型在浏览器交付。
把设计交付,留在自己的服务器。

设计标注与切图原型与网页预览自托管部署

LESS BACK-AND-FORTH.
MORE DESIGN.

01 / DESIGN HANDOFF
Sketch Mark / 设计交付示例示例数据
24 px
Studio.工作台 / 概览S

MONDAY, SEPTEMBER 28

让创作,有条不紊。

每一个想法,都有自己的位置。

进行中的设计06个项目
本周交付12份设计
团队成员08位伙伴
BRAND DESIGN

把灵感变成下一步。

品牌视觉 / 设计交付

项目卡片
100%点击左侧切换画板与切图
设计师上传。开发者打开链接。交付就这样开始。DESIGN → WEB

少一点来回确认,多一点默契

不只是一张图。
是开发真正需要的那份设计。

尺寸是多少、颜色是什么、切图在哪一版?
把这些答案放进同一个链接,不再分散在聊天记录里。

每一步交付,都有着落

THE DETAILS MATTER
01 / INSPECT

看见设计,也读懂细节。

Sketch / Figma 共用画板、图层、切图与颜色视图。点选图层,查看尺寸、间距、文字及样式参考;可切换 Web、iOS、Android 标注单位。

02 / ASSETS

需要的切图,直接下载。

Sketch / Figma 插件按所选格式导出设为可导出的资源。网页按画板查看切图,下载已导出的 PNG 倍率或 SVG。

03 / VERSIONS

每次更新,都有迹可循。

更新同一份设计,保留历史版本。分享链接保持不变,团队可以回看之前的交付。

04 / ORGANIZE

设计有序,协作轻松。

用分组与子文件夹整理设计,按上传账号筛选文件。管理员维护账号与设计;普通成员更新自己的文件。

05 / PREVIEW

打开链接,就是设计。

Axure 原型与 HTML 静态网页在独立预览服务中展示,支持页面跳转。设计画板可缩放、拖动,并复制已导出的文字与样式。

连接你熟悉的工具

插件安装与使用。

CHOOSE YOUR TOOL

Figma / Chrome 优先从商店安装,离线包作为备用;Sketch 使用安装包。插件连接你自行部署的平台,不提供云端托管空间。

macOS · Sketch 桌面端

Sketch

交付画板、图层标注与切图。

查看安装教程
  1. 下载上方安装包并解压,也可从自部署平台“插件安装与使用”页面下载兼容版本。
  2. 双击 SketchMark.sketchplugin,在 Sketch 插件菜单运行。
  3. 填写平台地址和账号,选择画板、分组与切图格式后上传。
Figma Community · 商店安装

Figma

交付 Frame、图层标注与 PNG / SVG 切图。

查看安装教程
  1. 打开 Community 插件页,登录 Figma 后保存或运行 Sketch Mark。
  2. 在 Design 文件的插件菜单中启动,填写可访问的平台地址与账号。
  3. 核对导出范围、分组和更新对象后上传;也可离线导出 JSON。
Chrome 110+ · 本地 Axure 预览

Chrome / Axure

采集本地 Axure 预览,或上传 HTML 导出目录,生成在线预览。

查看安装教程
  1. 在 Chrome 应用商店点击“添加至 Chrome”,按提示安装。
  2. 打开本地 Axure HTML 预览,点击同步入口或浏览器工具栏插件图标。
  3. 连接平台、核对目标后采集上传。自动采集时保持预览服务运行,动态资源可改用完整导出目录。
离线包获取与安装(备用方案)

下载上方备用包,或在自部署平台“插件安装与使用”页面下载与服务兼容的包。此介绍网站不连接你的内网平台。

  • Figma 桌面端:从 Plugins → Development → Import plugin from manifest 选择解压目录中的 manifest.json。
  • Chrome:打开 chrome://extensions,启用开发者模式并“加载已解压的扩展程序”。
  • 通过 file:// 打开 Axure 导出文件时,还需在扩展详情允许访问文件网址。

YOUR DESIGN. YOUR SERVER.

交付给团队,
数据留在自己手里。

Sketch Mark 部署在你管理的服务器上。
设计、账号和历史版本保存在自己的数据卷中。

01

适合内网与 VPN

由团队控制访问入口与网络范围,不依赖公共设计托管空间。

02

先验证,再升级

Docker 升级管理器在隔离数据副本上创建预览,确认后再替换生产程序。

03

程序回滚,保留当前数据

可预览并回滚已归档程序。数据兼容性须验证,异地备份仍需自行安排。

从设计到交付

顺着你熟悉的方式工作。

THREE SIMPLE STEPS
01

选择你的交付方式

Sketch / Figma 通过插件上传画板;Axure 采集本地预览或导入完整 HTML 目录;静态网页直接上传 ZIP。

Sketch / Figma / Axure / HTML
02

把链接交给团队

打开网页预览并分享链接。后续更新同一份设计,生成新版本,继续使用原链接。

团队 / 一个设计链接
03

在浏览器里接着做

Sketch / Figma 查看画板标注与切图;Axure / HTML 浏览页面并操作原型。查看无需安装设计软件。

开发者 / 网页预览

准备好自己的交付空间

从你的服务器,开始。

下载完整包并解压,配置管理端和只读预览端,启动服务后创建超级管理员。再安装对应插件并连接平台。

1.1.0 完整源码部署包:包含 Web、API、Sketch / Figma / Chrome 插件及升级管理器。需 Docker / Compose,不包含生产数据或预构建镜像。SHA-256 校验文件

首次部署 / 在解压后的目录执行
# 首次安装:复制配置并按需调整端口
cp .env.example .env

# 检查配置并构建、启动服务
docker compose config --quiet
./deploy.sh
请根据自己的部署环境调整配置
部署前请确认

使用内网 / VPN 或 HTTPS 反向代理。Axure / HTML 预览需独立来源,备份须同时包含数据库与原型文件。游客可查看能访问实例的全部设计,分享链接不是私密访问令牌。

先把几个问题说清楚

你可能还想知道。

可以直接上传 .sketch、.fig 或 .rp 文件吗?

不可以。Sketch / Figma 通过插件上传,或导出 JSON 交付包后在网页导入;Axure 先生成完整 HTML,再采集本地预览或导入目录。通用静态网页可上传包含 HTML 与资源的 ZIP。

查看设计的人需要账号吗?

查看设计、历史版本和下载资源不要求登录;上传与修改需要设计师或管理员账号。因此请将实例放在可信的网络访问范围内。

支持哪些切图格式?

支持插件导出的 1×、2×、3× PNG 和 SVG。上传时选择哪些格式,网页就提供哪些资源,不会把没有导出的倍率自动补齐。

不同来源能查看什么?

Sketch / Figma 可查看已导出的图层标注和切图;Axure / HTML 提供交互预览与页面跳转,不提供设计图层标注。渐变和图片填充 CSS 是参考,复杂几何或混合文字会显示导出说明。当前没有评论同步、源文件归档或设计差异高亮。

自托管就意味着自动安全、自动备份吗?

不意味着。HTTPS、访问控制、请求限流、磁盘空间、异地备份与恢复演练需要由部署方负责。服务采用 Python HTTP 与单实例 SQLite,适合内部使用;大型团队应先做容量与负载验证。

让下一份设计,
有一个好的交付。

查看部署方式Sketch Mark · 自托管设计交付工具