Hallmarkの21テーマと57ゲートをデザイン作業へ組み込む
Hallmark は、AI によって生成された一般的なインターフェイス パターンにフラグを立て、コーディング エージェントに具体的な置換ルールを与える設計レビュー スキルです。
ひと目でわかる
- これは何？
- Nutlope/hallmark READMEが説明するUI生成、audit、redesign、study、Customテーマと導入先を整理します。
- 誰に向いている？
- Claude Code、Cursor、Codexで生成UIの構造と見た目を案件ごとに変えたいチームに向きます。最初に `npx skills add nutlope/hallmark` を隔離したプロジェクトで実行し、`skills/hallmark/SKILL.md` と `references/` の配置を確認してください。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 40 日前です。
- 何の言語で書かれている？
- 主に CSS です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
nutlope-hallmarkのHallmarkが対象にするUI生成の問題
Nutlope/hallmark の README はプロジェクトを「Anti-AI-slop design skill for Claude Code, Cursor, and Codex.」と説明しています。ここではリポジトリで確認できる事実だけを整理します。star 数やバッジは注目度の手掛かりであり、品質の証明ではありません。「Hallmark」には次の説明があります。A design skill for Claude Code, Cursor, and Codex that refuses to look AI-generated.。これは範囲の説明であり、本番検証の結果ではありません。
nutlope-hallmarkのdefaultと四つのverbを使い分ける
README の「Install」にある内容から、用途が合うかを先に判断できます。Codex: /.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project-scoped)。目的が違うなら、人気だけで採用する理由にはなりません。プロジェクト名やコマンドは原文のまま残し、一次資料へ戻って用語を確認できるようにしています。 README には次の確認可能な項目もあります。Cursor: .cursor/rules/hallmark.mdc (body of SKILL.md, no frontmatter)。初回テストの材料にはなりますが、実際の環境での確認を省略する理由にはなりません。
nutlope-hallmarkのmacrostructure、21テーマ、57ゲート
動作の説明は「Hallmark」など複数の箇所に分かれています。確認できる情報は次の通りです。Hallmark picks a macrostructure for the brief, dresses it in one of twenty themes, runs fifty-seven slop-test gates plus a pre-emit self-critique, and refuses the on-distribution defaults every LLM was trained into.。書かれていない構成、性能、セキュリティを推測で補いません。導入時はディレクトリ、設定ファイル、release 履歴を確認してください。
nutlope-hallmarkのauditとredesignで既存コードを読む
初回導入は README の入口から始めます。確認できるコマンドは次の通りです。
READMEにはこの項目の直接実行コマンドが掲載されていません。
実行可能なコマンドがない場合は手順を作らず、「Four verbs」で依存関係、待受ポート、初回設定を確認します。
nutlope-hallmarkのstudyが抽出する設計上の特徴
日常運用は公式文書の範囲に限ります。「Four verbs」には| Verb | What it does | | --- | --- | | (default) | Build new UI. Picks a macrostructure, applies the rule-set, runs the slop test before handing back. | | hallmark audit | Score existing code against the anti-patterns.とあります。設定、環境変数、権限、データ保存先は明記されたものだけを扱います。未記載の既定値は隔離環境で確認し、戻せる設定を保存してください。 同じ資料にはCursor: .cursor/rules/hallmark.mdc (body of SKILL.md, no frontmatter)ともあります。
nutlope-hallmarkのCustomテーマとcustom-theme.md
制約も確認が必要です。現在の資料からは、Nutlope/hallmark の互換表、性能基準、サービス保証、長期サポートを確認できません。README の記載は「Each generated from a different brief. The skill picks the theme, structure, and craft to fit each one, not from a template.」です。不明点は採用記録の検証項目として残し、断定に変えないでください。
nutlope-hallmarkのSKILL.mdをClaude、Cursor、Codexへ置く
ライセンスはメタデータと LICENSE に基づき、SPDX は MIT です。再配布や改変の条件を確認する情報であり、安全審査の代わりではありません。認証情報、公開範囲、ログ、依存ライブラリの扱いは別途確認が必要です。
nutlope-hallmarkの生成HTMLとCSSコメントを確認する
保守判断の材料は、既定ブランチ main、21504 stars、1089 forks、38 件の open issue です。「Different briefs, different shapes」にはEach page is self-contained HTML + CSS, stamped with its macrostructure in the CSS comment. Browse the full set at usehallmark.com.とあります。更新計画の参考にはなりますが、実際の upgrade テストは省略できません。 保守時は README の「Custom NEW」も確認します。When a brief carries creative intent that no catalog theme fits, Hallmark switches to Custom and designs the page from scratch: a made-to-measure palette, type, and layout. Same 57 slop-test gates, no template underneath.。
Hallmarkはbriefからmacrostructureを選び、21テーマの一つを適用し、57個のslop-test gateと出力前の自己批評を通すとREADMEで説明されています。defaultは新規UI、auditは既存コードの採点、redesignは構造を作り直す操作、studyはスクリーンショットやURLから設計上の特徴を抽出する操作です。Customはカタログに合わない意図を持つbrief向けで、`skills/hallmark/references/custom-theme.md` がプロトコルの所在です。生成HTMLのCSSコメントにmacrostructureが記録されるという説明も、出力ファイルで確認します。
Hallmarkの判定を確かめるには、同じbriefから出た複数のHTMLを見比べます。defaultで新規ページを作り、同じ入力を `hallmark audit` に渡したときの指摘を保存し、redesign後に構造とCSSコメントがどう変わったかを確認します。studyは参考サイトのDNAを抽出する機能として説明されていますが、READMEは生成物の品質を数値で示していません。Customを使う場合は `skills/hallmark/references/custom-theme.md` の条件と、通常テーマへ戻る境界を読む必要があります。Codexでは個人用の `~/.codex/skills/hallmark/` とプロジェクト用の `.codex/skills/hallmark/` を混同しないよう配置を確認します。出力が依頼の情報設計やブランドを保持しているかは、57ゲートの通過だけでは判断できません。
導入範囲を決めるときは、skillの配置場所、入力brief、生成されたHTML、auditの結果を同じ変更単位に保存します。READMEのサンプルサイトはテーマや構造の例を示しますが、任意の既存コードで同じ指摘が出ることまでは説明していません。Cursorで使う場合はSKILL.mdのfrontmatterを除くという手順があるため、Codex用の配置と内容をそのままコピーしないでください。
Hallmarkを導入した後は、生成物だけでなくauditの指摘と修正差分を残します。テーマが変わったことだけで採用判断をせず、依頼した情報設計が保たれたかをHTMLの構造で確かめます。
同じbriefでdefaultとredesignを比較し、構造の変更、テーマの変更、ブランド文言の変更を分けて確認します。実際の案件へ広げる前に、使ったSKILL.mdとreferencesの版を出力と一緒に保管します。
テーマ名だけでなく、生成CSSの構造差も保存します。
テーマ名だけでなく、生成CSSの構造差も保存します。入力briefと対象コードの版も同じ記録に残します。
テーマ名だけでなく、生成CSSの構造差も保存します。入力briefと対象コードの版も同じ記録に残します。生成されたHTMLの差分も確認します。
編集部の結論
Claude Code、Cursor、Codexで生成UIの構造と見た目を案件ごとに変えたいチームに向きます。最初に `npx skills add nutlope/hallmark` を隔離したプロジェクトで実行し、`skills/hallmark/SKILL.md` と `references/` の配置を確認してください。default、`hallmark audit <target>`、`hallmark redesign <target>`、`hallmark study <screenshot | URL>` の結果を、同じbriefで比較して採用範囲を決めます。
コミュニティノート