厳選・オープン・無料

Tiptap

リッチテキストエディタを構築・カスタマイズするためのプレミアム開発者プラットフォーム。

01

デザイン DNA

モダンなテキストエディタを構築するための、洗練されたプロフェッショナルなツールキット。

02

カラー

強調のための鮮やかなグラデーションアクセントを備えた、高コントラストのモノクローム。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display96px · 700
• h156px · 700
• body22px · 400
• small16px · 400
• caption12px · 400

大規模でインパクトのある見出しには、geometric-sansを使用。 · 可読性の高い本文やナビゲーションには、humanist-sansを使用。 · 本文テキストのウェイトは、最大限の可読性のために400に設定。

04

余白

微調整のための4pxサブグリッドを持つ、8pxベースグリッド。

05

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

1px solid rgba(0,0,0,0.1) または solid 1px border-color: rgb(13, 13, 13)

0 4px 10px 0 rgba(0,0,0,0.04) · 0 1px 4px 0 rgba(0,0,0,0.03) · 0 1px 2px 0 rgba(0,0,0,0.02)

06

レイアウト

最大幅コンテナ、大きなマージン、モバイル向けのスタッキングセクションを備えた12カラムグリッド。

07

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

カラー、transform、border-radiusの滑らかなトランジション。 · インタラクティブ要素のスケールアニメーション。 · すべてのインタラクティブ状態における一貫したイージング。

hover時の微細な背景色の変化またはtransform。 · クリック時のスケールダウンまたは不透明度の変化。

08

コンポーネント

• button プライマリアクションのための、ピル型ラジウスを持つ高コントラストソリッドボタン。
• card テンプレートを紹介するための、繊細なシャドウと角丸を持つ清潔なカード。
• chip （例：「有料」「無料」）分类のための、ピル型ラジウスを持つ小さなタグ。
• input 角丸を持つ、清潔でボーダー付きのインプット。
• hero 鮮やかなグラデーション背景と埋め込みエディタUIを持つ、大胆で大きなタイポグラフィの見出し。

09

文体と禁止事項

• トーン プロフェッショナル、自信に満ち、開発者向け。
• 見出し 直接的、アクション指向、かつ大胆。
• CTA 明確で簡潔、スピードと本番環境対応を強調。

• ダークモードを使用しない — スクリーンショットは主にライト背景を示している。
• セリフフォントを使用しない — スクリーンショットはすべてのテキストにサンセリフタイポグラフィを使用している。
• 低コントラストのテキストを使用しない — スクリーンショットは高い可読性のためにライト背景にダークテキストを使用している。
• 複雑で雑然としたレイアウトを使用しない — スクリーンショットは清潔で中央揃え、かつ適切なスペーシングのセクションを示している。
• 単一の塗りつぶし背景色を使用しない — スクリーンショットは鮮やかなグラデーション背景を示している。
• 鋭く四角い角を使用しない — スクリーンショットはすべての面に丸みのある角（8-16px）を使用している。
• 避ける: 過度にカジュアルまたは遊び心のある言葉遣い。
• 避ける: 開発者コミュニティで標準的でない専門用語。
• 避ける: 曖昧な価値提案。

10

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

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

11

System Prompt

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