ホームに戻る

palette

UI/UXデザイン

カテゴリ：

50 / 212 skills

web-design-guidelines

by @vercel-labs

UIコードがウェブインターフェースデザインガイドラインに準拠しているかレビューし、アクセシビリティ、デザイン、ユーザーエクスペリエンスをチェックして、インターフェースの品質と標準を確保します。

ui-ux-pro-max

by @nextlevelbuilder

ウェブおよびモバイルアプリケーション向けの包括的なUI/UXデザインガイドラインを提供します。多様なスタイル、カラーパレット、フォントの組み合わせ、製品タイプ別のデザイン提案を含み、デザイン品質を向上させます。

sleek-design-mobile-apps

by @sleekdotdesign

AI駆動のモバイルアプリデザインツールsleek.designを活用し、REST APIを通じてプロジェクトを作成しデザイン要件を記述することで、効率的なモバイルアプリデザインを実現します。

lark-whiteboard

by @larksuite

Larkホワイトボードを作成および編集し、フローチャート、フレームワーク図、自由な作成をサポートします。要素の一括追加とエクスポートが可能です。

extract-design-system

by @arvindrk

公開ウェブサイトからデザイントークン（色、フォント、間隔など）を自動抽出し、ローカルデザインシステムファイルを生成してUI開発を加速します。

polish

by @pbakaus

強制的な準備スキルであり、使用前にフロントエンドデザインスキルにおけるデザイン原則、アンチパターン、コンテキスト収集プロトコルに従うことを要求し、堅固なデザイン基盤を確保します。

animate

by @pbakaus

このスキルは、デザイン言語を駆使してAIツールのユーザーインターフェースをより鮮やかで表現豊かにし、ユーザーエクスペリエンスとインタラクションの魅力を向上させることに焦点を当てています。

colorize

by @pbakaus

このスキルは、色彩デザイン言語を駆使してAIツールのインターフェースに活気と美しさを注入し、綿密に組み合わせた色彩スキームを通じて視覚的魅力を高め、ユーザーエクスペリエンスを最適化することに焦点を当てています。

bolder

by @pbakaus

このスキルは、大胆でインパクトのあるデザイン言語を駆使してAIツールのインターフェース要素をより視覚的に魅力的で認識しやすくし、ブランドイメージを強化し、ユーザーの認知度を向上させることに焦点を当てています。

delight

by @pbakaus

このスキルは、洗練されたデザイン言語を通じてAIツールのユーザーに喜びと驚きの体験を創造し、細部と感情的なつながりに焦点を当てることで、ユーザー満足度とロイヤルティを向上させることを目的としています。

prototype

by @mattpocock

コミットする前にデザインを具体化するための一時的なプロトタイプを構築します。ステート/ビジネスロジックの質問には実行可能なターミナルアプリ、または単一ルートから切り替え可能な複数の異なるUIバリエーションを使用します。デザインの探索、データモデルやUIの検証に役立ちます。

minimalist-design

quieter

by @pbakaus

このスキルは、クリーンで控えめなデザイン言語を用いて、AIツールのために静かで邪魔のないユーザーインターフェースを作成し、視覚的なノイズを減らし、ユーザーの集中力と快適さを向上させることに焦点を当てています。

design-taste-frontend

by @leonxlnx

高い自律性を持つフロントエンドデザイン能力を提供し、デザインのバリエーションやアニメーションの強度などの視覚的パラメータを設定できます。

high-end-visual-design

by @leonxlnx

ハイエンドなビジュアルデザインに特化し、優れたUI/UXアーキテクチャ計画とダイナミックエフェクトのオーケストレーションを提供し、創造的で優れたユーザーエクスペリエンスを持つインターフェースとインタラクティブデザインを構築します。

redesign-existing-projects

by @leonxlnx

既存プロジェクトの再設計ガイドを提供し、コードベースのスキャン、フレームワークとスタイリング方法の特定を含め、体系的なプロセスでプロジェクトの改造と最適化を指導します。

canvas-design

by @anthropics

視覚芸術とデザインマニフェストを作成し、PNGおよびPDF形式で提示することで、デザイン哲学と美的主張を伝えます。

emil-design-eng

by @emilkowalski

UIの洗練、コンポーネント設計などに関するEmil Kowalskiのデザイン哲学をコード化します。

minimalist-ui

by @leonxlnx

高度に洗練されたミニマリストのドキュメントスタイルWebインターフェースを生成し、コンテンツ表示と視覚的階層に焦点を当て、トップティアのワークスペーススタイルに適しています。

industrial-brutalist-ui

by @leonxlnx

インダストリアルブルータリズムと戦術テレメトリーUIデザインの専門家。スイスのタイポグラフィと工業マニュアルの美学を融合させ、高コントラストで情報密度の高いUIを作成します。

theme-factory

by @anthropics

デザインプロジェクトに多様で高品質なビジュアルスタイルオプションを提供することを目的とした、10種類以上のプロフェッショナルなフォントとカラーテーマの厳選されたコレクションを提供します。

material-design

design-md

by @google-labs-code

Markdown形式を使用してデザインドキュメントを作成する能力を習得し、AIコーディングエージェントがUI/UXデザインの仕様とアイデアを明確かつ構造的に記録できるようにし、チームコラボレーションとコミュニケーションを促進します。

brand-guidelines

by @anthropics

カラーパレット、フォント、視覚要素などのブランドアイデンティティリソースを活用し、すべてのタッチポイントでブランドイメージの一貫性とプロフェッショナリズムを確保します。

stitch-loop

by @google-labs-code

Google Labsの反復的な設計と構築のループ手法に従い、迅速なプロトタイピングと継続的なフィードバックを通じて、アイデアを効率的に実際の製品に変換します。

arrange

by @pbakaus

デザインのレイアウトと間隔を評価・最適化し、単調さ、混雑、構造の弱さなどの問題を解決し、視覚的な美しさとユーザーエクスペリエンスを向上させます。

shape

by @pbakaus

コードを記述する前に機能のUXとUIを設計し、デザイン原則とアンチパターンに従い、コンテキスト収集プロトコルを使用します。

interaction-design

by @Owl-Listener

マイクロアニメーション、状態遷移、ユーザーフローを含む意味のあるユーザーインタラクションの設計に特化し、直感的で楽しく効率的なデジタル体験を創造します。

brandkit

by @leonxlnx

このスキルは、ハイエンドなブランドガイドラインボード、ロゴシステム、アイデンティティデッキ、ビジュアルプレゼンテーションを作成するためのプレミアムブランドキット画像生成ツールです。ミニマリスト、シネマティック、ラグジュアリーなど多様なスタイルに対応し、意図的なロゴコンセプト、洗練された構図、象徴的な意味、プレミアムなモックアップを最適化し、プロフェッショナルなブランドビジュアルを生成します。

layout

by @pbakaus

単調で混雑した、または構造的に弱いレイアウトと間隔を評価・改善し、一般的なレイアウトをリズミカルな構成に変換します。

imagegen-frontend-mobile

by @leonxlnx

プレミアムでアプリネイティブな画面コンセプトとフローを作成するための、エリートモバイルアプリ画像生成スキルです。クリーンな階層、読みやすいテキスト、複数画面の一貫性、制御されたカラーパレット、非汎用的なクリエイティブディレクションを重視し、洗練された電話モックアップ内に表示します。このスキルは画像を生成するのみで、コードは生成しません。

stitch-design

by @google-labs-code

Stitchデザイン作業の統一された入り口として、プロンプトエンジニアリングを処理し、デザインプロセスの円滑かつ効率的な進行を保証します。

wcag-compliance

accessibility

by @addyosmani

WCAG 2.2ガイドラインに基づき、ウェブページのアクセシビリティを監査・改善し、すべてのユーザーがスムーズに利用できるようにします。

ui/ux-enhancement

make-interfaces-feel-better

by @jakubkrehel

インターフェースの詳細を最適化し、ユーザーエクスペリエンスを向上させ、インターフェースをより快適で直感的、魅力的に感じさせ、ユーザー満足度を高めます。

brand-landingpage

by @wshobson

デザインコンサルタントとして、このスキルはユーザーがブランドインタビューを通じて、製品コンセプトをデザイン決定に変換し、ランディングページのデザインを生成・反復的に改善し、最終的にデプロイ可能なブランドランディングページバンドルを提供します。単一目的のランディングページや製品マーケティングサイトに焦点を当て、ブランドビジョンと技術実装の完璧な融合を保証します。

huashu-design

by @alchaincyf

HTMLで高忠実度デザインを迅速に作成し、タスクに応じてアニメーター、UXデザイナー、プロトタイパーとして切り替え、インタラクティブな製品プロトタイプとビジュアルソリューションを生成する。

excalidraw-diagram-generator

by @github

自然言語記述に基づいてExcalidraw図を生成し、フローチャートやプロセスの視覚化などのニーズに適しています。

lark-whiteboard-cli

by @larksuite

CLIツールを通じて無限キャンバス上に自由レイアウトのホワイトボードを作成し、要素配置とオプションのフレックスレイアウト強化をサポートします。

interface-design

by @dammyjay93

Claude Codeのインターフェース設計エンジニアリングに焦点を当て、デザイン、記憶、実行をカバーし、ユーザーエクスペリエンスと機能実装を保証します。

tailwind-css-patterns

by @giuseppe-trisciuoglio

このスキルは、Tailwind CSS開発パターンの専門ガイドであり、このユーティリティファーストフレームワークを使用してモダンでレスポンシブなユーザーインターフェースを構築します。

css-media-queries

responsive-design

by @supercent-io

このスキルはレスポンシブデザインに使用され、新しいウェブサイト/アプリケーションのレイアウト設計、古いレイアウトの改修、パフォーマンス最適化、アクセシビリティ、クロスブラウザ互換性を含み、複数デバイスへの適応を保証します。

web-design-reviewer

by @github

ローカルまたはリモートで実行中のウェブサイトを視覚的に検査し、デザイン上の問題を特定・修正して、ウェブページの美観と機能性を確保します。

penpot-uiux-design

by @github

MCPツールを使用してPenpotでプロフェッショナルなUI/UXデザインを作成するための包括的なガイドを提供し、ウェブおよびモバイルデザインに対応します。

design-system-patterns

by @wshobson

デザインシステムパターンに特化し、インテリジェントな自動化とマルチエージェントオーケストレーションを組み合わせて、デザイン仕様を統一し、製品の一貫性と開発効率を向上させます。

frontend-design-system

by @supercent-io

このスキルはプロダクションレベルのUIデザインに使用され、明確なデザイントークン、レイアウトルール、アニメーションガイドラインを通じて、一貫性がありスケーラブルなフロントエンド開発をサポートします。

visual-design-foundations

by @wshobson

ビジュアルデザインの基礎を習得し、インテリジェントな自動化とマルチエージェントオーケストレーションを組み合わせて、デザイン効率を向上させ、より魅力的なユーザーエクスペリエンスを創造します。

design-an-interface

by @mattpocock

多様なユーザーニーズを満たすため、革新的な視点を提供する複数の異なるインターフェースデザイン案を生成します。

landing-page-design

by @inferen-sh

inference.sh APIを利用して、エージェントにランディングページデザイン機能を提供します。

logo-design-guide

by @inferen-sh

inference.sh APIを利用して、エージェントに数百種類のロゴデザインガイドスキルを提供します。

bmad-idea

by @supercent-io

このスキルはBMADクリエイティブインテリジェンススイートの一部で、構造化された創造的技術（7つの主要カテゴリ、36の方法）を用いたブレインストーミングと、人間中心設計の実行に使用されます。

baoyu-diagram

by @jimliu

一貫したデザインシステムに従い、実際のSVGコードを記述してチャートを生成。ダークモードをサポートする自己完結型SVGファイルを出力し、記事、WeChat、スライドに埋め込むことができます。

design

by @tw93

このスキルは、コンポーネント、ページ、または視覚インターフェース向けに、特徴的で本番レベルのUIを生成します。ユーザーが視覚的な不満を伴う画像を送信した場合、スクリーンショット駆動の反復処理に優れていますが、バックエンドロジックやデータパイプラインには対応していません。