厳選・オープン・無料

Farcaster

構築。共有。成長。

web3social

↓ デザインシステムをダウンロード (2 MB)OpenDesign で開く

オリジナル: https://www.farcaster.xyz

📦 パックの中身を見る →

デザイン DNA

分散型ソーシャル開発者オープンプロトコル

開発者のための分散型ソーシャルプロトコル。

カラー

#7959FFAccent

#FFFFFFInk

rgba(255, 255, 255, 0.8)Ink soft

#361AACBG

rgba(255, 255, 255, 0.5)Muted

rgba(255, 255, 255, 0.25)Line

ハイコントラストのため、白いテキストを持つ深インディゴの背景。

タイポグラフィ

humanist-sans

display28px · 600

余白

4px

8px

16px

24px

32px

48px

64px

96px

標準の4pxベースグリッド。

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

sm · 4px

md · 8px

lg · 12px

pill · 300px

なし。背景のコントラストに依存。

レイアウト

1280container

12columns

24pxgutter

768 / 1024breakpoints

標準のウェブレイアウト。モバイルファースト。

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

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

滑らかなhoverトランジション。

スケールまたはカラーシフト。 · わずかにスケールダウン。

コンポーネント

button 丸みのあるピル形状。プライマリおよびセカンダリスタイル。
card モバイルアプリプレビューにダークグラス効果。
chip 視覚的になし。
input 視覚的になし。
hero _phoneモックアップとCTAを持つ分割レイアウト。

文体と禁止事項

トーン 直接的、自信に満ち、テクニカル。
見出し 短く、パンチのある文。
CTA 明確で実行可能。

細いウェイトを使用しない — スクリーンショットは-bold/-mediumウェイトを示しています。
プライマリボタンにシャープな角を使用しない — スクリーンショットはピル形状を示しています。
明るい背景を使用しない — スクリーンショットは深いインディゴを示しています。
複雑なグラデーションを使用しない — スクリーンショットはソリッドまたは非常に微細なグラデーションを示しています。
装飾的なフォントを使用しない — スクリーンショットはクリーンなsans-serifを示しています。
レイアウトを散らかさない — スクリーンショットは明確で焦点を絞ったヒーローセクションを示しています。
避ける: 曖昧な約束。
避ける: 過度なマーケティングの誇張表現。
避ける: 非技術的な専門用語。

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

Farcaster — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

開発者とクリエイターのための分散型ソーシャルプロトコル。白いテキストと鮮やかなアクセントの紫(#7959FF)を持つ深インディゴの背景(#361AAC)。強調のため-boldウェイトを持つクリーンなヒューマニストsans-serifタイポグラフィ(Inter)を使用。ボタンは完全に丸みのある(ピル形状)。レイアウトはクリーンで焦点を絞り、散らかりを回避。重要な注意点: ボタンにシャープな角を使用せず、明るい背景を使用せず、細いフォントウェイトを使用しない。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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