POINT IT AT YOUR VIBE-CODED APP
デザインの記憶を、あなたとAIとチームで共有する。
Harnd — デザインシステムのAIハーネス。
AIが作ったアプリに harnd を向けるだけ。数分で、トークン・コンポーネント・そして「なぜそう決めたか」が、AIが実装前に読み・チームが信頼できる一つのソースになります。人・エージェント・クライアントが増えても、デザイン品質は崩れません。
デザイナーのいないチームで UI を出している、エンジニアとファウンダーのための道具です。
ハーネスがないと、こうなる。
あなたのリポジトリについて、これだけのことを言います。
コマンド1つ、アカウント不要、どこにも送りません。以下はデモ用プロジェクトでの出力です。数字は架空ですが、形式は本物です。
$ npx @harnd/cli scan ✓ scan complete — 214 files analyzed @ 9f3c1a2 7 values in your code sit outside your 22-token scale — decisions nobody made on purpose. 4 components render the same <button> with the same kind of styling: PrimaryButton, SubmitButton, CtaButton, ActionButton They use the same set of utilities: bg, px, py, rounded, text, …. If that is all that separates them, they are one component with a variant. Tokens: 22 (22 active) — this run: 22 new Components: 38 (38 active) — this run: 38 new Reuse Rate: 31% Observed: 14 colors / 9 spacing values / 7 arbitrary values Next: run `harnd validate` to detect drift.ほとんどのプロジェクトはトークンを1つも宣言しておらず、気づかないうちにデザインシステムを運用していたことが分かります。
仕組み
エージェントが書いたものを読み取ります
コードを走査して、実際に使われている色・余白・コンポーネントを取り出します。ほとんどのプロジェクトはトークンを1つも宣言しておらず、気づかないうちにデザインシステムを運用していたことが分かります。
何が起きているかを言います
色しか違わないボタンが4つ。自分のスケールから外れた値。名前ではなくコードの構造から見つけ、何が共通なのかを添えて出すので、判断はあなたができます。
エージェントが読み、それに従わせます
トークンとコンポーネントの定義、そして何より「いつ使わないか」を、エージェントが読む場所に書き出します。そのうえで、エージェントが完了と言った瞬間に検査が走り、壊したものはそのまま本人へ返されます。
よくある質問
動かすのに何が要りますか?
Node.js 20 以上と Git リポジトリだけです。デザインツールは不要で、ローカルのコマンド(init / scan / validate)はアカウントも要りません。すべて手元で完結します。
どんな環境向けに作られていますか?
Claude Code と Tailwind です。生成物は素の Markdown なのでどのコーディングエージェントでも読めますし、CSS変数のトークンはスタックを問わず検出します。ただし毎日実際に回して確かめているのは Claude Code で、「エージェントが完了と言った瞬間に検査を挟む」一手が入るのもこの環境だけです。他のエージェントや他のスタイリング手法はまだ評価していないので、約束せずにそう書いています。
早期アクセスに登録
ウェイティングリストに参加。質問は3つだけです。
ベータ期間中は無料です。課金を始める際は、個人向けで月 $19 前後を予定しています。チーム向け・エンタープライズ向けはその後に用意します。いずれもまだ確定ではなく、変更するときは事前にこの場でお知らせします。