01
このSkillでできること
- ✓ブランドカラーからベース、ホバー、アクティブ、淡色のバリエーションを導出する
- ✓ブランドの色相を反映したグレーを、境界線や背景向けに作成する
- ✓ブランドと調和するエラー、警告、成功、情報などのセマンティックカラーを設計する
- ✓限られたブランドパレットをUI用のカラーシステムへ拡張する
02
使い方
01
STEP 1
入力された1〜2色のブランドカラーを基準にする
02
STEP 2
HSL調整で暗色・明色のインタラクティブ状態色を作成する
03
STEP 3
ブランドの色相と低い彩度を使ってグレー階調を設計する
04
STEP 4
セマンティックカラー、フォーカス、選択、オーバーレイなどの機能色を定義する
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/dembrandt/dembrandt-skills04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
このブランドカラーから、ホバー・アクティブ・背景用の色、ブランドに調和したグレー階調、セマンティックカラーを含むUIカラーパレットを作成してください。出力例を見る
Primary、Primary Hover、Primary Active、ブランド調整済みGrey、Error、Warning、Success、Info、Focusなどのカラー変数を含むパレット。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- network: work in the project. Prefer the CLI? `npx -y dembrandt https://stripe.com` works without any config. ## What this is Opinionated, practical skills cove
- network: polish, a11y gate | ## Ecosystem Part of [dembrandt](https://github.com/dembrandt/dembrandt): the engine extracts a brand's real design tokens from any
06