AI に飲食店のシフト管理を作らせてみた — シフト表は ScheduleGrid の本丸、でも「過不足タイル」は手組み（やってみた #97）
/restaurant-shifts375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に飲食店のシフト管理を作らせてみた — シフト表は ScheduleGrid の本丸、でも「過不足タイル」は手組み（やってみた #97）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。飲食・レストラン 3枚目——週次シフト管理（スタッフ×曜日のシフト表＋人員過不足＋人件費）。
#96リアルタイム運営とは別の、週次の労務系。観測：ScheduleGrid（シフト表の本丸）＋StatGroup の継続再利用＋StatusTile族の再出現。
結果 — 4.5/5
tsc/build 緑・375px 横溢れゼロ・0 console error。週次シフト表・人員過不足・人件費・スタッフ個別を掘り下げる詳細。
観測 — シフト表は ScheduleGrid、人件費は StatGroup＋formatCurrency
予備知識ゼロの AI に「(a)スタッフ×曜日シフト表 (b)サマリ指標行 (c)人物セル (d)時間帯の必要vs配置タイル」を聞いた：
(a)(b)(c) は全部既製——
ScheduleGrid（「JSDoc が まさに 『シフト表 (社員×日)』」・セルごとの tone・通し/未確定/休・固定した行ヘッダ・[contain:paint]で広い表が375pxを破らない・「最大の収穫」）・StatGroup（人件費サマリ・「まさにサマリ指標のストリップ」）・PersonCell（スタッフ）。Meter(配置/必要 の「満たすほど良い」＋人件費率 の「値が大きいほど悪い」target)・formatCurrency/formatPercent（JPY/ja-JP 既定・「金融の画面が再発明し続けたものを内蔵」）も既製。
ScheduleGrid（教育#70→介護→飲食予約#95→シフト#97）と StatGroup（#95→#96→#97 飲食3連続）が、業界も用途も越えて再利用。スタッフ×曜日のシフト表は ScheduleGrid のド本命用途。
唯一の手組み＝(d) 人員過不足タイル（StatusTile族 2回目）
(d) 時間帯の必要vs配置タイルだけ手組み＝
Card+Badge(充足/欠員)+Meter+手書きの7セル曜日別ミニグリッド（充足/欠員の緑赤）で。「必要vs実配置の容量のコンポーネントが無い・N期間の、期間ごとの状態ドットの並びのコンポーネントも無い——Meter は週合計を綺麗に出すが7日分の内訳は出ない」。
→ #344 に追記（運営タイル族の2回目）。#96 のフロア StatusTile（状態を持つモノ）と #97 の過不足タイル（必要vs配置をN期間で）は同じ運営タイル族の2つの顔。予備知識ゼロの AI 曰く「N期間にわたる容量 vs 需要のあらゆるビュー」。#96＋#97＝族として2回、独立に手組み＝あと1回で3回ルール。StatusTile＋CoverageMeter/期間ごとの並び をまとめて設計する候補。
課題記録（追記）
- 🟢
*VariantKey型が、まとめて呼び出す入口（@gunjo/ui）から未 export（BadgeVariantKeyが無くNonNullable<BadgeProps["variant"]>で代用・variant のマップを型付けできない・#330）。 - 🔵 ScheduleGrid が calendar 系と名前で競合・docs が PascalCase で404（kebab の
/schedule-gridが正・「ソースの JSDoc が docs より有用」・#325）。
今回 src の新規コンポーネントなし（4.5/5・ScheduleGrid/StatGroup/PersonCell/Meter/formatCurrency の再利用が成果）。
学び — 運営タイル族が、3回ルールに近づいている
人物の階層（PersonCell→RelationshipRow→StatGroup）に続き、運営の横に広がる階層が立ち上がりつつある：#96 フロアの StatusTile（状態を持つモノを1タイル）、#97 シフトの CoverageMeter（必要vs配置をN期間で）。どちらも「状態/容量を持つ何かを1タイル」で、飲食/医療(病床)/物流(ドック)/製造(設備) を横断する。族として2回、独立に手組み＝3回目で固まる。一方で ScheduleGrid/StatGroup/formatCurrency の業界越えが示すとおり、表・指標・金額の骨格はもう揃っている——予備知識ゼロの AI に作らせるテストは「次に作る横の階層」を、また業界横断の反復から1段見つけた。
次回予告（やってみた #98）
- 飲食4-5枚目（売上ダッシュボード/在庫発注 など）or 次業界。運営タイル族の3回目＝作る合図の観測。
試す
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。