オープンソース「hallmark」登場：Claude CodeやCursorの「AI臭い」UI生成を徹底排除

hallmarkは、Together AIのエンジニアNutlope氏が公開したオープンソースのデザインスキルだ。Claude Code、Cursor、Codex、OpenCodeに対応し、LLM特有の定型的な「AI臭さ」を排除したフロントエンドコードを生成する。

指示を与えずにLLMにWebページを作らせると、お決まりの紫グラデーション、見出し上の無意味な英語ラベル、大文字トラッキングボタン、動かないメール登録フォームといった偏ったデザインに収束しがちだ。hallmarkは、こうしたAI特有のデフォルト値を機械的に弾くために設計されている。

何ができるのか

hallmarkは単なるテンプレート集ではなく、実用的なデザインワークフローとして機能する。

内部には50種類の「マテリアルテーマ」を収録。各テーマは8KB以下の設定ファイルと作例画像で構成され、紙の質感、タイポグラフィ、配色、サーフェスなどを定義している。骨格そのものを固定しないため、同じテーマを選んでも目的が異なれば全く別のレイアウトが組み上がる。

独自のデザインを作りたい場合は「custom」と指定するだけで、カタログを使わずにプロンプトから固有の配色やレイアウトをゼロから設計する。

また、架空のダミーデータを防ぐ設計も徹底している。開発サーバーや既存アプリのURLから実画面のスクリーンショットを直接取得するほか、Wikimedia Commonsのオープンライセンス写真755件のリストを備え、クレジット付きで実画像を配置する。生成物はすべてスタンドアロンのHTMLとCSSで出力され、冒頭のコメントに設計判断が記録される。

新規構築だけでなく、既存コードの改善にも対応する。「/hallmark redesign」を実行すれば、既存の文案やリンク、イベントハンドラーを壊さずにビジュアル設計だけを刷新でき、「/hallmark audit」ではコードを変更せず問題点のみをレポートする。

「AI臭さ」をどう防ぐか

hallmarkの最大の特徴は、審美性の検証を実際のブラウザレンダリングと多層ゲートに落とし込んでいる点だ。

チェック機構は段階的に分かれている。最下層の「Floor」は、コントラスト不足、フォーカス不備、レスポンシブ崩れ、事実の捏造などを検知し、未達の場合はビルドを通過させない。続く「Reflex gates」では、大文字ラベルや不自然な強調色といったLLMの安易な手癖を排除する。

生成時はまずヒーローセクションだけを先行してビルドし、単体でレンダリング検証を実施する。その後、sloplintスクリプトを用いて実ブラウザ上で8種類の画面幅で検証し、最終的に新しいコンテキストを持つサブエージェントが全体をレビューする。

セットアップと使い方

hallmarkはMITライセンスでGitHubにて公開されている。

導入は「npx skills add nutlope/hallmark -g」を実行するだけで完了する。Claude Codeではプラグインとしての追加も可能だ。動作にはNode 18以上が必要で、ブラウザでの自動レンダリング検証やスクショ取得を行う場合はpuppeteer-coreとローカルのChromeを要求する。これらがない環境でも静的チェックはそのまま動作する。

なぜ重要か

AIを使って日常的にフロントエンドを組む開発者にとって、最大の課題は「動くUIを作れるか」から「いかにもAI製に見えないUIにできるか」に移っている。hallmarkは抽象的なプロンプト調整に頼るのではなく、デザインの良し悪しを実行可能なブラウザテストとして定義した点が秀逸だ。CursorやClaude Codeで実用レベルのWebサイトを素早く立ち上げたいなら、試す価値が十分にある。