jsOM🎨

![License: Source Available](LICENSE) ](https://github.com/Alemusica/jsom) ](https://github.com/sponsors/Alemusica)

jsOM-权威设计师平台，LLM友好

直观地绘制UI→ 导出精确的JSON规范→ 任何LLM都会生成生产代码。人类创造力和人工智能代码生成之间的桥梁。

______________________________________________________________________

⚖️ 许可证变更通知

重要： 截至 2026年1月28日，jsOM根据 源可用许可证.

版本	许可证	状态
≤v1.4.0-beta （标签： `v1.4.0-beta-MIT-LAST`)	MIT	⚠️ 已弃用 -没有更新，没有支持
≥v1.5.0	来源可用	✅ 活跃的 -此处显示所有新功能

⚠️ MIT版本已弃用

MIT版本（v1.4.0-beta及更早版本）是 正式弃用:

❌ 没有安全更新
❌ 没有bug修复
❌ 无新功能
❌ 不支持
❌ 建筑上的分歧 （不兼容很快）

使用MIT fork=使用废弃软件。

📋 阅读道德声明

127人在麻省理工学院克隆了jsOM。

如果你是其中之一： 阅读MIT-ETHICS.md

太长，读不下去了 你有合法权利。但是，为了商业利益而寄生个人开发人员的工作在道德上是破产的，社区会知道的。

适用于1.5.0之前版本（MIT版本）的用户

如果你在2026年1月28日之前在麻省理工学院下载了jsOM：

✅ 合法使用 （学习、内部工具、贡献）：

你很好，继续学习！

⚠️ 商业用途 （竞争对手产品、SaaS、品牌重塑）：

联系人： alessioivoycazzaniga@gmail.com
讨论合作、许可、伙伴关系
未申报的商业分叉将被公开跟踪

❌ 寄生虫使用 （沉默的竞争对手，零归因）：

看 MIT-ETHICS.md
您的叉子将公开上市
社区判断是永久性的

注： v1.6.0+将使用AGPL许可的依赖项，使MIT分支在法律上与新代码不兼容。

分支

分支	状态	描述
`master`	主	稳定发布，生产就绪
`core`	开发	开发部门
`feature/*`	实验	功能开发分支

👉 Try Live Demo

______________________________________________________________________

💖 支持这个项目

如果jsOM有助于您的工作流程，请考虑支持其开发：

赞助商级别

级别	奖金
☕ 支持者（5欧元/月）	README中的名称，Discord访问
🚀 建造者（10欧元/月）	提前使用功能，优先支持
💎 赞助人（25欧元/月）	每月30分钟咨询，功能请求

______________________________________________________________________

🎯 这是什么？

UI画布MCP 是一种视觉设计工具，它：

让您直观地绘制UI -像Figma/Kotenote一样，有矩形、文本、按钮等。
AI理解你的设计 -多代理管道分析布局、样式、层次结构
生成精确的规格 -导出任何LLM都能理解的通用格式
MCP集成 -AI代理可以读取和操纵你的设计

关键见解： 你的画是真理的源泉。AI不会猜测布局——它使用你的精确设计。

______________________________________________________________________

🆕 最新动态（v1.4.0-beta-2026年1月）

风机枢轴-胎型风机布置

钥匙扣隐喻 -在固定在枢轴点的钥匙链上排列钥匙等元素
单击并拖动 -单击以放置枢轴，拖动以控制展开和旋转
渐进旋转 -每个元素都比前一个元素旋转得更多，以获得自然的扇形效果
物理安定 -手势释放后，元素会惯性沉降
极坐标法控制 -角度控制旋转，距离控制扩散
通过以下方式访问🌀 工具栏中的风扇图标（需要2+个选定元素）

PDD-物理驱动设计（世界范式）

进入世界 -你走进一个物理环境，而不是“模拟”
弹簧约束 -使用弹性弹簧连接元素（软、中、硬、反弹预设）
实时物理 -通过Konva直接操作进行60fps模拟
张力可视化 -实时查看约束力
退出时提交 -离开世界，做出最终决定
通过以下方式访问⚛️ 工具栏中的Atom图标

旋转曲线系统（Beta）

智能旋转分配 -应用缓和曲线来控制多个元素之间的旋转
预设曲线 -线性、易入/易出、对数、指数
徒手画模式 -直接在画布上绘制自定义曲线
实时预览 -绘制时查看旋转变化
键盘控制 -Enter确认，ESC取消

TIP-Lite架构

分层代码结构 -archetipi（纯数学）→ molecole（域规则）→ 风琴（配器）
世界范式 -进入/退出，而不是启动/停止，以实现沉浸式交互
应用于风扇枢轴和PDD模块

______________________________________________________________________

📜 以前的更新（v1.2.0）

搅拌机风格平滑缩放

指数标度 -使用感知线性变焦 Math.pow(2, -deltaY * ZOOM_SENSITIVITY)
触控板友好 -不再使用双指变焦手势进行“拍摄”
一致的感觉 -无论滚动速度如何，缩放行为都相同
宽范围 -0.1倍至10倍变焦级别

TOON导出格式

代币数量减少40% -LLM上下文窗口的优化表示法
表格格式 -紧凑型表格中的元素、事件、语音注释
元素标记 -语音注释引用具有@id语法的元素
出口一体化 -在导出面板中与JSON、YAML、Markdown一起提供

扩展设备支持

24+设备预设 -iPhone 16 Pro/Max、Pixel 9、三星S24、iPad Air、Galaxy Tab S9、MacBook Pro 14英寸、iMac 24英寸等
设备感知蓝图 -根据设备类型（移动设备/平板电脑/台式机）自动缩放UI元素
现代设备 -2024-2025年最新设备尺寸

语义层系统

HTML结构组织 -将元素组织到语义部分（导航、页眉、英雄、页脚等）
双视图模式 -在经典（z-index）和语义（层次结构）视图之间切换
快速分配 -一键式元素分配到各个部分
CSS提示 -每个部分都包括布局提示（flexbox、网格、定位）

多LLM支持

双子座2.0闪光灯 -使用谷歌的最新模式，实现更快、更智能的一代
Olama集成 -具有qwen2.5:7b和minicpm-v的局部模型
提供商切换 -轻松在云（Gemini）和本地（Ollama）之间切换

风格蓝图

9个完整的设计系统 -包豪斯，瑞士，玻璃态，野兽派，材料，新态，复古80年代，日本，极简主义
6 UI组件蓝图 -英雄、导航栏、登录页面、仪表板、产品卡片、个人资料
LLM优化 -每个蓝图都包括构图规则、调色板和元素规格
设备感知缩放 -蓝图自动适应移动设备/平板电脑/台式机
语义集成 -蓝图自动映射到语义部分

多智能体AI管道

LangGraph集成 -具有条件路由的有状态代理编排
智能模式 -一键式AI生成与视觉分析
知识库 -SurrealDB支持的设计智能
PHI算法 -黄金比例布局、间距和色彩和谐

增强画布

选框 -拖动以选择多个元素
语音笔记 -记录和转录设计笔记（Whisper支持）
故事板录制 -跟踪动画元素的移动

______________________________________________________________________

🏗️ 建筑

┌─────────────────────────────────────────────────────────────────────┐
│                        UI Canvas MCP                                 │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  ┌──────────────┐    ┌─────────────────────────────────────────┐   │
│  │   Canvas     │    │         Multi-Agent Pipeline            │   │
│  │   Editor     │    │  ┌─────────────────────────────────┐   │   │
│  │  (React +    │───▶│  │        SimpleOrchestrator       │   │   │
│  │   Konva)     │    │  │   (Browser-compatible runner)   │   │   │
│  └──────────────┘    │  └─────────────────────────────────┘   │   │
│         │            │              │                          │   │
│         │            │  ┌───────────▼───────────┐             │   │
│         ▼            │  │     RouterAgent       │             │   │
│  ┌──────────────┐    │  │  (Intent detection)   │             │   │
│  │  Properties  │    │  └───────────┬───────────┘             │   │
│  │    Panel     │    │              │                          │   │
│  │  + Notes     │    │      ┌───────┴───────┐                 │   │
│  │  + Voice     │    │      ▼               ▼                 │   │
│  └──────────────┘    │  ┌────────┐    ┌───────────┐          │   │
│                      │  │ Vision │    │  Prompt   │          │   │
│  ┌──────────────┐    │  │ Agent  │    │ Engineer  │          │   │
│  │   Toolbar    │    │  │minicpm │    │  Agent    │          │   │
│  │  + PHI       │    │  └────┬───┘    └─────┬─────┘          │   │
│  │  Algorithms  │    │       │              │                 │   │
│  └──────────────┘    │       └──────┬───────┘                 │   │
│                      │              ▼                          │   │
│                      │  ┌───────────────────┐                 │   │
│                      │  │  ExecutorAgent    │                 │   │
│                      │  │ (Grid + Collision │                 │   │
│                      │  │   + Z-Index)      │                 │   │
│                      │  └───────────────────┘                 │   │
│                      └─────────────────────────────────────────┘   │
│                                     │                              │
│  ┌──────────────┐    ┌──────────────▼──────────────┐              │
│  │  MCP Server  │◀──▶│       Knowledge Base        │              │
│  │  (stdio)     │    │  - Style Systems            │              │
│  └──────────────┘    │  - Layout Patterns          │              │
│                      │  - Component Patterns       │              │
│                      │  - Design Rules             │              │
│                      └─────────────────────────────┘              │
│                                     │                              │
│                      ┌──────────────▼──────────────┐              │
│                      │         SurrealDB           │              │
│                      │   (Projects + Elements)     │              │
│                      └─────────────────────────────┘              │
└─────────────────────────────────────────────────────────────────────┘

______________________________________________________________________

🤖 多代理系统

代理管道

代理	型号	角色
路由器代理	qwen2.5:7b	对意图进行分类（创建/修改/愿景）
愿景代理	minicpm-v	分析屏幕截图，提取UI元素
Prompt工程师代理	qwen2.5:7b	将请求转换为设计规范
执行人代理人	qwen2.5:7b	生成带有定位的画布元素

智能模式功能

// Enable Smart Mode in LLMPanel
const orchestrator = new SimpleOrchestrator({ model: 'qwen2.5:7b' });

const result = await orchestrator.generate(prompt, device, {
  screenshot: imageData,           // Optional: analyze existing UI
  existingElements: elements,      // Context for modifications
  visionModel: 'minicpm-v',       // Vision model for screenshots
  onProgress: (step, progress) => console.log(step, progress),
});

LangGraph工作流（服务器端）

import { UIGenerationGraph } from './orchestration';

const graph = new UIGenerationGraph();
const result = await graph.invoke({
  userPrompt: "Create a login form with email and password",
  device: { name: 'iPhone 14', width: 390, height: 844 },
  screenshot: base64Image,  // Optional
});

______________________________________________________________________

🧠 知识库

知识库为代理提供设计智能：

风格系统

瑞士国际 -大胆的排版，基于网格，色彩极简
材料设计 -基于卡片、阴影、8dp网格
玻璃态 -磨砂玻璃，透明，柔和的阴影
粗野主义 -原始、单空间、严酷的边界
日本极简主义 -极端的空白、大地色调

布局模式

英雄区 -带CTA的全宽收割台
仪表盘 -基于网格的卡片和指标
表单布局 -带有验证标签的输入

设计规则

间距指南（8px基准，PHI比例）
排版层次
颜色可访问性（WCAG AA）
响应断点

______________________________________________________________________

🌀 PHI（黄金比例）算法

内置黄金比例实用程序，实现和谐设计：

import {
  phiSpacing,        // PHI-based spacing scale
  phiColorScale,     // Golden angle color harmony
  phiLayerPalette,   // Layer-aware color palette
  phiGridLayout,     // Golden rectangle grid
  sunflowerPattern,  // Vogel spiral arrangement
  ensureContrast,    // WCAG contrast checking
} from './shared/phi';

// Generate PHI spacing: 16, 26, 42, 68, 110...
const spacing = phiSpacingScale(16, 5);

// Generate harmonious colors using golden angle
const colors = phiColorScale(210, 5); // 5 colors from blue

// Layer-aware palette for UI hierarchy
const palette = phiLayerPalette(220, true); // Dark theme
// { background, surface, content, interactive, overlay }

工具栏操作

PHI间距 -协调元素间距
PHI颜色 -应用金色角度颜色分布
PHI螺旋 -在斐波那契螺旋中排列元素
向日葵图案 -福格尔螺旋排列
PHI尺寸 -使用黄金比例缩放元素

______________________________________________________________________

🚀 快速开始

1.安装依赖项

git clone https://github.com/Alemusica/jsom.git
cd jsom
npm install

2.启动SurrealDB

surreal start --user root --pass root file:./data/ui-canvas.db

3.配置LLM提供程序

选项A：Ollama（当地）

# Text generation model
ollama pull qwen2.5:7b

# Vision model for screenshot analysis
ollama pull minicpm-v

选项B:Gemini 2.0 Flash（云）

# Set your Gemini API key
export VITE_GEMINI_API_KEY=your_api_key_here

4.运行应用程序

npm run dev

打开http://localhost:5173

______________________________________________________________________

☁️ Vercel部署

将canvas应用程序部署到Vercel：

1.安装Vercel CLI

npm i -g vercel

2.配置环境

创建 .env.production:

VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_DEFAULT_PROVIDER=gemini

3.部署

vercel --prod

注： Vercel部署仅运行canvas应用程序（客户端）。要获得完整的MCP服务器功能，请部署到Node.js兼容的平台。

______________________________________________________________________

📦 项目结构

jsom/
├── src/
│   ├── canvas/
│   │   ├── components/
│   │   │   ├── CanvasStage.tsx    # Konva canvas with marquee
│   │   │   ├── Toolbar.tsx        # Tools + PHI buttons
│   │   │   ├── PropertiesPanel.tsx # Element properties
│   │   │   ├── NotesPanel.tsx     # Voice notes + transcription
│   │   │   ├── LLMPanel.tsx       # Smart Mode UI
│   │   │   ├── HelpPanel.tsx      # In-app manual
│   │   │   └── FisicaPanel.tsx    # Physics controls
│   │   ├── fan-pivot/             # Fan Pivot (TIP Lite)
│   │   │   ├── archetipi.ts       # Pure math functions
│   │   │   ├── molecole.ts        # Domain rules
│   │   │   ├── FanPivotWorld.ts   # World orchestration
│   │   │   └── useFanPivot.ts     # React hook
│   │   ├── pdd/                   # Physics Driven Design
│   │   │   ├── world/             # World paradigm
│   │   │   ├── constraints/       # Spring, rope, rigid
│   │   │   └── usePDDWorld.ts     # React hook
│   │   ├── services/
│   │   │   ├── agents/            # Multi-agent system
│   │   │   │   ├── BaseAgent.ts
│   │   │   │   ├── RouterAgent.ts
│   │   │   │   ├── VisionAgent.ts
│   │   │   │   ├── PromptEngineerAgent.ts
│   │   │   │   └── ExecutorAgent.ts
│   │   │   ├── orchestration/     # LangGraph + SimpleOrchestrator
│   │   │   │   ├── UIGenerationGraph.ts
│   │   │   │   └── SimpleOrchestrator.ts
│   │   │   ├── knowledge/         # Design Knowledge Base
│   │   │   │   ├── DesignKnowledgeBase.ts
│   │   │   │   └── types.ts
│   │   │   ├── llm.ts             # Ollama integration
│   │   │   └── toon/              # TOON format encoder
│   │   └── store/
│   │       ├── canvasStore.ts     # Zustand state
│   │       └── storyboardStore.ts # Animation recording
│   ├── mcp-server/
│   │   ├── index.ts               # MCP Server entry
│   │   └── storage.ts             # SurrealDB integration
│   └── shared/
│       ├── types.ts               # Shared types
│       └── phi.ts                 # Golden ratio utilities
├── docs/
│   └── assets/                    # Screenshots and demos
├── LICENSE                        # MIT License
└── README.md

______________________________________________________________________

🎮 键盘快捷键

关键	行动
V	选择工具
R	矩形
T	文本
C	圆形
L	直线
P	路径/贝塞尔曲线
I	图像
B	按钮
N	输入
删除/退格	删除所选内容
⌘D	重复
⌘⇧D	用偏移量复制x5
⌘Z	撤消
⌘⇧Z	重做
⌘⇧H	水平分布
⌘⇧J	垂直分布
⌘⇧G	配电网
⌘⇧R	渐进式旋转
滚动	缩放（搅拌机风格平滑）
Shift+滚动	平移画布
F	适合屏幕
拖动到空	选框

______________________________________________________________________

🛠️ MCP服务器工具

工具	说明
`create_project`	创建新画布项目
`add_element`	在精确位置添加元素
`get_elements`	获取所有带有位置的元素
`update_element`	修改图元属性
`delete_element`	移除元件
`export_layout_spec`	导出通用UI规范（YAML/JSON/TOON）
`export_code`	生成React/HTML代码

MCP配置

{
  "mcpServers": {
    "ui-canvas": {
      "command": "node",
      "args": ["/path/to/jsom/dist/mcp-server/index.js"]
    }
  }
}

______________________________________________________________________

📱 设备预设

移动iOS： iPhone 16 Pro、iPhone 16 Pro Max、iPhone 15、iPhone 14、iPhone 14 Pro Max、苹果SE

移动安卓系统： 像素9，像素7，三星s 24，三星s 23

平板电脑iOS： iPad Mini、iPad Air、iPad Pro 11英寸、iPad Pro 12.9英寸

安卓平板电脑： Galaxy Tab S9，像素平板电脑

桌面： 高清1080p、2K、4K、MacBook Air 13“、MacBook Pro 14”、MacBook Pro 16“、Surface笔记本电脑、iMac 24”

______________________________________________________________________

🔧 发展

# Run everything (canvas + MCP server)
npm run dev

# Build for production
npm run build

# Run MCP server only
npm run mcp

# Canvas only
npm run dev:canvas

______________________________________________________________________

📚 文档

______________________________________________________________________

🤝 贡献

欢迎投稿！请阅读我们的投稿指南并提交PR。

分叉回购
创建功能分支(git checkout -b feature/amazing-feature)
提交您的更改(git commit -m 'Add amazing feature')
推到分支(git push origin feature/amazing-feature)
打开拉取请求

______________________________________________________________________

🧩 技术栈

前端： React 18， Konva.js，状态， TailwindCSS
人工智能： LangGraph、LangChain、Ollama（本地）、Gemini 2.0 Flash（云）
愿景： minicpm-v，Gemini 2.0（用户界面截图分析）
数据库： SurrealDB
协议： MCP（模型上下文协议）
部署： Vercel、Docker

______________________________________________________________________

📄 许可证

jsom源代码可用许可证v1.0

这个项目是 来源可用 但不是开源的。

✅ 自由用于个人、教育和非商业用途
✅ 查看、修改、贡献 到源代码
❌ 非商业用途 未经许可
❌ 无竞争产品 或重塑品牌
❌ 无再分配 用不同的名字

看许可证完整条款。

📜 MIT版本

如果你在麻省理工学院下载了jsOM（2026年1月27日之前），你有 法定权利 这个版本。但请阅读 MIT-ETHICS.md 在 道德期望 开源。

对于商业许可：alessioivoycazzaniga@gmail.com

______________________________________________________________________

🙏 致谢

Konva.js -画布渲染
LangChain -AI编排
奥拉玛 -本地LLM推理
SurrealDB -多模型数据库
人类MCP -AI代理协议

______________________________________________________________________

Built with ❤️ by @FluturArt for the agentic future.

Ui Canvas MCP

快速接入

详细介绍

jsOM🎨

⚖️ 许可证变更通知

⚠️ MIT版本已弃用

📋 阅读道德声明

适用于1.5.0之前版本（MIT版本）的用户

分支

💖 支持这个项目

赞助商级别

🎯 这是什么？

🆕 最新动态（v1.4.0-beta-2026年1月）

风机枢轴-胎型风机布置

PDD-物理驱动设计（世界范式）

旋转曲线系统（Beta）

TIP-Lite架构

最新动态（v1.3.0-2026年1月）

UILayoutSpec v1.1（LLM优化导出）

精确模式和捕捉网格

排版协调系统

测试套件和代码质量

📜 以前的更新（v1.2.0）

搅拌机风格平滑缩放

TOON导出格式

扩展设备支持

语义层系统

多LLM支持

风格蓝图

多智能体AI管道

增强画布

🏗️ 建筑

🤖 多代理系统

代理管道

智能模式功能

LangGraph工作流（服务器端）

🧠 知识库

风格系统

布局模式

设计规则

🌀 PHI（黄金比例）算法

工具栏操作

🚀 快速开始

1.安装依赖项

2.启动SurrealDB

3.配置LLM提供程序

4.运行应用程序

☁️ Vercel部署

1.安装Vercel CLI

2.配置环境

3.部署

📦 项目结构

🎮 键盘快捷键

🛠️ MCP服务器工具

MCP配置

📱 设备预设

🔧 发展

📚 文档

🤝 贡献

🧩 技术栈

📄 许可证

📜 MIT版本

🙏 致谢

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP