AI に勤怠管理を作らせてみた — 前回作ったコンポーネントを、次の AI がもう発掘していた（やってみた #86）
/attendance-management375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に勤怠管理を作らせてみた — 前回作ったコンポーネントを、次の AI がもう発掘していた（やってみた #86）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。人材・採用 4枚目——勤怠管理 / 工数管理。月次の社員×日マトリクス、36協定アラート、休暇、勤怠承認。
前回 #85 で、3回手組みされた PersonCell をその場で @gunjo/ui に作った。#86 の観測はただ1つ——たった今作った PersonCell を、何も知らない次の予備知識ゼロの AI が自力で発掘して使うか。 複利の、最短距離の証明。
結果 — 4.5/5・そして PersonCell は発掘された
tsc/build 緑・375px 横溢れゼロ・0 console error。月次勤怠マトリクス・36協定可視化・有休管理・勤怠承認ワークフロー・社員別ステータス・打刻を掘り下げる詳細。
観測の主役 — 「手組みしなかった」
予備知識ゼロの AI（群青を一度も触っていない設定）のレポートから:
PersonCell — 繰り返し出る「avatar + 氏名 + 部署/役割 + status」セル。avatar+text を手組みしなかった：PersonCellがまさにそのコンポーネントで、name/secondary/tertiary/avatar/avatarClassName/trailingを持つ。社員リストと詳細ヘッダーに使った。課題が求めていた単位が、既製で存在した。…avatar+name セルと承認タイムラインを手組みしかけて、display/ フォルダを見て
PersonCell/ApprovalWorkflowを見つけた。まとめて呼び出す入口（@gunjo/ui）の命名（UserChipでなくPersonCell）が救った。
1ラウンド前に「3回手組みされたから」と作ったコンポーネントを、次の業務画面の予備知識ゼロの AI が、名前で見つけてゼロ摩擦で使った。 これが、予備知識ゼロの AI に作らせるループの完成形——欠落を3回観測 → 規律を守って作る → 次の回で自力発掘・再利用。PersonCell は「観測された必然」として作られ、その必然性が即座に裏付けられた。
周辺も既存コンポーネントで
-
ScheduleGrid（最も合った） — 社員×日マトリクス。docstring が「シフト表 (社員×日)」を明記。行=社員・列=30日・日ごとの tone（有休→info/欠勤→destructive/重残業→warning）・固定した先頭列＋固定ヘッダー・閉じ込めた横スクロールで1992px幅でも375pxページを破らない・全120セルに合成読み上げ名「6月1日 月曜日 佐藤健太 09:00〜22:06、実働12.1時間、残業4.1時間」。教育(#70)で固めた離散グリッドが人材へ業界越え。 -
ApprovalWorkflow+ApprovalSteps（本人提出→上長承認→労務確定）・Meter（36協定ゲージ・target=45/max=80/threshold で warning→destructive）・Statistic/Delta（残業の符号付き）/SparklineChart（残業推移）/SignedRecord も全部既存コンポーネント。
課題記録（追記・コンポーネントを作らず）
- 🟡
Bannerが h-10 固定、が3回目（また Banner に手を伸ばし→複数行が切れる→Alert に乗り換え・#81/#82/#86 で3回・#322 に追記＝作る閾値・最小の修正は JSDoc/docs で「1行の帯／複数行は Alert」と明記）。 - 🔵 docs とまとめて呼び出す入口（
@gunjo/ui）の食い違い（予備知識ゼロの AI の「最も価値ある追加」＝「分野特化のコンポーネントを公開 docs に名前で出す」・docs は「40+ display」とカテゴリ数しか出さず PersonCell/ApprovalWorkflow/ScheduleGrid を名前で見つけられない・#325 を強く補強＝EventCalendar/TreeView/Legend と同じ・用途別索引が最も効果が高い）。 - 🟢 Container/Sheet の既定サイズが密な画面に狭め・Table↔DataTable の中間（renderCard 不要の静的表＋モバイルカード）が無い。
今回 src の新規コンポーネントなし（4.5/5・PersonCell 発掘＝前回作ったものの即効性が成果）。
学び — 複利は「次の予備知識ゼロの AI が、名前で見つけた時」に確定する
#85 で「PersonCell は観測された必然として固まった」と書いた。#86 はその必然性を最短で裏付けた——作ったコンポーネントが、1ラウンド後の別業務画面の予備知識ゼロの AI に、UserChip でなく PersonCell という素直な命名のおかげで一発発見され、avatar+text の手組みが消えた。JSDoc に支えられた発見可能性が、予備知識ゼロで採用されるための本当の資産（#82/#83 で繰り返した学びの、自分で作った新しいコンポーネントでの実証）。同時に予備知識ゼロの AI 自身が指摘する通り、その資産はまとめて呼び出す入口（@gunjo/ui）には在るが公開 docs には無い——だから残る最大の宿題は機能でなく「docs と入口の発見可能性」（#325）。
次回予告（やってみた #87）
- 人材・採用5枚目（オンボーディング
CheckList/ 1on1 など）で人材5枚を締め、次業界へ。PersonCell の3回目の業界越え観測。
試す
まだ alpha。だが「昨日作ったコンポーネントを、今日の AI がもう使っている」——複利が回っている、その最短の証拠が撮れた回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。