minimalist-ui
プレミアムミニマリストウェブインターフェースを作成
AIが生成するインターフェースは汎用的で二流なものに見えることが多いです。このスキルはClaudeが、温かみのあるモノクロパレット、タイポグラフィの階層構造、そしてプレミアムな美学を備えた、洗練された編集者スタイルのウェブデザインを製作することをガイドします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「minimalist-ui」を使用しています。 3層を持つミニマリストプライシングセクションを作成
期待される結果:
bentogridレイアウトで3枚のカードを持つプライシングセクション。各カードには1px #EAEAEAボーダー、余裕のある32pxパディング、くっきりした8pxボーダー半径があります。プライマリ層には#111111CTAボタンがあります。 secundaryテキストは#787774を使用。影もグラデーションもありません。
「minimalist-ui」を使用しています。 FAQアコーディオンセクションをデザイン
期待される結果:
コンテナボックスなしのアコーディオン。各項目は1px #EAEAEAボトムボーダーで区切られています。RadixまたはPhosphorアイコンを使用したクリーンな+と-切り替え。オフブラックテキスト(#2F3437)、読みやすさののための1.6 line-height。
「minimalist-ui」を使用しています。 SaaS製品のヒーローセクションを作成
期待される結果:
Playfair DisplayまたはNewsreaderを使用したエディトリアルセリフ見出しを持つヒーロー、tight -0.02emトラッキング、1.1 line-height。温かいオフホワイト背景(#FBFBFA)。SwitzerまたはSF Proでのサブタイトル、余裕のあるline-height。オプションで0.03不透明度のambient radial gradient。
セキュリティ監査
安全All 102 static findings are false positives triggered by CSS font-family declarations and UI design terminology. The SKILL.md is a legitimate design specification document. No actual shell commands, cryptographic code, keyloggers, or network exfiltration patterns exist. The hardcoded URL is a standard placeholder image service (picsum.photos) commonly used in web development.
検出されたパターン
品質スコア
作れるもの
スタートアップランディングページ
典型的なSaaSデザインとは一線を置く、洗練されたミニマリストランディングページを作成します。
ドキュメントサイト
編集者タイポグラフィでクリーンで読みやすいドキュメントレイアウトを生成します。
デザインシステムコンポーネント
ミニマリストデザインの原則に従って一貫したUIコンポーネントを構築します。
これらのプロンプトを試す
[PRODUCT NAME]のミニマリストランディングページをデザインしてください。温かみのあるモノクロパレット、エディトリアルセリフ見出し、bentogrid機能セクションを含むプレミアムユーティタリアン minimalis.styleを使用してください。ヒーローセクション、3つの機能カード、プライシングテーブルを含めてください。
最小限のデザイン原則を使用して次のUIコンポーネントを作成してください：(1)#111111背景のプライマリCTAボタン、(2)ミュートパステル背景のタグバッジ、(3)1pxボトムボーダーのみのアコーディオンFAQセクション。定義されたカラーパレットとタイポグラフィを使用してください。
bentogridレイアウトを使用して3層のプライシングテーブルをデザインしてください。各層は余裕のあるパディング(24px-40px)、1px #EAEAEAボーダー、くっきりした8pxボーダー半径を持つ必要があります。オフブラックテキスト(#2F3437)とミュートグレー секундуaryテキスト(#787774)を使用してください。
[PRODUCT TYPE]の完全なランディングページを作成してください。プレミアムユーティリアン minimaris.protocolに従ってください：温かみのあるモノクロパレット(#FFFFFF, #F7F6F3, #111111)、エディトリアルセリフ見出し(Lyon Text/Newsreader)、システムサンセリフ本文(SF Pro/Geist)。以下を含めてください： плотныйトラッキングの見出しを含むヒーロー、bentogr機能グリッド、推薦セクション、最小限のブラーを含むスティッキーナビバー。translateY(12px)フェードインでスクロールエントリーアニメーションを追加してください。
ベストプラクティス
- コンポーネントを追加する前にカラーパレットとタイポグラフィの階層構造を定義することから始めてください
- プレミアム感を確立するためにセクション間に余裕のある余白(py-24またはpy-32)を使用してください
- 最適な読みやすさのためにコンテンツ幅をmax-w-4xlまたはmax-w-5xlに制約してください
- subtleでパフォーマンスの高いrevealsのためにIntersectionObserverを使用してスクロールエントリーアニメーションを適用してください
回避
- Inter、Roboto、Open Sansなどの汎用フォント。使用すると企業はっきりして二流的になります
- ミニマリスト美学に反する重いTailwindシャドウ(shadow-md、shadow-lg)の適用
- モノクロパレットを壊す明るいプライマリカラー、グラデーション、またはglassmorphism効果の使用
- 大きなコンテナやプライマリボタンに丸みを帯びたフル形状を追加