# @brainly/html-sketchapp 中文文档
规范地址：https://npmcn.com/package/%40brainly/html-sketchapp/
版本：4\.5\.0
npm 元数据更新时间：2024-07-18T10:01:39.119Z
中文译文更新时间：2026-11-08T13:42:39.460Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40brainly/html-sketchapp
原文对照：https://npmcn.com/package/%40brainly/html-sketchapp/?lang=original
项目主页：https://github.com/brainly/html-sketchapp#readme
源码仓库：https://github.com/brainly/html-sketchapp
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1 MB，83 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- 首次发布：2018-03-01T11:17:22.497Z
- 最新版本发布：2021-01-13T10:59:53.487Z
- 近 30 天下载量：10664（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 0 个）
## 中文简介
将 HTML 切换到 Sletch
## 安装
```sh
npm install @brainly/html-sketchapp
```
也可以使用：`pnpm add @brainly/html-sketchapp`、`yarn add @brainly/html-sketchapp`、`bun add @brainly/html-sketchapp`
## README
# html- sketchapp 软件 [](https://travis-ci.org/html-sketchapp/html-sketchapp) [](https://www.npmjs.com/package/@brainly/html-sketchapp) [](https://github.com/brainly/html-sketchapp/blob/master/LICENSE.md) [](https://www.npmjs.com/package/@brainly/html-sketchapp)
HTML 到 Sketch 导出解决方案 .
## 这能做什么?
html-sketchapp 将 HTML 节点变为 Skech 层或符号. 此外,它允许导出共享的文本样式和文档颜色.
## 为什么?
这个项目背后的动机是能够轻松地与我们的设计团队分享前端风格指南. 尽管项目相似, [反应- sketchapp](https://github.com/airbnb/react-sketchapp),它确实要求您:
- 使用反应,
- 使用通用组件构建所有组件( e)``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ),
- 保持你的风格在JS.
我们无法快速地围绕这些限制展开工作,因此我们创建了html-sketchapp.
您可以从下列来源了解更多关于这个项目的情况:
- [我们的维基](https://github.com/html-sketchapp/html-sketchapp/wiki), (中文(简体) ),
- 和优秀的文章 ["浏览器中的选取"](https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526) @markdalgleish.
## 限制
全面总结什么是,什么是不支持的可以找到 [这里](https://github.com/html-sketchapp/html-sketchapp/wiki/What's-supported%3F),但《贸易和发展报告》如下:
- 不支持伪元素,
- 一些CSS属性(如溢出)不支持或不完全支持,
- 并非所有类型的图像都得到支持(动画化的gifs,webp),
- 重新调整信息大小没有生成,
- 所有字体都必须在当地安装.
好消息是,所有这些都是可以解决的,我们欢迎拉动请求
## 我该怎么操作?
### 安装 html- sketchapp
你可以从国家防范机制获得稳定的html-sketchapp版本.
```sh
npm i @brainly/html-sketchapp
```
### 创建.asketch 文件
`html2asketch` 是一个用于创建脚本的库,该脚本取出网站的特定部分并保存为分层、共享文本样式、文档颜色和符号。 然后,您的脚本可以在普通浏览器或无头浏览器中运行.
没有一种正确的使用方式 `html2asketch`,但你可以从检查 ["用户实例"](https://github.com/html-sketchapp/html-sketchapp/wiki/Usage-Examples) 维基百科或我们提供的两个示例项目:
- [html- sketchapp- 实例](https://github.com/html-sketchapp/html-sketchapp-example) - 使用 URL 生成一个 `page.asketch.json` 文件
- [html- sketchapp- system- guide 指南 页面存档备份,存于互联网档案馆](https://github.com/brainly/html-sketchapp-style-guide) - 脚本,取出部分 Brainly 风格导引并导出为 Sketch 符号, 共享文本样式和文档颜色 。 此脚本生成 `document.asketch.json` 财务报告和审定财务报表 `page.asketch.json`。 。 。 .
_如果你想知道是什么,为什么我们需要 `.asketch` 档案,plese看到我们的 [维基百科](https://github.com/html-sketchapp/html-sketchapp/wiki/How-does-it-work%3F)。 。 。 ._
### 将. asketch 文件导入到 Sketch
全体 `.asketch.json` 文件应通过 `asketch2sketch.sketchplugin` 插件 .
您可以从中下载可使用 Sketch 插件 ["释放"](https://github.com/html-sketchapp/html-sketchapp/releases/latest) 部分,或由来源自行构建:
```
npm i # install dependencies
npm run build # build the plugin
```
## 使用 html- sketchapp 的项目
- [html- sketchapp- cli (韩语)](https://github.com/seek-oss/html-sketchapp-cli) - "从HTML文档和生活风格指南中快速生成 Sketch 库"
- [故事2sketch](https://github.com/chrisvxd/story2sketch) - "把童话故事变成斯凯奇符号"
- [用户引擎](https://github.com/dennisreimann/uiengine) ——"UI驱动发展工作"
- [阿尔瓦](https://github.com/meetalva/alva) ——"阿尔瓦是一个全新的设计工具,使跨功能团队能够设计出数字产品"
- [达纳](https://github.com/Microsoft/fast-dna) ——"一套工具,资源和组件,用来加快网站和应用程序的建设"
- [将 HTML 切换到 Sletch](https://kimdal-hyeong.github.io/html-to-sketch-electron/download-analyst/) - "你可以画一个网站 在开放的草图窗口。"
## 站在巨人的肩膀上:心脏:
这个项目用大块和块 从神奇的 [反应- sketchapp](https://github.com/airbnb/react-sketchapp) 也不可能没有 [小时](https://github.com/skpm/skpm) 和资料 [缩写页眉](https://github.com/abynim/Sketch-Headers)。 。 。 .
## 常见问题
### @brainly/html-sketchapp 是什么？
将 HTML 切换到 Sletch
### 如何安装 @brainly/html-sketchapp？
在项目目录运行 npm install @brainly/html-sketchapp，或使用 pnpm add / yarn add / bun add。
### @brainly/html-sketchapp 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @brainly/html-sketchapp 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @brainly/html-sketchapp 可以商用吗？
@brainly/html-sketchapp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @brainly/html-sketchapp 的下载量有多少？
根据 npm 官方下载统计，@brainly/html-sketchapp 在 2026/10/09 – 2026/11/07 这 30 天内被下载 10,664 次，日均约 355 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @brainly/html-sketchapp 还在维护吗？
最新版本 4\.5\.0 发布于 2021/01/13（5 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/03/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。