読み込み中...
Public Contract Preview
Primitive UI components, prompt templates, and token contracts are verified on this page. Use the same vocabulary and variants here when updating Penpot, React components, and derived assets.
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エージェント開発、記事制作フロー、デザインシステム運用の接続を検証しています。監修と実装の両方を扱う前提で、AuthorBox の情報量を決めます。
ArticleMeta
Growth Lab編集部7分で読める
公開日、更新日、読了時間を独立コンポーネントで扱うことで、記事ヘッダーとカードの役割分離を保ちやすくする。
loaded
loading
fallback
画像未設定時は本文の主張を短く伝える fallback surface を使う。
ArticlePageSkeleton variants
responsive
実ページと同じ既定状態。モバイル目次とデスクトップサイドバーの両方を持つ。
//
desktop
サイドバー TOC を固定し、モバイル折りたたみを省いたデスクトップ専用確認。
//
mobile
狭い画面幅で、折りたたみ TOC を前提にした loading state。
//
no-sidebar
TOC や補助カラムを持たない長文ページ向けの省略状態。
//
Claude.md を長くするより、分離した方が強い理由
AGENTS.md、skills、hooks をどこまで分けるべきかを、記事制作フローの観点から整理する。
Growth Lab編集部
デザインシステム運用を崩さない 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
日本語の長い見出しでも破綻しないことを確認する
本文の途中で見出しが連続しても読みやすさを維持する
中見出しはタグやメタより強く、本文より少し強く扱う
記事メディアでは日本語の本文量が多くなりやすいため、英語のダミー文ではなく実運用に近い文量で確認する。
小さな本文は日付、補足、著者肩書きなどに使う。デフォルトブランドソフト