Claude.md を長くするより、分離した方が強い理由
AGENTS.md、skills、hooks をどこまで分けるべきかを、AI駆動フローの観点から整理する。
Growth Lab編集部
読み込み中...
公開契約プレビュー
プリミティブ UI コンポーネント、プロンプトテンプレート、トークン契約をこのページで検証します。 Penpot・React コンポーネント・派生アセットを更新する際は、ここと同じ語彙・バリアントを使用してください。
Growth Lab デザインシステム
Primitive UI の見本帳ではなく、記事体験を再現可能に組み立てるためのカタログとして管理する。
公開ページで確認できます
このプレビューは公開されている `/design-system` でも同じ内容を確認できるようにしている。
AIプロンプトテンプレート
HTML生成用とワイヤーフレーム用を分けておくと、AI に渡す前提がぶれにくくなり、運用もしやすくなる。
HTML生成用テンプレートHTML / CSS
実装しやすさとセクション設計を優先して、画面構成をそのままコードへ落とし込めるようにする。
- 目的・対象ユーザー・優先順位を先に固定する
- 画面構成はヘッダー / メイン / サイドバー / フッターで整理する
- 実装しやすい余白・サイズ・レイアウトを優先する
html-/-css.txt
text
あなたは Web デザイナー兼 UI デザイナーです。
以下の条件で、HTML/CSS で実装しやすい Web 画面のデザイン仕様を提案してください。
【目的】
- [画面の目的]
【対象ユーザー】
- [対象ユーザー]
【採用するデザインスタイル】
- [デザインスタイル名] ベース
【優先順位】
1. [最優先]
2. [次点]
3. [次点]
4. [次点]
【画面構成】
- [ヘッダー]
- [メイン領域]
- [サイドバー]
- [フッター]Figma / ワイヤーフレーム用テンプレートWireframe
骨組みと情報設計を優先し、レイアウト差分と CTA の位置が分かる状態で起こしやすくする。
- セクションごとの役割を先に分ける
- PC と SP の違いを並べて見られるようにする
- 装飾よりも情報構造と導線を優先する
wireframe.txt
text
あなたは Web デザイナー兼 UI デザイナーです。
以下の条件で、Figma で起こしやすいワイヤーフレーム案を提案してください。
【目的】
- [画面の目的]
【対象ユーザー】
- [対象ユーザー]
【優先順位】
1. 情報設計
2. 視線誘導
3. 操作しやすさ
4. 世界観の統一
【ワイヤーフレーム要件】
- セクションごとの役割が分かること
- 主要 CTA の位置が分かること
- モバイルと PC の違いが分かること短縮版テンプレートShort
必要最低限の項目だけに絞って、そのままコピペしやすくした即用版。
- 目的・対象ユーザー・デザインスタイルだけ先に固定する
- 必要なセクションと避けたいことを短く書く
- 出力形式を4項目に絞ってブレを減らす
short.txt
text
あなたは Web デザイナー兼 UI デザイナーです。
以下の条件で、実務で使える Web 画面のデザイン仕様を提案してください。
【目的】
- [目的]
【対象ユーザー】
- [対象ユーザー]
【デザインスタイル】
- [デザインスタイル名] ベース
【優先順位】
1. 可読性
2. 情報の分かりやすさ
3. 操作しやすさ
4. 世界観の統一
【必要なセクション】
- [セクション1]
- [セクション2]
- [セクション3]
【避けたいこと】
- 装飾過多にしない
- 余白不足にしない
- 実装しにくい複雑な表現を避ける3行版テンプレート3 Lines
目的・対象・条件だけで、まず方向性を合わせるための最小版。
- 3行だけで入力できる
- 条件はスタイル / 必須要素 / 避けたいことを含める
- 詳細は後で詰める前提で使う
3-lines.txt
text
目的: [何を達成したいか]
対象: [誰向けか]
条件: [デザインスタイル / 必須要素 / 避けたいこと]記事システム対応表
記事専用コンポーネントの requested pattern と内部実装名を先に固定し、口頭指示をそのまま実装へ流さない。
指示語彙
ArticleHero
内部コンポーネント
EyeCatch
記事冒頭の代表ビジュアル。image を優先。
指示語彙
Breadcrumb
内部コンポーネント
Breadcrumb
記事への到達経路を示す。
指示語彙
ArticleMeta
内部コンポーネント
ArticleMeta
著者・公開日・更新日・読了時間を独立管理する。
指示語彙
TOC
内部コンポーネント
TableOfContents
inline / sticky / collapsed を管理対象にする。
指示語彙
AuthorBox
内部コンポーネント
AuthorBio
執筆者の輪郭と専門性を補強する。
指示語彙
RelatedArticles
内部コンポーネント
RelatedPosts
同タグや同テーマの回遊導線。
指示語彙
PrevNextNavigation
内部コンポーネント
AdjacentPosts
前後記事への移動導線。
指示語彙
NewsletterCTA
内部コンポーネント
NewsletterCTA
読了後の継続接点を記事文脈でまとめる。
ナビゲーションと検索
探索と回遊は記事本文と同じくらい重要なプロダクト要素なので、Header や SearchField もデザインシステムの管轄に置く。
idle検索フィールド
⌕記事を検索
初期状態。プレースホルダだけを見せる。
typing検索フィールド
⌕Claude Code
入力中。候補リストや件数表示の起点。
loading検索フィールド
⌕デザインシステム
結果取得中。文字ではなく skeleton に寄せる。
no-results検索フィールド
⌕存在しない語句
0件時は EmptyState と組み合わせる。
TOC は inline / sticky / collapsed / active-section を追跡対象にし、記事ごとに都度別実装しない。
記事コンポーネント
記事詳細のヘッダー、メタ、著者、関連導線はページの骨格そのものなので、単体確認できる状態にしておく。
口頭の UI 指示をデザインシステムのパターンへ翻訳する
Growth Lab編集部公開 7分で読める
HeaderEyeCatchThumbnailArticleCard日本語の長いタグ確認
G
Growth Lab編集部
AI Agent / Design System / Content Operations
AI駆動、AIエージェント、仕様駆動、ハーネス エンジニアリングの接続を検証しています。監修と実装の両方を扱う前提で、AuthorBox の情報量を決めます。
ArticleMeta
Growth Lab編集部公開 更新 7分で読める
公開日、更新日、読了時間を独立コンポーネントで扱うことで、記事ヘッダーとカードの役割分離を保ちやすくする。
loaded
loading
fallback
画像未設定時は本文の主張を短く伝える fallback surface を使う。
ArticlePageSkeleton variants
responsive
実ページと同じ既定状態。モバイル目次とデスクトップサイドバーの両方を持つ。
//
desktop
サイドバー TOC を固定し、モバイル折りたたみを省いたデスクトップ専用確認。
//
mobile
狭い画面幅で、折りたたみ TOC を前提にした loading state。
//
no-sidebar
TOC や補助カラムを持たない長文ページ向けの省略状態。
//
デザインシステム運用を崩さない AI レビュー設計
主観判断は AI reviewer、形式契約は CI に寄せる運用で、レビューのズレを減らす。
Growth Lab編集部
ArticleCard skeleton
compact / horizontal は次段階
今回は内部対応の明示を優先し、compact や horizontal の派生は次のバリアント拡張で扱う。
記事フッターパターン
読了後の回遊と継続接点も記事詳細の一部として扱い、一覧への逃がしだけで終わらせない。
あわせて読む
同じテーマや近い文脈の検証を続けて確認できます。
新着
タグ一致
新着
継続接点
更新を追いかける
記事末尾の継続接点として、特集や一覧への導線を newsletter 文脈でまとめる。
- 新着記事をまとめて確認できる
- 関連記事や特集ページへつながる
- 実験ログを継続的に追える
更新をまとめて見る
本実装ではメール購読や通知機能へ差し替え可能。
一覧と発見の見え方
同じ記事データでも、一覧文脈では card / list の切り替えや関連カードの見え方を変える。
表示形式
販促と補助パーツ
アフィリエイトや補助パーツも記事文脈で使う前提で、単独確認できる状態にする。
コールアウト
情報
記事の要点整理に使う。
注意
運用上の落とし穴や前提条件を示す。
失敗例
やってはいけない構成や破綻例を示す。
完了条件
レビューや反映が終わった状態を示す。
コードブロック
ui-pattern.ts
typescript
export const uiPattern = {
requested: "App Bar + EyeCatch + TOC",
normalized: ["Header", "EyeCatch", "TableOfContents"],
};状態一覧
部品そのものだけでなく、どの状態を設計対象にしているかを一覧で追えるようにする。
Button
defaulthoverfocusdisabledloading
ArticleCard
defaulthovercompactmissing-thumbnailskeleton
SearchField
idletypingloadingno-results
TableOfContents
inlinestickycollapsedactive-section
ArticleHero
loadedloadingfallback
ArticlePageSkeleton
responsivedesktopmobileno-sidebar
基礎コンポーネント
primitives は残しつつ、記事専用パターンの下支えとしてどう使うかを前提に管理する。
Typography
日本語の長い見出しでも破綻しないことを確認する
本文の途中で見出しが連続しても読みやすさを維持する
中見出しはタグやメタより強く、本文より少し強く扱う
記事メディアでは日本語の本文量が多くなりやすいため、英語のダミー文ではなく実運用に近い文量で確認する。
小さな本文は日付、補足、著者肩書きなどに使う。デフォルトブランドソフト