AI Skills.

AI Skills › Design设计設計デザイン › ai-design-skills

ai-design-skills

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

A growing collection of design skills for AI coding tools, each a self-contained folder you install only as needed. It currently contains exactly one skill, landing-page-design, which builds a landing page from scratch — intake questions, page structure, conversion copy, and a full visual system of type, spacing, radius, and motion. More skills are on the way, and it works with any tool that reads a markdown rules file.面向 AI 编码工具、持续增长的设计技能合集,每个技能都是独立文件夹,按需安装。目前恰好包含一个技能 landing-page-design,可以从零搭建落地页:需求访谈、页面结构、转化文案,以及字体、间距、圆角、动效的完整视觉系统。更多技能正在路上,任何能读取 markdown 规则文件的工具都可用。面向 AI 編碼工具、持續增長的設計技能合集,每個技能都是獨立資料夾,按需安裝。目前恰好包含一個技能 landing-page-design,可以從零搭建落地頁:需求訪談、頁面結構、轉化文案,以及字體、間距、圓角、動效的完整視覺系統。更多技能正在路上,任何能讀取 markdown 規則檔案的工具都可用。AI コーディングツール向けに増え続けるデザインスキルのコレクション。各スキルは自己完結したフォルダで、必要なものだけをインストールする。現在は landing-page-design の 1 件のみで、ヒアリング、ページ構成、コンバージョンコピー、書体・間隔・角丸・モーションの完全なビジュアルシステムを備えたランディングページをゼロから構築する。さらなるスキルが追加予定で、markdown のルールファイルを読み込むツールなら何でも使える。

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

What it does

AI Design Skills is a growing collection of design skills for AI coding tools, including Claude Code, Cursor, Codex, and Windsurf. Each skill is a self-contained folder, so you install only the ones you need.

How it works

At present the collection contains exactly one skill, landing-page-design. It builds a landing page from scratch through intake questions, page structure, conversion copy, and a full visual system covering type, spacing, radius, and motion. Its design values live in one section near the bottom of its file, so forking the repo and editing that section changes the rest of the skill automatically.

How to use it

  • For Claude Code, clone the repo to a temporary folder and copy the skill folder into your skills directory with
    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
    replacing the placeholder with the folder name.
  • For Cursor, download the skill file into your rules folder, or paste it into Settings and Rules for AI.
  • For Codex, Windsurf, or other tools, copy the skill file into whatever your tool uses for project rules, then ask in plain language for what the skill covers.

Key points

  • It works with anything else that reads a markdown rules file, not only the named tools.
  • An existing-site redesign skill lives in its own repo, since it predates this collection.
  • The license is MIT, and no attribution is needed for what you build with it.

它是做什么的

AI Design Skills 是一个不断增长的设计技能合集,面向 Claude Code、Cursor、Codex、Windsurf 等 AI 编程工具。每个技能都是独立文件夹,只安装你需要的部分即可。

它怎么工作

目前合集恰好只有一个技能:landing-page-design。它从零构建落地页,流程包括需求提问、页面结构、转化文案,以及涵盖字体、间距、圆角和动效的完整视觉系统。它的设计取值集中在文件底部附近的一个小节,复刻仓库并修改该小节后,其余内容会自动跟随变化。

怎么用

  • Claude Code 用户:把仓库克隆到临时文件夹,再用
    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
    把技能文件夹复制到技能目录,并把占位符换成文件夹名。
  • Cursor 用户:把技能文件下载到规则文件夹,或粘贴到设置中的 AI 规则里。
  • Codex、Windsurf 或其他工具:把技能文件复制到你的工具所用的项目规则位置,然后用日常语言提出该技能覆盖的需求。

关键要点

  • 它也适用于任何能读取 Markdown 规则文件的工具,不限于上述工具。
  • 改造已有网站的技能单独放在另一个仓库,因为它早于本合集出现。
  • 采用 MIT 许可,用它构建的成果无需署名。

它是做什麼的

AI Design Skills 是一個不斷成長的設計技能合集,面向 Claude Code、Cursor、Codex、Windsurf 等 AI 程式設計工具。每個技能都是獨立資料夾,只安裝你需要的部分即可。

它怎麼運作

目前合集恰好只有一個技能:landing-page-design。它從零建構到達頁,流程包括需求提問、頁面結構、轉換文案,以及涵蓋字體、間距、圓角與動效的完整視覺系統。它的設計取值集中在檔案底部附近的一個小節,複製專案並修改該小節後,其餘內容會自動跟隨變化。

怎麼用

  • Claude Code 使用者:把專案複製到暫存資料夾,再用
    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
    把技能資料夾複製到技能目錄,並把佔位符換成資料夾名稱。
  • Cursor 使用者:把技能檔案下載到規則資料夾,或貼到設定中的 AI 規則裡。
  • Codex、Windsurf 或其他工具:把技能檔案複製到你的工具所用的專案規則位置,然後用日常語言提出該技能涵蓋的需求。

關鍵要點

  • 它也適用於任何能讀取 Markdown 規則檔案的工具,不限於上述工具。
  • 改造已有網站的技能單獨放在另一個專案,因為它早於本合集出現。
  • 採用 MIT 授權,用它建構的成果不需要署名。

何をするのか

AI Design Skills は、Claude Code、Cursor、Codex、Windsurf などの AI コーディングツール向けに増え続けるデザインスキルのコレクションだ。各スキルは自己完結したフォルダで、必要なものだけをインストールする。

仕組み

現時点でコレクションにあるスキルは landing-page-design ただ 1 つだ。ランディングページをゼロから作る。 intake の質問、ページ構造、コンバージョン用のコピー、タイポグラフィ、間隔、角丸、モーションを含む完全なビジュアルシステムを扱う。デザイン値はファイル下部付近の 1 つのセクションに集まっており、リポジトリをフォークしてそこを編集すれば、スキルの残りが自動で追従する。

使い方

  • Claude Code では、リポジトリを一時フォルダへ複製し、
    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
    でスキルフォルダをスキルディレクトリへコピーする。プレースホルダはフォルダ名に置き換える。
  • Cursor では、スキルファイルをルールフォルダへダウンロードするか、設定の AI 向けルールへ貼り付ける。
  • Codex、Windsurf、その他のツールでは、スキルファイルをそのツールがプロジェクトルールに使う場所へコピーし、スキルが扱う内容を日常言語で頼む。

押さえておきたい点

  • 名前の挙がったツールだけでなく、Markdown のルールファイルを読むものなら何でも使える。
  • 既存サイトの改修スキルは、このコレクションより前からあるため、別のリポジトリにある。
  • MIT ライセンスで、これで作ったものに帰属表示は不要だ。

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

Claude CodeCursorCodexWindsurfClineGeneric

Notes备注備註備考

Currently contains exactly one skill: landing-page-design.目前恰好包含一个技能:landing-page-design。目前恰好包含一個技能:landing-page-design。現在は landing-page-design の 1 件のみを含む。

Skills included包含的技能包含的技能含まれるスキル

landing-page-design

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

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

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>

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)

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"