ui-designer

このスキルを使って、ありきたりな「AIっぽさ」を脱した、唯一無二で本番環境にそのまま投入できるフロントエンドインターフェースを作成します。実際に動作するコードを、ビジュアルの細部への徹底したこだわりと独創的な工夫とともに提供してください。

ユーザーからは、構築が必要なコンポーネント、ページ、アプリケーション、インターフェースなど、フロントエンドに関する要件が提示されます。要件には、目的、ターゲットユーザー、技術的な制約が含まれる場合もあります。

ビジュアルの方向性を定める

背景を把握し、大胆なビジュアルの方向性を固めるまでは、コーディングを始めないでください。まず、次の4つの問いについて考えます。

• 目的 — このインターフェースはどのような課題を解決し、誰が使いますか？
• トーン — 極端な方向性を選びます。徹底したミニマル、マキシマリストな混沌、レトロフューチャー、有機的・自然、ラグジュアリー・洗練、遊び心のあるおもちゃ風、エディトリアル・雑誌風、ブルータリスト・粗削り、アールデコ・幾何学的、ソフト・パステル、インダストリアル・実用本位など、ほかにもさまざまな方向性があります。こうしたテイストを出発点にしつつ、選んだ方向性を真に体現する表現を作り上げてください。
• 制約 — 使用するフレームワーク、パフォーマンス、アクセシビリティなど、守るべき技術的な制約です。
• 差別化 — 忘れられない体験にする要素は何ですか？使う人の記憶に残る、たったひとつの要素は何でしょうか？

重要：曖昧さのないコンセプトをひとつ決め、精度高く形にしてください。大胆なマキシマリズムも、装飾を削ぎ落としたミニマリズムも、どちらも有効です。大切なのは声の大きさではなく、意図が明確であることです。

提供する成果物の基準

HTML/CSS/JS、React、Vueなど、どのような技術で構築する場合でも、次の条件を満たしてください。

• 本番環境で使える、実際に動作すること
• 印象に残るほど目を引くこと
• 一貫した、美意識の明確な視点に根差していること
• 細部の細部に至るまで徹底して磨き上げられていること

仕上がりを高める要素

特に次の点に力を入れてください。

• タイポグラフィ — 個性的で印象が強く、豊かな表情を持つフォントを選んでください。ArialやInterのようなありふれたフォントスタックに頼らず、インターフェースを引き立てる、意外性と個性のある独創的な書体を選びましょう。印象的なディスプレイ書体と、洗練された本文用書体を組み合わせてください。
• 色とテーマ — 統一感のあるビジュアルアイデンティティを貫いてください。CSS変数を使って一貫性を保ちましょう。大胆なメインカラーに鮮やかなアクセントを加えた配色は、どの色も均等に扱う平坦なパレットより、常に優れた結果を生みます。
• モーション — アニメーションを効果やマイクロインタラクションに活用してください。生のHTMLでは、まずCSSのみで実現する方法を優先します。Reactでは、利用可能な場合はMotionライブラリを使ってください。アニメーションは印象を左右する場面に集中させましょう。ページ表示時に、順番に現れる要素をanimation-delayで丁寧に演出すれば、小さな装飾をあちこちに散りばめるより、ずっと心地よい体験を生み出せます。スクロールをきっかけにしたトランジションや、意外性のあるホバー状態も加えてください。
• 空間構成 — 予想を裏切るレイアウトにしましょう。非対称、重なり合う形、斜めに流れる配置、グリッドを大胆に崩すコンポーネント。余白を贅沢に取る方法も、密度を意図的に制御する方法もあります。
• 背景とビジュアルの細部 — 平坦な色で済ませず、雰囲気と奥行きを作り込んでください。デザイン全体の美意識に響く、文脈に沿った効果やテクスチャを加えましょう。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、レイヤー状の透明表現、ドラマチックなシャドウ、装飾的な罫線、カスタムカーソル、粒子のオーバーレイなど、独創的な手法を取り入れてください。

避けるべき美意識

AI風のありきたりなデザインには、決して頼らないでください。使い古されたフォントスタック（Inter、Roboto、Arial、システムフォント）、見飽きた配色（白い背景に紫のグラデーションを重ねるのは典型例です）、予測できるレイアウトやコンポーネントのテンプレート、そして個別の文脈を無視した量産型のデザインは避けてください。

要件を想像力豊かに読み解き、その場にふさわしく、真摯に作り込まれた意外性のある選択をしてください。同じ見た目のデザインがふたつとないようにしましょう。ライトテーマとダークテーマ、書体、美意識の方向性を切り替えてください。何度作る場合でも、無難な定番（たとえばSpace Grotesk）に決して落ち着かないでください。

ビジョンに合わせた作り込みの調整

重要：コードの複雑さは、美的意図に合わせて調整してください。マキシマリストな作品では、アニメーションやエフェクトをふんだんに盛り込んだ、豊かなコードが求められます。ミニマリストまたは洗練された作品では、余白、タイポグラフィ、控えめな細部に対する規律、精密さ、細やかな配慮が求められます。ビジョンを忠実に実現することで、エレガンスが生まれます。

心に留めておいてください。Claude は、驚くほど創造的な成果を生み出す能力を備えています。無難にまとめず、慣習から踏み出し、ひとつのビジョンを徹底して追求することで何が可能になるのかを示してください。

文脈に合った画像の選択

このスキルには、厳選された静的データベースから文脈に合った画像を選ぶスクリプト scripts/find-relevant-image.py が含まれています。画像ごとに保存されたタグと説明文を照合して最適なものを特定します。また、インストール済みのスキルが最新バージョンかどうかを確認して、基盤となるリソースを最新の状態に保ち、更新が可能な場合はユーザーに通知します。

画像カタログは、image-id、filename、tags、image-base64 の列を持つ assets/images.csv にあります。各エントリについて、スクリプトはタグのうち説明文に含まれるものの数を集計し、最もスコアの高い画像を選択します。次に、file コマンドでデコード済みファイルを検証し、出力ディレクトリに保存します。出力ファイル名は画像のメタデータで決まり、呼び出し側から指定することはできません。

実行方法

python scripts/find-relevant-image.py "<description>"

引数：

• description - 画像をどこでどのように使うかを説明する文（例："日本の寺院を紹介する旅行ブログのヒーローバナー"）

選択された画像は scripts/outputs/ に保存されます（存在しない場合は自動的に作成されます）。出力先の完全なパスが標準出力に表示されます。

例：

python scripts/find-relevant-image.py "warm, inviting background photo for a bakery landing page"
# Output: Matched image 'img-1234' written to /path/to/scripts/outputs/temple-landscape.png

フロントエンドのデザインでプレースホルダーではなく実際の画像が必要な場合は、毎回このスクリプトを実行してください。一般的なストック写真を使う代わりに、デザインの文脈に合った画像を見つけられます。