Back to Details

ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Pro Max - デザインインテリジェンス

UI/UX Pro Max - 设计智能工具

UIスタイル、カラーパレット、フォントペアリング、チャートタイプ、プロダクト推奨、UXガイドライン、スタック別ベストプラクティスの検索可能なデータベース。
这是一个可搜索的数据库，包含UI风格、配色方案、字体搭配、图表类型、产品设计建议、UX指南以及各技术栈的最佳实践。

前提条件

前提条件

Pythonがインストールされているか確認：
bash
python3 --version || python --version
Pythonがインストールされていない場合、OSに応じてインストール：
macOS:
bash
brew install python3
Ubuntu/Debian:
bash
sudo apt update && sudo apt install python3
Windows:
powershell
winget install Python.Python.3.12
检查是否已安装Python：
bash
python3 --version || python --version
若未安装Python，请根据操作系统进行安装：
macOS:
bash
brew install python3
Ubuntu/Debian:
bash
sudo apt update && sudo apt install python3
Windows:
powershell
winget install Python.Python.3.12

このスキルの使い方

本工具的使用方法

ユーザーがUI/UX作業（デザイン、構築、作成、実装、レビュー、修正、改善）をリクエストした場合、以下のワークフローに従ってください：
当用户提出UI/UX相关需求（设计、构建、创建、实现、评审、修复、改进等）时，请遵循以下工作流程：

ステップ1：ユーザー要件を分析

步骤1：分析用户需求

ユーザーリクエストから重要な情報を抽出：
  • プロダクトタイプ: SaaS、EC、ポートフォリオ、ダッシュボード、ランディングページなど
  • スタイルキーワード: ミニマル、プレイフル、プロフェッショナル、エレガント、ダークモードなど
  • 業界: ヘルスケア、フィンテック、ゲーム、教育など
  • スタック: React、Vue、Next.js、またはデフォルトで 
    html-tailwind
从用户请求中提取关键信息：
  • 产品类型: SaaS、电商、作品集、仪表盘、着陆页等
  • 风格关键词: 极简、趣味、专业、优雅、深色模式等
  • 行业: 医疗健康、金融科技、游戏、教育等
  • 技术栈: React、Vue、Next.js，默认使用 
    html-tailwind

ステップ2：関連ドメインを検索

步骤2：搜索相关领域

search.py
を複数回使用して包括的な情報を収集。十分なコンテキストが得られるまで検索を続けてください。
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
推奨される検索順序：
  1. Product - プロダクトタイプに対するスタイル推奨を取得
  2. Style - 詳細なスタイルガイド（色、エフェクト、フレームワーク）を取得
  3. Typography - Google Fontsインポート付きのフォントペアリングを取得
  4. Color - カラーパレット（Primary、Secondary、CTA、Background、Text、Border）を取得
  5. Landing - ページ構造を取得（ランディングページの場合）
  6. Chart - チャート推奨を取得（ダッシュボード/アナリティクスの場合）
  7. UX - ベストプラクティスとアンチパターンを取得
  8. Stack - スタック固有のガイドラインを取得（デフォルト: html-tailwind）
多次使用
search.py
以收集全面信息，直到获取足够的上下文。
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
  1. Product - 获取对应产品类型的风格建议
  2. Style - 获取详细的风格指南（颜色、效果、框架）
  3. Typography - 获取包含Google Fonts导入的字体搭配方案
  4. Color - 获取对应产品类型的配色方案（主色、辅助色、CTA色、背景色、文本色、边框色）
  5. Landing - 获取页面结构（针对着陆页）
  6. Chart - 获取图表建议（针对仪表盘/分析类产品）
  7. UX - 获取最佳实践与反模式
  8. Stack - 获取技术栈专属指南（默认: html-tailwind）

ステップ3：スタックガイドライン（デフォルト: html-tailwind）

步骤3：技术栈指南（默认: html-tailwind）

ユーザーがスタックを指定しない場合、デフォルトで 
html-tailwind
を使用。
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
利用可能なスタック: 
html-tailwind
、
react
、
nextjs
、
vue
、
svelte
、
swiftui
、
react-native
、
flutter
若用户未指定技术栈，默认使用
html-tailwind
。
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
支持的技术栈: 
html-tailwind
、
react
、
nextjs
、
vue
、
svelte
、
swiftui
、
react-native
、
flutter

検索リファレンス

搜索参考

利用可能なドメイン

支持的领域

ドメイン用途キーワード例
product
プロダクトタイプの推奨SaaS、e-commerce、portfolio、healthcare、beauty、service
style
UIスタイル、色、エフェクトglassmorphism、minimalism、dark mode、brutalism
typography
フォントペアリング、Google Fontselegant、playful、professional、modern
color
プロダクトタイプ別カラーパレットsaas、ecommerce、healthcare、beauty、fintech、service
landing
ページ構造、CTA戦略hero、hero-centric、testimonial、pricing、social-proof
chart
チャートタイプ、ライブラリ推奨trend、comparison、timeline、funnel、pie
ux
ベストプラクティス、アンチパターンanimation、accessibility、z-index、loading
prompt
AIプロンプト、CSSキーワード（スタイル名）
领域用途关键词示例
product
产品类型设计建议SaaS、e-commerce、portfolio、healthcare、beauty、service
style
UI风格、颜色、效果glassmorphism、minimalism、dark mode、brutalism
typography
字体搭配、Google Fontselegant、playful、professional、modern
color
各产品类型配色方案saas、ecommerce、healthcare、beauty、fintech、service
landing
页面结构、CTA策略hero、hero-centric、testimonial、pricing、social-proof
chart
图表类型、库推荐trend、comparison、timeline、funnel、pie
ux
最佳实践、反模式animation、accessibility、z-index、loading
prompt
AI提示词、CSS关键词（风格名称）

利用可能なスタック

支持的技术栈

スタックフォーカス
html-tailwind
Tailwindユーティリティ、レスポンシブ、a11y（デフォルト）
react
ステート、フック、パフォーマンス、パターン
nextjs
SSR、ルーティング、画像、APIルート
vue
Composition API、Pinia、Vue Router
svelte
Runes、ストア、SvelteKit
swiftui
ビュー、ステート、ナビゲーション、アニメーション
react-native
コンポーネント、ナビゲーション、リスト
flutter
ウィジェット、ステート、レイアウト、テーマ
技术栈核心关注点
html-tailwind
Tailwind工具类、响应式设计、可访问性（默认）
react
状态管理、Hook、性能、设计模式
nextjs
SSR、路由、图片处理、API路由
vue
Composition API、Pinia、Vue Router
svelte
Runes、状态存储、SvelteKit
swiftui
视图、状态、导航、动画
react-native
组件、导航、列表
flutter
组件、状态、布局、主题

ワークフロー例

工作流程示例

ユーザーリクエスト: 「プロフェッショナルなスキンケアサービスのランディングページを作成」
AIが実行すべき操作：
bash
undefined
用户请求: 「创建一个专业的护肤服务着陆页」
应执行的操作：
bash
undefined

1. プロダクトタイプを検索

1. 搜索产品类型

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

2. スタイルを検索（業界: beauty、elegant）

2. 搜索风格（行业: beauty、elegant）

python3 skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

3. タイポグラフィを検索

3. 搜索排版

python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

4. カラーパレットを検索

4. 搜索配色方案

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

5. ランディングページ構造を検索

5. 搜索着陆页结构

python3 skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
python3 skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

6. UXガイドラインを検索

6. 搜索UX指南

python3 skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux python3 skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
python3 skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux python3 skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

7. スタックガイドラインを検索（デフォルト: html-tailwind）

7. 搜索技术栈指南（默认: html-tailwind）

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

**その後:** すべての検索結果を統合してデザインを実装。

---
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

**后续操作:** 整合所有搜索结果并完成设计实现。

---

より良い結果のためのヒント

获得优质结果的技巧

  1. キーワードは具体的に - 「app」より「healthcare SaaS dashboard」
  2. 複数回検索 - 異なるキーワードで異なる洞察が得られる
  3. ドメインを組み合わせる - Style + Typography + Color = 完全なデザインシステム
  4. 常にUXをチェック - 「animation」「z-index」「accessibility」で一般的な問題を検索
  5. stackフラグを使用 - 実装固有のベストプラクティスを取得
  6. 反復する - 最初の検索が合わない場合、異なるキーワードを試す
  1. 使用具体关键词 - 优先使用「医疗健康SaaS仪表盘」而非「应用」
  2. 多次搜索 - 不同关键词可带来不同洞察
  3. 组合多个领域 - 风格+排版+配色=完整的设计系统
  4. 始终检查UX - 搜索「animation」「z-index」「accessibility」以规避常见问题
  5. 使用stack参数 - 获取针对具体实现的最佳实践
  6. 反复尝试 - 若首次搜索结果不符，更换关键词重试

プロフェッショナルUIのための共通ルール

专业UI设计的通用规则

UIがプロフェッショナルに見えない原因となる、見落とされがちな問題：
以下是容易被忽略、却会导致UI不够专业的常见问题：

アイコンとビジュアル要素

图标与视觉元素

ルール良い例悪い例
絵文字アイコン禁止SVGアイコンを使用（Heroicons、Lucide、Simple Icons）UIアイコンとして絵文字を使用
安定したホバー状態ホバー時に色/透明度のトランジションを使用レイアウトをずらすスケール変換を使用
正確なブランドロゴSimple Iconsから公式SVGを調査ロゴパスを推測したり不正確なものを使用
一貫したアイコンサイズ固定viewBox（24x24）とw-6 h-6を使用異なるアイコンサイズをランダムに混在
规则正面示例反面示例
禁止使用emoji作为图标使用SVG图标（Heroicons、Lucide、Simple Icons）将emoji用作UI图标
稳定的悬停状态悬停时使用颜色/透明度过渡效果使用会导致布局偏移的缩放变换
准确的品牌Logo从Simple Icons获取官方SVG猜测Logo路径或使用不准确的版本
统一的图标尺寸使用固定viewBox（24x24）和w-6 h-6随机混用不同尺寸的图标

インタラクションとカーソル

交互与光标

ルール良い例悪い例
カーソルポインタークリック/ホバー可能なすべてのカードに
cursor-pointer
を追加		インタラクティブ要素にデフォルトカーソルを残す
ホバーフィードバック視覚的フィードバックを提供（色、シャドウ、ボーダー）要素がインタラクティブであることを示さない
スムーズなトランジション
transition-colors duration-200
を使用		即座の状態変更または遅すぎる（>500ms）
规则正面示例反面示例
添加指针光标为所有可点击/悬停的卡片添加
cursor-pointer
交互元素保留默认光标
清晰的悬停反馈提供视觉反馈（颜色、阴影、边框变化）不提示元素可交互
平滑的过渡动画使用
transition-colors duration-200
立即切换状态或过渡过慢（>500ms）

ライト/ダークモードのコントラスト

亮色/深色模式的对比度

ルール良い例悪い例
ライトモードのガラスカード
bg-white/80
または高い透明度を使用
bg-white/10
を使用（透明すぎる）
ライトモードのテキストコントラストテキストに
#0F172A
（slate-900）を使用		本文に
#94A3B8
（slate-400）を使用
ライトモードのミュートテキスト最低
#475569
（slate-600）を使用		gray-400以下を使用
ボーダーの可視性ライトモードで
border-gray-200
を使用
border-white/10
を使用（見えない）
规则正面示例反面示例
亮色模式下的玻璃卡片使用
bg-white/80
或高透明度		使用
bg-white/10
（过于透明）
亮色模式下的文本对比度文本使用
#0F172A
（slate-900）		正文使用
#94A3B8
（slate-400）
亮色模式下的弱化文本最低使用
#475569
（slate-600）		使用gray-400及以下颜色
边框可见性亮色模式下使用
border-gray-200
使用
border-white/10
（不可见）

レイアウトとスペーシング

布局与间距

ルール良い例悪い例
フローティングナビバー
top-4 left-4 right-4
のスペーシングを追加		ナビバーを
top-0 left-0 right-0
に固定
コンテンツパディング固定ナビバーの高さを考慮コンテンツが固定要素の後ろに隠れる
一貫したmax-width同じ
max-w-6xl
または
max-w-7xl
を使用		異なるコンテナ幅を混在
规则正面示例反面示例
悬浮导航栏添加
top-4 left-4 right-4
的间距		将导航栏固定在
top-0 left-0 right-0
内容内边距考虑固定导航栏的高度内容被固定元素遮挡
统一的最大宽度统一使用
max-w-6xl
或
max-w-7xl
混用不同的容器宽度

納品前チェックリスト

交付前检查清单

UIコードを納品する前に、以下の項目を確認：
在交付UI代码前，请确认以下项目：

ビジュアル品質

视觉质量

  • アイコンとして絵文字を使用していない（代わりにSVGを使用）
  • すべてのアイコンが一貫したアイコンセットから（Heroicons/Lucide）
  • ブランドロゴが正確（Simple Iconsから確認）
  • ホバー状態がレイアウトシフトを起こさない
  • var()ラッパーではなくテーマカラーを直接使用（bg-primary）
  • 未使用emoji作为图标（改用SVG）
  • 所有图标来自同一图标库（Heroicons/Lucide）
  • 品牌Logo准确（从Simple Icons确认）
  • 悬停状态不会导致布局偏移
  • 直接使用主题色（如bg-primary）而非var()包裹

インタラクション

交互体验

  • すべてのクリック可能な要素に
    cursor-pointer
    がある
  • ホバー状態が明確な視覚的フィードバックを提供
  • トランジションがスムーズ（150-300ms）
  • キーボードナビゲーション用のフォーカス状態が可視
  • 所有可点击元素都添加了
    cursor-pointer
  • 悬停状态提供清晰的视觉反馈
  • 过渡动画平滑（150-300ms）
  • 键盘导航的焦点状态可见

ライト/ダークモード

亮色/深色模式

  • ライトモードのテキストに十分なコントラスト（最低4.5:1）
  • ガラス/透明要素がライトモードで可視
  • 両モードでボーダーが可視
  • 納品前に両モードをテスト
  • 亮色模式下文本对比度足够（最低4.5:1）
  • 玻璃/透明元素在亮色模式下可见
  • 两种模式下边框均可见
  • 交付前测试两种模式

レイアウト

布局

  • フローティング要素が端から適切なスペーシングを持つ
  • 固定ナビバーの後ろにコンテンツが隠れない
  • 320px、768px、1024px、1440pxでレスポンシブ
  • モバイルで水平スクロールなし
  • 悬浮元素与页面边缘保持适当间距
  • 内容不会被固定导航栏遮挡
  • 在320px、768px、1024px、1440px分辨率下均为响应式
  • 移动端无水平滚动

アクセシビリティ

可访问性

  • すべての画像にalt属性がある
  • フォーム入力にラベルがある
  • 色だけが唯一の指標ではない
  • prefers-reduced-motion
    を尊重
  • 所有图片都有alt属性
  • 表单输入都有标签
  • 不单独使用颜色作为唯一标识
  • 尊重
    prefers-reduced-motion
    设置

ライセンスと帰属

许可证与归属

このスキルは nextlevelbuilder/ui-ux-pro-max-skill をベースに日本語化したものです。
Original Author: nextlevelbuilder License: MIT License Japanese Translation: skills-ja project
詳細は同梱の 
LICENSE
ファイルを参照してください。
本工具基于nextlevelbuilder/ui-ux-pro-max-skill进行日语本地化。
原作者: nextlevelbuilder 许可证: MIT License 日语翻译: skills-ja project
详情请参考附带的
LICENSE
文件。