厳選・オープン・無料

Magic

Magic は、ソフトウェアエンジニアリングと研究を自動化するフロンティアコードモデルを構築しています。

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

オリジナル: https://magic.dev

📦 パックの中身を見る →

01

デザイン DNA

Frontier AICode ModelsSafe AGIResearchSoftware Engineering

AGIに特化したエリート研究ラボ。

02

カラー

#1C2024Ink
#FFFFFFBG
#60646CMuted
rgba(232, 232, 236, 1)Line

ハイコントラストミニマリズム: 純白キャンバス上の深炭色インクを基調とし、セカンダリ情報にはグレーを用いる。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

04

余白

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

標準の4px基準を採用し、余裕のあるホワイトスペースで息の通った編集的フィールを実現。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

リスト区切り線には 1px solid rgba(232, 232, 236, 1) を使用

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローセクションは2カラム分割、求人情報は水平区切り線付きの単一カラムリストレイアウト。

07

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

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

インタラクティブ要素のホバーtransition

リンク上の微細な色相または不透明度の変化。 · 直接ナビゲーション。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

このデザインは、ミニマリストでミッション志向のAI研究ランディングページです。クリーンな単色カラーパレットを採用し、純白背景(#FFFFFF)に深炭色(#1C2024)を基調とし、最上部に単一の微細なグラデーションメッシュを配置しています。タイポグラフィはモダンサンセリフを基盤とし、ディスプレイにはグロテスクサンセリフ、本文にはヒューマニストサンセリフを指定。全文に通常(400)ウェイトを維持。レイアウトは余裕があり編集的で、構造には豊富なホワイトスペースと細い水平線を活用。重要な制約: 本文に太字ウェイトを使用せず、リニアリストを優先して複雑なカードベースレイアウトを避け、高彩度アクセントカラーは一切導入しない。デザインは白地に対する濃いインクのハイコントラストにインパクトを依存している。

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

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

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

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