厳選・オープン・無料

Storyblok

モダンフレームワーク向けに設計され、クリーンで楽しい美学を持つエンタープライズheadless CMS

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

オリジナル: https://www.storyblok.com

📦 パックの中身を見る →

01

デザイン DNA

Headless CMS開発者優先AIコンテンツ楽しい

洗練されつつも親しみやすい、開発者フレンドリーなコンテンツプラットフォーム

02

カラー

#7530F7Accent
#1F1F1FInk
#44474AInk soft
#FFFFFFBG
#808080Muted
rgba(31,31,31,0.12)Line

単一の鮮やかな紫アクセントと戦略的な青のハイライトを用いた、ハイコントラストなニュートラル

03

タイポグラフィ

geometric-sans

見出しはウェイト900、 Tightな字間隔 · 本文は可読性のために十分な行間を維持 · ボタンテキストは16pxでウェイト500 · アクセントカラーはヒーロー内の主要フレーズに選択的に使用

04

余白

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

一貫した24pxのガター、48-96pxの豊かなセクションパディング

05

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

sm · 8px
md · 12px
lg · 24px
pill · 999px

カードや入力フィールドに1-2pxの、控えめなボーダー

0 2px 8px rgba(31,31,31,0.08) · 0 4px 16px rgba(31,31,31,0.12)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えの単一カラムヒーロー、その下に全幅コンテンツセクション

07

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

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

ボタンとリンクのスムーズなhoverトランジション · インタラクティブ要素の微妙なカラートランジション

ボタンの背景色変化、リンクの透明度変化 · プライマリアクションのスケールフィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これはheadless CMSに特化した開発者向けSaaSプラットフォームです。デザインは技術的な信頼性と親しみやすさのバランスを取っています。プライマリカラーは白背景に近黒テキスト（#1F1F1F）と紫アクセント（#7530F7）。青のハイライト（#3B82F6）はヒーローテキストに使用。タイポグラフィは見出しにウェイト900のジオメトリックsans-serifを使用し、 Tightな字間隔。複数の競合するアクセントを使用しない。重い影やグラデーションを適用しない。装飾的なセリフフォントを使用しない。レイアウトは十分な余白でコンテンツを中央揃え。ボタンはプライマリアクションに角丸の濃色塗りつぶしを使用。インターフェースは無機質にならず、クリーンでモダンに感じられる。

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

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

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

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