Claude Code がデザインを決定するまでに実際に起きていること
このtilリポジトリを構築したセッションを振り返り、Claude Code自身の意思決定プロセスを観察した記録である。
実際に起きたこと
- ユーザーが提示した制約は3つあった。「シンプル」「軽量」「AIっぽくない」である。
- Claudeはゼロからデザインしたのではなく、参照検索を行った。サブエージェント（＝独立した文脈で動く子エージェント）を生成し、jbranchaud/tilとsimonw/tilの共通パターンを調べさせ、そこで観察した共通点を「正解」として採用した。
- 「AIっぽくない」という制約は逆引きヒューリスティック（＝「これはNG」という例を起点に逆算する近似的な判断法）で解釈した。絵文字の多用・グラデーション見出し・敷き詰められた表はAIっぽいと判断して避け、モノクロ・装飾なし・短文はOSSっぽいと判断して採用した。
- テーマの選択は語彙マッチングによるものだった。「minimal」と指示されたことを受けて
jekyll-theme-minimalを選んだが、これは同名検索の域を出ない判断だった。 - ビジュアル検証をまったく行わずにpushした。
<details>内のkramdownのバグは、後から検証用のエージェントによってはじめて明るみに出た。
この観察から分かること
- Claudeのデザインは「ゼロからの創造」ではなく、「参照の模倣＋制約によるフィルタリング」である。
- 出力の質は与えた参照ソースの質に直結する。良い参照を与えれば良い結果が出る。
- ビジュアル検証をワークフローに組み込んでおかないと、描画上の不具合はpushした後まで見逃されてしまう。
重要用語
- spawn（スポーン） —— プロセスやエージェントを「生成して起動する」ことを指す。Claude Codeでは、Agentツールで子エージェントをspawnし、独立した文脈の中でタスクを並列に実行させる。語源はOS（オペレーティングシステム）のプロセス生成用語（POSIXの
fork／exec）である。 - heuristic（ヒューリスティック） —— 厳密な最適解を求めるのではなく、経験則やショートカットによって「十分に良い」答えにたどり着く考え方である。「逆引きヒューリスティック」とは、正解を直接探すのではなく「やってはいけない例」から逆算する近似的な判断を指す。語源はギリシャ語のheuriskein（発見する）で、「エウレカ（heureka）」と同じ語根である。
- Jekyll（ジキル） —— MarkdownとYAML設定からHTMLを生成する、Ruby製の静的サイトジェネレーターである。GitHub Pagesの標準エンジンであり、pushするだけで自動的にビルド・公開される。2008年にTom Preston-Werner（GitHubの共同創業者の1人）が作った。
- jekyll-theme-minimal —— GitHubが公式に提供するJekyllテーマの1つで、Steve Smith（Orderedlist）が作成した。見出し情報をサイドバーに表示し、README本文をメインエリアに簡素に描画する。装飾を極限まで削っているため、技術系の個人サイトやTILリポジトリでよく選ばれる。GitHub Pagesの設定画面からワンクリックで有効化できる。
- rendering bug（レンダリングバグ） —— コード自体は文法的に正しいが、表示エンジンが意図通りに描画しない不具合を指す。今回のケースでは、
<details>内に書いたMarkdownリンクが、「HTMLブロックの中ではMarkdownを解釈しない」というkramdownのルールに引っかかり、単なる文字列として表示されてしまった。修正するには<details markdown="1">という属性を明示し、kramdownに「この中身もMarkdownとして読む」よう指示する必要がある。
Claude Codeのデザインは、良い参照を制約でフィルタした模倣である。良い参照を与え、ビジュアル検証を必ずワークフローに組み込むことが欠かせない。
出典・参考
- jbranchaud/til —— OSSリポジトリ、Josh Branchaud
- simonw/til —— OSSリポジトリ、Simon Willison
- jekyll-theme-minimal —— OSSリポジトリ、Steve Smith（Orderedlist）/ GitHub
- Jekyll —— 公式サイト、Tom Preston-Werner ほか
- kramdown options: parse_block_html —— 公式ドキュメント、kramdown