【エンジニア必見】ハイラル城のUI崩れを防げ！impeccableで構築する「伝説のデザイン言語」


【エンジニア必見】ハイラル城のUI崩れを防げ！impeccableで構築する「伝説のデザイン言語」

pbakaus/impeccable

2026-03-26

「AIのUIデザイン、もっとシュッとしてほしいな……」って悩んでること、あるよね。今回は、そんな悩みを解決するかもしれない謎の力（ライブラリ）、impeccable について解説するよ。

ゼルダの伝説のパロディ風に、エンジニア目線でお届けするね！

リンク（エンジニア）
「姫！大変です。AIが生成したUIが……ガタガタです！ボタンがデカすぎたり、フォントがリンクの冒険（FC版）くらいバラバラだったりします！」

ゼルダ姫（PM）
「勇者リンクよ。それはAIが『デザインの心（Design Language）』を理解していないからです。でも安心なさい。古の古文書に記された impeccable を導入するのです。これがあれば、AIは美しいUIを構築する『知恵』を手に入れます」

エンジニア視点で見ると、これは単なる「見た目の調整」じゃないんだ。

デザインの一貫性（Design Systemの自動適用）
AIが適当にCSSを書くのではなく、あらかじめ定義した「デザインルール」に従ってUIを生成させるための「枠組み（Harness）」を提供してくれる。

プロンプトエンジニアリングの削減
「余白は16pxで、色は青で……」といちいち指示しなくても、デザイン言語側で制御できるから、ロジックに集中できるんだ。

DX（開発者体験）の向上
Tailwind CSSのようなモダンなアプローチと相性が良く、AIが吐き出すコードをそのままプロダクト品質に引き上げやすくなるよ。

まずは、プロジェクトに召喚（インストール）しよう。

npm install impeccable
# または
yarn add impeccable

AIが生成するコンポーネントを、impeccable のルールで包み込むイメージだよ。

import { ImpeccableProvider, createTheme } from 'impeccable';

// 1. まずは「ハイラルの掟（デザインテーマ）」を定義する
const hyruleTheme = createTheme({
  colors: {
    primary: '#0070f3',
    background: '#f0f4f8',
  },
  spacing: {
    base: 4, // 4px単位のグリッド
  },
  borderRadius: '8px',
});

// 2. アプリ全体をプロバイダーで包む
export default function App() {
  return (
    <ImpeccableProvider theme={hyruleTheme}>
      <AIGeneratedComponent />
    </ImpeccableProvider>
  );
}

// 3. AIが使うコンポーネント側
function AIGeneratedComponent() {
  // impeccableのデザイントークンを使って、
  // AIが勝手な数値を入れないようにガードレールを敷く
  return (
    <div className="p-im-base bg-im-background rounded-im">
      <h1 className="text-im-primary">伝説のUIが爆誕！</h1>
      <button>ガノンを倒す（ボタン）</button>
    </div>
  );
}

リンク
「姫！impeccable を使ったら、AIが作ったとは思えないほど綺麗なダッシュボードができました！」

ゼルダ姫
「素晴らしいわ。これでガノン（崩れたレイアウト）との戦いにも終止符が打たれますね」

ガノン（バグ/デザ崩れ）
「おのれ……！デザインシステムをガチガチに固められると、俺の出番が……！」

impeccable は、AIに「自由奔放に作らせる」のではなく、「美しいルールの範囲内で創造させる」ための強力な盾（Harness）なんだ。


pbakaus/impeccable