企业官网建设流程全解析

简介：该插件是一款面向 Sketch 设计师与前端开发者的智能占位符生成工具，基于 Faker.js 打造，能向指定图层、符号以及从 Sketch 库导入的符号中插入随机且可控的模拟内容。内置 130 多种数据类型，涵盖全名、邮箱、电话、段落等常见字段，可为每个图层单独指定类型，并支持反复刷新以获得同一类型的不同版本，非常适合快速填充表格、列表或设计稿演示数据。资源包共 17 个文件，以 JS 脚本和 JSON 配置为主，辅以 PNG 图标、说明文档等，整体约 919KB，结构清晰，便于二次开发和自定义扩展。已有 159 人学习下载，适合需要提升设计稿真实感或研究插件开发的读者，可直接安装体验，也可参考源码学习 Faker.js 与 Sketch 扩展的整合思路。

1. 交付前两小时还在手敲假数据：sketch-data-faker 的 130 种解法

做过 UI 交付的人都有这种经历：画板上的姓名、地址、邮箱全靠手敲，敲完还总被开发问“这个数据格式真实吗”。sketch-data-faker 是一个 Sketch 插件，它把 Faker.js 的生成能力搬进 Sketch 面板，为模型提供 130 多种智能占位符内容——从姓名、公司、日期，到商品名、价格、颜色，甚至黑客用语和车辆信息。你只需要选中文本图层，点一下填充，几秒内整块画板就有了看起来完全真实的数据。它适合产品设计、前端联调和需要做演示数据的一切场景；配好一份 JSON 映射后，团队里不太会写代码的同事也能一键替换整套 mock 数据，不需要理解 JavaScript 内部逻辑。

2. 理解数据生成链路：从 Faker.js 的 130 种类型到 Sketch 图层的映射链

2.1 插件运行机制：manifest.json 如何把 JS 挂进 Sketch 菜单

Sketch 的插件机制在 macOS 上很朴素：一个文件夹加一个 manifest.json，Sketch 启动时扫描插件目录，把命令注册到菜单栏。sketch-data-faker 的核心就是一个“用假数据填充选中图层”的菜单命令，命令触发后执行对应 JS 函数，函数可以访问当前文档、选中图层和文本内容。我第一次拆这类插件时也在找入口，后面发现跟看 Web 项目看 package.json 一样，先看 manifest.json 的 commands 数组，入口函数就写在 script 和 handler 里。

{ "compatibleVersion": "3.0.0", "identifier": "dev.datafaker.sketch.plugin", "name": "Data Faker", "commands": [ { "name": "Fill Selected Text with Mock Data", "identifier": "fillSelectedText", "script": "src/command.js", "handler": "onFillSelected" } ], "menu": { "title": "Data Faker", "items": ["fillSelectedText"] } }

这份配置里，compatibleVersion 对应 Sketch 支持的插件 API 版本，我这里写 3.0.0 是占位，实际按你本机版本调整，版本过低时整个命令会变灰；identifier 要全局唯一，团队里多人开发插件时别重复；script 指向入口文件，handler 是文件里 export 的函数名。menu 决定命令出现在哪个菜单项下，快捷方式可以在 macOS 系统设置里再绑，但命令本身能不能被调用，只看这几处写没写对。老插件文档里常见的是直接给 handler 传一个 function，这种写法在当前版本也能跑，但官方推荐把函数写在单独脚本文件里，方便复用和单元测试。

为什么能直接在插件代码里 require('sketch')？因为 Sketch 运行时把官方 API 包挂进了全局，require 到的不是 npm 上的第三方包，而是 Sketch 自己的内置模块。同理，sketch-data-faker 在安装包里放了一份 Faker.js 打包产物，require('faker') 实际加载的是本地依赖，而不是网络请求。这个差异排查问题时很重要：一旦看到 module not found，十有八九是打包产物缺失或路径变了。

2.2 130 多种类型从哪来：Faker.js 的域与方法

Faker.js 把假数据按业务域划分，每个域下面有若干个具体方法。name 域下有 findName、firstName、lastName、jobTitle；internet 域下有 email、userName、domainName；commerce 域下有 productName、price、department；finance 域下有 account、bitcoinAddress；date 域下有 past、future、between。sketch-data-faker 的做法是把这些方法整理成白名单，在插件面板的下拉列表里一项一项排出来。选中类型后，插件调对应方法，把返回值转成字符串再写回图层。所谓 130 多种，指的是白名单里的方法数，不是模板数，这一点跟“130 套模板”有本质区别。

这 130 多个方法里，有一部分并不适合直接塞进文本图层。比如 random.arrayElement 返回的是数组元素，你必须自己传数组进去；image.imageUrl 返回的是图片 URL，不能当普通文本展示。插件在整理白名单时会把这类方法过滤掉，只留“返回字符串、无参或参数可选”的稳定项。如果你在配置里写了一个返回数字的方法，插件会先按字符串处理；如果方法本身需要必选参数，插件不会替你猜测，会返回 null 并走兜底逻辑。所以填配置之前，最好先在 Node 里跑一遍该方法，确认返回值类型。

2.3 数据流：JSON 配置 → 匹配图层 → 生成并回写

sketch-data-faker 和普通随机文本工具拉开差距的地方，不是它调用了 Faker.js，而是它有一套“按图层名映射”的配置机制。你可以写一份 JSON，声明“图层名叫什么、绑什么类型、生成时传什么参数”。填充时，插件遍历当前页面所有文本图层，拿图层 name 去配置里匹配，命中后调用对应生成规则，把结果写进 layer.text。整个过程分三层：配置层只描述映射关系，生成层只负责产出字符串，写入层只负责操作 Sketch 对象。这样设计还有一个好处：数据源从 Faker 换成真实业务字段时，配置文件不用大改，只替换生成层实现。

{ "layouts": [ { "match": "用户姓名", "type": "name.findName", "locale": "zh_CN" }, { "match": "用户手机", "type": "phone.phoneNumber", "format": "1## #### ####" }, { "match": "注册时间", "type": "date.past", "params": { "years": 3 } } ] }

这里的 match 支持精确匹配和正则，比如 "用户(姓名|昵称)$" 可以同时命中两种图层；type 是必须的，写成 Faker.js 的域.方法；locale 用于 Faker 生成时会话级多语言切换；format 做格式化，手机号格式里 # 会被替换成数字；params 对象会展开成 Faker 方法的参数。需要注意，params 里参数名必须和方法签名一致，date.past 接收的是 options 对象，里面有 years 字段，写错不会报错但会退化成默认随机时间，这类无声错误最难排查。

这套配置机制放到团队里的意义在于：设计、前端、测试可以共用同一份 JSON。设计改版时只改配置文件，不碰插件代码。下一章我会从安装开始，讲一份能跑起来的完整配置长什么样。

3. 安装与配置：把 sketch-data-faker 接进现有设计流程

3.1 安装：zip 包、插件目录与首次运行

安装 Sketch 插件有两种方式。一种是下载 .sketchplugin 包双击，Sketch 自动安装；另一种是把源码目录放进插件目录，适合需要看源码或二次开发的场景。sketch-data-faker 这两种方式都支持，区别在于：双击安装的是打包后的产物，放源码目录则要求你本地能处理 npm 依赖。团队环境里建议用第一种，开发环境里用第二种，不要把两个混在一起，否则容易出现“明明改了源码，插件跑的却是旧包”的怪问题。

# 把解压后的插件目录放到 Sketch 插件目录 mkdir -p ~/Library/Application\ Support/com.bohemia.sketch/Plugins/ unzip sketch-data-faker-master.zip -d ~/Library/Application\ Support/com.bohemia.sketch/Plugins/ # 确认目录层级：最外面一层不能多套一层同名文件夹 ls ~/Library/Application\ Support/com.bohemia.sketch/Plugins/

这里最关键的是路径，~/Library/Application Support/com.bohemia.sketch/Plugins/ 是 Sketch 扫描插件的固定目录，漏写一层子目录就检测不到。macOS 的 Gatekeeper 偶尔拦截未签名插件，现象是双击没反应，去 系统设置-隐私与安全性 里手动允许即可。安装完重启 Sketch，菜单栏顶部会多一个 Data Faker 菜单，说明命令注册成功；没出现就打开 Plugin Manager 看错误日志，比盲猜路径快得多。

提示：Sketch 会在启动时扫描插件目录，装完新插件后建议重启一次，菜单栏出现“Data Faker”项才算注册成功。

如果安装的是源码包，先检查包里有没有 package.json 和 node_modules。部分发行版为了减包体积没有带 node_modules，运行时会报 require('faker') 找不到。常见做法是进插件目录执行 npm install，装完重启 Sketch。每次安装新依赖后，命令菜单可能不会自动刷新，需要重启一次 Sketch。这个坑很容易被忽略，尤其当你只改了依赖没改代码时。

3.2 配置数据模型：通过 JSON 文件决定哪个图层填什么

安装完的默认配置只能给你随机数据，真正好用要靠一份围绕项目写的映射 JSON。拿一个典型用户列表页举例：画板上有“用户名”“手机号”“注册时间”三个文本图层，对应配置可以这样写：

{ "locale": "zh_CN", "tokenPrefix": "{{", "tokenSuffix": "}}", "mappings": [ { "match": "用户名", "faker": "name.findName" }, { "match": "手机号", "faker": "phone.phoneNumber", "format": "1## #### ####" }, { "match": "注册时间", "faker": "date.past", "params": { "years": 2 } } ], "fallback": "lorem.word" }

match 用的图层名精确匹配，多个模拟页面共享同一套配置时，图层命名规范就很重要，这一点后面避坑章还会讲。tokenPrefix 和 tokenSuffix 是模板占位符，因为你不可能每建一个图层都去写匹配规则；更快的办法是图层文本直接写“{{用户名}}”，填充时插件会识别占位符，用配置规则替换内容。fallback 是兜底类型，图层名匹配不到任何规则但又是文本图层时，给它生成一个短单词，避免出现大面积空白。

这些字段都不是必填的，但 fallback 建议一定配置，因为图层命名总有不规范的时候。maxLength 是针对长文本的，lorem.paragraph 如果直接填到标题图层会把版式撑爆，所以标题类映射建议配 maxLength，后面实战章会讲怎么按标题和正文给不同的截断策略。

3.3 自定义数据源：不依赖 Faker.js 也能喂数据

业务字段时常需要特定数据集，比如内部职级、预设城市、合规的假身份证号。这些不适合用 Faker 随机生成，要么规则复杂，要么数据必须来自给定列表。sketch-data-faker 的自定义 source 接口就为这种情况留了口子：配置文件里 source 字段指向一个本地 JS 文件，插件优先加载它，拿不到值再退回 Faker。

// 自定义数据源示例：从固定列表里按字段名取值 const cities = ['示例市', '湖心区', '桥北区'] const positions = ['初级设计师', '中级设计师', '高级设计师'] export function generate(field, params) { if (field === 'city') { return cities[Math.floor(Math.random() * cities.length)] } if (field === 'position') { return positions[Math.floor(Math.random() * positions.length)] } return null }

generate 函数接收两个参数：field 是配置文件里 match 命中的字段名，params 是你在 mapping 里自定义的参数对象。返回 null 表示这个字段不归自定义数据源管，插件会继续走 Faker 规则。写自定义 source 时要注意文件的路径解析，一般以插件根目录为基准，而不是以当前 Sketch 文档的目录为基准，这个容易记反。调试时可以在函数里临时抛一个 console.log，Sketch 的 console 面板能看到输出。

3.4 快捷键与菜单归类

命令多了之后，建议把“填充选中图层”“刷新当前页”“打开配置”拆成三个独立 command，不然每次都要点两层菜单。manifest.json 里可以加第二个命令：

{ "name": "Refresh Data on Current Page", "identifier": "refreshCurrentPage", "script": "src/command.js", "handler": "onRefreshPage", "shortcut": "cmd shift r" }

注意 shortcut 字段在较新版本 Sketch 里已经不建议写在 manifest 里，而是由用户在 系统设置-键盘-快捷键 里自行绑定。大概原因是插件自动注册快捷键会和系统快捷键冲突，Sketch 干脆把控制权收回。我一般会在项目的 README 里附一张快捷键对照表，让团队成员按各自习惯绑定，而不是强行统一按键。

4. 实战：从单个图层到整份文档，批量填充 mock 数据

4.1 批量填充选中图层：选区、类型判断与空值兜底

先写一个最基础的手动填充脚本。它做的事很简单：获取当前选中图层，过滤出文本类型，逐个按配置生成值并写回。能跑通这一步，后面所有复杂功能都是在这个骨架上加逻辑。

const sketch = require('sketch') const faker = require('faker') export default function (context) { const document = sketch.fromNative(context.document) const selection = document.selectedLayers if (selection.isEmpty) { sketch.UI.message('请先选中一个或多个文本图层') return } selection.layers.forEach(layer => { if (layer.type !== 'Text') return layer const value = faker.name.findName() if (value !== undefined && value !== null) { layer.text = String(value) } }) sketch.UI.message('假数据填充完成') }

sketch.fromNative(context.document) 把 Sketch 原生文档对象转成官方 API 对象，这是每个插件入口都要做的第一件事。selection.layers 返回数组，里面每一项可能是 Text、Shape 或 SymbolInstance 等类型，所以要先判断 layer.type 是不是 Text 再写 text 属性。layer.text 直接赋值字符串，Sketch 会自动改文案且保留原字体样式。UI.message 在窗口底部显示一条提示，不会弹窗打断设计操作，这是插件交互里比较克制的一种方式。

4.2 按 Symbol 实例和 Override 填充：考验匹配逻辑的地方

实际项目中，文本通常不直接摆在画板顶层，而是藏在 Symbol 里。比如一个用户卡片 Symbol，里面包含“姓名”“职位”“城市”三个 override。只遍历 selectedLayers 拿不到内部图层，需要额外处理 overrides。

selection.layers.forEach(layer => { if (layer.type !== 'SymbolInstance') return layer const overrideTexts = layer.overrides.filter(o => o.property === 'text') overrideTexts.forEach(ov => { const rule = findMapping(ov.path) if (rule) { ov.value = generateByRule(rule) } }) })

layer.overrides 是 Symbol 实例对外暴露的覆盖项数组，property 为 text 表示这是一个文本 override，ov.path 是这个 override 在 Symbol 内部命名的路径，例如“用户卡片/姓名”。data-faker 拿 path 去匹配配置规则，比拿实例外层名称匹配更精准。

注意：写完 ov.value 后，部分 Sketch 版本不会立即生效，需要手动调用一次 setOverrideValues，否则脚本跑完界面纹丝不动。这是我早期总遇到的头号玄学问题。

4.3 联动数据源：用真实接口结构生成整套假数据

很多团队的流程是设计稿画完，前端要求“mock 数据结构跟接口一致”。这个需求可以在>{ "apiFields": ["userName", "phoneNumber", "registerDate"], "fieldMap": { "userName": "name.findName", "phoneNumber": "phone.phoneNumber", "registerDate": "date.past" } }

再补一个导出的 JavaScript 片段，把生成结果组装成接口需要的数组：

function buildMockList(schema, count) { return Array.from({ length: count }, () => { const item = {} schema.apiFields.forEach(field => { const fakerRule = schema.fieldMap[field] item[field] = fakerRule ? generateSingle(fakerRule) : null }) return item }) }

apiFields 决定输出字段的顺序和集合，fieldMap 是字段与 Faker 规则之间的翻译层。这套结构的好处是设计稿和接口文档共用一份 schema，字段改名时只改 fieldMap，不需要动画板上的图层。generateSingle 是 mock 网关的入口函数，建议保留 null 字段而不是隐式丢弃，这样 mock 接口返回的数据里字段是齐全的，前端模板不会因为缺字段报错。

4.4 命令行调用：让生成能力跑在 Sketch 外面

不是每一位团队成员都会去 Sketch 里点按钮。QA 联调或者压力测试时，需要直接在命令行批量生成固定格式的数据。只要是同一套 schema，Node 环境调用 Faker.js 出来的结果和 Sketch 插件结果没有本质差别，区别只在写入端。

npm run faker -- --count 20 --schema userCard --format json

const faker = require('faker') function generateUserCard() { return { name: faker.name.findName(), phone: faker.phone.phoneNumber(), company: faker.company.companyName() } } Array.from({ length: 20 }, generateUserCard).forEach(item => console.log(JSON.stringify(item)))

--count 是生成条数，--schema 是预设的映射名。我一般会在项目根目录放一个 faker-cli.js，统一读环境变量里的 schema，避免把规则散落在一堆临时脚本里。命令行方式的另一个用途是生成假数据文件，直接落到项目目录供前端 mock server 使用，这让设计稿数据和联调数据保持一致，不会出现两个团队各自造数、格式对不上的情况。

5. 常见问题与避坑：五类典型翻车现场和排查步骤

5.1 插件菜单是灰色的，命令点不下去

现象：安装后菜单栏里能看到 Data Faker，但命令是置灰的，点不了。 原因：常见原因有三个。一是 Sketch 版本太老，manifest.json 里 compatibleVersion 高于当前版本；二是 manifest 里 shortcut 字段写错，导致整个文件解析失败；三是插件目录放在其他路径下，没被 Sketch 扫描到。 解决：先对照 Sketch 的版本号与 compatibleVersion，版本过低就升级 Sketch 或调低声明。再做一遍 manifest 的 JSON 语法检查，多一个逗号或少一个引号都会让命令失效。最后确认目录路径，我见过多次 unzip 时外层多套了一层目录，导致 Sketch 没识别出来，把插件文件夹直接放到 Plugins/ 根目录下一层就好。

5.2 中文内容变成拼音或乱码

现象：locale 设成 zh_CN，生成姓名是拼音，或者出现类似 “Xxx is not a function” 的错误。 原因：这是 faker 版本差异导致的。老版本的 faker.js 对 zh_CN 支持不完整，部分方法没有中文数据就回退到英文音译。另一个情况是 locale 只对 name、address 这类实体数据有效，对 lorem 这种随机文本没有本地化概念，lorem 生成出来必然是英文。 解决：把 faker 升级到支持 zh_CN 的版本。业务专用文案不要依赖 locale，用自定义数据源从本地 JSON 取；lorem 段落直接改用 companies/name 组合。如果看到 “Xxx is not a function”，通常是 faker 方法名写错了，去 node_modules/faker 里翻一下对应版本的方法列表，比在网上搜更直接。

5.3 填充完后一部分文本变为空白

现象：跑完脚本，有的图层变成空文本，也没有任何报错。 原因：最可能的是生成方法返回了 undefined。常见于 params 传错类型，比如 date.past 的 years 写成字符串，Faker 内部运算失败返回 undefined；或者配置文件里 faker 字段写了一个存在但返回数组的方法，插件拿到数组后 toString 在某些版本下得到空串。 解决：在写入前统一加防御性判断，值不是有效的非空字符串就保留原文本。这个兜底逻辑一定要写在写入层，而不是生成层，否则无数条生成规则都要改。同时检查 fallback 是否配置，fallback 能让匹配不到规则时也有内容可写，避免空出整个画板。

5.4 按钮点了没反应，控制台才有线索

现象：命令能点，但画板数据纹丝不动，Sketch 底部也没弹出错误提示。 原因：如果整个填充动作被包在 try/catch 里只打印 console.error，界面层是不会有提示的。老版本 Sketch 插件对未捕获异常也静默处理，必须开 console 才能看到完整堆栈。另一个坑是入口 handler 名字写对了，但函数内部把文档对象拿错了，比如用了老 API 的 document.selectedLayers 取名冲突。 解决：把插件入口函数的 console.log 打开，Sketch 的 console 面板能看到插件脚本的输出。第一次写插件建议先把 selectedLayers 数量和每个 layer.type 打出来，确认选区传入正确，再往下做填充逻辑。能看到 layer 对象但写不进 text，大概率是图层被锁定，检查图层面板右侧的锁图标。

5.5 团队其他人 clone 下来，插件跑不起来

现象：同一份插件源码，自己电脑能跑，同事 clone 后报 module not found 或者 require 失败。 原因：大多是把 node_modules 排除了，但插件代码是直接 require('faker') 的。Sketch 插件运行时不读项目级 node_modules，只认插件目录里能查到的模块，依赖缺失就直接失败。 解决：发布前把 faker 和相关库打进一个 bundle，或者明确在仓库里附带 node_modules，接受体积变大。我自己的习惯是在提交前执行一次打包指令，把依赖收敛成单个 style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />