#84スコア 4/5人材・HR・採用

AI に従業員名簿＋組織図を作らせてみた — 「人」を表す部品だけが、2回続けて手組みされた（やってみた #84）

ルート: /employee-directory
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に従業員名簿＋組織図を作らせてみた — 「人」を表す部品だけが、2回続けて手組みされた（やってみた #84）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。人材・採用 2枚目——従業員名簿 / 組織図。全社の従業員を一覧で見て、組織階層をたどり、個人にドリルインする。

採用パイプライン(#83)とは作法が真逆——カンバンのファネルではなく、名簿テーブルと組織ツリー。観測ポイントは2つ：①組織階層に木構造の部品が自力発掘されるか ②前回手組みされた「人物セル」がまた手組みされるか（3回ルールの2回目）。

結果 — 4/5・約85%が既存部品

tsc/build 緑・375px 横溢れゼロ（実測 scrollWidth-clientWidth===0）・0 console error。総従業員サマリ・雇用形態内訳・名簿テーブル/グリッド・組織図ツリー・従業員ドリルイン。

観測① — TreeView が組織図にそのまま

TreeView（the standout） — 組織図は再帰的な開閉ツリーを手組みする覚悟で「無い primitive」として記録する準備をしていた。が TreeView が全部やった：controlled expanded Set・selectionMode・renderNodeMeta(直属部下数)・renderNodeActions・roving-tabindex・aria-label。manager→report グラフを TreeNode[] に写すだけ。組織図のために作られたよう。

Display 層の TreeView(#135系) が、人材の組織階層に越境して効いた。DataTable(renderCard でモバイルはカード崩し)・Statistic・DistributionBar・Sheet+MetadataList+Timeline(異動履歴)・Tag(スキル)・Avatar(presence dot)・Grid(レスポンシブ列)・SearchInput/Select/Tabs/EmptyState も全部既存部品で。

観測② — そして「人」だけが、また手組みされた

person cell（the big one） — 「顔写真＋氏名(ふりがな)＋部署・役職＋在籍ステータス」のセルが、テーブル・グリッドカード・詳細ドロワーの上司/部下行に何度も出る。人物/identity の primitive が無いので Avatar+text+StatusBadge を手組みして自前 wrapper を使い回した。kit は atom を全部持つが「これは人だ」と言う molecule が無い。Person/IdentityCell（{name, secondary, avatar, status, presence, meta}＋サイズ）があれば、最も使い回した自作ファイルが消えた。the single most valuable thing to add。

これで PersonCell の手組みは2回連続（#83 採用パイプライン＋#84 名簿）。別々の文脈ゼロ AI が、独立に同じ molecule を再発明した。#329 に2回目を記録——あと1回 HR/CRM 系で出れば3回ルール発火で build。「人物セル」は HR/CRM/ATS/担当者ピッカー/コメント/承認者行、あらゆる people 系画面の最小単位。

起票・追記（no-build）

  • 🟠 PersonCell 不在 2回目（#329・3回ルール2/3・クリック affordance も希望）。
  • 🟡 TreeView が発掘されにくい（barrel にはあるが docs に「組織図/階層」の枠も使用例もパターンページも無い・「barrel が救い、docs は救わなかった」・#325 に追記＝EventCalendar/ChartLegend と同じ present-but-unfindable）。
  • 🟢 Avatar fallback が全員同じグレー（名前から決定的に色付けする option が欲しい・名簿22人の scannability・#331）。
  • 🟢 Timeline の sub-parts 未export・DataTable の tanstack ColumnDef 前提が in-kit 文書化なし。

今回 src build なし（4/5・kit が85%を摩擦なく賄い、残りは PersonCell＋発見可能性＋微 polish）。

学び — 収束先が「人」というmoleculeで確定した

#83 で「穴は個別部品でも大型レイアウトでもなく『人』の合成 primitive に収束した」と書いた。#84 はそれを別業界・別作法の画面で独立に再確認した——カンバンでも名簿でも、テーブル行でもツリーでもドロワーでも、「人を1行で表す」たびに手組みが発生する。2回連続の独立した手組みは、もう偶然ではない。 一方で TreeView の越境が示すとおり、構造系の大型はもう揃っている。次の HR 画面で PersonCell が3回目を踏めば、それが次に結晶化すべき primitive。

次回予告（やってみた #85）

  • 人材・採用3枚目（人事評価WF / 勤怠 ScheduleGrid など）。PersonCell 3回目＝build トリガーの観測。

試す

まだ alpha。だが「次に作るべき primitive」が、2回連続の手組みという形で目の前に立ち上がった回。3回目が出たら、それを結晶化する。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AvatarAvatarFallbackAvatarImageBadgeButtonCardCardContentCardDescriptionCardHeaderCardTitleColumnDefContainerDataTableDistributionBarEmptyStateGridHStackMetadataListSearchInputSelectSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatisticTabsTabsContentTabsListTabsTriggerTagTimelineTimelineItemTreeNodeTreeViewVStack

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。