design-tokens

人気ブランドのデザイントレンドシステムによるDESIGN.mdファイルの分析集。プロジェクトにドロップするだけで、コーディングエージェントが一致するUIを生成します。

🐼 デザインシステムのためのユニバーサル、型安全なCSS-in-JSフレームワーク ⚡️

制約ベースのデザイン原則に基づき、一貫性がありテーマ設定可能なReactアプリを構築。

クロスプラットフォームスタイルを作成するためのビルドシステム。

1つのコマンドであらゆるウェブサイトのデザインシステム全体を抽出します。DTCG トークン、セマンティック+プリミティブ+コンポジット、Claude Code/Cursor/Windsurf 用 MCP サーバー、マルチプラットフォーム出力（iOS SwiftUI、Android Compose、Flutter、WordPress）、Tailwind v4、Figma 変数、shadcn/ui、CSS 健全性監査、WCAG 是正、Chrome 拡張機能。MIT、Playwright、Node 20+。

あらゆるウェブサイトのデザインシステムを数秒でトークンに抽出：ロゴ、カラー、タイポグラフィ、ボーダーなど。1つのコマンドで実行可能。

180 種類の無料 CSS3、Figma、Sketch、PSD グラデーション — デザインツール、ジェネレーター、AI エージェント向けの JSON データセット付き。

デザイン トークンのサイトと仕様に関する公式の DTCG リポジトリ

参考 UI（画像、スクリーンショット、URL）を定量化された Design DNA JSON（トークン、定性的スタイル、視覚効果）に変換し、コンテンツから一致する UI を生成します。

プラグイン「Tokens Studio for Figma」（Figma Tokens）の公式リポジトリ

Design Tokens に関連するリソースのリスト

🎨 デザイン トークンを Amazon Style Dictionary 互換の形式で JSON にエクスポートする Figma プラグイン。

Claude Code、Codex、Cursor向けのオープンソース設計手法エンジン。固定されたデザイン判断、複数の文法、リファレンスコンパイル、セマンティックパレット、検証済みUI、インタラクション、画像/動画処理、カルーセル、デッキ、ドキュメント向けのStudioワークフローを提供。22スキル・MIT。

Claudeをシニアデザインアーキテクトに変換：DTCGデザイントークン、42のコンポーネント、WCAG 2.2アクセシビリティ、あらゆるフレームワークに対応するコード、138のデザインシステム、および実行可能なスキル。

📒 開発者に焦点を当てたデザインシステムに関するブックマーク、リソース、記事の厳選リスト。

FigmagicはDevOpsとデザインの架け橋となるツールです。Figmaドキュメントからデザイン・トークンの生成、グラフィックスのエクスポート、デザイン・トークン駆動型のReactコンポーネントの抽出を行います。

PatternFlyプロジェクト向けのReactコンポーネント群。

🖌️ <script>をより軽く、<style>をよりスマートに

スタイルシートとアイコンファイルから生成されたデザイントークンのドキュメントを表示。ブラウザでデザイントークンの変更をプレビュー。カスタムDoc Blocksを使用してStorybook Docsページにデザイントークンを追加。

デザインシステムを Agent Plugin にコンパイル。あらゆるリファレンスからアイデンティティを抽出し、SKILL.md と tokens.css を出力、トークンをバイパスしたものを lint。

CSS 向けのビジュアル開発環境

UIコンポーネントで使用するテーマオブジェクトとデザイントークンを定義するための仕様

Unity 6 UI Toolkit（UIDocument + PanelRenderer、UXML + USS）向けのドロップインデザインシステム：トークン、fxシェーダーマテリアルサポート、42個のコンポーネント、120個のアイコン、モバイルレスポンシブ、ダークテーマ。1つのスタイルシート、依存関係ゼロ。出荷中のクロスプレイゲームで実戦検証済み。

200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.

Helios デザインシステム