Nutlope/hallmark

これは何？

主な機能

• 01コードを書く前に、ブリーフに基づいてページの大枠の構成を選びます。
• 0221種類のテーマに加え、合うテーマがないブリーフ向けのCustomモードを用意しています。
• 0357項目のアンチパターンチェックと、出力前の自己批評を実行します。
• 04既存コードを編集せずに監査し、修正項目のリストを返します。
• 05スクリーンショットやURLからレイアウト、フォントの組み合わせ、配色を抽出し、design.mdにまとめます。

ユースケース

• AIコーディングアシスタントに、画一的に見えないランディングページやプロダクトUIを作らせる。
• 既存のフロントエンドコードベースに、よくあるAI生成デザインのパターンがないか確認する。
• コピーと構成を維持しながら、サイトの見た目を再デザインする。
• 気に入ったデザインを、ほかのツールでも使える再利用可能なデザインブリーフに変換する。

クイックスタート

1. 1

   npx でスキルをインストールする

   npx skills add nutlope/hallmark
2. 2

   AI コーディングツール（Claude Code、Cursor、Codex）を開いて UI の作成を依頼すると、スキルが自動的に適用されます

使う前に知っておきたいこと

• !AI コーディングエージェント向けのプロンプトルール集のため、対応ツールをすでに使っている場合にのみ役立ちます。
• !出力の品質は、基盤となる AI モデルと、与える brief の内容によって異なります。

トピック

よくある質問

hallmark とは？

Claude Code、Cursor、Codex向けのデザインスキル。AIコーディングエージェントが、AI生成に見えないUIを作れるよう導きます。 Hallmarkは、Claude Code、Cursor、CodexなどのAIコーディングアシスタントに追加できるデザインスキルです。与えられたブリーフに合うページ構成を選び、21種類のテーマを適用してから、よくある画一的なAIデザインのパターンに対する57項目のチェックを実行し、結果を返します。

hallmark は無料で使えますか？ライセンスは？

hallmark は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

hallmark は今もメンテナンスされていますか？

半年以内に更新あり。hallmark の最終コミットは 2026年8月6日 です。

hallmark は何に使えますか？

AIコーディングアシスタントに、画一的に見えないランディングページやプロダクトUIを作らせる。 既存のフロントエンドコードベースに、よくあるAI生成デザインのパターンがないか確認する。 コピーと構成を維持しながら、サイトの見た目を再デザインする。 気に入ったデザインを、ほかのツールでも使える再利用可能なデザインブリーフに変換する。

hallmark のインストール方法は？

npx でスキルをインストールする: npx skills add nutlope/hallmark AI コーディングツール（Claude Code、Cursor、Codex）を開いて UI の作成を依頼すると、スキルが自動的に適用されます

hallmark はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Nutlope/hallmark