はじめに

よいらぼのデザインシステム。英語の正式名は Yoiai Labs Design System。Yoiai UI はその実装。公開の場所は ui.yoiailabs.com。npm は @yoiailabs/ui。

三段。思想 → 基礎 → 部品。原則が先。トークンがらしさ。部品はトークンの上に乗る。

• 思想 — 5つの原則
• 基礎 — 色、文字、一段の明暗
• 部品 — Card、Button など

汎用の部品だけ。特定サイトのキットではない。ライト / ダークは prefers-color-scheme。切り替えは置かない。

入れ方

bun add @yoiailabs/ui

ライブラリは source export。アプリの Vite がコンパイルする。main に dist はない。

@import "tailwindcss";
@import "@yoiailabs/ui/styles.css";

/* node_modules は Tailwind v4 が見ない。パスは、この CSS からの相対。 */
@source "../node_modules/@yoiailabs/ui/src";

アプリ側でこのパッケージをスキャンすること。@source がなければクラスが消える。

export default defineConfig({
  ssr: { noExternal: ["@yoiailabs/ui"] },
})