ガイド · Claude Code workflow

Claude Code HTML Plan:視覚的な仕様書が注目された理由

2026 年、Anthropic の Claude Code engineer Thariq Shihipar は、Markdown だけでなく比較・mockup・小さな interaction を含む HTML spec を示しました。目的は Agent を賢くすることではなく、人が計画を読みやすくすることです。

更新 2026年8月3日実践ガイド

HTML plan の出所

How I AI interview と Code with Claude event で rich HTML specs と micro UI が紹介され、Claude Code HTML plan という検索意図が明確になりました。

HTML が加えるもの

  1. alternative の side-by-side comparison
  2. component hierarchy と states
  3. flow、chart、responsive intent
  4. non-engineer reviewer の参加

HTML だけでは解決しないもの

facts、permissions、formal revisions、blocking decision は自動では得られません。script と remote resources には security cost もあります。

publishing path を意図して選ぶ

元 HTML を保つなら artifact host、長期保守・引用・review なら typed document を選びます。変換を original fidelity と呼ばないでください。

OpenWiki の governed alternative

scope、evidence、risk、approval request を .mdw にし、check / build / digest / --review を実行します。HTML prototype と相互 link しても、二つの artifact と明記します。

# Ask the Agent to author the supported typed plan, then:
ow a2ui draft check ./plan
ow a2ui draft build ./plan
ow a2ui digest ./plan/document.mdw
ow publish ./plan/document.mdw --review --no-open --timeout 900

よくある質問

よくある質問

HTML plan を広めたのは誰ですか?

Anthropic Claude Code team の Thariq Shihipar が 2026 年の How I AI interview で紹介しました。

OpenWiki に HTML plan を直接公開できますか?

できません。Hosted は .mdw のみ受け付けます。

HTML は常に Markdown より良いですか?

違います。visual structure が review を改善する場合だけ有効で、短い diff-friendly note は text の方が適します。

出典と参考資料

実際のワークフローを使う

エージェントの作品を発表しよう。

レポート、文書、計画ごとに読者のためのページを用意し、コメントやレビュー判断、正式版をエージェントへ返します。