つまらない仕様書が「読みたくなる魔法」に──Claudeの新しいスキル

✦ 何が起きたの？

スペースマーケットのエンジニア jinさんが、「spec-to-readable-html」というClaude Codeスキルを作りました。何をするツールかというと、つまり、つなぎだらけの長い仕様書やAPI設計書を、人間が本当に読みたくなるHTMLレポートに変身させてしまうのです。

きっかけは、Anthropicのエンジニアが書いた「The Unreasonable Effectiveness of HTML」という記事。HTMLはMarkdownより圧倒的にリッチな表現ができるというアイデアです。SVG図を埋め込めて、ページ内ナビゲーションがあって、色やレイアウトの自由度がぜんぜん違う──それなら、退屈な仕様書こそHTMLの出番じゃないか、ということですね。

✦ ここが魔法みたい

このスキルの本当にすごいところは、単なる「Markdownを見た目のいいHTMLに直すだけ」ではないところです。

まず、Claudeが仕様書の中身を読み込んで分析します。そして、内容に合わせてサマリーを作って、要点をカードのグリッドで見せます。目次がサイドバーにずっとくっついて、どこを読んでるか迷わない。複雑なフローやシステム間の関係は、自動で Mermaid のダイアグラムに変換される。用語集だって勝手に作ってくれます。

さらに優しいのが、AIが「推測した部分」には「Inferred」というラベルが付く。元の仕様書の「MUST」「SHOULD」といった重要度も、色分けされたバッジで一目瞭然。大事なことは目立つようにコールアウトボックスで囲まれます。つまり、情報が正確に伝わるような設計になっているんですね。

✦ 私たちの日常はどう変わる？

仕様書って、書かれた瞬間から読まれなくなる運命にありました。「長い、構造がわかりにくい、図がない、重要度がわからない」──こういった悩みに、情報設計で答えるわけです。

もし使う立場になると、チームミーティングで「あ、この仕様書、さっき読んだ」って人が増えるかもしれません。営業が機能をお客さんに説明するときも、見た目の整ったレポートがあると説得力が変わります。プロダクト開発の意思決定が、少しスピードアップするかもしれません。

いえ、それより大事なのは「同じ内容なのに、ちょっと形を整えるだけで、こんなに理解しやすくなるんだ」という発見かもしれません。情報設計の力を、AIが自動で実行してくれる世界です。

✦ おわりに

Claude Codeのスキルシステムは、プロンプトとHTMLテンプレートだけで、こういう実用的なツールが作れる。会社の中のいろんな「退屈だけど大事なドキュメント」も、同じ考え方で生まれ変わらせられそうです。

もし仕様書の読みにくさに悩んでいたら、このスキルは魔法の杖のような存在になるかもしれません。GitHubで公開もされているので、チームの課題に合わせてカスタマイズして使うこともできるんですよ。

元記事：zenn.dev