jenreh/hallmark

hallmark は何をしますか？

コーディングアシスタントが生成するUIを「作られた」ものではなく「デザインされた」ものに見せます。すべてのモデルが訓練されたデフォルトに対して強固な下限を設け、連続するビルドが収束しないように方向性を与え、1画面に1つのアイデアを持たせます。下限より上はあなたのページです。あなたは有能なデザイナーです。

Powered by Together AI.

The Floor (下限)

すべての出力をすべての環境で拘束します。他の何も読まれなくても、どれ一つとして放棄できません。

1. すべての色とフォントは :root (または宣言されたテーマブロック) で宣言されたトークンを経由します。トークンブロックを超えたリテラルな色や font-family は使用しません。(48)
2. 決して transition: all を使用しません。width、height、top、left をアニメーションさせません。(10a)
3. ローマン体の見出し内に斜体の単語を1つも入れません。(38i)
4. html と body の両方に overflow-x: clip を設定します。hidden や 100vw は決して使用しません。(34)
5. 画像を含むグリッドトラックは minmax(0, 1fr) を使用します。表示見出しは overflow-wrap: break-word; min-width: 0 を持ちます。(50)
6. すべてのインタラクティブ要素は、即座に表示される :focus-visible を持ちます。(26a, 15)
7. すべてのアニメーションは prefers-reduced-motion: reduce フォールバックを持ち、スクリプトがオフの状態でもコンテンツが表示可能です。(27, 62)
8. 決して作り出された指標、お客様の声、ロゴウォール、ケーススタディの数値を使用しません。(46a)
9. アイブロウ、トラッキングされた大文字やスモールキャップスのラベルは決して使用しません。ラベル、キャプション、テーブルヘッダー、タグ、ナビゲーションリンクはボディフェース（またはテーマのラベルフェース）で、1段階小さく、文または小文字で、トラッキングなしとします。(54, 67)
10. 中央ドットで連結されたメタ文字列、リンクテキストに接着された矢印、装飾的なステータスドットは決して使用しません。(63)
11. 紫から青へのグラデーション、カードの中のカード、絵文字をアイコンとして使用、手描き風のブラウザやOSウィンドウは決して使用しません。(2a, 4, 30a, 47a)
12. ヒーローセクションの見出し、1文、プライマリアクションはすべて、1280 x 800でスクロールなしで表示可能です。(44b)
13. 1画面あたり約80ワード。ヒーローのテキストは見出し、1文、およびそのアクションです。(58)
14. コンテナは上限付きで中央揃えです。1920ではガターが大きくなり、メジャーとグリッドは大きくなりません。(44d)
15. CSSソースの最初の空でない行はHallmarkスタンプ、次に批評行、その後に放棄事項です。(20)
16. Nodeが利用可能な場合、引き渡す前に node <skill-dir>/scripts/sloplint.mjs <output> --render を実行します。すべての FAIL を修正し、すべての REFLEX を修正するか放棄します。

下限より上では、**Reflex（反射）**ゲートはモデルが陥りがちなデフォルトであり、記録上、正当な理由をもって放棄可能です。**Finish（仕上げ）**チェックは職人の技に関する詳細であり、回答されるもので、ブロックするものではありません（references/gates.md § 1 および § 2）。

フロー

0. 事前確認：何かを尋ねる前にプロジェクトを読み込みます。
1. 一度だけ尋ねる：素材、対象者、用途、トーン。
2. シェイプ（形状）：ページを設計し、名前を付けます。
3. 方向性：テーマを決定するか、カスタムが要求された場合は自由にデザインします。
4. レイアウト、イメージ、クラフト、ジャンル、テーマファイル、そして gates.md § 1 から § 4 を読み込みます。
5. Picksブロックを一度だけ記述します。
6. ビルド：最初にヒーロー、次にページ全体。スタンプ、tokens.css、ログを出力します。
7. スイープ：sloplint --render をクリーンになるまで実行、判定されたゲート、フィニッシュレビュー、素材の確認。

動詞： ユーザーがHallmarkを指定した場合のみ：redesign <target>（コンテンツと配線を維持した完全な再デザイン）と audit <target>（レポート）。まず references/redesign.md を読んでください。既存デザインへのその他の変更はHallmarkの実行ではありません。要求された通りに、プロジェクト自身のシステムで行ってください。

Codex CLI と OpenCode はまず references/flow.md § ハーネス を読んでください。他のハーネスはこのファイルをそのまま実行します。

0. 事前確認

シグナル（優先順）：design.md または DESIGN.md がルートにある（ロックされたシステム：以下すべてを上書きし、ページはこれを共有します）。.hallmark/brand-spec.md または実際のブランドを指定するプロンプト（references/brand-truth.md を実行。実際のブランドを記憶からテーマ化しないでください）。プロジェクトのフォント、パレット、スペーシング、モーションライブラリ、フレームワーク（package.json、Tailwind設定、:root、トークン、フォントリンク）。プロダクトそのもの：URL、実行中の開発サーバー、1つのコマンドで起動するプロジェクト、またはマシン上のアプリ。ビルドは scripts/capture.mjs でこれをキャプチャします（imagery.md § 4）。Inspo MCPサーバー（mcp__inspo__* ツール：シグナル8、flow.md § シグナル8）。/hallmark プロンプト、Hallmarkの指定、またはカスタムの要求はこれを上回ります。TOGETHER_API_KEY が設定されている（シグナル9、比較ステップ）。

1つのブロック（ファイル:行の引用、何が保持され、何が導入されるか）を出力し、.hallmark/preflight.json にキャッシュします（flow.md § 事前確認）。

1. 一度だけ尋ねる

1つのメッセージで、たとえ5単語のプロンプトでも：

構築する前に、4つのことをお聞きします。1. 素材、最も重要なもの：ページに何を表示できますか？スクリーンショットや画面収録（またはアプリ、そのURL、フォルダを教えてくれれば私が実行して取得します）、あなたの写真、実際の数字（顧客数、稼働時間、価格）、発言者名付きの引用、使用してよいロゴ。これらを貼り付けるかパスを指定してください。写真がない場合は、Hallmarkのフォトライブラリから後で置き換えるプレースホルダーを配置します。数値、引用、ロゴをでっち上げることは決してありません。2. 対象者：誰がこれを使い、彼らは何を気にしていますか？3. 用途：ページが促進すべき1つのアクションは何ですか？4. トーン：極端なものを1つ選んでください（エディトリアル、ブルータリスト、ソフト、ユーティリタリアン、ラグジュアリー、プレイフル、テクニカル、オーステア）。「クリーンでモダン」はトーンではありません。さらに、4～8語の雰囲気と、もしあればアンカーカラーを添えてください。または go ahead と言ってください。こちらで推測し、選んだものをお伝えします。

スキップされたフィールドはオプトアウトとみなします。推測し、推測内容を返信の先頭に1行で記載し、スタンプします。フォローアップの質問はしません。事実は決して推測しません。提供されなかった数値、引用、ロゴは存在しないものとします。提供されなかった画像はスロットのプレースホルダーです。プロンプトが4つすべてに答えている場合、または誰も答えられない場合（ヘッドレス実行、バッチ）、質問しません。

ジャンル（無言で）： AIツール、生成系、音楽、ビデオ、音声、ダーク、アトモスフィア → アトモスフィア。SaaS、エンタープライズ、API、プラットフォーム、開発者ツール、インフラ、B2B → モダンミニマル。プレイフル、楽しい、フレンドリー、ソフト、キッズ、ゲーム、コミュニティ → プレイフル。それ以外は エディトリアル。これはほとんどの消費者向けおよびファミリープロンプトをカバーします。テーマが一度決定されると、そのジャンルが優先されます（ジャンルファイル、スタンプ、--genre）。2つの非デフォルトジャンルが発火した場合、メッセージに二者択一を追加するか、go aheadの場合は選択してその旨を伝えます。

スコープ。 1つの要素（ボタン、入力、カード、モーダル、ナビゲーション、フッター、タブストリップ、チップ）を指定するプロンプト、または「Xだけ」と言う場合はコンポーネントです（flow.md § コンポーネントスコープ）。誰かが作業する画面（ダッシュボード、管理画面、設定、ツール）はアプリ画面です（flow.md § アプリ画面）。

2. シェイプ（形状）

素材が最優先。 インベントリを1行で：real（プロンプトとプロジェクトが提供する具体的なものすべて：名前、主張、数字、場所、日付、画像）、pictures（ページが表示するものとそれぞれの出所：ユーザーのもの、実際のプロダクトのスクリーンショット、構築されたプロダクト、ライブラリ）、absent（持たないすべての証拠：誰も与えなかったロゴ、引用、指標）。形状はそれに従います。写真のあるページは写真でリードします（imagery.md § 1）。言葉に関するページはタイポグラフィと事実を伝えます（ロングドキュメント、レター、インデックスファースト、マニフェスト）。

ジョブ。 訪問者が何をするために来たのか（購読、予約、訪問、参加、購入、試す、サインアップ、雇う、参加する、聴く）を名付け、そのジョブを references/anatomy.md で読みます。カテゴリ内の実際のサイトがアクションをどこに置き、どのようなセクション（メニュー、ラインナップ、課題、記録）を中心に構築し、どのように終わるかを確認します。ページはそのアナトミーから構築され、図、ステップ、メールバンドのデフォルトランチからは決して構築しません（85）。

次にページを設計します。その形状、開き方、各セクションの内容と構成、ナビゲーション、フッター、ヒーローの内容。出発点：references/macrostructures.md の21の形状（選択したファイルのみロード）。layout.md の構成、ナビゲーション、フッター。

ドロー。 テーマビルドの場合、ステップ3がテーマを選択したら、node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <job> --theme <slug> [--log .hallmark/log.json] を実行します。ログとテーマの画像をクリアして、形状、ヒーローの姿勢、ナビ、フッター、最初のセクション、アクションの位置、除外する2つの構成、ヒーローのリード内容を決定します。素材が選択を拒否しない限りそれに従い、Picksブロックで変更点を明記します。1つのテーマで1つのプロンプトを2回ビルドすると、2つのページが生成されます。ミラーテスト： 同じカテゴリの隣接するプロンプトがこのまったく同じ組み合わせを得るでしょうか？もしそうなら、1つの決定を変更し、その旨を述べてください。

シグネチャー。 訪問者が覚えているであろう1つのこと。プロンプトの最も強力な現実のものを最大限に表現します（その場所の写真、1つの仕事をするプロダクト、オファーそのものだから巨大に表示された価格、試すためのコントロール）。テーマの素材でそれを作り（カスタム実行の場合は独自のルックで）、最初の画面に表示し、Picksブロックとスタンプで名前を付けます。印として描かれた数字はデバイスであり、シグネチャーではありません（82）。

これらすべてを保持します。ステップ5で一度だけ述べます。

3. 方向性

最初に一致したものが優先されます。

1. ユーザーがテーマを指定した → それをビルドします（スタンプ theme: <name> (by request)）。
2. ユーザーがカスタムを要求した（「custom」、「derive it」、「bespoke」、「no theme」、「a world of its own」） → references/direction.md：デザインはあなたのものです。これにより、ドロー、形状、layout.md、ジャンルファイル、ステップ6の構成と折り返しルールが置き換えられます。下限、ゲート、スイープは保持されます。沈黙は決してこのルートを取りません。
3. その他すべてはテーマを決定します：

node <skill-dir>/scripts/theme.mjs deal --genre <genre> --prompt "<the prompt>" [--log .hallmark/log.json]

これはプロンプトに適合し、ログをクリアする3つのテーマを決定します。3つの画像を見て、その素材がプロンプト（モーション、写真、コード）を伝えられるものを選び、その理由を述べ、references/themes/<slug>.md のみをロードします。要求された場合のみ再決定します（--reroll 1）。Nodeがない場合：references/themes/index.json から手動で選び、スタンプ deal: manual を押します。

テーマは素材であり、計画ではありません。ページに何が含まれるか、どの順序かを決して設定しません。テーマと形状、ジャンル、クラフトファイルが素材、コントロール、モーションで矛盾する場合、テーマが優先されます。下限とユーザー自身の言葉は両方に勝ります。

4. ロード

ページビルドの場合、正確にこれらをロードします：references/layout.md · references/anatomy.md（該当ジョブの部分） · references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md とその画像（決定時に既に見ています。指定されたテーマの場合は <slug>.jpg を今見てください）。テーマからは、パレットバランス、タイプボイス、サーフェス、およびそのRange（写真なしで作成するセクション）を取得します。レイアウトは取得しません。references/gates.md § 1 から § 4。カスタム実行は、レイアウト、ジャンル、テーマファイルの代わりに direction.md をロードします。

必要な場合のみ、references/ から：マクロ構造ファイル1つ。ステートフルUI用の microinteractions.md。フォーム用の interaction-and-states.md。特殊なレイアウト用の responsive.md。テーマがテクスチャを指定する場合の texture.md。スクロールストーリー用の scroll-choreography.md。両モード用の dark-mode.md。チャート用の data-viz.md。カスタム実行用の fonts.md。シグナル9用の comp.md（比較用、生成された静止画）。システムをロックするための design-md.md。

gates.md § 5 はステップ7まで待ち、§ 6 はレビューまで待ちます。それ以上ロードすることは最大の回避可能なコストです。

5. Picksブロック

その実行における唯一の決定の陳述であり、ユーザーが方向を変えるためのウィンドウです：

**Hallmark · v2.0.0**

- **Shape** · Workbench, from draw 7f3a2c · genre modern-minimal · job: sign up, the action in the hero and beside the price
- **Theme** · Coral, dealt 2/3 (warm grey, one coral signal, General Sans, soft pills) · clears Cobalt on paper band
- **Chrome** · nav: edge-aligned, a wordmark and one action · footer: a mast, the wordmark over the links
- **Hero** · Stage: head on columns 1 to 5, the slot on 6 to 12 at 560px, centred
- **Signature** · the invoice list chasing a late payment, built live in the hero
- **Sections** · Hero (the invoice list) · Pinned (one late payment, chased in three panels) · Switcher (the client's view and yours) · Table (pricing) · Footer
- **Material** · real: the 2-minute setup, the CSV import, Lisbon · pictures: the invoice list built in the hero, library photos of a Lisbon studio (muted) · absent: logos, quotes, metrics
- **Sweep** · run after build

カスタム実行の行は direction.md にあります。その後、1行だけ静かに、コンポーネントスコープまたは design.md が存在する場合はスキップします：システムをポータブルにしますか？design.md のために lock the system と言ってください。 シグナル9の場合、comp.md がここで実行されます。

6. ビルド

• スキャフォールドから始めます。 node <skill-dir>/scripts/theme.mjs scaffold <slug>（決定の --dealt 付き、カスタム実行の場合は --custom 付き）は、プロジェクトのスタイルシートの隣に tokens.css（テーマのトークンと共有スケール）と base.css（Floorがすでに決定したもの）を書き込み、スタンプの骨格、2つのインポート、スロットスクリプトを出力します。ページだけを書きます。
• references/patterns.md を一度だけ読みます： 8つの状態すべてのコントロール、スロット、欠落した事実、まだどこにも投稿しないフォーム、1つのリビール、比較する図。それらの形状を取り、コピーは決して取りません。
• ヒーローを最初に。 ナビゲーションとヒーローを書き、その下にはまだ何も書かず、node <skill-dir>/scripts/sloplint.mjs <file> --render --stage hero を実行し、その後新しいコンテキストでヒーローレビューを行います（gates.md § 6）。ヒーローが完成したらセクションを構築します。写真のクレジットとページ全体のチェックはページができるまで待ちます。
• 1画面に1つのアイデア、大きく設定。 ヒーロー：7ワード以下（50文字）の見出し、12ワード以下の1文、1つまたは2つのアクション。6～9のセクション（ヒーローとフッターを含む。薄いプロンプトの場合は5）、最大450の可視ワード。各セクションは、カテゴリ独自のコンテンツの一部を、質量のある構成で表現します（layout.md § 4 および § 5）。ヒーローは最初の画面であり、最初の画面だけです。その姿勢はジョブから取られます（`layout.m

…[翻訳のため省略]… `