jpskill.com
🛠️ 開発・MCP コミュニティ

ui-design-styles

ソフトUI、ダークモードなど最新UIデザインをプロジェクトに適用し、視覚的に魅力的なプロトタイプを作成、デザイン傾向に沿ってアクセシビリティを改善、特定UI効果の実装を理解するSkill。

📜 元の英語説明(参考)

Comprehensive guidance for applying modern UI design styles, including Soft UI, Dark Mode, Flat Design, Neumorphism, Glassmorphism, and Aurora UI Gradients. Use when a user asks to: (1) Apply a specific UI style to a project, (2) Create a modern, visually appealing UI prototype, (3) Improve accessibility while following design trends, or (4) Understand the technical implementation of specific UI effects like frosted glass or soft shadows.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ソフトUI、ダークモードなど最新UIデザインをプロジェクトに適用し、視覚的に魅力的なプロトタイプを作成、デザイン傾向に沿ってアクセシビリティを改善、特定UI効果の実装を理解するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ui-design-styles.zip https://jpskill.com/download/8759.zip && unzip -o ui-design-styles.zip && rm ui-design-styles.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/8759.zip -OutFile "$d\ui-design-styles.zip"; Expand-Archive "$d\ui-design-styles.zip" -DestinationPath $d -Force; ri "$d\ui-design-styles.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ui-design-styles.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ui-design-styles フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

UI デザインスタイル

このスキルでは、最も人気のある現代的な UI デザインスタイルを実装するための専門的な知識とワークフローを提供します。アクセシビリティと可読性の高い基準を維持しながら、プロフェッショナルで洗練された外観を実現することに重点を置いています。

主要な UI スタイル

プロジェクトの目標に最も適したスタイルを選択してください。

  • Soft UI / Modern Design: 親しみやすく、魅力的な B2C インターフェースに最適です。微妙なグラデーションとリアルな影を使用します。 soft_ui.md を参照してください。
  • Dark Mode: 現代的なアプリに不可欠です。ライティングと OLED に適した黒レベルによる階層構造に焦点を当てています。 dark_mode.md を参照してください。
  • Flat Design: ミニマリズム、高コントラストのタイポグラフィ、および明瞭さに焦点を当てています。eコマースや高級ブランドに最適です。 flat_design.md を参照してください。
  • Neumorphism: スタイリッシュな「押し出し成形プラスチック」のような外観です。特定のコンテナ要素に限定して使用するのが最適です。 neumorphism.md を参照してください。
  • Glassmorphism: 背景のぼかしと透明度を使用した、すりガラスのような効果です。奥行きと高級感を加えます。 glassmorphism.md を参照してください。
  • Aurora UI Gradients: オーガニックでぼやけた、オーロラのような背景です。装飾や Glassmorphism との組み合わせに最適です。 aurora_ui.md を参照してください。

一般的なデザイン原則

選択したスタイルに関係なく、常にこれらの基本的なプラクティスを適用してください。

  1. Accessibility First: デザインスタイルは、ユーザーが重要なコンテンツをナビゲートしたり読んだりする能力を損なうべきではありません。スタイル（Glassmorphism など）が可読性の問題を引き起こす場合は、改良するか、重要でない要素に限定する必要があります。
  2. Hierarchy through Depth: 「トップダウンライティング」モデルを使用します。ユーザーに近い要素は、より明るくしたり、より目立つ影/透明度を持たせる必要があります。
  3. Color Harmony: 可能な限り、純粋な黒/白は避けてください。グレーと背景に、主要なブランドカラーのヒントを入れて色合いを調整し、よりまとまりのあるプロフェッショナルな雰囲気を作り出します。
  4. Consistent Roundness: 角の半径（例：8px、16px）を選択し、すべてのコンポーネントに一貫して適用して、視覚的な統一感を維持します。

参考文献

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

UI Design Styles

This skill provides specialized knowledge and workflows for implementing the most popular modern UI design styles. It focuses on achieving a professional, polished look while maintaining high standards for accessibility and legibility.

Core UI Styles

Select the style that best fits the project's goals:

  • Soft UI / Modern Design: Best for friendly, inviting B2C interfaces. Uses subtle gradients and lifelike shadows. See soft_ui.md.
  • Dark Mode: Essential for modern apps. Focuses on hierarchy through lighting and OLED-friendly black levels. See dark_mode.md.
  • Flat Design: Focuses on minimalism, high-contrast typography, and clarity. Great for e-commerce and luxury brands. See flat_design.md.
  • Neumorphism: A stylized "extruded plastic" look. Best used sparingly for specific container elements. See neumorphism.md.
  • Glassmorphism: A frosted glass effect using background blur and transparency. Adds depth and a premium feel. See glassmorphism.md.
  • Aurora UI Gradients: Organic, blurry, northern-lights-style backgrounds. Excellent for ornamentation and pairing with Glassmorphism. See aurora_ui.md.

General Design Principles

Regardless of the chosen style, always apply these fundamental practices:

  1. Accessibility First: Design styles should never impair the user's ability to navigate or read essential content. If a style (like Glassmorphism) causes legibility issues, it must be refined or limited to non-essential elements.
  2. Hierarchy through Depth: Use the "top-down lighting" model. Elements closer to the user should be lighter and/or have more prominent shadows/transparency.
  3. Color Harmony: Avoid pure black/white when possible. Tint grays and backgrounds with a hint of the primary brand color to create a more cohesive and professional feel.
  4. Consistent Roundness: Choose a corner radius (e.g., 8px, 16px) and apply it consistently across all components to maintain visual unity.

References