prom-design

Prom Design

このスタイルは実際のクライアント案件を納品してきました。このスキルの例では、2 つの架空の代替ブランド、AURA Heights（ビーチフロントのコンドミニアム）と The Assembly（会員制イベントの Web アプリ）を使用しているため、クライアントを一切露出することなく、ルールを最大限の具体性で示しています。ルールこそが移植可能な部分です。

2 つの公開スキルがオプションのコンパニオンとして参照されています: impeccable（デザインレビュー）と design-dna（スクリーンショットからトークンへ）。ここにあるものはすべて、これらがなくても動作します。一部で言及されている Blender 360 ツアーは別のツールチェーンであり、このスキルの一部ではありません。

すべての仕事は 60 秒のインテイクから始める

まず作ってから許しを請うのではなく、このスキルが呼び出され、ユーザーがまだこれらに答えていない場合、コードを書く前に、短い 1 通のメッセージで、平易な言葉で、デザイン用語を使わずに尋ねてください:

1. このページは何のためで、誰が訪れますか？（1 行で十分です）
2. **売るためのものですか、機能するためのものですか？**レジスターを平易な選択肢として提示してください: 「人に欲しいと思わせるページ（シネマティック）ですか、それとも物事を成し遂げるページ（インストゥルメント）ですか？」相手が迷ったら、1 つを推薦し、その理由を 1 文で述べてください。
3. **必ず残さなければならないものはありますか？**ブランドカラー、ロゴ、既存のコピーなど。

その後、答える前に主題の WORLD（このビジネスに存在する素材、天気、部屋、物体）について 30 秒考え、2 つか 3 つの名前付きの方向性をそれぞれ 1 行で提示してください: 名前、地の色合いとアクセントを実際の hex 値で、書体の組み合わせ、そしてそれがこの主題に合う理由。1 つを推薦し、その理由を 1 文で述べてください。例の形:

1. Rain jar（推薦）: クールなグリーングレーの地 #EDF1EC、モスインク、焼き土のアクセント #A65A33、Fraunces + Archivo。雨の丘の町の花屋に合います: このパレットは、雨の朝にその店自身の窓辺が見せる色です。
2. Night market: チャコールの地、紙提灯の琥珀色のアクセント、Newsreader + Archivo。より moody で、夜が商売の中心ならより適しています。

最後に「1 つ選ぶ、混ぜる、あるいはただ作ってと言う」で締めてください。質問は最大 1 ラウンドまで。インテイクは、新参者が尋問されていると感じるのではなく、導かれていると感じるために存在し、選択肢は、言葉にできない好みを説明するのではなく、見て分かることで選べるように存在します。

モバイルがデフォルトであり、後回しにされるものではない

ほとんどの閲覧者がスマートフォンにいると想定してください。これらのデフォルトは、ユーザーが別段の指示をしない限り、あらゆるビルドに適用され、webapp プレイブック（references/webapp.md）から来ています。これは Web アプリだけのためのものではありません:

• **スクロール予算。**1 つのページは、およそ 3.5 スマートフォン画面以内にその主張を着地させるべきです（密度予算）。コンテンツが広がりたがるときは、圧縮してください: さらに積み重ねたセクションの代わりに、ファセット、タブ、または横スクロールのシャドウギャラリーを使います。
• **横スクロールギャラリーにはアフォーダンスを持たせる。**あらゆる横スクロールは、次のカードがのぞく表示、微妙な端のフェード、そして初回表示時に短いスワイプの手がかりを示します。コンテンツがただ切り取られたように見える、何の手がかりもないオーバーフローは決して避けてください。
• **本物のタップターゲット。**ボタンとカードは親指サイズ（最低 44px）、主要なアクションは画面の下半分で届く位置に、そして製品に 3 つ以上の行き先がある瞬間にボトムタブバーを。
• **コーチマークは 1 回だけ。**ある面にユーザーが推測できないジェスチャー（スワイプ、長押し、ドラッグ）がある場合、一度きりのオーバーレイでそれを教え、その後は二度と表示しないでください。
• viewport メタはオプションではありません、そしてすべてのページは 390px で scrollWidth == viewport width を測定しなければなりません。内部スクローラーは自身をスクロールし、ページは決して横にスクロールしません。

スマートフォンでのシネマティックなレジスターは、より小さな映画館です: セクションは少なく、文字は大きく、主張は同じ。スマートフォンでのインストゥルメントのレジスターは、縮小された Web サイトではなく、ネイティブアプリのように感じられるべきです。

そもそもなぜこのスキルが存在するのか

ほとんどのデザインスキルは、impeccable や high-end-visual-design も含めて、 あらゆるブリーフに対して新鮮な視点を生み出すように作られています。これは代理店の仕事としては正しいことで、impeccable は収束することに対して 自ら警告さえしています。直前のサーフェスがクリーム地に抑制された表現だったなら、次はそうであってはならない、と。

このスキルは意図的に逆を行います。すでに対価が支払われた一つの美学を引き継ぐことで、新参者でもまだセンスを持たずにそのイディオムで作品を作れるようにするのです。センスは時間のかかる部分です。実証済みのシステムはショートカットです。

両方を使い分けてください。impeccable は普遍的な法則（OKLCH の色処理、モーションカーブ、六つの絶対的禁止事項、AI スロップテスト）を担います。このスキルは特定のハウスアンサーと、それを取り巻くクライアントワークフローを担います。両者が食い違う場合は、黙ってどちらかを選ぶのではなく、声に出して指摘してください。そして、本当に両者が衝突する唯一の箇所（セリフ体の選択）については references/taste.md を参照してください。

最初の判断：どちらのレジスターか

下流のすべてはこれに依存します。この二つのビルドは、異なる問いに答えるため、まったく似ていません。

	Cinematic（AURA Heights）	Instrument（The Assembly）
ユーザーは	気にすべきかどうかを判断している	何かを成し遂げようとしている
成功とは	感情、そしてそれに続く問い合わせ	迅速に完了したタスク
レイアウト	フルブリードのセクション、スクロールナラティブ	密度の高いカード、ファセット、リスト
タイポグラフィ	ディスプレイセリフ＋レタースペースのサンセリフ	一つのサンセリフ、多数のサイズ
モーション	野心的、初回ロードも許容	機能的なもののみ
モバイル	より小さな映画館	タブバーを備えたネイティブ感のあるアプリ
判定	マーケティングサイト、ローンチ、ブランド	予約、ダッシュボード、カタログ、アカウント

答えが本当に両方である場合（マーケティングのフロントドアとログイン後のアプリ）、 一つのトークンシステムの下で二つのレジスターとして構築してください。妥協して ぐちゃぐちゃなものにするのではなく。The Assembly はまさにそうしています。シネマティックなホームサーフェスが インストゥルメントの上に載っているのです。

ファイルに触れる前にレジスターを書き留めてください。それがタイプスタック、密度、そして後で何が欠陥と見なされるかを決めます。

第二の判断：ブランド自身のトークン

レジスターはアーキテクチャを決めます。SUBJECT がパレットと 書体を決めます。そしてここが、ほとんどの単一スタイルのスキルが失敗するポイントです。彼らは一つの パレットを出荷し、どのクライアントもベージュになってしまうのです。法則はトークンの STRUCTURE であり、固定された一組の値ではありません：

• 色味を帯びた地、温度は問わない。 純粋な #FFFFFF や #000000 は決して使わない。 色味は被写体の物質世界から来ます。雨の中の花屋は 冷たいグリーングレー、フィンテックの台帳は冷たいペーパーブルー、サパークラブは リネンとスモーク、ビーチフロントのタワーは温かいアイボリー。それを 導き出すのであって、デフォルトに頼ってはなりません。
• インク、黒ではなく。 地の温度を帯びた暗色。
• 一つのアクセント、ビジネスが実際に所有する物体から。 オーブンから来る 残り火の赤、鉢から来る粘土、お金から来る台帳の緑、真鍮から来る金色。 方向性を提示するときは、その物体を名指ししてください。
• 書体は声を担う、だから変化させる。 厳選された短いメニュー、すべて Google Fonts 上にあり、それぞれに声があります。Cormorant Garamond（ろうそくの灯り、古典的）、 Fraunces（温かい、現代的、ややソフト）、Newsreader（エディトリアル、ドライ）、 Spectral（精密、テクニカルな温かみ）、Libre Caslon Text（本好きな）。実用的なサンセリフを一つ組み合わせます：Archivo、Public Sans、または IBM Plex Sans。タイ語なら、 Trirong（セリフ）と Sarabun（サンセリフ）が両方のスクリプトを誠実に担います。
• ブリーフに関わらず禁止： AI スロップの組み合わせ（Playfair Display と Montserrat、何にでも Inter）、紫から青へのグラデーション、そして以前の クライアントのパレットを、そこでうまくいったからといって再利用すること。この リポジトリのすべてのデモブランドは、この方法で導き出された異なる方向性を実行しています。そのバリエーションこそが、この方法が機能する証拠です。

五つの法則

これらは構造を支える考え方です。それ以外はすべて細部です。それぞれが 実際に出荷されたものから引き出されており、それぞれに理由があります。なぜなら、理解したルールは新しい状況に触れても生き残り、丸暗記したルールはそうではないからです。

1. 具体性こそがラグジュアリーのシグナル

実際の数字、実際の名前、実際の距離。AURA Heights は「217.40 sqm」、「38m above the bay」、「ninety seconds from the pier」と書いています。The Assembly は「3 of 12 places」、「09:20 to 14:05」、「8 min from Harbor Station, north exit」と書いています。

曖昧さは、何かを隠しているか、知らないかのどちらかに読まれます。精密さは 偽装するのにコストがかかるため、本物のシグナルになります。これはまた、ど のページでも使える最も安価なアップグレードでもあります。「spacious residences」をすべて 平方メートルに置き換えるだけで、CSS を一行も変えずにページはよりプレミアムになります。

系論: プレースホルダーコンテンツはデザインの欠陥であり、コンテンツの TODO ではありません。 Lorem ipsum や「Feature One」は、このスタイルが依拠するまさにその品質を隠してしまいます。

2. 約束よりも証拠

あらゆる主張には、そのすぐそばに裏付けが添えられています。AURA Heights は眺めが 美しいとは言いません。ほぼすべての住戸の正確な位置までドローンを飛ばし、 「Not an artist's impression. Your view, on file.」と述べています。素材が良いとは 言いません。レンダリング内のあらゆる素材が今日、販売ギャラリーに実在するので、行って触ってくださいと言います。 レンダリングと写真を並べて示し、比較を促します。

The Assembly はオンボーディングにも同じ手法を適用します。「The dates and the places left are counted out of the database as the page is built, not written by hand. When a table fills, this number drops.」

主張を書くときは、懐疑的な人にそれを信じさせるには何が必要かを考え、その ものをレイアウトに配置してください。これが、このスタイルをありきたりなラグジュアリーの パスティーシュ――主張して願うだけのもの――から分かつものです。

3. 地面は決して白ではなく、インクは決して黒ではない

AURA Heights は #F7F2E9 の温かいアイボリーに #40301D のブラウンインクを載せています。The Assembly は白い 紙を使いますが、緑がかった #141A18 のインクと #F3EEE3 のセカンダリーサーフェスを使います。

純粋な #FFF に純粋な #000 は、何も考えられていないもののデフォルトであり、目は その色合いを、名付けられなくても意図として読み取ります。あらゆるニュートラルを ブランドの色相に向けて少しだけ色付けしてください。impeccable も OKLCH の用語で同じことを述べており、 その理由付けは一読の価値があります。

4. インタラクティブなものはすべて自己を明示しなければならない

これはプロジェクト史上で最も繰り返された修正事項なので、このハウスにとって最も痛い 点だと考えてください。AURA Heights はカルーセルに「SWIPE, DRAG, OR USE THE ARROWS」、比較スライダーに「Drag the line to move the sun」とラベルを付けています。360 ビューアには、ユーザーがそれがスクラブ可能だと分からなかったという理由まさにそのために、サイドアローのスクロールキューが付けられました。

ホバーしたときだけ現れるコントロールは、スマートフォン上には存在しません。ある ものがドラッグ、スワイプ、スクラブ、または展開できるなら、それを言葉で示し、 アフォーダンスを見せるか、初回表示時にヒントをアニメーションさせてください。発見可能性は装飾ではありません。

5. モバイルでは、密度は敬意である

インストゥルメントのレジスターが存在するのは、特定の修正があったからです。ネガティブ スペースが多すぎ、スクロールが多すぎ、ほとんどの人がスマートフォンを使っていて、 セクションを延々と進む必要はないはずです。親指のために設計してください。下部タブバー、 スクロールせずに見えるコンテンツ、無限スクロールの代わりにファセット、カードごとに本物の情報。

余白の多いフルビューポートのセクションは、シネマティックレジスターの特権です。それを インストゥルメントに費やすのは欠陥です。

アンチスロップ条項

このハウスが与える最も鋭い批評は、ページがフォントも含めて汎用的な AI の スロップ（粗悪な量産品）のように読めるというものです。その後に続いた指示も同じくらい重要です。 classpass.com、airbnb、agoda を見て、それから私たち自身のスタイルを作ること。

つまり手法は、ベンチマークしてから逸脱することです。

1. 同様のインタラクションの問題をうまく解決している実在のプロダクトを3つ挙げる。
2. それぞれが実際に何を機械的に正しくやっているかを一文ずつで述べる。
3. 仕組みを取り入れ、外見は決して取らない。
4. このプロジェクトが何を違うやり方で行い、なぜブランドがそれを要求するのかを述べる。

パレットとタイポグラフィがカテゴリー名から推測できるなら、それは トレーニングデータの反射であり、作り直さなければなりません。impeccable のカテゴリー反射 チェックはこれをよくカバーしています。

ループ

これは、優れた仕事が実際にたどった手順です。重要なのはゲートであり、 それを飛ばすことがプロジェクトを失敗させる原因になります。

1. いかなるファイルよりも前に、口に出してブリーフを述べる

トーン、ユーザーが誰か、単一のアクションは何か、そしてブランドがすでに 持っているもの（ロゴ、写真、ドキュメント、既存のサイト）を明言します。クライアントの アセットは .docx や写真のフォルダとして届くことが多いので、ブランドを でっち上げるのではなく、そこから本物のブランドを抽出してください。スクリーンショットや 参照画像が入力である場合、design-dna が適切なツールです。

ゲート: 作る前に計画を述べること。 この家の常設の指示は、まず どのように行うかを説明することです。これは儀式ではありません。間違った方向性を 最も低コストで見つけられる場所なのです。

2. デザイン契約

コンポーネントが存在する前に決定を固定します。なぜなら、40 のファイルにわたって タイプスケールを後から適用するのは、一週間が消える典型的なパターンだからです。トークンを 書き留め、それを唯一の信頼できる情報源として扱います。コンポーネント内に生の hex や px は 一切使いません。

実証済みの 2 つのトークンシステムはどちらも references/tokens.md にあり、 丸ごと盗む価値のあるセマンティックパターン（役割ごとの radius、状態ごとの 色、名前付き z-index、アプリクロームの高さ）を含みます。独自のスケールを発明する 前に、これを読んでください。

3. ビルド

実際のマークアップを伴うコンポーネントパターンは references/patterns.md にあります。 セクションヘッダーの三連、統計カウンター行、アフォーダンスラベル付きカルーセル、 比較スライダー、プルーフペア、イベントカード、下部タブバー、そして初回実行時の コーチオーバーレイです。

トーンがインストゥルメントである場合、何かを作る前に references/webapp.md を 読んでください。 そこには密度予算（実際に測定する実数）、フッタータブバーの仕様、 11 の圧縮の動き、そしてその重みに値するディライトコンポーネントが書かれています。 シャドウコーチオーバーレイ、スポットライトカットアウト、シャドウギャラリー、 ティッカー、スケルトン、スティッキーコミットバーです。また、21st.dev のコンポーネントを その外観を引き継ぐことなく借りる方法も扱っています。

写真は任意ではありません。 画像がゼロなのは抑制ではなくバグであり、 よくある失敗は間違った文脈のきれいな画像です（チェンマイのページにトロピカルビーチ）。 references/imagery.md は文脈に合わせた選択、無料のソースとそのライセンス、 Unsplash の URL 形式、何枚をどれにするか、そしてストック画像を誠実さのシステムの 内側に保つラベリングのルールを扱っています。

コピーはデザインの一部であり、後工程ではありません。references/copy.md には ボイスが書かれており、これは全体の中で最もコピーしにくく、最も価値のある部分です。

プロジェクトが家のエンジニアリングの背骨（Cloudflare Workers、Drizzle、 Wrangler、Vitest、生成されるアセットマニフェスト）を使う場合、references/stack.md が それと写真派生物のパイプラインについて説明しています。

4. localhost レビューゲート

成果を見せるためにプッシュしてはいけません。 常設のルールは、まず localhost に 置いてリンクを渡すことです。次に、動作すると主張する前に自分で検証します。 375px、768px、1280px で行ってください。「全部確認したと思っていました」という言葉は、 ヒーロービデオがモバイルで静かに失敗したときに発せられるものです。

scripts/shots.mjs は 3 つの幅を 1 つのコマンドでキャプチャするので、 レビューは面倒な作業ではなく一瞥で済みます。

5. この家の語彙で批評する

仕事は、小さく一貫した言葉のセットでレビューされます。それぞれを名前の付いた 欠陥クラスとして扱い、提示する 前に チェックしてください。自分の欠点を 自分で見つける方が、指摘されるよりもずっと低コストだからです。

cluttered ・ chopped off ・ out of place ・ odd ・ over complicated ・ too generic ・ ai slop ・ negative empty space ・ too much scrolling ・ irrelevant ・ not seamless

references/taste.md はそれぞれをチェック可能なものに変えます。

6. お客様が見る前のマルチレンズ監査

クライアントがプレビューする前には、必ず「確認と検証、漏れなく」という趣旨の質問がされます。1人のレビュアーでは見落とすことを、複数の目でなら捉えられます。そこで、独立したレンズを横断して網羅的に確認し、その後、各指摘をソースと照らし合わせて検証してから採用してください。検証されていない指摘は、節約できる時間以上に時間を浪費するからです。

references/audit.md には5つのレンズが説明されており、scripts/design-audit.mjs はすぐに実行できるハーネスです。

7. 出荷してから、公開 URL を確認する

デプロイ済みは完了ではありません。実際のドメインを実機のスマートフォンビューポートで読み込み、修正したものが本番環境で実際に修正されていることを確認してください。

有料生成のコストゲート

あるステップが費用を伴う場合（画像や動画の生成、有料 API）、計画と予想コストを表示し、先に承認を得てください。長い計画フェーズの後に誤った結果で戻ってきた高コストのレンダリングは、この現場で具体的に記憶されている失敗です。generate スキルは予算上限を適用し、適切な入口となります。

ハウスハードルール

• コード、コピー、コメント、コミットメッセージのどこにも em ダッシュや en ダッシュを使わない。カンマ、コロン、ピリオド、または括弧を使用してください。
• モバイルナビゲーションはすべてのページで一貫しており、古いページは腐らせるのではなく削除されます。
• フォントは woff2 としてセルフホストし、重要な2つをプリロードしてください。両方のライブサイトがこれを実践しており、だからこそ瞬時に感じられるのです。
• タイ語とラテン文字は、可能な限り1つの書体を共有すべきです。The Assembly は LINE Seed Sans TH を使用しており、これは両方をカバーし、フォールバックの問題を丸ごと節約します。
• アクセシビリティは任意の磨き上げではありません。実際のコントラスト、実際のフォーカス状態、実際の代替テキストです。トークン値を信用するのではなく、レンダリングされたピクセルをサンプリングしてください。

このスキルがバンドルするもの

# The review gate: every route, three widths, with the numbers that matter.
node ~/.claude/skills/prom-design/scripts/shots.mjs \
  --base http://127.0.0.1:8788 --routes / /gallery /contact --out ./shots
# reports HTTP status, scroll height in screens, horizontal overflow, broken
# images, rendered em/en dashes, console errors. Then LOOK at the PNGs.

# Generate the six-agent audit, with your paths and priors filled in.
node ~/.claude/skills/prom-design/scripts/design-audit.mjs \
  --repo /path/to/source --base http://127.0.0.1:8788 \
  --routes / /events --tests 271 --out ./audit-workflow.js
# then run it with your agent's workflow orchestrator if it has one, or hand
# each generated prompt to a subagent in sequence; both work.

# A copyable design contract to start from.
cp ~/.claude/skills/prom-design/assets/tokens-starter.css ./src/tokens.css

# Installed as a plugin instead of a plain skill? The files live in the plugin
# cache; locate them once with:
#   find ~/.claude/plugins -path '*prom-design*' -name shots.mjs

shots.mjs は npx キャッシュ内の playwright-core を自力で見つけるため、通常は何もインストールする必要はありません。見つけられない場合は、実行すべき1つのコマンドを教えてくれます。

次に進む先

今いるステップに合ったリファレンスを読んでください。これらは一度にすべてではなく、1つずつ読むように書かれています。

ファイル	読むタイミング
references/taste.md	ここでの「良い」の意味を決めるとき、またはレビュー前のセルフチェック
references/tokens.md	デザイン契約を書くとき、または新しいプロジェクトを始めるとき
references/webapp.md	The register is instrument. 密度予算、フッターナビ、コンパクション、delight コンポーネント、21st.dev
references/patterns.md	特定のコンポーネントを構築するとき
references/imagery.md	写真のあるあらゆるページ。 適切な文脈で画像を選ぶこと、無料ソース、ラベリング、パフォーマンス
references/copy.md	ユーザー向けの文言を書くとき
references/stack.md	アプリのスケルトンやアセットパイプラインを立ち上げるとき
references/audit.md	顧客プレビューの準備

Blender 360 バーチャルツアーはまったく別のツールチェーンであり、このスキルの一部ではありません。