Fable 5.1が一文からshadow DOMの対話型教材を作った

Simon Willisonは9月23日、shadow rootsを対話的に説明するツールを公開しました。本人の記録によると、Fable 5.1 Mediumへのpromptは一文だけで、CSSのshadow rootsを対話型の例で説明するartifactを作るよう求めたものです。

一つのpromptが五つの連動する実演を作った

完成したページは、スタイルのカプセル化、継承、slots、parts、JavaScriptからのアクセスを扱います。読者は通常のDOMとopenなshadow rootを並べて見ながら、どのスタイルが境界を越えるか確認できます。さらにattachShadow()、::slotted()、:host、::part()を実際に動く要素で説明します。

情報源には、追加のprompt、手作業による修正、完成までの時間が記録されていません。公開された指示と結果は確認できますが、モデルと作者の作業分担を正確に判断することはできません。

技術文書が小さな実験環境に変わる

Shadow DOMが難しいのは、二つのtree、CSSの境界、slotsやpartsに関する例外を同時に追う必要があるためです。このartifactは説明、コード、描画結果を一つの画面に置き、規則を読んでから挙動を確かめるまでの時間を短くします。

文書制作チームにとって重要なのは、この形式です。LLMの役割は文章をもう一段落増やすことに限られません。静止画や単独のsnippetでは関係が見えにくい概念に対し、低コストで使い切りのsimulatorを作れます。

動くデモだけでは説明の正しさを保証できない

見た目に説得力があるartifactでも、誤ったedge case、古いブラウザ挙動、特定の配置だけで成立する例を含む可能性があります。技術教育では、仕様との照合と複数ブラウザでのtestが引き続き必要です。短いpromptで編集作業が消えるわけではありません。

出典と自動testが形式の成熟度を示す

次に見るべき点は、同様のartifactが個々の主張に出典を付け、自動testを備え、platformの変更時に簡単に更新できるかです。そこまで揃えば、印象的な一回限りのページではなく、保守される道具として技術文書を補完できます。

Lilithの判定

Willisonは図をもう一枚増やす代わりに、読者がshadow DOMの境界を自分で触れる小さな実験場を置きました。出典の札とtestを加えれば、展示物は学習道具になります。