AIにUIを直させるプロンプト、「ABC Def」なら最大68%短く | ABC Def

どんなアプリか

ABC Def (Definitive Elements Foundation) is a design system built for AI-friendly workflows — three-tier tokens components that stay consistent by default and customizable by design.

LINE、ABC Def 公式サイト

ABC Def は、ウェブの UI 部品を共有するための CSS ファーストのデザインシステムです。見た目の決まりは @line/abc-def-styles にまとめられ、React 版と Vue 版のパッケージは同じセマンティックなセレクタとトークンを使って部品を描きます。素の HTML のプロジェクトでは、styles のパッケージを入れれば使えます。

トークンは3層です。色・余白・角丸の生の値を持つ土台の層、文字色や面・枠線・状態に意味を割り当てる層、部品ごとに必要な CSS 変数を出す層に分かれています。

見た目の属性がすべて名前つきの CSS 変数になっているため、AI に手直しを頼むときは Tailwind のクラスを並べずにトークン名を伝えれば済む、というのが作り手の説明です。公式サイトでは Button・Input・Dialog で測り、手直しの指示に使うトークンが shadcn/ui と比べて 56〜68% 少ないとしています。

ドキュメントには React・Vue・スタイルにまたがる 53 の部品のページがあります。React の例を見ながらトークンの上書きを試せるプレイグラウンドも用意されています。

料金とデータの置き場所

GitHub で公開されているオープンソースで、ライセンスは Apache-2.0 です。

同じ分野のアプリ

名前	型	仕掛け	対応	料金
ABC Def	デザインシステム（パッケージ）	3層のトークンを React・Vue・HTML で共有	React / Vue / HTML	無料（Apache-2.0）
デジタル庁デザインシステムコードスニペット（HTML版）	UI 部品のサンプル集	デジタル庁デザインシステム準拠の部品を素の HTML・CSS・JavaScript で実装	HTML / CSS / JavaScript（Storybook）	無料（MIT）

入れる前に

使う前提は Tailwind CSS v4 です。共有のスタイルシートは Tailwind CSS v4 で処理する CSS から読み込みます。Tailwind v4 は既定でパッケージの中身を読まないため、React や Vue の部品を使うときは @source の指定を足す必要があります。

部品はパッケージの根元からは読み込めず、@line/abc-def-react/button のように部品ごとのサブパスから読み込む決まりです。Vue 版も同じです。

2.x では、サブパス、部品の props、CSS の入口、セレクタ、トークン名など文書化された公開 API について、厳密なセマンティックバージョニングに従うとしています。