AIに作らせた日本語UIの詰まった行間、「Design MD JP」を置いたら直った

どんなアプリか

日本語UIをAIエージェントに正しくつくらせるためのDESIGN.md集。

kuzzken さん、GitHub リポジトリ kzhrknt/awesome-design-md-jp の説明

DESIGN.md は Google Stitch が提唱する形式で、AI エージェントが一貫した UI を作るためのデザイン仕様書です。Markdown で書き、コードベースに AGENTS.md と並べて置きます。Awesome Design MD JP は、日本の Web サービスについてこの DESIGN.md を書き起こし、集めたものです。

README によると、本家の awesome-design-md は欧米の55以上のサービスを扱っていますが、日本語の組版の仕様は入っていません。そこでこのコレクションでは、和文フォントのフォールバックの順番、広めの行間、字間、句読点や括弧の禁則処理、palt や kern といった OpenType 機能、和文と欧文の混植のルールを書き込んでいます。こうした仕様が無いと、AI エージェントの作る日本語 UI はフォントを取り違えたり、行間が詰まったり、句読点の処理が崩れたりすると説明されています。

例えば teamLab の DESIGN.md は、実際のサイトの computed style を2026-05-07に測った値をもとにしています。Web フォントを読み込まずに OS の和文フォントへ順に切り替える font-family の指定や、palt と kern を有効にしていないことまで書かれています。AI で再現するときの簡略化の仕方にも触れています。

各 DESIGN.md には、デザイントークンを目で見て確かめられる preview.html が付いています。ギャラリーのページではサービスがカードで一覧になっていて、All・SaaS・Media・Consumer・Agency で絞り込めます。カードをクリックするとプレビューが開きます。README のギャラリーへのリンクには「562 sites」と書かれていて、MUJI、Mercari、SmartHR、デジタル庁などが含まれています。