关于 Artisign
Artisign 是面向 AI Agent 的本地优先 UI 设计工具,Agent 通过 MCP 创建界面,人可在浏览器中审阅。设计系统、流程数据和文件化状态用于保持多屏一致。
主要功能
- 01通过 MCP 创建和编辑界面
- 02设计系统管理令牌与变体
- 03浏览器预览支持实时重载
- 04屏幕变体并排比较
- 05将点击路由记录为流程数据
适用场景
- 01为项目创建 UI 屏幕
- 02检查多个屏幕的设计一致性
- 03在浏览器中审阅界面变更
MCP 相关
提供 25 个 MCP 工具,供 AI Agent 创建和操作项目、屏幕、设计系统及流程。通过 stdio 桥接到本地后台进程。
配置
本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。
工具
24收录的工具列表 · 更新于 3 天前
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| tags | array | 否 | |
| view | enum | 否 | summary | tree | full |
| fields | array | 否 |
详细介绍
Artisign
UI 设计的人工工匠:Agent 构建屏幕,设计系统确保它们保持一致。
面向 AI Agent 的本地优先 UX 设计工具。Agent 通过 MCP 进行设计,人在浏览器中审核,状态保存在纯文本文件中。
在 127.0.0.1 上运行一个 Node 进程。无需数据库、账户或托管服务。
状态: 稳定版(2.2.0)——CLI、存储、解析器/模型、包含 25 个工具的 MCP 接口、支持实时重新加载/流程/评论的浏览器预览、支持并排比较的屏幕变体、设计系统(令牌、变体、偏差警告、promote_to_system)以及打包功能均已实现。Artisign 使用自身设计了浏览器预览——参见使用自身设计。
为什么选择 Artisign
- 保持屏幕间的一致性——设计系统是一等功能;屏幕存储引用,从不内联具体值
- 提高令牌效率——分层读取、字段选择、写入时的差异模式
- 将流程作为一等功能——点击路由是数据,而非文档
- 确保渲染确定性——预览直接渲染源文件,因此预览必然与输出一致
安装
要求。 Node.js ≥ 22.4,且运行于 macOS 或 Linux——不支持 Windows(存储的原子写入和路径处理尚未在 Windows 上经过验证,因此 package.json 会阻止在该平台上执行 npm install)。截图需要使用已安装的浏览器:Chrome、Edge、Brave、Chromium 或 Firefox——见下文的截图。
npm install -g artisign
artisign
npm install -g artisign——仅需执行一次。artisign——启动 Artisign 的后台进程(即 守护进程),在浏览器中打开预览,并在首次运行时提供连接 AI 工具的选项。连接后,退出并重新打开 AI 工具,使其加载新的条目。- 请 AI 工具创建或打开项目:“在 ~/work/acme 中创建一个 Artisign 项目”。系统会为你创建项目文件夹(以及任何缺失的父文件夹);AI 工具会传入绝对路径,因为 Artisign 不会自行展开
~。写入会自动提交到 git(默认启用autoCommit)——Artisign 会在首次写入时于项目中运行git init,因此需要安装git;如果缺少git或文件夹位于另一个仓库中,Artisign 会跳过提交而不会报错。
检查是否正常运行。 请 AI 工具*“列出我的 Artisign 项目”*——它会调用 list_projects,刚创建的项目会出现在列表中,也会显示在预览的项目选择器中。
两个副本,一个版本。 全局安装提供你输入的 artisign 命令。AI 工具的条目会通过 npx(首次启动时下载一次)以轻量级 stdio 桥接程序的形式运行同一版本,并固定该版本;artisign update 会让两者保持同步。无论是你运行 artisign,还是 AI 工具连接时启动桥接程序,先启动的一方都会启动守护进程;两者使用相同的 ~/.artisign 和端口,因此始终只会有一个守护进程。守护进程会继承启动它的进程的环境:若要让 ARTISIGN_BROWSER 之类的变量生效,请在 AI 工具启动前从 Shell 运行 artisign(如果它已经在运行,请先运行 artisign stop);也可以将变量放入条目的 env 中,但 artisign setup 会重写条目,因此每次更新后都需要重新添加。
更新。 运行 artisign update(也可运行 artisign --update)。它会通过 npm install -g artisign@latest 安装最新版本,将 AI 工具中的 artisign 条目重新固定到该版本,并在运行中的 Artisign 版本较旧时重启它,同时保留已打开的项目。如果 AI 工具正在运行,请退出并重新打开,以便它启动重新固定的条目。如果当前已是最新版本,则不会执行任何操作,并且绝不会使用 sudo。不会自动进行更新:artisign 每天最多检查一次 npm 注册表是否有新版本;若有,则打印一行提示(New version x.y.z — run artisign update)。设置 ARTISIGN_NO_UPDATE_CHECK=1 可关闭此检查。
故障排除。
EACCES出现在npm install -g时——npm 无法写入其全局目录。切勿用sudo修复。请使用自己拥有的 Node(例如通过 nvm),或将 npm 指向主目录中的文件夹:npm config set prefix ~/.npm-global,然后将~/.npm-global/bin添加到PATH。- nvm——全局安装只属于一个 Node 版本。切换版本后,请再次运行
npm install -g artisign和artisign setup。 - pnpm、bun 或 yarn——使用
pnpm add -g artisign、bun add -g artisign或yarn global add artisign安装;使用同一命令并加上@latest更新(对于这些安装方式,artisign update只会 打印 该命令,不会运行它)。然后运行artisign setup,连接你的 AI 工具并重新固定其条目。
屏幕截图。 get_screenshot 和 inspect_node 会在真实浏览器中渲染——也就是你机器上已经安装的浏览器。Artisign 会按顺序自动查找 Chrome、Edge、Brave、Chromium 或 Firefox,并通过浏览器自身的远程协议以无头模式驱动:Chromium 系浏览器使用 Chrome DevTools Protocol,Firefox 使用 WebDriver BiDi。无需安装任何东西,无需 Playwright,也无需下载浏览器。
- 明确指定浏览器:在运行守护进程的进程环境中设置
ARTISIGN_BROWSER=/path/to/browser。路径中的名称决定所用协议:包含firefox的路径使用 BiDi 驱动,其他路径使用 CDP。 - 跨浏览器检查。 这两个工具都接受可选的
browser输入("chrome"、"edge"、"brave"、"chromium"、"firefox"),每个结果都会注明用于渲染的浏览器及其版本——这样,Agent 就能在完成前用另一款已安装的浏览器检查同一屏幕。 - 每次启动都会使用一个全新的临时配置文件,存放在
~/artisign-browser-profiles/中,并在浏览器关闭时删除。它位于你的主目录下,而不是/tmp,因为以 Snap 或 Flatpak 打包的 Firefox 无法访问/tmp。 - 未安装浏览器(精简服务器或容器):这两个工具都会报错,并在错误消息中说明修复方法;其他所有工具都无需浏览器即可使用。从发行版的软件包中安装
chromium或firefox-esr即可。
隐私。 Artisign 不收集任何信息——没有遥测、没有账户,也没有它运行的本地服务之外的其他服务。以下请求会访问网络,除此之外没有其他关于你的请求,这就是完整列表:更新检查(每天最多一次)会向 registry.npmjs.org 查询最新版本,不发送其他信息;artisign update 会运行 npm,而 AI 工具条目中的 npx 会从 npm 获取固定版本,两者都会连接 npm 注册表;import_html 会获取你提供的 URL;首次渲染项目时,会从 Google Fonts 获取令牌中指定的字体系列,以及始终获取 Material Symbols Rounded 图标字体(获取失败时会回退到随软件包附带的副本),然后将它们缓存在本地(参见 字体与图标)。其他所有内容都留在 127.0.0.1 上。
快速开始
单独运行 artisign 等同于运行 artisign start。它会启动后台进程,并在服务正常运行后于浏览器中打开 http://127.0.0.1:<port>/——即使进程此前已经在运行也会打开。首次运行时,它还会询问是否连接找到的 AI 工具(仅询问一次,且仅在终端中、CI 环境之外)。回答否后会记住选择;随时都可以运行 artisign setup。传入 --no-open(或设置 ARTISIGN_NO_OPEN=1)可跳过浏览器;若设置了 CI 或标准输出不是终端,也会自动跳过。如果无法打开浏览器,则会打印 URL,仅此而已。serve、mcp、status、stop 和 init 从不打开浏览器。
然后让你的 AI 工具创建一个项目。你也可以自己操作:
artisign init ./my-project # scaffold an empty project
artisign start ./my-project # start (or reuse) the background process with it open
artisign status # pid, port, open projects
以下是其余命令,供参考——此代码块是命令目录,并非执行顺序:
artisign serve ./my-project # foreground (development); opens the project on start
artisign stop # stop the background process
artisign help [command] # also: artisign <command> --help
Artisign 支持多项目:一个运行在 127.0.0.1:4711 上的进程可以同时打开多个项目。你可以在浏览器界面中打开或创建项目(通过顶栏中的项目选择器),也可以让 Agent 在每次工具调用的 project 输入中按名称或路径指定任意项目——list_projects 会显示项目名称。切换项目无需重启。
高级用法
连接 AI 工具。 artisign setup 可连接 Claude Code、Claude Desktop、Cursor、Codex CLI、VS Code 和 opencode。对于找到的每个工具,它都会先询问,然后写入一个名为 artisign 的用户级条目,运行固定为执行 setup 时版本的 npx -y artisign@<version> mcp;其他条目和设置均保持不变。如果系统中能通过 PATH 找到 Claude Code 和 Codex CLI,它会分别通过各自的 claude mcp CLI 和 codex mcp add/remove 命令进行配置(Codex CLI 会遵循 CODEX_HOME);图形界面客户端(Claude Desktop、Cursor、VS Code)则会使用通过 PATH 找到的 npx 绝对路径,因为它们不会继承你的 shell 环境。若配置文件包含注释或尾随逗号,则绝不会重写该文件,而是打印需要手动添加的条目;符号链接配置文件则会通过链接写入。--yes 会跳过询问并连接所有找到的工具(这是不使用终端运行的唯一方式);artisign setup --remove 则会仅移除 artisign 条目。更新后再次运行该命令即可更新固定版本(artisign update 会自动完成此操作)。setup 完成后,请退出并重新打开 AI 工具,使其加载该条目。
手动添加。 如果不运行 setup,请手动向 AI 工具添加相同的 stdio 服务,并固定为你安装的版本(artisign --version)。终端客户端(Claude Code、Codex CLI、opencode)可以使用普通的 npx:
claude mcp add --scope user --transport stdio artisign -- npx -y artisign@<version> mcp
图形界面客户端(Claude Desktop、Cursor、VS Code)不会继承你的 shell PATH,因此需要提供 npx 的绝对路径(which npx),并设置一个以其所在目录开头的 PATH——setup 写入的正是这样的配置。对于 Claude Desktop,请在 ~/Library/Application Support/Claude/claude_desktop_config.json(macOS)中添加:
{
"mcpServers": {
"artisign": {
"command": "/opt/homebrew/bin/npx",
"args": ["-y", "artisign@<version>", "mcp"],
"env": { "PATH": "/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin" }
}
}
}
将 /opt/homebrew/bin 替换为 which npx 显示的目录。之后请退出并重新打开客户端。
artisign mcp 是一个 stdio 桥接程序:它会将每条 MCP 消息转发给正在运行的后台进程;如果进程尚未运行,则会启动它。因此,无论连接的是哪个客户端,使用的都是同一个后端。它不接受项目目录——项目名称在每次工具调用中指定。
状态与端口。 端口取自 ~/.artisign/config.json,也可以通过 start 和 serve 上的 --port N 指定(项目 artisign.json 中的 settings.port 已弃用,会被忽略)。守护进程级别的状态——包括该配置文件,以及保存运行中进程 ID 和端口的 daemon.lock——位于 ~/.artisign。设置 ARTISIGN_HOME 可将其移至其他位置;配合 --port 使用,即可让第二个守护进程与第一个完全隔离地运行。对于你在意的项目,尝试任何破坏性操作前都值得先这样做。
仅作尝试。 运行 npx artisign 可直接运行一次,无需安装。
25 个工具
除 list_projects、init_project 和 get_guide 外,每个工具都需要一个必填的 project 输入:已知项目的名称(由 list_projects 返回)或项目文件夹的绝对路径。Agent 没有隐式的“当前项目”。
| 类别 | 工具 | 功能 |
|---|---|---|
| 读取 | get_guide | 按需获取设计方法指南(docs/agent-guide.md)。 |
| 读取 | get_project | 屏幕列表、设计系统指针和计数。分层冷启动读取;tree 还包含每个屏幕的 viewport({ width, height, declared } — 屏幕渲染时所用的画布;若根节点未声明 px 宽度,则为 390×844),以及每个变体屏幕的 variant_of/variant_kind。 |
| 读取 | get_screen | 单个屏幕及其评论/流程指示。分层读取并支持字段选择;full 会添加其直接变体和 reached_from。 |
| 读取 | get_node | 单个节点的子树,节点地址格式为 <screen>.<node-id>。分层读取并支持字段选择。 |
| 读取 | get_design_system | 令牌、组件(包含变体和默认变体的插槽名称)及模式。tree 会按类别列出每个令牌的值。 |
| 读取 | find_nodes | 在各屏幕中执行 Where 查询(样式引用、组件引用、变体、评论、文本、流程)。 |
| 读取 | list_comments | 列出未解决/已解决的评论,可按屏幕或节点筛选。 |
| 读取 | get_mockup | 获取模型图的变体 — 原始 HTML,不属于引用模型。 |
| 写入 | write_html | 从增强型 HTML 创建或完整替换一个屏幕。 |
| 写入 | patch_html | 按节点引用或 CSS 选择器执行精准补丁:替换、插入、删除、设置属性。 |
| 写入 | update_refs | 修改节点的令牌/组件/变体绑定,无需完整解析 HTML。 |
| 写入 | set_tokens | 修改设计系统令牌 — 一次调用即可重新解析所有绑定的屏幕。 |
| 写入 | set_flow | 修改 flows.json 中的流程边,不触碰任何屏幕文件。 |
| 写入 | set_meta | 屏幕备注/标签和 variant_of/variant_kind、设计系统创意/决策、组件/模式使用情况、标签自身备注 — 交接契约。 |
| 写入 | write_mockup | 创建或修订模型图的一个变体 — 原始 HTML,不属于设计系统。 |
| 写入 | set_board_state | 读取或修改 Board 的共享筛选条件、固定的屏幕和展开的变体集群 — 仅限守护进程内存。 |
| 生命周期 | list_projects | 守护进程已打开或创建的所有项目,格式为 { name, root, open };无需打开任何项目即可使用。 |
| 生命周期 | init_project | 搭建项目目录:可为空、从 HTML 创建,或从 Stitch 导出 URL 创建。返回 project,供后续调用使用的名称。 |
| 生命周期 | import_html | 将 HTML 增量导入现有项目,并按内容哈希去重。 |
| 生命周期 | promote_to_system | 将内联值或重复元素提升为令牌、组件或模式。 |
| 生命周期 | promote_mockup | 将选定的模型图变体复制到新屏幕,并绑定设计系统(保留模型图)。 |
| 生命周期 | delete_entity | 删除屏幕、组件、模式或模型图;若组件仍被屏幕引用,则拒绝删除;若屏幕仍有变体(has_variants),则拒绝删除,除非设置 cascade: true 来删除整个子树。 |
| 评论 | reply_comment | 回复评论并可选择将其标记为已解决。 |
| 视觉审查 | get_screenshot | 将渲染后的屏幕(或单个节点)或模型图的一个变体截取为 PNG — 写入 → 截图 → 调整的循环。 |
| 视觉审查 | inspect_node | 以文本形式查看单个节点的计算框和样式 — 对于几何问题,比视觉分析更省成本。 |
编写 → 截图 → 调整循环
get_screenshot 会按照浏览器预览的方式渲染屏幕(如果提供了 node,则裁剪为对应元素)——使用相同的解析流程和 renderScreen——并返回 PNG,这样 Agent 就能看到实际生成的内容,而不只是检查标记。典型用法:先调用 write_html/patch_html,再调用 get_screenshot 进行检查,然后调整。
它会在机器上已安装的浏览器中渲染,并注明使用的是哪个浏览器——请参阅上文 Install 下的 Screenshots。传入 browser,即可在另一款已安装的浏览器中检查同一屏幕。
scale(默认值为 1)是截图的设备缩放系数——对于大多数视觉检查,1x 就足够了;只有在需要像素级细节时才调高,因为图像越大,传给模型后消耗的 token 就越多。
磁盘上的 Artisign 项目
<project>/
├── artisign.json # name, version, settings (autoCommit)
├── design-system/
│ ├── tokens.json # color / spacing / typography / radius / shadow / motion
│ ├── components/<name>.html # component + variants
│ └── patterns/<name>.html # layout + interaction patterns
├── screens/<name>.html # augmented HTML, one file per screen
├── screens/<name>.meta.json # notes, tags, and variant_of/variant_kind when the screen is a variant
├── mockups/<name>/mockup.json # design explorations: variant titles/descriptions, outside the ref model
├── mockups/<name>/<variant>.html # raw HTML per variant, written verbatim
├── assets/ # local images, referenced as assets/<path>
├── flows.json # click routes between screens
├── comments.jsonl # append-only, anchored to node ids
└── .artisign/ # derived cache, gitignored — safe to delete, rebuilt on next `serve`
屏幕是扩展版 HTML——class 中的 $name 是组件引用,style 值中的 $name 是令牌引用:
<button id="btn-login" class="$btn-primary" data-variant="hover"
style="padding-inline: $spacing.md" data-flow-target="dashboard">
Log in
</button>
实例产生的效果完全取决于它写入的内容:组件引用选择定义,data-variant 选择模板,子元素填充插槽,而元素上的其他所有属性——style、额外的类、href、aria-*、data-flow-target——都会应用到展开后的根元素上。发生冲突时,实例优先于定义;style 和 class 会累加,且实例的声明位于最后,因此会在内联层叠中胜出。只有标签名由定义调用。所以上面的示例会渲染 hover 模板,并在定义设置的内容基础上添加 padding-inline: 16px。
所有内容都便于人类阅读和比较差异。启用 autoCommit(init 的默认设置)后,每个写入操作都会生成一个 git 提交,提交名由工具及其目标组成(write_html: dashboard、set_tokens: color.primary 等)——这就是审计日志。
浏览器预览
守护进程运行后,可通过 http://127.0.0.1:<port> 访问 — 使用纯 ES 模块,无需构建步骤:
- 项目选择器 — 在顶部栏中切换已打开的项目;通过应用内文件夹浏览器打开现有文件夹或创建新项目,也可新建文件夹(无需重启)。未打开任何项目时,空白状态会提供这两种操作、最近项目,以及可直接用于 AI 工具的提示词(“在 ~/work/acme 中创建一个 Artisign 项目”)。
- 屏幕 — 侧边栏中的屏幕树,渲染源代码(预览即输出,这是由构造决定的)。变体嵌套在其父项下,并带有类型图标(状态、叠加层、步骤)和标签;展开状态按浏览器保存,固定分组行会同时固定其整个子树
- 变体上下文 — 属于变体或包含变体的屏幕,会在画布上方显示面包屑,并在旁边显示变体树形图;检查器会列出屏幕的“也从此处到达”流程来源
- 对比 — 在屏幕视图中选择
Single | Compare · N,即可在 2–4 列中并排显示该系列的主屏幕(锁定的参考)和 1–3 个变体,并通过差异叠加层标记相对于参考屏幕新增、更改和移除的节点。节点仅按作者定义的id匹配;如果共享的作者定义id少于 25 %,该列不会显示差异,只会显示一条说明差异不可用的横幅 - 画板 — 将每个屏幕作为平铺块布局在一个可滚动的平面上,屏幕之间绘有流程连线(可切换);提供 5%–200% 缩放滑块(适应全部、100%,或使用 Ctrl/Cmd+滚轮/双指缩放,以光标为中心缩放),并应用侧边栏的共享筛选条件,同时显示固定到画板上的屏幕,无论筛选条件如何,因此你可以直接看到流程,而不必自行还原。包含变体的屏幕会绘制为一个簇 — 主屏幕周围有一个框架,并附有其变体的缩略图 — 展开后每个深度显示一列(每层约 8 个平铺块,之后显示“+N 个”);哪些簇处于展开状态会通过
set_board_state在标签页和 Agent 之间共享;每个浏览器都可通过“簇 开/关”切换返回平铺布局 - 元素面板 — 按 Agent 用来访问节点的 ID 列出所选屏幕的节点
- 备注面板 — 屏幕自身的备注以及所有适用于它的标签备注,均以 Markdown 格式呈现
- 流程模式 — 点击带有
data-flow-target的元素,跳转到其指向的屏幕 - 评论模式 — 点击元素以锚定评论;评论会追加到
comments.jsonl,可通过list_comments获取,也可通过reply_comment回复 - 设计系统 — 按类别显示令牌色板,并排呈现每个组件的所有变体
- 模型视图 — 实时并排呈现模型的各个变体,每个变体占一列,并显示其标题和描述
- 跟随模式 — 默认关闭;顶部栏的“跟随”切换按钮(三种状态:关闭 / 正在跟随 / 跟随已暂停)会让预览跟踪实时 Agent 会话自身的 MCP 工具调用,将视图/选中项切换到 Agent 操作的对象,并短暂描出受影响的节点(读取时为实线青绿色,写入时为紫色虚线加浅色蒙层;调用
write_html后则在整个屏幕周围显示虚线边框和“已更新”徽章)。无论跟随模式自身处于何种状态,每次工具调用也都会显示在右侧面板新增的“活动”标签页中(最近 50 条,保存在内存中,最新条目优先)。人工导航 — 点击屏幕/标签页、点击“活动”动态中的条目,或打开评论/检查模式 — 会暂停跟随;只有点击切换按钮上的“继续”才会恢复跟随 - 通过 SSE 实现实时重载 — 磁盘上的任何文件更改都会在约 200 ms 内显示在浏览器中
确定性渲染基线
每个渲染界面——screens 窗格、Design System 变体和 get_screenshot——都会将渲染片段包在同一个简洁的基线文档中,因此 Agent 设计的内容在各处渲染时都完全一致,像素级不差。保证如下:每个元素都设置 box-sizing: border-box,body 的外边距为零,文本经过抗锯齿处理。声明为 width: 390px 且带有内边距的 screen 根元素,测量结果恰好为 390px——无需考虑隐式 UA 外边距或盒模型带来的意外。
字体与图标
design-system/tokens.json 的 typography 分类中指定的任何字体系列(例如 "600 24px/1.2 'Plus Jakarta Sans', sans-serif"),都会以 woff2 格式从 Google Fonts 获取一次,并缓存到 .artisign/fonts/ 下——首次 serve 后即可优先离线使用。获取失败(无网络、字体系列未知)时不会报错:渲染会回退到系统字体,绝不会因此阻塞。
图标使用 Material Symbols Rounded,并始终与排版字体一起缓存,通过连字名称调用:
<span class="icon">close</span>
切勿用 Unicode 字符替代图标——.icon 类和连字名称才能确保渲染结果具有确定性。
图片
将本地图片放入项目的 assets/ 文件夹(可以使用子文件夹),并在 src 属性或 CSS url() 中以相对于项目的路径 assets/<path> 引用:
<img src="assets/hero.png">
<div style="background-image: url(assets/icons/logo.svg)"></div>
源文件中的引用保持可移植。渲染时,它会像 Web 字体一样按两种方式解析:通过 HTTP 加载的页面(预览 iframe、/api/render/*)会无条件将其改写为 /api/assets/<path>?project=<path>,并标记图片来源项目。这样,即使同时打开多个项目,来自 iframe srcdoc 的子资源请求也能解析到正确的项目——即便路径无法解析为 assets/ 下的文件,也仍会获得该 URL,并在该处返回 404,而不是再次通过文件系统检查;没有 HTTP 基础 URL 的无头渲染(get_screenshot、inspect_node)则会将其内嵌为 data: URI,无法解析的路径会保持原样。无论哪种方式,浏览器自身的破损图片处理都会让问题显现,而不会让图片悄然消失。
仓库结构
src/cli/ CLI entry point — init, start, stop, status, serve, mcp, setup, update, help
src/daemon/ daemon lifecycle — project registry, global config/lock (~/.artisign)
src/init/ project scaffolding (init) and artisign.json
src/store/ Store interface, FsStore, watcher, atomic writes, git auto-commit
src/model/ HTML parser, canonical ref model, index
src/tools/ the 25 tools (reads, writes, lifecycle, comments, visual review)
src/mcp/ MCP server (streamable HTTP) and the stdio bridge to it
src/http/ internal JSON API + SSE, consumed by the preview
src/preview/ browser preview — plain ES modules, no build step
design/ the tool's own UI, designed with the tool (see below)
scripts/ one-off dev tooling, not shipped in the npm package
用自身设计自身
Artisign 自带的浏览器预览界面是在 Artisign 中设计的。design/ 是一个采用上述磁盘格式的真实项目——包含 tokens、components、screens、flows——也是设计你在 127.0.0.1:4711 看到的界面的源项目。
与已发布的 src/preview/style.css :root 代码块中的属性相对应的每个 token——全部 19 种颜色、六个间距级别、radius.pill 和 shadow.menu——不仅数值一致,角色名称也一致,因此两者不会悄然偏离:修改一处,另一处就会显现差异。排版比例以及 radius.sm/radius.md 没有对应的自定义属性,因此它们是设计决策,而非镜像映射。完全没有对应项的值会保持为字面值,不会暗示不存在的绑定。像打开其他项目一样打开它:
artisign serve design
这使它成为仓库中规模最大的完整示例,也诚实地回答了这个工具是否足以用于构建的问题——这个项目就是用它构建的。
开发
npm install
npm run type-check # tsc --noEmit
npm run lint # eslint
npm test # vitest run
npm run build # compile src/ to dist/
npm run dev -- serve ./my-project # run the CLI from source via tsx
./artisign-dev.sh start [dir...] # build, stop the running Artisign, start this checkout in the background
./artisign-dev.sh stop # stop it (also: status)
发布包中仅包含 dist/、src/preview/(不含其测试文件)、assets/ 和 docs/ 中的两份指南文档——参见 package.json 中的 files。prepack 会在执行 npm pack/npm publish 前自动运行构建,因此 tarball 不会包含过期的 dist/。
文档
| 内容 | 位置 |
|---|---|
面向 Agent 的设计方法(规范性文档,由 get_guide 提供) | docs/agent-guide.md |
| 同一工作流的详细长篇指南,面向人类和技能作者 | docs/design-workflow-tutorial.md |
| 工具自身的 UI,使用该工具设计 | design/ — 参见用自身设计自身 |
问题与安全
Bug 报告、功能建议和问题请提交到问题跟踪器,并选择相应模板。漏洞请通过私密渠道报告,切勿公开提交问题:请参阅 SECURITY.md。目前不接受代码贡献;CONTRIBUTING.md 说明了原因以及欢迎哪些贡献。
许可证
版权所有 (C) 2026 Christian Körbs
Artisign 是自由软件:您可以根据自由软件基金会发布的 GNU Affero 通用公共许可证第 3 版的条款重新分发和/或修改本软件。
发布 Artisign 是希望它能有所帮助,但不提供任何担保;也不对其适销性或特定用途适用性作任何默示担保。详情请参阅 GNU Affero 通用公共许可证。
您应已随本程序收到 GNU Affero 通用公共许可证的副本。如果没有,请访问 https://www.gnu.org/licenses/。完整文本见 LICENSE。
许可证不涵盖以下两项内容:
- 您的设计归您所有。 AGPL 涵盖 Artisign 自身的源代码,不涵盖您使用它创建的屏幕、组件、令牌或项目。Artisign 写入您项目文件夹的文件完全归您所有。
- 名称不在许可范围内。“Artisign”、其徽标及其域名不属于 AGPL 授予的许可范围。分支项目可以使用代码,但需要使用自己的名称。
评论
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。