厳選・オープン・無料

Starface

製品を楽しいコレクティブルとして扱う、エネルギッシュで遊び心のあるスキンケアのe体験。

01

デザイン DNA

賑やかでエネルギッシュなティーン誌と、ポップアートのキャンディーショップの融合。

02

カラー

特徴的な電気イエロー、鮮烈なマゼンタ、明るいグリーンを、大胆な黒枠の上で高彩度のカラーブロッキング。

03

タイポグラフィ

geometric-sans · monospace

• display40px · 700
• body16px · 400

テキストは常に小文字表記。 · ほぼすべての機能的・説明的テキストに等幅フォントを使用。 · インパクトのある見出しには、太く、太字、角丸のsans-serifを使用。

04

余白

カード内の一定の内部padding（25px）により、カードサイズが変わっても均一なリズムを維持。

05

サーフェス (角丸 / 影 / 罫線)

太い2pxの黒枠、または純黒の構造的間隔がすべての要素を定義し、カラーブロックを分離。

なし

06

レイアウト

太い黒線で区切られた、均一色ブロックによる剛直なフルブリードグリッド。

07

モーションとインタラクション

製品画像のhover時の微細なスケーリング。 · スムーズな遷移のためのopacityフェードイン。

インタラクティブ要素上の微細なtransformスケーリングまたはopacity変化。 · 重い遅延なく、即座でクリスピーなフィードバック。

08

コンポーネント

• button 黒枠にテキストの透け背景、または純黒の塗りつぶし背景。
• card 角丸（24px）、太い枠、明確な画像/テキスト分離を持つ、鮮やかな単色の長方形。
• chip カテゴリ用の、ピル型または小矩形のカラーコードタグ。
• input 大胆なアウトライン美学に合わせた、標準的な枠付き入力欄。
• hero ビューポートを支配する、大きくカラフルで画像を多用したブロック。

09

文体と禁止事項

• トーン 信じられないほどカジュアルでフレンドリー、少しざれouflée。ネットスラングと絵文字を使用。
• 見出し 短く、パンチがあり、小文字で、熱狂的。
• CTA 直接的、小文字で、行動を促す。

• セリフフォントは使用しない — スクリーンショットでは等幅フォントと幾何学的な角丸sans-serifのみが使用されている。
• 大文字テキストは使用しない — スクリーンショットではテキストは完全に小文字表記。
• 微細なグレー枠は使用しない — スクリーンショットでは太く、単色の構造的な線が使用されている。
• 複雑な影は使用しない — スクリーンショットでは平坦なカラーブロックで、奥行き効果はなし。
• 抑制されたパステルカラーは使用しない — スクリーンショットでは非常に鮮やかでネオンのような原色が使用されている。
• 密集したテキストブロックは使用しない — スクリーンショットでは短く、パンチがあり、非常にスキャンしやすいコピー。
• 避ける: フォーマルな言語
• 避ける: 大文字テキスト
• 避ける: セリフフォント
• 避ける: 抑制された色
• 避ける: 複雑な文章

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko