mcpField
A
Artisign

Artisign

本地服务
artisign.dev媒体与设计21 天前更新

关于 Artisign

Artisign 是面向 AI Agent 的本地优先 UI 设计工具,Agent 通过 MCP 创建界面,人可在浏览器中审阅。设计系统、流程数据和文件化状态用于保持多屏一致。

主要功能

  1. 01通过 MCP 创建和编辑界面
  2. 02设计系统管理令牌与变体
  3. 03浏览器预览支持实时重载
  4. 04屏幕变体并排比较
  5. 05将点击路由记录为流程数据

适用场景

  1. 01为项目创建 UI 屏幕
  2. 02检查多个屏幕的设计一致性
  3. 03在浏览器中审阅界面变更

MCP 相关

提供 25 个 MCP 工具,供 AI Agent 创建和操作项目、屏幕、设计系统及流程。通过 stdio 桥接到本地后台进程。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"dev-artisign-artisign": {
"command": "npx",
"args": [
"-y",
"artisign"
]
}
}
}
启动命令npx -y artisign

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npmartisign2.2.0

工具

24

收录的工具列表 · 更新于 3 天前

参数类型必填说明
tagsarray否
viewenum否summary | tree | full
fieldsarray否

详细介绍

Artisign

UI 设计的人工工匠:Agent 构建屏幕,设计系统确保它们保持一致。

面向 AI Agent 的本地优先 UX 设计工具。Agent 通过 MCP 进行设计,人在浏览器中审核,状态保存在纯文本文件中。

在 127.0.0.1 上运行一个 Node 进程。无需数据库、账户或托管服务。

状态: 稳定版(2.2.0)——CLI、存储、解析器/模型、包含 25 个工具的 MCP 接口、支持实时重新加载/流程/评论的浏览器预览、支持并排比较的屏幕变体、设计系统(令牌、变体、偏差警告、promote_to_system)以及打包功能均已实现。Artisign 使用自身设计了浏览器预览——参见使用自身设计。

为什么选择 Artisign

  1. 保持屏幕间的一致性——设计系统是一等功能;屏幕存储引用,从不内联具体值
  2. 提高令牌效率——分层读取、字段选择、写入时的差异模式
  3. 将流程作为一等功能——点击路由是数据,而非文档
  4. 确保渲染确定性——预览直接渲染源文件,因此预览必然与输出一致

安装

要求。 Node.js ≥ 22.4,且运行于 macOS 或 Linux——不支持 Windows(存储的原子写入和路径处理尚未在 Windows 上经过验证,因此 package.json 会阻止在该平台上执行 npm install)。截图需要使用已安装的浏览器:Chrome、Edge、Brave、Chromium 或 Firefox——见下文的截图。

npm install -g artisign
artisign
  1. npm install -g artisign——仅需执行一次。
  2. artisign——启动 Artisign 的后台进程(即 守护进程),在浏览器中打开预览,并在首次运行时提供连接 AI 工具的选项。连接后,退出并重新打开 AI 工具,使其加载新的条目。
  3. 请 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 授予的许可范围。分支项目可以使用代码,但需要使用自己的名称。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。