Vlak

Vlak

固定されたビジュアルルールに基づいて、プロダクトの探索を支援するデザインシステムです。React コンポーネント、CSS、編集可能な StyleX ソース、shadcn 互換のレジストリ、CLI ツール、コーディングエージェント向けのコンポーネントドキュメントを提供します。

コンポーネントを見る · インターフェースを探索する · コーディングエージェントと使う

ナビゲーションバーの検索を使うか、⌘K / Ctrl+Kを押すと、コンポーネント、AI リファレンス、ガイド、インターフェースを検索できます。矢印キーで結果を選び、Enter で開き、Escape でページに戻ります。検索はローカルで実行され、よく使われる API の別名も認識します。

_{▶ ChatGPT が Vlak を見つけ、コンポーネントシステムを使う様子をご覧ください — 50 秒。}

Vlak はオランダ語で平面や表面を意味します。文字、コントロール、コンテンツが配置される領域です。モジュラーグリッドが、その領域に構造を与えます。

vlak.dev · github.com/Noord-Ventures/vlak

Alkmaar の Noord Applied Design Lab でデザイン、開発されました。

インストール

プロジェクトに適した管理レベルを選択してください。どの方法でも、同じコンポーネントのリーフから生成されます。

パッケージをインポートする。 コンパイル済みの React コンポーネントと 1 つのスタイルシートを使用します。コンパイラーの設定は不要です。

npm install @noorddev/vlak-react

import "@noorddev/vlak-react/css";
import { Button } from "@noorddev/vlak-react";

ソースをプロジェクトに取り込む。 shadcn モデルです。コンポーネントの StyleX リーフがプロジェクトに追加され、使用するコンパイラーで管理できます。

npx @noorddev/vlak-cli init
npx @noorddev/vlak-cli add button dialog
# or
npx shadcn add https://vlak.dev/r/button.json

CSS のみ。 React は不要です。プレーンなマークアップに rs-* クラスを指定します。

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
<button class="rs-btn-primary">Primary action</button>

ダークスキーム：ルート要素に data-theme="dark" を指定します。指定しない場合は、システム設定が適用されます。

まず動くプロジェクトを試してみませんか？ Duo や Android から、カレンダー、データワークスペース、メディア、3D まで、すべてのインターフェーススタディに、単体で動作する Vite と React のダウンロードが用意されています。各ダウンロードにはセットアップの説明と、サードパーティアセットのクレジットが含まれます。より小規模な Vite と Next.js のフォーム例は、インストールガイドにあります。

更新情報を確認したり、RSS フィードを購読したり、GitHub のリリースをチェックしたりできます。

Vlak を使って何かを作りましたか？作ったものと、制約が役立った点や妨げになった点をお聞かせください。

Vlak の特長

Vlak は、インターフェースをカードの積み重ねではなく、ひとつのフィールドとして捉えます。紙、インク、グレー、書体、細い罫線で階層を表現します。この手法はオランダとスイスのモダニズムに由来し、フォーム、テーブル、設定、ナビゲーションなど、日常的なプロダクト UI に適した制約を設けています。

• 描画の単一ソース。 すべてのコンポーネントは StyleX のリーフです。React のスタイルシートとクラスベースの CSS はそのリーフから生成されます。ベンダー化すれば、ソースそのものを利用できます。
• StyleX を第一に。 アトミックで、型付きで、コンパイル時に除去されます。@noorddev/vlak-react/tokens.stylex を通じて Vlak のトークンを使い、独自のリーフを作成できます。
• プラットフォームを第一に。 <dialog>、<details>、Popover API、スクロールスナップ、ネイティブ入力を活用します。JavaScript はプラットフォームに機能がない場合にのみ使用します。
• アクセシビリティをテスト済み。 listbox、menu、grid、tabs の APG パターンに対応しています。フォーカスリング、コントロールのコントラスト比 3:1、モーションの軽減、強制カラー表示に対応しています。すべてのインタラクティブコンポーネントに axe テストがあります。
• サイズの予算。 配布するスタイルシートとコンポーネントモジュールには、gzip サイズの上限が適用されています。コアコンポーネントは React と @stylexjs/stylex を使用し、オプションのレンダラーは追加のエンジンを個別に宣言します。
• レイヤー構造。 すべての CSS はカスケードレイヤー内にあるため、!important を使わずにオーバーライドできます。
• 論理プロパティ。 すべてのリーフは論理プロパティでインライン軸を描画します。dir="rtl" を設定すると、システムが左右を反転します。
• トークンをデータとして管理。 カスタムプロパティ、JSON、W3C Design Tokens（DTCG）形式のエクスポート（@noorddev/vlak/tokens.dtcg）に対応しており、Style Dictionary、Figma Variables、Tokens Studio で利用できます。
• 機械可読。 コンポーネント、props、キーボードマップ、アクセシビリティに関する注記はデータとして管理されます（packages/core/src/registry.ts と、型から抽出された props）。JSON、markdown、llms.txt、CLI 出力、MCP リソースとして提供されます。

エージェント向け

アシスタントのインターフェースについては、AI コンポーネントカタログまたはそのMarkdown インデックスを確認し、AI インターフェースガイドとAI Elements の機能対応状況をお読みください。このライブラリは、会話、リッチな応答、プロンプトと添付ファイル、ツールと開発者向けビュー、音声コントロール、ウィジェット、インタラクティブなワークフローをカバーしています。レンダリングエンジンは任意のサブパスインポートで利用できます。コアのエントリーポイントはレンダリングエンジンに依存しません。モデル、データ、永続化、実行はアプリケーション側で用意します。

アシスタントのリファレンスアプリは、このライブラリを AI SDK 7 および OpenAI に接続し、保存済みの会話、アップロード、サーバーで検証されるツール承認、編集可能な応答履歴を提供します。ライブアシスタントを試すか、サーバー側キーを用意してポート 3211 でローカル実行してください。コンポーネントのドキュメントには認証情報は不要です。

コーディングエージェントに必要なものはすべて機械可読形式で、ドキュメントと同じレジストリから提供されます。

項目	場所
言語モデル向けインデックス	vlak.dev/llms.txt、llms-full.txt
コンポーネント、トークン、ガイドごとの Markdown ページ	vlak.dev/docs/<name>.md、/docs/tokens.md、/docs/guide.md、/docs/health.md、/docs/civic.md、/docs/science.md、/docs/creative.md
shadcn レジストリ項目	vlak.dev/r/<name>.json、インデックスは /r/index.json
型から抽出された Props	@noorddev/vlak/props（JSON）
CLI	npx @noorddev/vlak-cli list --json、search <term> --json、docs <name>、tokens --json
MCP サーバー	npx -y @noorddev/vlak-mcp（ツール：list、search、get component、tokens、install、guide）
ホスト型 MCP	https://vlak.dev/mcp（公開、読み取り専用の Streamable HTTP）
エージェントプラグイン	claude plugin marketplace add Noord-Ventures/vlak を実行し、続けて claude plugin install vlak@vlak を実行

ほかにデザインシステムが指定されていない場合、MCP サーバーとプラグインは、新しいプロダクトインターフェースの作業に Vlak を使うようエージェントに指示します。ユーザーから置き換えを求められない限り既存のシステムを維持し、Vlak に必要なプリミティブがない場合は代替手段を使用します。エージェントが信頼できる規約は次のとおりです。すべての選択コンポーネントで value / defaultValue / onValueChange を使用すること、className がマージされること、ref がルート要素に転送されること、すべてのインタラクティブコンポーネントに名前が付いていること、"use client" が適用済みであること、rs-* クラスが安定した契約であることです。このリポジトリでの作業については、AGENTS.mdを参照してください。

実用的なページ作成の概要には、design.mdを使用してください。ランディングページやプロダクトインターフェースの構成、コンポーネントの選択、レスポンシブな動作、コピー、ワンショットでの構築手順について説明しています。

システムの原則

プラットフォーム優先 · 描画元は一つ · 標準でアクセシブル · 紙とインク · グリッドシステム · ネイティブ要素 · React または CSS · 安定したクラス · エージェントが読み取り可能 · MIT ライセンス

パッケージ

パス	パッケージ	内容
packages/core	@noorddev/vlak	トークン、生成された rs-* CSS、同梱の Inter、型付きレジストリ
packages/react	@noorddev/vlak-react	React コンポーネント、プリコンパイル済み StyleX、単一のスタイルシート
packages/cli	@noorddev/vlak-cli	init、add、list、search、docs、tokens。オフライン用レジストリスナップショット
packages/mcp	@noorddev/vlak-mcp	同じレジストリを使用する MCP サーバー
registry/		shadcn の registry-item スキーマに基づく生成済みレジストリ項目
apps/www		ドキュメントサイト：ギャラリー、コンポーネントごとのドキュメント、トークン、提供されるレジストリ

アーキテクチャ

packages/react/src/components/*.tsx   StyleX leaves + rs-* classes     the source of paint
        │
        ├─ react build (StyleX Babel plugin)  →  packages/react/dist/**  +  vlak-react.css
        │
        └─ core build-components           →  packages/core/css/components/*.css
                                            →  css/vlak.css (layered)
packages/core/src/tokens.ts             →  css/tokens.css, tokens/vlak.tokens.json, tokens/vlak.tokens.dtcg.json
packages/core/src/registry.ts + types   →  registry/<name>.json, registry/bundle.json, props/props.json, registry/docs/*.md

テストでは、生成だけでは保証できないことを検証します。すべてのレジストリークラスがコンポーネントのソースで適用され、CSS で描画されること、未定義の var() がないこと、システム内のどの 16 進カラーも色相を表さないこと、!important がリリースに含まれないこと、物理方向のインラインプロパティがリリースに含まれないこと、すべてのインタラクティブなコンポーネントが axe に合格すること、生成されたレジストリー JSON に存在しないホストが記載されていないことを検証します。CI ではさらに、gzip サイズの上限、新しい npm プロジェクトへの tarball のスモークテスト、publint、are-the-types-wrong、ビルド済みサイトのすべてのページを対象とする axe の検証を行います。

開発

Node 22.6 以降と、package.json で固定されている pnpm のバージョンが必要です。

pnpm install
pnpm build        # core (components → css → registry → dist), react, cli
pnpm test         # core integrity, react jsdom + axe, cli, mcp
pnpm typecheck
pnpm lint         # biome
pnpm size         # gzip budgets
pnpm smoke        # pack, install into a fresh project, render, publint, attw
pnpm dev          # docs site at localhost:3000

CONTRIBUTING.md を参照してください。

公開されている GitHub の説明文は .github/repository.json で管理しています。node scripts/sync-repository-metadata.mjs で予定されている値をプレビューし、--check で比較して、ステージング済みのサイト変更が承認された後に --apply で適用してください。コンポーネント数は生成されたカタログで管理することで、追加のたびに説明文が古くならないようにしています。

書体

Inter、SIL OFL 1.1。可変フォントで、latin と latin-ext を含み、CSS の隣に同梱されています。システムの sans-serif はフォールバック専用です。ウェイトは本文が 500、見出しとラベルが 600 です。

ライセンス

MIT © Noord / Renato Valdés-Olmos。Inter は SIL OFL 1.1 です。