ui-theme-designer Claude Code プラグイン
Claude Code プラグインClaude Codeデザインエンタープライズ業務プラットフォームデザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
このプラグインは、SAPのUI Theme Designerおよび SAP Design System に関する支援を行うための2つのスキルをコーディングエージェントに追加するものです。1つ目のスキルは、SAP Business Technology Platform上でのUI Theme Designerの使い方や概念に関する質問に対応し、初期設定やユーザー・ロール管理、テーマの作成・編集・公開、トランスポートやフォールバックテーマ、SAP Build Work ZoneやS/4HANA、SAPUI5、SAP GUIとの連携などを扱います。2つ目のスキルはSAP Fioriのデザイントークンに関する質問に答えるもので、UI5やUI5 Web Components、Fundamental Styles の各コンポーネントがどのテーマパラメータを使用し、テーマごとに値がどう異なるかを示します。README によると、design-tokensスキルは学習データの記憶に頼らず、npmレジストリから取得した最新のパッケージファイルを参照する設計になっています。インストール方法としてはClaudeやGitHub Copilot向けのプラグイン導入のほか、他のコーディングエージェント向けにスキル単体で追加する方法も用意されています。
連携サービスについて
SAP UI Theme Designer は、SAP Business Technology Platform上でUIテーマの作成・編集・公開を行うためのサービスです。README に記載されたdesign-tokensスキルは、npmレジストリにアクセスして最新のtheming-base-contentやUI5関連パッケージを取得し、解決済みのデザイントークンファイルを読み取る仕組みを持っています。
ui-theme-designer でできること
- UI Theme Designerの初期設定やユーザー・ロール管理の進め方を質問する
- クイック・詳細・エキスパートの各テーマ編集ワークフローについて案内を受ける
- テーマのトランスポートやフォールバックテーマ、テーマセット、エラーメッセージのトラブルシューティングを確認する
- SAP Build Work ZoneやS/4HANA、SAPUI5、SAP GUIとの連携方法を調べる
- UI5やUI5 Web Components、Fundamental Styles の各コンポーネントが使用するテーマパラメータとテーマ間の値の違いを調べる
- カスタムCSS内のハードコードされた値のうち、既存のSAP Design Systemトークンに置き換えられるものを洗い出す
出典
ui-theme-designer の変更履歴
- Claude Code プラグイン ui-theme-designer が追加