Serendie Design System

AboutGet StartedAIFoundationsComponents
© Mitsubishi Electric Corporation

Agent Skills

コーディングエージェントにSerendie Design Systemを使うための設定やベストプラクティスを与えることができます。Serendie MCPとセットで使うことを想定しています。

更新 2026/5/14

Agent Skillsとは

Agent Skillsは、AIエージェントに専門知識や特定のタスクを遂行するための能力を付与するための仕組みです。MCPサーバーが道具を提供するのに対し、Agent Skillsはその使い方を提供します。

MCP同様にオープンな仕様 として発展しており、Claude Code, Codex, Cursor, GitHub, Copilot, Gemini CLIなど主要なコーディングエージェントが対応しています。またSkillのマーケットプレイス skills.sh などのエコシステムも整備されつつあります。

skills.sh - The Agent Skills Directory

現在提供しているSkill

Serendie Design Systemでは、次のSkillを提供しています。

  • /serendie-overview ― Serendie UIやSerendie Symbolsなど各種リソースの概要、セットアップ手順、デザイントークンを扱うベストプラクティスを提供するスキル。Serendie UIを使った実装をコーディングエージェントに指示する際に最初にトリガーするスキル

なお、Serendie MCPサーバーを併用することで、より詳細なリソース情報をAIエージェントが取得できるため、合わせてセットアップしてください。

セットアップ

Claude Code

Claude Codeは、 Plugin形式 のインストールに対応しています。Agent SkillsとMCPサーバーの設定が同梱され、管理や更新も容易なため、Claude CodeではPluginとしての導入を推奨します。

Claude Codeを起動した上で、下記を順に実行してください。

/plugin marketplace add serendie/serendie
/plugin install serendie@serendie
/reload-plugins

Codex, Cursor, GitHub Copilot, Gemini CLIなど

Agent Skillsの管理ツールである vercel-labs/skills を使うことで、各種エージェントの仕様に対応する形でSkillsをインストールできます。下記のコマンドをターミナルから実行してください。

npx skills add serendie/serendie

Figma Make

2026年5月現在、Figma MakeではSkillファイルを個別にアップロードする必要があります。

GitHubからserendie-overviewのSkillファイル (Markdown形式)をダウンロードし、Figma Make ヘルプページに記載の手順でFigma Makeにアップロードしてください。