elayadesign/ai-design-skills

これは何？

主な機能

• 01構成、コピー、ビジュアルシステムを扱うlanding-page-designスキルを提供
• 02各スキルは独立したフォルダーになっており、個別にインストール可能
• 03Claude Code、Cursor、Codex、Windsurf、Cline、および汎用のシステムプロンプトに対応
• 04フォント、色、余白などのデザイントークンを、編集しやすい1つのセクションに集約
• 05MITライセンスで公開

ユースケース

• AIコーディングアシスタントを使って、製品ローンチ用のランディングページを生成する
• AIツールに一貫したデザインルールを与え、定義済みのビジュアルシステムに沿ったUIを生成する
• リポジトリをforkし、チームのブランドに合わせてフォント、色、余白をカスタマイズする

クイックスタート

1. 1

   プロジェクトにskillsフォルダーを作成します

   mkdir -p .claude/skills
2. 2

   リポジトリを一時フォルダーにクローンします

   git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
3. 3

   使いたいskillフォルダーをプロジェクトにコピーします（<skill-name>を置き換えてください。例：landing-page-design）

   cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
4. 4

   Claude Codeで、そのskillの対象範囲を自然な言葉で尋ねます

収録されている特集

トピック

よくある質問

ai-design-skills とは？

Claude Code、Cursor、CodexなどのAIコーディングツール向けに、ランディングページ用スキルから始められる、独立して使えるデザインスキルファイル集です。 AI Design Skillsは、AIコーディングツールがユーザーインターフェースの構築時に参照できる、Markdown形式のデザインスキル集です。各スキルはSKILL.mdを含む独立したフォルダーになっているため、必要なものだけをプロジェクトのrulesディレクトリやskillsディレクトリにインストールできます。

ai-design-skills は無料で使えますか？ライセンスは？

ai-design-skills は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

ai-design-skills は今もメンテナンスされていますか？

活発にメンテナンス中。ai-design-skills の最終コミットは 2026年11月1日 です。

ai-design-skills は何に使えますか？

AIコーディングアシスタントを使って、製品ローンチ用のランディングページを生成する AIツールに一貫したデザインルールを与え、定義済みのビジュアルシステムに沿ったUIを生成する リポジトリをforkし、チームのブランドに合わせてフォント、色、余白をカスタマイズする

ai-design-skills のインストール方法は？

プロジェクトにskillsフォルダーを作成します: mkdir -p .claude/skills リポジトリを一時フォルダーにクローンします: git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills 使いたいskillフォルダーをプロジェクトにコピーします（<skill-name>を置き換えてください。例：landing-page-design）: cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/ Claude Codeで、そのskillの対象範囲を自然な言葉で尋ねます

ai-design-skills はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/elayadesign/ai-design-skills