このスキル内の README.md を読み、他の利用可能なファイルも参照してください。
ビジュアルアーティファクト(スライド、モック、使い捨てプロトタイプなど)を作成する場合は、アセットをコピーして、ユーザーが表示できる静的HTMLファイルを作成します。プロダクションコードに取り組む場合は、アセットをコピーし、ここのルールを読んでこのブランドでのデザインエキスパートになりましょう。
ユーザーが他のガイダンスなしでこのスキルを呼び出した場合は、何を構築またはデザインしたいか尋ね、いくつか質問をし、エキスパートデザイナーとして、ニーズに応じてHTMLアーティファクト または プロダクションコードを出力します。
主要ファイル
README.md— ブランドコンテキスト、コンテンツの基本、ビジュアルの基礎、アイコノグラフィーcolors_and_type.css— カラー、タイポグラフィ、スペーシング、角丸、シャドウ、イージングのCSS変数fonts/— Webフォント(Inter、Playfair Display、Fira Code、Pirata One)assets/— ロゴ + 画像preview/— 小さなコンポーネント/トークンの見本ui_kits/marketing_site/— ポートフォリオサイトのJSX再現
シグネチャームーブ
- アースカラーの暖色パレット
- ぼかしなしのフラット4~12pxオフセットシャドウ
- 1pxの「bark」ボーダー
- 丸みを帯びた12~20pxの角
- Playfairセリフ見出し + Inter本文 + Fira Code等幅 + Pirata Oneディスプレイ
- 中央揃えのダイヤモンド付きセクションヘッダー
- 微妙な
cubic-bezier(.22,.61,.36,1)トランジション - CDN経由のPhosphor Icons(Regular + Fill)