Claude Code に、Atlassian Design System のドキュメントを読ませるとデザインがとてもよくなる。
URL を渡すだけでOK。余白、Grid設計、フォント運用、色・アイコン・イラスト・タイポの指針まで網羅してるから、改善点や提案もやってくれる
細かい指定などいらないので、チートである
面倒であれば、CLAUDE.md に書いておいてもいい
試してないが、Gemini CLI でもいけそう
ワイは、この方法を利用してLPやアプリのテンプレートを作ったことがある。想像以上にデザインが改善された。デザインも10年以上やってきたワイですら舌を巻く出来
是非、皆さんもこのチートを使って、ダル面倒なデザインの時間を短縮しようぜ
Atlassian Design System
Atlassian Design System（アトラシアン・デザイン・システム） とは、Jira や Confluence を提供する Atlassian社 が、自社プロダクト全体で一貫性のあるUI/UXを実現するために構築した デザインとフロントエンド開発のガイドラインとコンポーネントの体系
Jira、Confluence、Bitbucket などの複数のプロダクトで同じUIパターンを再利用することで、ユーザーにとって統一感のある体験を提供している
リンクはこれ
コンポーネントには、こんな感じのものがある
| 分類 | コンポーネント名 | 状態 | 説明 |
|---|---|---|---|
| 入力フォーム | Button（ボタン） | なし | 一般的なクリック操作用のボタン |
| 入力フォーム | Calendar（カレンダー） | なし | 日付選択UI（カレンダー形式） |
| 入力フォーム | Checkbox（チェックボックス） | なし | 複数選択可能なチェック用UI |
| 入力フォーム | Comment（コメント） | なし | コメントスレッドや投稿用のUI |
| 入力フォーム | Date time picker（日時選択） | なし | 日付・時間の選択コンポーネント |
| 入力フォーム | Dropdown menu（ドロップダウンメニュー） | なし | プルダウン形式のメニュー |
| 入力フォーム | Focus ring（フォーカスリング） | ⚠ CAUTION | アクセシビリティ用のフォーカス表示。使い方に注意が必要 |
| 入力フォーム | Form（フォーム） | なし | 入力フォーム全体の構造 |
| 入力フォーム | Radio（ラジオボタン） | なし | 単一選択肢用のラジオボタン |
| 入力フォーム | Range（レンジ） | なし | スライダー形式で数値を選択するUI |
| 入力フォーム | Select（セレクトボックス） | なし | ドロップダウン形式の選択UI（HTMLの <select> に相当） |
| 入力フォーム | Text area（テキストエリア） | なし | 複数行入力用のテキストフィールド |
| 入力フォーム | Text field（テキストフィールド） | なし | 単一行入力用のテキストボックス |
| 入力フォーム | Toggle（トグルスイッチ） | なし | ON/OFF切り替えのスイッチ |
| 画像とアイコン | Avatar（アバター） | なし | プロフィール画像やユーザーの初期アイコン表示 |
| 画像とアイコン | Avatar group（アバターグループ） | なし | 複数アバターをグループ表示 |
| 画像とアイコン | Icon（アイコン） | なし | UIに使う一般的なアイコン |
| 画像とアイコン | Icon object（アイコンオブジェクト） | なし | アイコン＋テキストなどの組み合わせオブジェクト |
| 画像とアイコン | Image（画像） | 🧪 BETA | 新しい画像コンポーネント（ベータ版） |
| 画像とアイコン | Logo（ロゴ） | なし | ブランドロゴの表示 |
| レイアウトと構造 | Layout grid（レイアウトグリッド） | ❌ DEPRECATED | 非推奨。今後削除される予定のレイアウト用グリッド |
| レイアウトと構造 | Page（ページ） | ⚠ CAUTION | ページ全体の構造設定コンポーネント |
| レイアウトと構造 | Page header（ページヘッダー） | なし |
