agentleFS
Sign inStart free
YardonYanYardonYan/ui-design-skills/skills/tooling/json-canvas/SKILL.md

json-canvas

Skill0 starsChanged yesterdayApache-2.0View on GitHub

读写 JSON Canvas 格式的画布文件：节点、边、坐标、分组与颜色枚举。当要把笔记、图片与想法铺到一张画布上、要把界面原型导出成可交换的画布数据、或要为自己的工具加画布导入导出时用。产出是合法的 .canvas 文件与字段对照说明。要做画布视觉设计用 canvas-design，要画流程图用 drawio-diagram 或 excalidraw-diagram，都不走这份。关键词：Canvas、画布、节点、连线、JSON Canvas、无限画布、导出格式、坐标。

66 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use defuddle, knap and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • HK-hubSkill

    defuddle

    Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens. Use instead of WebFetch when the user provides a URL to read or analyze, for online documentation, articles, blog posts, or any standard web page.

    Also in 37 projects that use this

  • lucasmaher-hashSkill

    knap

    Render Markdown from templates and structured data using Knap CLI. Use when the user asks to apply a Knap template, turn JSON or CSV data into notes, batch-generate Markdown files, or format Defuddle output into a note.

    Also in 4 projects that use this

  • dycnnnbSkill

    digital-avatar-shopping-video

    小省导购员多智能体数字人口播带货视频生成系统，以"小省导购员"为核心人设，打造专业购物助手+数字人口播带货视频一体化服务。涵盖五大智能体（小省导购员、带货脚本师、数字人口播生成师、带货画面设计师、音画合成师），产出"数字人口播+带货画面+字幕音效"的成品视频，适配抖音、快手等短视频平台，支持淘宝、京东、拼多多、唯品会等全平台商品信息，具备知识库自动存取能力。

    Also in 3 projects that use this

  • dycnnnbSkill

    pet-commerce-creator

    萌宠带货短视频全流程创作技能，基于COZE视频大模型API，支持萌宠剧情/好物测评/品种科普/宠品带货等全类型创作，覆盖爆款解析反推、知识库联动、互动优化、素材批量下载、全素材整合，实现从创意到带货引流型成品视频的自动化生成，适配15-30秒竖屏9:16主流平台规格。

    Also in 3 projects that use this

  • jykimSkill

    obsidian-cli

    Interact with Obsidian using the official CLI to read, search, create, and manage notes, daily notes, tasks, properties, and more. Use when the user wants to query or manipulate vault content via the obsidian command.

    Also in 36 projects that use this

  • az9713Skill

    vault-health

    Audit vault health: unresolved links, orphan notes, dead-end files, missing frontmatter, structural gaps. Produces an actionable report note with prioritized fix suggestions. Use when wanting to clean up, organize, or assess the current state of the vault.

    Also in 3 projects that use this

  • +4 more from dycnnnb

The file

Create a free account to mount
Files
SKILL.md

无限画布数据格式

规范来自 JSON Canvas Spec 1.0，MIT 许可，原样收在 references/spec-1.0.md，示例文件在 assets/sample.canvas。本文件只讲用法与坑，字段定义以规范为准。

结构

一个 .canvas 文件是 JSON，顶层只有两个可选数组：nodes 与 edges。

对象必填字段追加字段
通用节点id、type、x、y、width、heightcolor（可选）
text 节点同上text，纯文本，允许 Markdown
file 节点同上file；可选 subpath，以 # 开头
link 节点同上url
group 节点同上label、background、backgroundStyle
边id、fromNode、toNodefromSide、toSide、label、color、箭头

type 只有 text、file、link、group 四种。

三条容易踩的坑

  1. 节点顺序即层叠顺序。数组按 z-index 升序，第一个在最底层，最后一个在最顶层。导入导出时不能按字典序重排，否则分组会被盖住。
  2. 坐标是整数像素。布局算法输出前要取整，浮点坐标在部分实现里会被截断。
  3. 颜色是枚举不是自由色值。映射到自定义主题时要建一张对照表，不要把十六进制色直接写进 color 字段。

对做界面的人有什么用

  • 画布数据是纯 JSON，可以脱离具体应用读写，适合把界面原型的卡片与连线导出成可交换格式。
  • 分组节点提供的是视觉容器，不是数据嵌套；父子关系靠坐标与视觉表达，别当树结构解析。
  • file 节点的路径是库内相对路径，跨库迁移时要一并改写。

许可

MIT，见 LICENSE。上游地址见根目录 THIRD-PARTY.md。

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free