AI Skills.

AI Skills › Design设计設計デザイン › awesome-claude-design

awesome-claude-design

by VoltAgent · Design skill作者：VoltAgent · 设计技能作者：VoltAgent · 設計技能作者：VoltAgent · デザインスキル

68 ready-to-use design system inspirations in DESIGN.md format: drop one in and Claude Design scaffolds a full UI in one shot. Each file captures a complete visual system — type, color, spacing, and components — so the agent starts from a coherent design instead of a blank page. These are direct DESIGN.md drops, not CLI installs.68 套开箱即用的 DESIGN.md 格式设计系统灵感：放进一个文件，Claude Design 就能一次脚手架出完整界面。每个文件都 captured 一套完整的视觉系统——字体、颜色、间距、组件，让智能体从连贯的设计出发，而不是空白页。这些是直接投放的 DESIGN.md 文件，不是 CLI 安装包。68 套開箱即用的 DESIGN.md 格式設計系統靈感：放進一個檔案，Claude Design 就能一次搭建出完整介面。每個檔案都收錄了一套完整的視覺系統——字體、顏色、間距、元件，讓智慧體從連貫的設計出發，而不是空白頁。這些是直接投放的 DESIGN.md 檔案，不是 CLI 安裝包。DESIGN.md 形式のすぐに使えるデザインシステムの着想 68 件。ファイルを 1 つ置くだけで Claude Design が完全な UI を一度に足場組みする。各ファイルは書体、色、間隔、コンポーネントからなる完全なビジュアルシステムを収めており、エージェントは白紙ではなく一貫したデザインから出発できる。これらは CLI インストールではなく、直接投下する DESIGN.md ファイルである。

Quick start快速上手快速上手クイックスタート

What it does

Awesome Claude Design is a collection of ready-to-use DESIGN.md files that Claude Design expands into a full UI scaffold with one drop. Skip the blank-page design brief, grab a design system inspiration that matches the feel you want, and let Claude Design do the scaffolding.

How it works

Claude Design is a design-focused workspace that holds a persistent design system for a project: tokens, components, and preview assets you can actually ship. You give it a starting point, such as an aesthetic or a DESIGN.md file, and it scaffolds color tokens, type scale, buttons, cards, navigation, and a working UI kit, so every new screen stays on-system.

How to use it

  • Pick an inspiration from the list, open its preview page to inspect the system, then download its DESIGN.md.
  • Option A: create a new design system in Claude Design and upload the DESIGN.md under Add assets on the setup screen.
  • Option B: create a new prototype, attach the DESIGN.md in the chat, and type 
    Create a design system from this DESIGN.md

Key points

  • Either route produces a full starter package in minutes, including a README, a CSS file with variables and type scale, Google Fonts substitutes when the brand font is proprietary, preview cards, a working UI kit, and a portable SKILL.md.
  • A DESIGN.md keeps token, rule, and rationale in the same file, so the agent can stay on-system in cases the file never covered.
  • No star figure is claimed here, in line with the verified dataset note for this collection.

它是做什么的

Awesome Claude Design 是一个即用型 DESIGN.md 文件合集，Claude Design 只需一次投放就能把它扩展成完整的界面脚手架。跳过空白页的设计简报，挑选符合你想要感觉的设计系统灵感，让 Claude Design 完成脚手架搭建。

它怎么工作

Claude Design 是一个面向设计的工作区，能为项目保存持久的设计系统：设计令牌、组件和真正可交付的预览素材。你给它一个起点，例如某种美学或一个 DESIGN.md 文件，它就会搭建颜色令牌、字阶、按钮、卡片、导航和可用的 UI 套件，让每个新页面都保持在系统内。

怎么用

  • 从列表中挑选一个灵感，打开其预览页检查系统细节，然后下载它的 DESIGN.md。
  • 方式 A：在 Claude Design 中创建新的设计系统，在设置界面的 Add assets 下上传 DESIGN.md。
  • 方式 B：创建新的原型，在对话中附上 DESIGN.md，并输入 
    Create a design system from this DESIGN.md

关键要点

  • 两种方式都能在几分钟内产出完整的入门包，包括 README、带变量和字阶的 CSS 文件、品牌字体为专有字体时的 Google Fonts 替代、预览卡片、可用的 UI 套件和可移植的 SKILL.md。
  • DESIGN.md 把令牌、规则和理由放在同一个文件里，因此即使遇到文件未覆盖的情况，智能体也能保持在系统内。
  • 此处不引用任何星标数字，以符合该合集已核实的数据说明。

它是做什麼的

Awesome Claude Design 是一個即用型 DESIGN.md 檔案合集，Claude Design 只需一次投放就能把它擴充成完整的介面鷹架。跳過空白頁的設計簡報，挑選符合你想要感覺的設計系統靈感，讓 Claude Design 完成鷹架搭建。

它怎麼運作

Claude Design 是一個面向設計的工作區，能為專案保存持久的設計系統：設計代幣、元件與真正可交付的預覽素材。你給它一個起點，例如某種美學或一個 DESIGN.md 檔案，它就會搭建顏色代幣、字階、按鈕、卡片、導覽與可用的 UI 套件，讓每個新頁面都保持在系統內。

怎麼用

  • 從清單中挑選一個靈感，開啟其預覽頁檢查系統細節，然後下載它的 DESIGN.md。
  • 方式 A：在 Claude Design 中建立新的設計系統，在設定介面的 Add assets 下上傳 DESIGN.md。
  • 方式 B：建立新的原型，在對話中附上 DESIGN.md，並輸入 
    Create a design system from this DESIGN.md

關鍵要點

  • 兩種方式都能在幾分鐘內產出完整的入門包，包括 README、帶變數與字階的 CSS 檔案、品牌字體為專有字體時的 Google Fonts 替代、預覽卡片、可用的 UI 套件與可攜帶的 SKILL.md。
  • DESIGN.md 把代幣、規則與理由放在同一個檔案裡，因此即使遇到檔案未涵蓋的情況，智慧體也能保持在系統內。
  • 此處不引用任何星標數字，以符合該合集已核實的資料說明。

何をするのか

Awesome Claude Design は、Claude Design が 1 回の投入で完全な UI スキャフォールドへ広げる、すぐに使える DESIGN.md ファイルのコレクションだ。白紙のデザインブリーフを飛ばし、欲しい雰囲気に合うデザインシステムの着想を拾い、足場作りを Claude Design に任せる。

仕組み

Claude Design は、プロジェクトの持続的なデザインシステムを保持するデザイン中心のワークスペースだ。トークン、コンポーネント、実際に出荷できるプレビュー素材を含む。出発点として美学や DESIGN.md ファイルを与えると、カラートークン、タイプスケール、ボタン、カード、ナビゲーション、動作する UI キットを足場として作り、新しい画面がすべてシステム内に収まるようにする。

使い方

  • リストから着想を選び、プレビューページでシステムを詳しく確認してから、その DESIGN.md をダウンロードする。
  • 方法 A：Claude Design で新しいデザインシステムを作り、セットアップ画面の Add assets の下で DESIGN.md をアップロードする。
  • 方法 B：新しいプロトタイプを作り、チャットに DESIGN.md を添付して 
    Create a design system from this DESIGN.md
    と入力する。

押さえておきたい点

  • どちらの経路でも数分で完全なスターターパッケージができる。README、変数とタイプスケールを含む CSS ファイル、ブランドフォントが専有フォントの場合の Google Fonts 代替、プレビューカード、動作する UI キット、持ち運べる SKILL.md を含む。
  • DESIGN.md はトークン、ルール、根拠を同じファイルに置くため、ファイルが扱っていない場合でもエージェントはシステム内に留まれる。
  • ここでは星の数は挙げない。このコレクションの検証済みデータ注記に沿うためだ。

Supported platforms支持的平台支援的平台対応プラットフォーム

Claude.ai

Notes备注備註備考

A secondary source claimed 49.7k for a similarly named collection; the repo page shows 4,243. Do NOT use 49.7k for this repo (the ~50k figure matches emilkowalski/skills instead).有二手来源称某个同名合集有 49.7k 星，但仓库页面实际显示 4,243。不要把 49.7k 用在这个仓库上（约 50k 的数字对应的是 emilkowalski/skills）。有二手來源稱某個同名合集有 49.7k 星，但儲存庫頁面實際顯示 4,243。不要把 49.7k 用在這個儲存庫上（約 50k 的數字對應的是 emilkowalski/skills）。二次情報では同名のコレクションが 49.7k スターとされていたが、リポジトリページの表示は 4,243 である。このリポジトリに 49.7k を使ってはならない（約 50k の数字は emilkowalski/skills のものである）。

More Design skills更多设计技能更多設計技能その他のデザインスキル

View all →查看全部 →查看全部 →すべて見る →

ui-ux-pro-max-skill

142k
by作者：作者：作者： nextlevelbuilder

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则，产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則，產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。

Design设计設計デザインClaude CodeCursorWindsurfAntigravity+19 more+19 个更多+19 個更多+19 件
npm install -g ui-ux-pro-max-cli && uipro init --ai <agent>

awesome-design-md

124k
by作者：作者：作者： VoltAgent

A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集，已收录 70 多个真实品牌系统，包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目，编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch，合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集，已收錄 70 多個真實品牌系統，包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案，編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch，合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。

Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)

taste-skill

105k
by作者：作者：作者： Leonxlnx

Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能：艺术指导、参考图和浏览器检查，而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局，而是推动智能体选定方向、用参考图 grounding，并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend，旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能：藝術指導、參考圖和瀏覽器檢查，而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面，而是推動智慧體選定方向、用參考圖 grounding，並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend，舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。

Design设计設計デザインClaude CodeCodexGeneric
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"