厳選・オープン・無料

Womp

強力なブラウザベースの3Dツールを通じて、アイデアを物理的なオブジェクトに変える、クリーンでアクセシブルなプラットフォーム。

01

デザイン DNA

デジタルモデリングと物理製造の橋渡しをする、モダンでブラウザベースの3Dデザインスタジオ。

02

カラー

柔らかなグレーの表面を持つ高コントラストのモノクローム・パレットを採用し、3D製品画像が焦点となることを確保します。

03

タイポグラフィ

humanist-sans · monospace

• display60px · 400
• h148px · 400
• body16px · 400
• caption12px · 500

大きなディスプレイテキストには tightened な字間（letter-spacing）を使用する · 主要テキストには一貫したRegularウェイト（400）を維持する · 'OR LAUNCH A QUICK APP' などの技術ラベルには monospace を使用する

04

余白

パディングとギャップには一貫した8pxのベースリズムを、セクションの分離にはより大きな80pxの縦方向パディングを採用します。

05

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

1px solid のボーダーを主に #EEEEEE または rgba(32,32,32,1) で使用し、高コントラストの要素を実現します。

inset 0 0 0 1px color(srgb 0.85098 0.85098 0.85098)

06

レイアウト

豊かな縦方向のホワイトスペースを持つ中央揃えシングルカラムのヒーローから、フィーチャーカード用の2カラムグリッドに移行します。

07

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

すべてのインタラクティブな状態（背景、box-shadow、transform、scale）に一貫した150msのease-in-outトランジションを適用。

ボタンやインタラクティブ要素の背景とbox-shadowの変化。 · scale または transform のマイクロインタラクション。

08

コンポーネント

• button 主に2つのスタイル：白テキストの塗りつぶし黒、角丸のピル型。および、ダークテキストのゴースト/アウトライン型、角丸のピル型。
• card 大きな角丸（14px）、微細な背景色（#F2F2F2）、そしてその下にクリーンなタイポグラフィを持つフィーチャーカード。
• chip 明るいグレーのボーダーを持つ、小さな monospace 大文字のチップ。セクションの区切りとして使用。
• input 明るいグレーの背景、角丸、中に黒のCTAボタンを備えた、大きく中央揃えのプロンプトボックス。
• hero クリーンな白背景にテキストを多用したミニマルなヒーローセクション。大きなインタラクティブなプロンプトボックスを特徴とする。

09

文体と禁止事項

• トーン 直接的、自信に満ち、かつ鼓舞するようなトーン。
• 見出し tightened な字間を持つ、簡潔でメリット主導のステートメント。
• CTA 矢印アイコンを使用したアクション指向。高コントラストの黒塗りか、微細なゴーストアウトラインのいずれか。

• 装飾的なグラデーションや複雑な背景は使用しない — スクリーンショットはクリーンで、近白色の単色背景を示しています。
• 見出しに全大文字は使用しない — スクリーンショットは、主要なディスプレイテキストにセンテンス・ケースまたはタイトル・ケースを示しています。
• 角丸の四角や鋭い角は使用しない — スクリーンショットは、tight なピル型と、大きな14pxの角丸を混在させています。
• 高彩度のアクセントカラーは使用しない — スクリーンショットは、支配的な明るいカラーのない、厳格なモノクロームパレットを示しています。
• 重いドロップシャドウは使用しない — スクリーンショットは、高さを出すために微細な1pxのインセットボーダーのみを使用しています。
• レイアウトに複数のカラムで散らかさない — スクリーンショットは、非常に集中した、中央揃えのシングルカラムヒーローを示しています。
• 避ける: 過度な技術用語
• 避ける: 密な段落
• 避ける: 散らかったレイアウト

10

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

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

11

System Prompt

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