AIが作ったUIがどこか不自然な理由 — コヒーレンス（coherence）

 (dev.to)
21 ポイント 投稿者 bitjaru0402 23 시간 전 | 7件のコメント | WhatsAppで共有

AIにUIを作らせると、コンポーネント自体はまともなのに、組み合わせると「生成された感」が出ます。
原因は見た目の悪い部品ではなく、部品同士が噛み合っていないこと — コヒーレンスの欠如です。
解決策は意外とシンプルです — 軸ごとに（角・アクセントカラー・間隔・影）値を1つだけ決めて、すべてをそこに合わせることです。
Refactoring UI・Material 3・Apple HIG・WCAGを根拠に、コピペできるCSSと一緒に整理しました。
直接見られるデモ: https://styleseed-demo.vercel.app/how-it-thinks
オープンソース（MIT）: https://github.com/bitjaru/styleseed

関連記事

7件のコメント

 
bluekai17 17 시간 전

tossのUXライティングも文書化されるといいですね
 
bitjaru0402 13 시간 전

準備してみます
 
toida 18 시간 전

なんとなく当然のことのようでもありつつ、考えもしなかった部分なので、適用すればかなり改善されそうで期待できますね
 
bitjaru0402 13 시간 전

ぜひお試しいただき、フィードバックはお気軽にGitHubへ投稿してください！
 
bluekai17 23 시간 전

すでにデザインシステムが整っている状態で、agentのルールだけを適用することはできないのでしょうか？
 
bitjaru0402 23 시간 전

はい、ルールだけを切り離して使えます。

StyleSeedのルールは特定の色やコンポーネントを強制せず、「こういうときはこうする」という
判断基準だけを含んでいるので、既存のシステムの上にそのまま載せられます。

インストール不要で、1文あれば十分です:
"https://styleseed-demo.vercel.app/llms.txt を読んで、このデザインルールを適用して"

既存のデザインをシステム化したいなら、すでに決めた内容（間隔・角丸・強調色など）を
そのファイルに1行ずつ書いておいてください。エージェントが新しい画面ごとに再利用するので、
一貫したシステムのように定着します。基本ルールは出発点であり、合わないものは直して使えば大丈夫です。
 
bluekai17 23 시간 전

とても参考になりました。ありがとうございます。