high-end-visual-design
プレミアムな代理店の品質を持つインターフェースを設計
ほとんどのAIツールは、研磨をかけたれていないテンプレート的なUIデザインを生成します。このスキルは、フォント、スペーシング、シャドウ、卡片構造、アニメーションに関する正確なデザインルールを提供し、ハイエンドなデザイン代理店から得られたようなインターフェースを作成します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「high-end-visual-design」を使用しています。 ダークなガラスモーフィズムスタイルでAIスタートアップのヒーローセクションを作成
期待される結果:
- ガラスピル形状のフローティングナビゲーションバーが必要マージンをつけてトップに座る。ヒーローは微妙な紫のラジアルグラデーションを備えた深いOLEDブラック背景を使用。見出しにはその上にアイブロウタグバッジを備えた大きなGroteskフォントを使用。コールトゥアクションボタンにはネストされたトレーリング矢印アイコンが下に配置。整个セクションはインタラクティブ要素へのスムーズな立方体-bezierトランジションを備えた寛大な垂直パディングを使用。
「high-end-visual-design」を使用しています。 プレミアムダッシュボード用のカードコンポーネントを設計
期待される結果:
- カードは1.5remボーダー半径と微妙なリングボーダーを備えた外側シェルラッパーを持つダブルベゼルパターンを使用。内部コアはそれ自体の背景色を持ち、インセットハイライトシャドウと集中曲線のための計算された小さな半径を使用。ホバー状態には微妙なスケールと対角線アイコン翻訳が含まれる。カードはアンビエント拡散シャドウを備えた暗い背景に座る。
セキュリティ監査
安全The static analyzer flagged 107 patterns, but all are false positives. The 94 external_commands detections are markdown inline code backticks (e.g., `Vanguard_UI_Architect`, `backdrop-blur-2xl`), not shell execution. The 13 high-risk cryptographic detections are CSS hex color values (e.g., #050505, #FDFBF7) misidentified as weak algorithms. The 4 system reconnaissance detections are triggered by dollar signs in prices ($150k) and unrelated text. The file contains only markdown design guidance with no executable code, no network access, and no filesystem operations. Safe to publish.
品質スコア
作れるもの
プレミアムランディングページを構築
ガラスモーフィズムエフェクト、ステージドアニメーション、非対称な Bento グリッドレイアウトを備えた高コンバージョンランディングページを生成。
既存のダッシュボードを再設計
ネストされたカードアーキテクチャとスムーズなホバーインタラクションを備えた、基本的な管理ダッシュボードを代理店の品質を持つインターフェースに変換。
ポートフォリオウェブサイトを作成
大規模なタイポグラフィ、ソフトシャドウ、シネマティックなスクロールアニメーションを備えたエディトリアルスタイルのポートフォリオを構築。
これらのプロンプトを試す
非対称なBentoレイアウトを備えたエセリアルガラス原型を使用して、SaaS製品のヒーローセクションを作成。
ステージドリンクリビールを備えたフルスクリーンオーバーレイに展開するモーフィングハンバーガーメニューを持つ、フローティングピル形状のナビゲーションバーを設計。
Z軸カスケードレイアウト、セリフタイポグラフィ、スクロールトリガー付きフェードアップアニメーションを備えたエディトリアルラグジュアリー原型を使用した推薦文セクションを作成。
ベストプラクティス
- 一貫したデザイン言語を確保するために、コード生成前に常に1つのバイブ原型と1つのレイアウト原型を選択
- GPUパフォーマンスを維持し、レイアウトトリガープロパティを避けるため、すべてのアニメーションにtransformとopacityを使用
- スクロールコンテナには決して適用せず、backdrop-blurフィルターは固定またはスティッキー要素にのみ適用
回避
- プレミアムデザインではInter、Roboto、Arialなどの一般的なフォントを決して使用しない
- 平坦で非生物的な動きを作成するlinearまたはease-in-outトランジションを決して適用しない
- 連続的なリフローを引き起こしモバイルパフォーマンスを損なうため、window.scrollイベントリスナーを決してスクロールアニメーションに使用しない