「AIっぽい見た目」を卒業する──デザイントークンをAIに渡す方法

3行まとめ

1. AIに曖昧に頼むと暗い紺×シアンのテック調に収束しがち
2. デザイントークン（CSS変数）で具体値を渡すと再現性が上がる
3. 世界観の一文＋変数セットで量産的な見た目から脱却しやすい

AIに「いい感じのサイトを作って」と頼むと、似たような暗い紺×シアンのテック調に収束しがちだ。原因は指示の曖昧さにある。

解決策：トークンで渡す

曖昧な言葉ではなく、デザイントークン（CSS変数） で具体値を渡すと再現性が上がる。

:root {
  --bg: #faf6ef;      /* 背景 */
  --surface: #fffdf8; /* カード面 */
  --text: #2b2722;    /* 文字 */
  --accent: #c75f3e;  /* アクセント */
  --radius: 14px;     /* 角丸 */
}

「クリーム×テラコッタの雑誌風で、明朝見出し、余白広め」のような世界観の一文と、この変数セットをAIに渡すだけで、量産的な見た目から脱却しやすくなる。

試せます

当サイトのツール一覧で、配色×フォントの組み合わせを選んでトークンを書き出せる「Design Vault」を公開しています。