Zod の契約で BE と UI のずれをテストし、振る舞いまで守る Schema-Driven UI

はじめに こんにちは。ぷーじ（@yug1224）です。 2026 年 10 月 24 日の Vue Fes Japan 2026 で、「契約で守るコンパウンドプロダクトのデザインシステム」というタイトルで登壇しました。この記事は、その発表の内容がもとになっています。 当日のブースや登壇の様子は Dress Code の note にまとまっているので、あわせてご覧ください。 Dress Code ではデザインシステムの dresscode-ui を Schema-Driven UI（SDUI）として作っています。画面の仕様は Zod で書いた契約で決まり、バックエンド（dresscode-backend）の API も Zod の契約で定義しています。 フロントエンド（dresscode-frontend）は、この 2 つの契約を受け取って画面を作ります。たとえば AI チャットの画面では