厳選・オープン・無料
Val Town
JavaScriptを即座に記述・デプロイできる、フレンドリーなサーバーレスプラットフォーム。
devtoolsplayful
01
デザイン DNA
開発者プラットフォームサーバーレスjavascriptシンプル
スクリプトを素早くデプロイできる、開発者向けの居心地の良いローカルカフェ
02
カラー
#2EC4FFAccent
#000000Ink
#4B5563Ink soft
#FFFFFFBG
#F7F9FCBG soft
#1C2433BG quiet
#6B7280Muted
rgba(0,0,0,0.1)Line
明るい背景に暗いテキストという高コントラストの基盤に、プライマリアクション用に1色の鮮やかなシアンをアクセントとして配置。
03
タイポグラフィ
geometric-sans · humanist-sans · slab-mono
- display
48px · 700 - headline
36px · 700 - body
16px · 400 - caption
14px · 400 - code
16px · 400
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
セクション間に通常96pxのゆとりのある垂直パディングを確保し、明確な視覚的分離を実現する、ベース4のシステム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.1)
0 20px 25px -5px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 8px 10px -6px rgba(0,0,0,0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
テキストを左に、複雑に重なった合成画像を右に配置した中央揃えのヒーローセクションに続き、スタックされたコンテンツセクションを配置。
07
モーションとインタラクション
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素の標準的なcolorおよびbackground-colorトランジション · ボタンとリンクの滑らかなhoverおよびfocus状態の変化
ボタンとリンクの控えめな背景色の変化または透明度の変更。 · 背景色のトランジションによる即座のビジュアルフィードバック。
08
コンポーネント
- button プライマリボタンは、鮮やかなシアン背景に暗いテキストを持つピル形;セカンダリボタンは、控えめなボーダーと暗いテキストを持つピル形。
- card 証言や機能のハイライトに使用される、控えめなシャドウと角丸を持つダークテーマのカード。
- chip UIモックアップ内のバッジや小さなラベルとして、最小限に使用。
- input 標準的なパディングと角丸を持つ、クリーンでボーダー付きの入力フィールド。
- hero 太字のタイポグラフィックヘッドライン、サブタイトル、2つのプライマリアクションボタン、および製品インターフェースの大きく重なった合成画像を含む分割レイアウト。
09
文体と禁止事項
- トーン フレンドリーで親しみやすく、やや遊び心がありつつも、技術的に優れた印象。
- 見出し 直接的で、メリット重視でありながら、カジュアルで歓迎的なトーンで記述。
- CTA 「Start」や「Copy」のような単純な動詞を使用し、即座のエンゲージメントを促進するアクション重視の表現。
- 見出しにセリフ体のタイポグラフィを使用しない — スクリーンショットでは throughout 太字の幾何学的なサンセリフが使用されています。
- デフォルトとしてダークテーマを使用しない — メインの背景はクリーンで明るい白です。
- 刺々しく彩度の高いアクセントカラーを使用しない — メインのアクセントは明るくても親しみやすいシアン (#2EC4FF) です。
- シャープで四角い角を使用しない — UIは角丸を採用しており、ボタンには特にピル形 (999px) が頻繁に使用されています。
- everywhere に重いドロップシャドウを使用しない — シャドウは控えめで、主にフローティングカードや合成画像に使用されます。
- レイアウトを密集させない — デザインでは特に主要セクション間で、ゆとりのあるホワイトスペースとパディングが使用されています。
- 避ける: 過度に複雑または専門用語の多い技術的言語
- 避ける: 攻撃的または緊迫感のある営業中心のコピー
- 避ける: フォーマルで堅い、または企業的な響きのフレーズ
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Val TownはJavaScriptを即座にデプロイできるフレンドリーな開発者ツールで、クリーンで親しみやすい美学が特徴です。主なカラーは、鮮やかな白背景 (#FFFFFF)、深い黒テキスト (#000000)、およびプライマリアクション用の鮮やかなシアンアクセント (#2EC4FF) です。タイポグラフィは、見出しに幾何学的なサンセリフ、本文にヒューマニストサンセリフ、コードにスラブモノを使用しています。重要なデザインルール:プライマリレイアウトとしてダークモードを使用しない — スクリーンショットでは明るく、白を基調としたインターフェースが示されています。シャープで四角い角を使用しない — UIでは角丸が広く使用され、ボタンにはピル形が頻繁に使用されます。密集したレイアウトにしない — ゆとりのあるホワイトスペースと明確なビジュアル階層が不可欠です。トーンはカジュアルで歓迎的であり、過度な技術用語は避けます。
en · zh-CN · zh-TW · ja · ko