厳選・オープン・無料

Strapi

AI搭載のウェブサイトやアプリのための、オープンソースヘッドレスCMS

cmsdev
Strapi のスクリーンショット
↓ デザインシステムをダウンロード (10 MB)OpenDesign で開く

オリジナル: https://strapi.io

📦 パックの中身を見る →

01

デザイン DNA

オープンソースヘッドレスCMSAI搭載開発者中心

技術的な実用性とプレミアムな洗練感のバランスを取る、開発者優先のコンテンツプラットフォーム

02

カラー

#4F46E5Accent
#FFFFFFInk
#3E3E5CInk soft
#0F0F23BG
#F7F8FCBG soft
#E7EDF1BG quiet
#5E709DMuted
rgba(94,112,157,0.2)Line

CTAにはインディゴアクセントを使用した、ハイコントラストのダーク/ライトセクション

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

表示見出しにはPoppinsを使用 · 本文テキストとUI要素にはInterを使用 · ダーク背景での可読性のために、十分な行間を維持

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

8pxの基本単位で一貫した垂直リズムを維持

05

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

sm · 4px
md · 8px
lg · 15px
pill · 999px

1px solid rgba(94,112,157,0.2)

rgba(26,26,67,0.1) 0px 1px 4px 0px · rgba(0,0,0,0.1) 0px 4px 12px 0px · rgba(0,0,0,0.08) 0px 6px 10px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

十分な余白を設けた中央揃えコンテンツ、フル幅ダークヒーローセクション

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4,0,0.2,1)easing

ホバー時のカラートランジション · インタラクティブステートのための不透明度変化

テキストリンクの色変更、カードの微細なシャドウの階段効果 · 色/不透明度による即座のビジュアルフィードバック

08

コンポーネント

09

文体と禁止事項

10

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

Strapi — 桌面首屏（hero）
桌面首屏（hero）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 移动首屏
移动首屏

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

11

System Prompt

Strapiのデザインシステムは、AI搭載アプリケーションを開発する開発者をターゲットとし、ダーク/ライトのデュアルセクションアプローチを採用。プライマリカラーにはヒーローセクション用の深いネイビー(#0F0F23)、コンテンツエリア用のホワイト(#FFFFFF)、アクションCTA用のインディゴ(#4F46E5)を採用。タイポグラフィには、表示/見出しに幾何学的なPoppins、本文にヒューマニストなInterを使用し、明確な階層を維持。重要な禁止事項：インタラクティブ要素にマットな色を使わない（鮮やかなインディゴが標準）、長文本文を中央揃えにしない、コードスニペットには十分なサイズを維持。このシステムは、クリーンなレイアウト、微細なシャドウ、意図的な余白によって技術的な信頼感を重視。明確な価値提案と、コピー可能なコードブロックや直接的なCTAなどの開発者フレンドリーなパターンに焦点を当てる。

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

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

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

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