VoltAgent/awesome-design-md

外部のオープンソース リポジトリを紹介するページです。HDATFの製品ではありません。

何をするか

有名なウェブサイトのデザイントークン、パターン、ルールをまとめたmarkdown文書であるDESIGN.mdファイルのコレクションです。プロジェクトに置くと、AI coding agentがそのデザイン言語に沿ったUIを生成できます。

ATFへの役立ち方

UIを書くcoding agentに一貫したスタイル基準を渡す方法として比較する価値があります。DESIGN.mdをAGENTS.mdと並べて置く方式は、Harnessがexecutorにプロジェクトのルールを渡す方法の参考になり得ます。

ライセンス

MIT 寛容なライセンスです。著作権表示を残せば商用利用と改変ができます。

同じ分野のリポジトリ

• alexpate/awesome-design-systems
  企業や組織のデザインシステムを集めたリストです。各項目に、コード化されたコンポーネント、ボイスとトーンのガイド、デザイナー向けキット、公開ソースコードの有無が示されています。
• chenglou/pretext
  複数行テキストの計測とレイアウトを独自のロジックで行うJavaScriptとTypeScriptのライブラリです。レイアウトのリフローを起こすDOM計測を避けられます。結果はDOM、Canvas、SVGに描画できます。
• google-labs-code/design.md
  DESIGN.mdは、coding agentにデザインシステムを伝えるためのファイル形式です。YAML front matterのdesign tokenとMarkdownで書いた設計の理由を組み合わせ、lintツールがspecへの準拠、token参照、WCAGのコントラストを確認します。
• bwya77/vscode-dark-islands
  VS CodeやVSCodiumなどの互換エディター向けのダークカラーテーマです。浮いたガラス風のパネル、角丸、ピル型のアクティビティバーとスクロールバー、暖色系のシンタックスハイライトを備えます。
• alchaincyf/huashu-design
  Huashu DesignはClaude Codeなど複数のagentで使えるHTMLベースのデザインskillで、テキストの依頼をクリックできるプロトタイプ、スライド、アニメーション、インフォグラフィックにします。デザイン哲学のガイド、5つの観点によるデザインレビュー、MP4書き出しを含みます。

Trendshiftのランキングに入ったリポジトリだけを載せ、リストは候補を探すためだけに使いました。順位の数字は転載していません。説明、ライセンス、スター数は各GitHubリポジトリで確認しました。解説は私たちの判断です。これらを試験したわけではなく、上昇リストに載ったことは品質の証明ではありません。