Artisign

Artisign

UI デザインのための人工職人です。エージェントが画面を構築し、デザインシステムが一貫性を保ちます。

AI エージェント向けのローカルファーストな UX デザインツールです。エージェントは MCP を通じてデザインし、人間はブラウザーでレビューします。状態はプレーンファイルに保存されます。

127.0.0.1 上で Node プロセスを 1 つ実行します。データベースもアカウントもホスティングもありません。

ステータス： 安定版（2.2.0）— CLI、ストア、パーサー／モデル、25 個のツールを備えた MCP インターフェース、ライブリロード／フロー／コメントに対応したブラウザープレビュー、画面バリアントと並べての比較、デザインシステム（トークン、バリアント、乖離警告、promote_to_system）、パッケージングをすべて実装済みです。Artisign は独自のブラウザープレビューをデザインしています。詳しくはこれ自体を使ってデザインをご覧ください。

理由

1. 画面間の一貫性 — デザインシステムは第一級の機能です。画面には参照が保存され、値が直接埋め込まれることはありません
2. トークン効率 — 階層化された読み取り、フィールド選択、書き込み時の差分モード
3. 第一級の機能としてのフロー — クリック時の遷移先はドキュメントではなく、データです
4. 決定論的なレンダリング — プレビューはソースをレンダリングするため、プレビューと出力は構造上同一です

インストール

要件。 macOS または Linux で Node.js ≥ 22.4 — Windows はサポートされていません（ストアのアトミック書き込みとパス処理は Windows で検証されたことがないため、package.json により npm install はそのプラットフォームでのインストールを拒否します）。スクリーンショットを撮るには、すでにインストールされているブラウザーが必要です。Chrome、Edge、Brave、Chromium、または Firefox をご利用ください。詳しくは以下のスクリーンショットをご覧ください。

npm install -g artisign
artisign

1. npm install -g artisign — 1 回だけ実行します。
2. artisign — Artisign のバックグラウンドプロセス（デーモン）を起動し、ブラウザーでプレビューを開き、初回起動時には AI ツールへの接続を案内します。接続後、AI ツールを終了して再度開き、新しいエントリを読み込ませてください。
3. AI ツールに、プロジェクトの作成またはオープンを依頼します。例：「~/work/acme に Artisign プロジェクトを作成して」。プロジェクトフォルダー（および存在しない親フォルダー）は自動的に作成されます。Artisign 自体は ~ を展開しないため、AI ツールは絶対パスを渡します。書き込みは自動的に git にコミットされます（autoCommit はデフォルトで有効）。Artisign は初回の書き込み時にプロジェクト内で git init を実行するため、git のインストールが必要です。git が見つからない場合、またはフォルダーが別のリポジトリ内にある場合は、失敗する代わりにコミットをスキップします。

動作確認。 AI ツールに *「Artisign のプロジェクトを一覧表示して」*と依頼します。list_projects が呼び出され、作成したばかりのプロジェクトが表示されます。プレビューのプロジェクト選択メニューにも表示されます。

バージョンは同じ、コピーは 2 つ。 グローバルインストールは、入力する artisign コマンドです。AI ツールのエントリは、小さな stdio ブリッジとして npx を通じて同じバージョンを固定して実行します（初回起動時に一度ダウンロードされます）。artisign update で両者のバージョンをそろえます。artisign を使った場合でも、AI ツールの接続時にブリッジを使った場合でも、先に起動した方がデーモンを起動します。両者は同じ ~/.artisign とポートを使うため、同時に実行されるデーモンは常に 1 つだけです。デーモンは、起動したプロセスの環境を引き継ぎます。ARTISIGN_BROWSER などの環境変数を反映させるには、AI ツールより先にシェルから artisign を実行してください（すでに実行中の場合は、先に artisign stop を実行します）。エントリの env に設定する方法もありますが、artisign setup はエントリを書き換えるため、更新後に再度追加してください。

更新。 artisign update（または artisign --update）を実行します。npm install -g artisign@latest で最新バージョンをインストールし、AI ツール内の artisign エントリのバージョン固定を更新して、古いバージョンの Artisign が実行中であれば、開いているプロジェクトとともに再起動します。その後、AI ツールを終了して再度開き、更新されたエントリを起動してください。すでに最新バージョンの場合は何もせず、sudo も使用しません。自動更新は一切ありません。artisign は npm レジストリを確認し、新しいリリースがある場合に限り、1 日に最大 1 回、「New version x.y.z — run artisign update」という 1 行のメッセージを表示します。確認を無効にするには ARTISIGN_NO_UPDATE_CHECK=1 を設定してください。

トラブルシューティング。

• EACCES on 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"）を受け付け、各結果にはレンダリングに使ったブラウザーとバージョンが記載されます。そのため、エージェントは完了とする前に、2 つ目のインストール済みブラウザーで同じ画面を確認できます。
• 起動のたびに、使い捨ての新しいプロファイルを ~/artisign-browser-profiles/ に作成し、ブラウザーを閉じると削除します。Snap または Flatpak パッケージ版の Firefox から /tmp が見えないため、プロファイルは /tmp ではなくホームディレクトリ内に置かれます。
• ブラウザーがインストールされていない場合（最小構成のサーバーやコンテナーなど）、どちらのツールもエラーメッセージに修正方法を示して失敗します。それ以外のすべてのツールはブラウザーなしで動作します。ディストリビューションのパッケージから chromium または firefox-esr をインストールすれば十分です。

プライバシー。 Artisign は何も収集しません。テレメトリーも、アカウントも、実行するローカルサーバー以外のサーバーもありません。ネットワークに接続するリクエストは以下のとおりで、いずれもお客様に関する情報は含まず、これがすべてです：更新チェック（1 日に最大 1 回）は registry.npmjs.org に最新バージョンを問い合わせ、それ以外は何も送信しません；artisign update は npm を実行し、AI ツールのエントリーに含まれる npx はピン留めされたバージョンを npm から取得するため、どちらも npm レジストリと通信します；import_html は指定された URL を取得します；プロジェクトの初回レンダリング時には、トークンで指定されたフォントファミリーと、常に使用する Material Symbols Rounded アイコンフォントを Google Fonts から取得し、ローカルにキャッシュします（取得に失敗した場合は、パッケージに同梱されたコピーを代わりに使用します）（フォントとアイコンを参照）。それ以外はすべて 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 上の 1 つのプロセスで、複数のプロジェクトを同時に開けます。ブラウザー UI のトップバーにあるプロジェクトピッカーからプロジェクトを開くか作成します。または、各ツール呼び出しの 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 は独自の claude mcp CLI を通じて、Codex CLI は codex mcp add/remove を通じて操作されます（CODEX_HOME に対応しています）。GUI クライアント（Claude Desktop、Cursor、VS Code）には、PATH 上で見つかった npx が絶対パスで設定されます。これらのクライアントはシェルの環境を引き継がないためです。コメントや末尾のカンマを含む設定ファイルは書き換えません。その場合、setup は手動で追加するエントリーを表示します。シンボリックリンクされた設定ファイルにはリンク先へ書き込みます。--yes を指定すると、確認なしですべての検出済みツールを接続します（ターミナルなしで実行する唯一の方法です）。artisign setup --remove は artisign のエントリーのみを削除します。更新後に再度実行すると、バージョンを再固定できます（artisign update が自動で行います）。setup の後、エントリーを読み込ませるため、AI ツールを終了して再起動してください。

手動でのエントリー追加。 setup を実行しない場合は、インストールしたバージョン（artisign --version）に固定して、同じ stdio サーバーを AI ツールに手動で追加します。ターミナルクライアント（Claude Code、Codex CLI、opencode）では、通常の npx を使用できます。

claude mcp add --scope user --transport stdio artisign -- npx -y artisign@<version> mcp

GUI クライアント（Claude Desktop、Cursor、VS Code）はシェルの 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 は非推奨であり、無視されます）。デーモンレベルの状態（この設定ファイルと、実行中の PID およびポートを保持する daemon.lock）は ~/.artisign に保存されます。別の場所に移動するには ARTISIGN_HOME を設定します。これと --port を組み合わせると、2 つ目のデーモンを 1 つ目から完全に分離して実行できます。大切なプロジェクトに対して破壊的な操作を試す前に、分離して実行することをおすすめします。

まず試してみる場合。 npx artisign を実行すると、インストールせずに一度だけ起動できます。

25 個のツール

list_projects、init_project、get_guide を除くすべてのツールでは、必須の project 入力が必要です。これは既知のプロジェクト名（list_projects が返す名前）またはプロジェクトフォルダーの絶対パスです。エージェント向けの暗黙の「現在のプロジェクト」はありません。

分類	ツール	内容
読み取り	get_guide	必要に応じて取得する、設計手法ガイド（docs/agent-guide.md）です。
読み取り	get_project	画面リスト、デザインシステムへのポインター、件数です。階層化されたコールドスタート読み取りです。tree には各画面の viewport（{ width, height, declared } — 描画時のフレーム。ルートで px 幅が宣言されていない場合は 390×844）と、各バリアント画面の variant_of／variant_kind も含まれます。
読み取り	get_screen	コメント／フローのインジケーター付きの 1 つの画面です。階層化とフィールド選択に対応しています。full では、その画面の直接の variants と reached_from が追加されます。
読み取り	get_node	<screen>.<node-id> で指定した 1 つのノードのサブツリーです。階層化とフィールド選択に対応しています。
読み取り	get_design_system	トークン、コンポーネント（バリアントとデフォルトバリアントのスロット名を含む）、パターンです。tree には、バケットごとにグループ化されたすべてのトークン値が含まれます。
読み取り	find_nodes	画面をまたいだ条件検索です（スタイル参照、コンポーネント参照、バリアント、コメント、テキスト、フロー）。
読み取り	list_comments	画面またはノードで絞り込んだ、未解決／解決済みのコメントです。
読み取り	get_mockup	モックアップのバリアント（デザインモデルの対象外である生の HTML）です。
書き込み	write_html	拡張 HTML から画面を作成するか、完全に置き換えます。
書き込み	patch_html	ノード参照または CSS セレクターを使った外科的なパッチです。置換、挿入、削除、属性設定ができます。
書き込み	update_refs	HTML 全体を解析せずに、ノードのトークン／コンポーネント／バリアントのバインディングを変更します。
書き込み	set_tokens	デザインシステムのトークンを変更します。1 回の呼び出しで、バインドされているすべての画面を再解決します。
書き込み	set_flow	画面ファイルに触れずに、flows.json のフローエッジを変更します。
書き込み	set_meta	画面のメモ／タグと variant_of／variant_kind、デザインシステムのアイデア／決定事項、コンポーネント／パターンの使用状況、タグ独自のメモを設定します。これが引き継ぎ時の契約です。
書き込み	write_mockup	モックアップの 1 つのバリアント（デザインシステムの対象外である生の 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	描画された画面（または 1 つのノード）、もしくはモックアップの 1 つのバリアントを PNG でスクリーンショットします。書き込み → スクリーンショット → 調整のループに使用します。
ビジュアルレビュー	inspect_node	1 つのノードの計算済みボックスとスタイルをテキストで返します。ジオメトリに関する質問では、画像認識より低コストです。

作成 → スクリーンショット → 調整のループ

get_screenshot は、画面（または node を指定した場合は1つの要素に切り取ったもの）をブラウザのプレビューとまったく同じ方法でレンダリングします。同じ解析処理と同じ renderScreen を使い、PNG を返すため、エージェントはマークアップを確認するだけでなく、実際に作成した結果を目で確認できます。典型的な使い方は、write_html／patch_html を実行してから get_screenshot で確認し、調整する流れです。

マシンにすでにインストールされているブラウザでレンダリングし、結果には使用したブラウザ名が含まれます。上記の Install にある Screenshots を参照してください。別のインストール済みブラウザで同じ画面を確認するには、browser を指定します。

scale（既定値は 1）はスクリーンショットのデバイススケール係数です。ほとんどの目視確認では 1x で十分です。ピクセル単位の詳細が重要な場合に限り、大きな画像がモデルに渡されたときにより多くのトークンを消費する点に注意して、値を大きくしてください。

ディスク上の 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 は累積し、インスタンスの宣言が最後に追加されるため、インラインカスケードで優先されます。定義から呼び出されるのはタグのみです。したがって、上記の例では、定義で設定された内容に padding-inline: 16px が加わったホバーテンプレートがレンダリングされます。

すべて人が読める形式で、差分も確認できます。autoCommit を有効にすると（init の既定値）、書き込み操作のたびに、ツール名と対象に基づいた名前（write_html: dashboard、set_tokens: color.primary、など）の git コミットが1つ作成され、監査ログになります。

ブラウザーのプレビュー

デーモンの起動後、http://127.0.0.1:<port> で表示されます。プレーンな ES モジュールで、ビルド手順は不要です。

• プロジェクト選択 — トップバーで開いているプロジェクトを切り替えられます。既存のフォルダーを開くか、アプリ内のフォルダーブラウザーから新しいプロジェクトを作成できます。フォルダーを新規作成することもでき、再起動は不要です。何も開いていない場合は、どちらの操作も選べる空の状態が表示され、最近使ったプロジェクトと、AI ツールですぐに使えるプロンプト（"Create an Artisign project in ~/work/acme"）も表示されます。
• 画面 — サイドバーの画面ツリーに、レンダリングされたソースが表示されます（プレビューは設計上、出力そのものです）。バリアントは親の下にネストされ、種類を示すアイコン（state、overlay、step）とタグチップが付きます。展開状態はブラウザーごとに保持され、グループ行をピン留めすると、そのサブツリー全体がピン留めされます。
• バリアントのコンテキスト — バリアントである画面、またはバリアントを持つ画面では、キャンバスの上にパンくずリスト、横にバリアントのツリーマップが表示されます。インスペクターには、その画面に「Also reached from」として表示されるフローの参照元が一覧表示されます。
• 比較 — 画面ビューの Single | Compare · N を選ぶと、ファミリーのメイン画面（固定された参照画面）と1～3個のバリアントを、2～4列で並べて表示します。差分オーバーレイでは、参照画面と比べて追加、変更、削除されたノードが示されます。ノードの照合には作成時の id のみを使用します。共通する作成時の id が25 %未満の場合、その列には差分ではなく、差分を表示できないことを示すバナーのみが表示されます。
• ボード — すべての画面が、1つのスクロール可能な領域にタイルとして配置され、画面間のフローエッジが描画されます（切り替え可能）。ズームスライダーは5%～200%で、「すべてに合わせる」、100%、またはCtrl/Cmd+ホイール／ピンチ操作でカーソルを中心にズームできます。サイドバーの共有フィルターにかかわらず、ピン留めした画面もボードに表示されるため、フローを自分で再構成するのではなく、目で確認できます。バリアントを持つ画面はクラスターとして描画されます。メイン画面を囲むフレームにバリアントのサムネイルが並び、深さごとに1列（各深さにつき約8タイル、それ以降は「+N more」）に展開されます。開いているクラスターは set_board_state を通じてタブとエージェント間で共有され、ブラウザーごとの Clusters On/Off 切り替えでフラットなタイル表示に戻せます。
• 要素パネル — 選択した画面のノードを、エージェントが指定する際に使うIDとともに一覧表示します。
• メモパネル — 画面自体のメモと、その画面に適用されるタグメモを、Markdownとして表示します。
• フローモード — data-flow-target を持つ要素をクリックすると、リンク先の画面に移動します。
• コメントモード — 要素をクリックしてコメントのアンカーを設定します。コメントは comments.jsonl に追加され、list_comments で取得したり、reply_comment で返信したりできます。
• デザインシステム — カテゴリー別のトークンスウォッチと、すべてのバリアントを横並びにレンダリングした各コンポーネントが表示されます。
• モックアップビュー — モックアップのバリアントをリアルタイムで列ごとに横並びに表示し、それぞれのタイトルと説明も表示します。
• 追従モード — デフォルトではオフです。トップバーの Follow 切り替え（オフ／Following／Follow paused の3状態）を使うと、プレビューがライブのエージェントセッションによるMCPツール呼び出しを追跡し、操作対象に応じて表示画面や選択を切り替え、影響を受けたノードを短時間だけ枠で囲みます（読み取り時は実線のティール、書き込み時は紫の破線と背景色、write_html の後は画面全体を破線の枠で囲んで「Updated」バッジを表示）。追従モード自体の状態にかかわらず、すべてのツール呼び出しは右パネルの新しい Activity タブにも表示されます（最新50件、メモリー内に保持、新しい順）。画面やタブのクリック、Activity フィードの項目のクリック、コメントモードやインスペクトモードの開始といった人間による操作で追従は一時停止します。再開するには、切り替えボタンの「Resume」を操作する必要があります。
• SSEによるライブリロード — ディスク上のファイルに変更があると、約200 ms以内にブラウザーへ反映されます。

決定論的なレンダリングの基準

レンダリングされるすべての画面（screens ペイン、Design System のバリエーション、get_screenshot）では、同じ小さな基準ドキュメントでレンダリングされたフラグメントを囲みます。そのため、エージェントがデザインしたものは、どこでもピクセル単位で同じようにレンダリングされます。保証されるのは、すべての要素に box-sizing: border-box が適用されること、body のマージンがゼロであること、テキストがアンチエイリアス処理されることです。width: 390px と宣言されたスクリーンのルートにパディングを設定しても、幅は正確に 390px になります。暗黙の UA マージンやボックスモデルの想定外の挙動を考慮する必要はありません。

フォントとアイコン

design-system/tokens.json の typography バケットで指定されたフォントファミリー（例："600 24px/1.2 'Plus Jakarta Sans', sans-serif"）は、Google Fonts から woff2 として一度だけ取得され、.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 フォントと同じく、次の 2 通りの方法で解決されます。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/ は、上記のディスク上の形式に沿った実際のプロジェクトです。トークン、コンポーネント、スクリーン、フローが含まれており、127.0.0.1:4711 に表示されるインターフェイスのデザイン元になっています。

同梱されている src/preview/style.css の :root ブロックに対応するすべてのトークン（19 色、6 段階のスペーシング、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/ 内の 2 つのガイドドキュメントのみです。package.json の files を参照してください。prepack は npm pack／npm publish の前にビルドを自動実行するため、古い dist/ が tarball に含まれることはありません。

ドキュメント

内容	場所
エージェント向けのデザイン方法論（規範的な内容。get_guide で提供）	docs/agent-guide.md
同じワークフローの詳細版。人間とスキル作成者向け	docs/design-workflow-tutorial.md
ツール自身の UI を、このツールでデザイン	design/ — 自分自身を使ってデザインを参照

問題とセキュリティ

バグ報告、機能のアイデア、ご質問は イシュートラッカーにお寄せください。該当するテンプレートを選んでください。脆弱性は公開イシューではなく、非公開の報告手段をご利用ください。詳しくはSECURITY.mdをご覧ください。現在、コードのコントリビューションは受け付けていません。その理由と歓迎する内容については、CONTRIBUTING.mdをご覧ください。

ライセンス

Copyright (C) 2026 Christian Körbs

Artisignはフリーソフトウェアです。Free Software Foundationが公開するGNU Affero General Public Licenseのバージョン3の条件に基づき、再配布や改変ができます。

Artisignは有用であることを願って配布されていますが、商品性や特定目的への適合性を含め、いかなる保証もありません。詳しくはGNU Affero General Public Licenseをご覧ください。

このプログラムとともにGNU Affero General Public Licenseのコピーを受け取っているはずです。受け取っていない場合は、https://www.gnu.org/licenses/をご覧ください。全文はLICENSEに記載されています。

ライセンスの対象とならないものが2つあります。

• デザインはあなたのものです。 AGPLが対象とするのはArtisign自体のソースコードであり、あなたが作成した画面、コンポーネント、トークン、プロジェクトではありません。Artisignがプロジェクトフォルダーに書き込むファイルは、すべてあなたに帰属します。
• 名称はライセンスされていません。 「Artisign」、そのロゴ、ドメインはAGPLの許諾に含まれません。フォークではコードを使用できますが、独自の名称が必要です。