SAIスキル大辞典Agent Skills Dictionary
⌕
文字
トップ›Skill›banner-design
UI/UX

banner-design

バナーデザイン

SNS、広告、Webヒーロー、印刷物向けのバナーを、複数のアートディレクションと指定サイズに合わせて設計するスキルです。

AIスキル大辞典による日本語要約
品質評価97/100評価確度：十分
人気度（GitHub Star） 100発掘スコア 65
01

このSkillでできること

  • ✓SNSや広告向けのバナーを設計する
  • ✓複数のデザイン方向を提案する
  • ✓HTML/CSSでバナーを構成する
  • ✓安全領域、コントラスト、出力サイズを確認する
02

使い方

01
STEP 1

用途、媒体、サイズ、文言、ブランド要件を整理する

02
STEP 2

サイズ資料を参照して安全領域を決める

03
STEP 3

2〜3種類のアートディレクションを設計する

04
STEP 4

指定サイズでプレビューし、画像出力と品質を確認する

03

Skillのインストール

初心者におすすめ

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot     # GitHub Copilot
uipro init --ai kiro        # Kiro
uipro init --ai codex       # Codex CLI
uipro init --ai qoder       # Qoder
uipro init --ai roocode     # Roo Code
uipro init --ai gemini      # Gemini CLI
uipro init --ai trae        # Trae
uipro init --ai opencode    # OpenCode
uipro init --ai continue    # Continue
uipro init --ai codebuddy   # CodeBuddy
uipro init --ai droid       # Droid (Factory)
uipro init --ai kilocode    # KiloCode
uipro init --ai warp        # Warp
uipro init --ai augment     # Augment
uipro init --ai codewhale   # CodeWhale
uipro init --ai universal   # Universal / Agent Standard (.agents/skills/)
uipro init --ai all         # All assistants
npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill
src/ui-ux-pro-max/           # Source of truth (data, scripts, templates)
cli/                         # CLI installer (generates files from templates)
.claude/                     # Local dev/test for Claude Code skill
.factory/                    # Local dev/test for Droid (Factory) skill
cd cli
npm run sync:assets
npm run check:assets
npm run verify:data
npm run typecheck
npm run build
node dist/index.js init --ai claude --offline  # Test in a temp folder
node dist/index.js init --ai claude --dry-run  # Preview install actions (no writes)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create
npm install -g ui-ux-pro-max-cli@latest
uipro uninstall
04

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

Instagram用の告知バナーを、ミニマルで落ち着いた配色、見出しとCTA付きで3案設計してください。
出力例を見る
指定サイズに合わせたHTML/CSSバナー案。利用可能な環境ではPNG出力と寸法・安全領域の確認結果も含みます。
05

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報検出あり
検出根拠を見る
  • network: omitted] --- ## Star History [![Star History Chart](https://star-history.dera.page/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://
  • network: repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.dera.page/#nextlevelbuilder/ui-ux-pro-max-skill&Date) ## License This proje
  • credential: and also available on demand. Configure `GOOGLE_FONTS_API_KEY` as a GitHub Actions secret, then run and download its review artifact: [large code bloc
  • credential: . Configure `GOOGLE_FONTS_API_KEY` as a GitHub Actions secret, then run and download its review artifact: [large code block omitted]bash npm install -
06

関連Skill