KRDS デザインシステム · md ファイル1つ

md ファイル内の CSS・JS・マークアップをそのまま貼り付けてレンダリングした実際の画面です。下はiframeなのでこのサイトのスタイルとは完全に分離されており、タブやアコーディオンは実際に押して試せます。

KRDSはすでにkrds.go.krのウェブサイトとnpmパッケージ（krds-uiux）として公開されています。ただしこの形は、「人が文書を読んで手作業でコードに移す」か「パッケージをインストールしてビルドパイプラインに組み込む」ことを前提にしています。

AI時代には、ボトルネックは別のところに生まれます。ClaudeやCursorのようなAIアシスタントに「このデザインシステムどおりに画面を作って」と頼むなら、複数のページや複数のファイルに散らばった文書よりもコンテキストウィンドウに丸ごと入れられるファイル1つのほうがずっとうまくいきます。

そこでトークン・コンポーネントのマークアップ・CSS・JSを1つのファイルにまとめ、91種類のアイコンとフォントまでbase64でインライン化して、「このファイル1つをプロジェクトに入れれば完了」となるように再構成しました。