Polaris は Shopify のマーチャント管理画面の UI 言語です。ライトグレー #F1F1F1 のキャンバスが白いカードを支え、ほぼ黒の #303030 が主要操作を担い、緑 #008060 が成功とブランドの瞬間をマークします。Inter 書体、8px の角丸、抑制されたボーダーが、注文、在庫、マーケティングのフォームを日々の反復操作の中で明快、安定、予測可能に保ちます。
Polarisデザインシステム
プロンプトテンプレート
基本テンプレート
Design a Shopify Polaris-inspired admin interface. - Light #F1F1F1 canvas with white surface cards; - Near-black #303030 primary buttons and #008060 brand green; - Inter font, 8px radii, #E3E3E3 hairline borders; - Merchant admin patterns: order tables, inventory forms, filters; - Calm, task-focused e-commerce workflows. Colors: #008060, #F1F1F1, #FFFFFF, #303030 with #008060 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Polaris aesthetics. Use Polaris color identity with #008060 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Polaris style. Use Polaris color identity with #008060 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Polaris design language. Use Polaris color identity with #008060 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Polaris visual identity. Use Polaris color identity with #008060 accents. Compelling, conversion-focused.
使用例
Polaris 注文管理画面
ダッシュボードBuild an order management admin with Polaris style: #F1F1F1 canvas, white cards, #303030 primary buttons, green #008060 status accents, and dense data tables.
Polaris 商品登録フォーム
WebDesign a product listing form with Shopify Polaris aesthetics: labeled inputs, 8px radii, clear sections, and #008060 save actions.
✅ 適した用途
- EC マーチャントの管理画面
- 注文と在庫の管理
- 複雑なフォームのワークフロー
❌ 適さない用途
- 一般消費者向けのブランド公式サイト
- モーション重視のマーケティングページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。