記事一覧
AI駆動開発のためのデザインシステム
デザインハーネスとは何か、トークンのドリフトはどこから始まるのか、コーディングエージェントをデザインシステムの中に留めるにはどうするか。定義と実践のガイドをまとめています。
- 約8分
エージェントがボタンを4つ書いた。どうやって見つけるか
PrimaryButton、SecondaryButton、DangerButton、GhostButton。4つ持とうと決めた人はいません。どれも書かれた日には妥当でした。
- 約9分
コーディングエージェントにデザイントークンをハードコードさせない方法
エージェントはデザインシステムを無視しているのではありません。多くのリポジトリには、無視できるものが最初から存在しません。
- 約7分
デザイントークン・ドリフトとは
デザインシステムが最も静かに壊れる形。壊れた画面ではなく、宣言したトークンと実際に出荷される値との、ゆっくりとしたズレ。
- 約6分
コンポーネント契約とは
プロップの型は「何を受け取るか」を言います。契約は「何を絶対にしてはいけないか」を——AIエージェントが読める場所に——書き記します。
- 約7分
デザインハーネスとは
UIの大半をAIが書く時代に、デザインシステムが静かに壊れるのを防ぐ、小さくて地味な仕組みの話。なぜ地味に見える部分こそが効くのか。