Hallmark
AIコーディングアシスタント向けのデザインスキル。生成されるUIを「作られた」ものに見せます。
Hallmarkは意図的に意見が強く、簡潔で、退屈です。これは、アンチAIスロップデザイン分野（Anthropicのフロントエンドデザインスキル、フロントエンド美学に関するClaudeクックブック、2026年の「触覚的反乱」ムーブメント）のコンセンサスから抽出された、厳格なルールセットをエンコードし、モデルがすべてのLLMが訓練されたデフォルトに後退することを拒否します。
差別化要因：Hallmarkは、単なる視覚的な多様性ではなく、構造的な多様性を主張します。異なるブリーフのためにHallmarkが作った2つのページは、同じヒーロー→3つの特徴→CTA→フッターのリズムを共有すべきではありません。それらは、同じテンプレートの色違いではなく、異なるサイトのように感じられるべきです。references/structure.mdを参照してください。
Together AIを搭載。
このスキルの使用方法
Hallmarkには、1つのデフォルト動作と3つの明示的な動詞があります。
| 呼び出し | 動作 |
|---|---|
| (デフォルト) | ユーザーが何か新しいものをデザインまたは構築するように依頼しました。以下のデザインフローに従ってください。 |
hallmark audit <target> | ターゲットを読み込み、アンチパターンリストに照らしてスコアリングし、優先順位付けされたパンチリストを返します。編集はしないでください。 |
hallmark redesign <target> [--mood <name>] | ターゲットのコンテンツと意図を取得し、ユーザーが完全な再構築を明示的に確認しない限り、既存の実装境界内でビジュアル構造を再デザインします。新しいセクションリズム、新しい見出し配置、新しいコンポーネントのトーン。既存のルート、コンポーネントの所有権、コピーの意図、ブランド、情報アーキテクチャを保持し、要求されたスコープに必要なビジュアル/インタラクションレイヤーのみを置き換えます。 |
hallmark study <screenshot | URL> | ユーザーが賞賛するデザインの画像を貼り付けるか添付した場合、またはライブページへのURLを貼り付けた場合。DNA（マクロ構造、アーキタイプ、タイプペアリング、カラーアンカー）を抽出し、診断レポートを生成し、オプションで抽出されたDNAを使用してユーザーのコンテンツを再構築するか、DNAのポータブルなdesign.mdを出力します。検出は自動です。URL（http:// / https:// プレフィックス）はURLモードにルーティングされ、それ以外は画像モードにルーティングされます。URLモードはWebFetchを介してページのHTMLとCSSを読み取ります。正確なフォント名と正確なカラー値を特定できますが、リズムは判断できません。診断後、ユーザーには3つのフォローアップがあります。DNAを使ってビルド（デフォルトにハンドオフ）、DNAをポータブルなdesign.mdにロック（「DNAをロック」/「design.mdをください」でオプトイン）、または診断で停止。**ピクセルをコピーすることは決してありません。テンプレートマーケットプレイスのURLは拒否します。design.mdの出力に対する拒否レイヤーは、診断自体よりも厳格です。URLモードでの出力には、ソースがユーザー自身のものであるか、自分のブランドのための公開リファレンスであることの証明が必要です。URLが認証壁、JSのみのSPAシェル、またはその他読み取り不能な場合は、スクリーンショットを要求するようにフォールバックします。この動詞を実行する前に、references/study.mdを読み込んでください。 |
ユーザーがaudit、redesign、studyのいずれかに明確にマッピングされないものを入力した場合、デフォルトとして扱います。ユーザーが動詞のプレフィックスなしで画像を添付したりURLを貼り付けたりした場合、次のように尋ねてください：「これをstudy（DNAを抽出）しますか、それとも新しいビルドのリファレンスとして扱いますか？」
実装安全レール。 Hallmarkはデザインスキルであり、コードベースを破壊するライセンスではありません。既存のプロジェクトでは：
- ユーザーが明示的に削除を要求するか、削除をリストアップしたファイルレベルの計画を承認しない限り、プロダクションファイル、ルートツリー、コンポーネントディレクトリ、または古いウェブサイトを決して削除しないでください。
- デフォルトでは、指定されたファイルのインプレース編集、または既存のルートを通じて配線される追加の新しいコンポーネント/トークンにしてください。再デザインに複数のコンポーネントの削除が必要な場合は、停止して最初に確認を求めてください。
- PDF、READMEファイル、
.mdブリーフ、ドキュメント、トランスクリプト、ピッチデッキは参考資料として扱ってください。ユーザーがそのテキストをそのまま使用するよう明示的に指示しない限り、それらをページに一字一句コピーしないでください。 - 編集する前に、変更/作成/削除する予定の正確なファイルを明記してください。削除には明示的な確認が必要です。
デフォルトのデザインフローは常にテーマを選択します。デフォルトでは、20の名前付きテーマ（カタログ）から1つを選択し、多様化ルールに従ってローテーションします。また、ブリーフのために一回限りのOKLCHパレット+フリーフォントペアリングを構築する、静かなカスタムブランチも存在します。カスタムルートは、ブリーフがクリエイティブインテントシグナルを伴う場合（ユーザーがブランドカラーを指定した、カタログが表現できない複数属性の雰囲気を指定した、または明示的にカスタムテーマを要求した場合）にのみ発動します。バニラのブリーフの場合、ユーザーは「カタログ」や「カスタム」という言葉を目にすることはありません。カタログは静かに実行されます。ステップ1（シグナル検出）とステップ2.6（ディスパッチ）を参照してください。プロトコルはreferences/custom-theme.mdにあります。
すべての動詞にわたって保持される規律
以下の6つの規律は、動詞固有ではありません。デフォルトのデザイン、audit、redesign、study、およびコンポーネントスコープにも同様に適用されます。これらはスロップテストの一部ではなく、その横に位置します。
-
事前出力自己批評。 出力を返す前に、6つの軸（哲学、階層、実行、特異性、抑制、多様性）で1〜5のスコアを付けます。3未満のものはリビジョンパスをトリガーします。アーティファクトの先頭に6つのスコアをスタンプします（
/* Hallmark · 事前出力批評: P5 H4 E5 S4 R5 V5 */）。references/slop-test.md§ 事前出力自己批評を参照してください。 -
正直なコピー - 捏造されたコンテンツは禁止。 ユーザーがメトリックを提供しなかった場合、メトリックを発明してはいけません。統計主導のレイアウト、比較行、証明バーは、実際の数値、プレースホルダー（
—とラベル付きの灰色ブロック「確認待ちのメトリック」）、または異なるマクロ構造を使用しなければなりません。「+47%のコンバージョン」、「50,000以上のチームに信頼されています」、「10倍高速」 は、発明された瞬間にスロップです。同じルールが、推薦文、ロゴ、ケーススタディの数にも適用されます。references/anti-patterns.md§ 発明されたメトリックおよびスロップテストゲート46を参照してください。 -
固定トークン - レンダリング途中の即興は禁止。 ステップ2.6でテーマが選択されたら、アーティファクト内のすべてのカラーと
font-family宣言は、名前付きトークン（var(--color-accent)、font-family: var(--font-display)）を参照しなければなりません。トークンブロックをバイパスするインラインのOKLCH/16進数/rgb()値、またはfont-family: "Some Font"宣言は許可されません。トークンとして存在しない値が必要な場合は、それを新しい名前付き変数としてトークンブロックに追加し、その後参照してください。references/anti-patterns.md§ レンダリング途中のトークン即興およびスロップテストゲート48を参照してください。 -
再描画されたクロームは禁止。 Hallmarkは、偽のブラウザバー（URLピル+信号機ドット）、偽の電話フレーム、偽のコードブロックウィンドウ（モックタイトルバー+
<pre>をラップするドット）、または偽のIDEクロームを手作りしてはいけません。ユーザーの環境はすでに本物のクロームを提供しています。本物のスクリーンショットを<figure>でラップして（せいぜいヘアライン境界線で）使用するか、クロームを省略してコンテンツを自立させてください。references/anti-patterns.md§ 再描画されたUIクロームおよびスロップテストゲート47を参照してください。 -
モバイルレスポンシブ - すべての出力が320 / 375 / 414 / 768 pxで検証されます。 Hallmarkの出力は、4つの幅すべてで完璧にレンダリングされなければなりません。非交渉事項：水平スクロールなし +
htmlとbodyの両方でルートoverflow-x: clip（hiddenは不可（ゲート34））；2行になるクリック可能なテキストなし - ボタン、プライマリナビリンク、フッターリンク、パンくずリスト、CTA（ゲート49）；画像を含むグリッドトラックは、裸の1frではなくminmax(0, 1fr)を使用（ゲート50）；ディスプレイヘッダーは、overflow-wrap: anywhere; min-width: 0を使用して長い単語内で折り返す（ゲート51）；セクションヘッドは、すべてのテーマバリアントにわたってモバイルで1列に折りたたむ（ゲート52）；ラジオタブパターンはスクロールジャンプしない（ゲート53）。references/responsive.md§ モバイル - 非交渉を参照してください。これはウィッシュリストではなく、ハードな下限です。 -
タイポグラフィの純粋性 - イタリックの見出しは禁止。 見出しとディスプレイタイプは常にローマン体（
font-style: normal）です。直立の見出し内のイタリック体の強調語（Built to <em>think</em>）は、最も信頼性の高いAIの兆候の1つです。見出しにすべてイタリック体のディスプレイフェイスを使用することも同様です。強調は、ウェイト、アクセントカラー、または描かれた下線で表現してください。イタリックは
…（翻訳のため省略）