厳選・オープン・無料

Webstudio

スピードと動的レンダリングに焦点を当てた、スタイリッシュでダークテーマの開発ツールプラットフォーム。

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

オリジナル: https://webstudio.is

📦 パックの中身を見る →

01

デザイン DNA

ウェブ開発ノーコードパフォーマンスホスティングビルダー

現代的な開発者向けIDEインターフェース

02

カラー

linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)Accent
#E6E7E9Ink
#D0D3D4Ink soft
#11181CBG
#1A1D1EBG soft
rgba(255,255,255,0.05)BG quiet
#A6A9ABMuted
rgba(208,211,212,0.19)Line

ダーク背景上的の高コントラストインク色と、繊細なボーダー

03

タイポグラフィ

humanist-sans · monospace

本文には400ウェイトを使用 · 強調やUI要素には600ウェイトを使用 · 大きなディスプレイテキストにはtightな文字間隔（-1.5px）を適用

04

余白

4px
9px
18px
27px
36px
72px
144px

4.5pxの基本単位と縦リズムの倍数

05

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

sm · 4px
md · 9px
lg · 18px
pill · 100000px

1px solid rgba(208,211,212,0.19)

0 2px 3px rgba(0,0,0,0.13) · 0 0 32px rgba(74,78,250,0.5)

06

レイアウト

1200container
12columns
27pxgutter
768 / 1024breakpoints

縦方向にゆとりのあるパディングを持つ中央揃えコンテンツ

07

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

150msmicro
250mssmall
1500msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

ホバー時の滑らかなカラーとスケールの遷移 · 連続する動きのためのリニアスライドアニメーション · 遊び心のあるインタラクションのためのバネのようなバウンス

滑らかな遷移で少しスケールアップし、カラーを変化させる · 繊細なスケールダウン効果

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

ダークテーマを持つ、開発者向けWebアプリケーションビルダープラットフォーム。プライマリ背景はダークチャコール（#11181C）で、より明るいダークサーフェス（#1A1D1E）。テキストはダーク背景上的のライトグレー（#E6E7E9）。アクセントは鮮やかなマルチカラーグラデーション（ティールからパープルへ、ピンクへ、ゴールドへ）。タイポグラフィはManrope（ヒューマニストサンセリフ）を使用し、見出しにはtightな文字間隔。主要要素には角丸ボタン（100px radius）、繊細なボーダー（rgba(208,211,212,0.19)）、カードベースのレイアウトが含まれます。重要な注意点：ライトモードを使用しない、セリフフォントを使用しない、鋭い角を使用しない、単色アクセントカラーを使用しない、重いシャドウを使用しない、本文にキャピタルレタースを使用しない。パフォーマンスのメッセージと開発者体験に焦点を当てる。

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

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

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

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