厳選・オープン・無料

Val Town

JavaScriptを即座に記述・デプロイできる、フレンドリーなサーバーレスプラットフォーム。

01

デザイン DNA

スクリプトを素早くデプロイできる、開発者向けの居心地の良いローカルカフェ

02

カラー

明るい背景に暗いテキストという高コントラストの基盤に、プライマリアクション用に1色の鮮やかなシアンをアクセントとして配置。

03

タイポグラフィ

geometric-sans · humanist-sans · slab-mono

• display48px · 700
• headline36px · 700
• body16px · 400
• caption14px · 400
• code16px · 400

04

余白

セクション間に通常96pxのゆとりのある垂直パディングを確保し、明確な視覚的分離を実現する、ベース4のシステム。

05

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

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

レイアウト

テキストを左に、複雑に重なった合成画像を右に配置した中央揃えのヒーローセクションに続き、スタックされたコンテンツセクションを配置。

07

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

インタラクティブ要素の標準的なcolorおよびbackground-colorトランジション · ボタンとリンクの滑らかなhoverおよびfocus状態の変化

ボタンとリンクの控えめな背景色の変化または透明度の変更。 · 背景色のトランジションによる即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリボタンは、鮮やかなシアン背景に暗いテキストを持つピル形；セカンダリボタンは、控えめなボーダーと暗いテキストを持つピル形。
• card 証言や機能のハイライトに使用される、控えめなシャドウと角丸を持つダークテーマのカード。
• chip UIモックアップ内のバッジや小さなラベルとして、最小限に使用。
• input 標準的なパディングと角丸を持つ、クリーンでボーダー付きの入力フィールド。
• hero 太字のタイポグラフィックヘッドライン、サブタイトル、2つのプライマリアクションボタン、および製品インターフェースの大きく重なった合成画像を含む分割レイアウト。

09

文体と禁止事項

• トーン フレンドリーで親しみやすく、やや遊び心がありつつも、技術的に優れた印象。
• 見出し 直接的で、メリット重視でありながら、カジュアルで歓迎的なトーンで記述。
• CTA 「Start」や「Copy」のような単純な動詞を使用し、即座のエンゲージメントを促進するアクション重視の表現。

• 見出しにセリフ体のタイポグラフィを使用しない — スクリーンショットでは throughout 太字の幾何学的なサンセリフが使用されています。
• デフォルトとしてダークテーマを使用しない — メインの背景はクリーンで明るい白です。
• 刺々しく彩度の高いアクセントカラーを使用しない — メインのアクセントは明るくても親しみやすいシアン (#2EC4FF) です。
• シャープで四角い角を使用しない — UIは角丸を採用しており、ボタンには特にピル形 (999px) が頻繁に使用されています。
• everywhere に重いドロップシャドウを使用しない — シャドウは控えめで、主にフローティングカードや合成画像に使用されます。
• レイアウトを密集させない — デザインでは特に主要セクション間で、ゆとりのあるホワイトスペースとパディングが使用されています。
• 避ける: 過度に複雑または専門用語の多い技術的言語
• 避ける: 攻撃的または緊迫感のある営業中心のコピー
• 避ける: フォーマルで堅い、または企業的な響きのフレーズ

10

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

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

11

System Prompt

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