厳選・オープン・無料

Super

NotionドキュメントをプロフェッショナルなWebサイトに変換する、クリーンでハイコントラストなSaaSツール。

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

オリジナル: https://super.so

📦 パックの中身を見る →

01

デザイン DNA

シンプル効率的Notion連携プロフェッショナルWeb構築

ノートを瞬時に、磨き上げられたパブリックなWebサイトに変換する、クリーンでプロフェッショナルなワークスペース。

02

カラー

#FFBE3CAccent
#262A2EInk
#66707AInk soft
#FFFFFFBG
#F9F9F8BG soft
#FDFDFCBG quiet
#808C99Muted
rgba(204, 209, 214, 1)Line

ハイコントラストを基盤とし、エネルギッシュなアクセントを一点のみ使用。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

大きなディスプレイテキストには、タイトな文字間隔を使用。 · 白背景に対して本文テキストのハイコントラストを維持。

04

余白

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

一貫した4pxベースグリッド。セクションに対して縦方向に十分な余白を確保。

05

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

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

1px solid rgba(204, 209, 214, 1)

rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px · rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0px · rgba(0, 0, 0, 0.02) 58px 88px 57px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えカラムのヒーローレイアウト。標準的なトップナビゲーションバーを採用。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

UIトランジションのための透明度フェード · インタラクティブ要素のための高速な変形スケール

プライマリボタンに対して、微妙な背景色のシフトまたは微小なスケール増加。 · 最小限のトランジション遅延で、即座に状態を変化。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Superは、NotionドキュメントをプロフェッショナルなWebサイトに変換する、クリーンでハイコントラストなSaaSツールです。ビジュアルアイデンティティは、白と淡いオフホワイトの背景を基盤とし、ダークグレー（#262A2E）のテキストを使用ことで、鮮明でプロフェッショナルな印象を生み出しています。プライマリCTAには、エネルギッシュなアクセントカラー（イエロー、#FFBE3C）を一点のみ使用しています。タイポグラフィは、ディスプレイ用に太字の幾何学的なサンセリフ、本文用にクリーンなヒューマニストサンセリフを採用し、大きなサイズではタイトな文字間隔をよく使います。レイアウトは中央揃えでミニマルな設計を貫き、視覚的な雑踏を避けます。最も重要な点として、メインのランディングページにダークモードを使用せず、競合する明るいアクセントカラーは決して使用せず、ヒーローセクションでは常にレイアウトを単一カラムにフォーカスしてください。すべてのシャドウは微細で大きな半径のものを使用し、UIは4pxベースグリッドと十分な縦方向の余白で安定感を保ってください。

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

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

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

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