impeccable
AIで洗練されたフロントエンドインターフェースを構築する
AIが生成するインターフェースは一般的に画一的でテンプレート化されがちです。Impeccableはエキスパートのデザイン判断を通じてAIを導き、独自性があり本番環境レベルのフロントエンドコードを生み出します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「impeccable」を使用しています。 大胆なタイポグラフィと非対称レイアウトのクリエイティブエージェンシーポートフォリオのヒーローセクションを作成する
期待される結果:
clamp() を使用した流体ディスプレイタイポグラフィ、可変スペーシングによる非対称グリッドレイアウト、フォント選択手順を通じて選ばれた独自のフォントペアリング、スクインテストをクリアする明確なビジュアルヒエラルキーを備えたレスポンシブヒーローセクション。
「impeccable」を使用しています。 カラー値に一貫性のないページから再利用可能なトークンを抽出する
期待される結果:
OKLCH ベースのプリミティブカラー、ティントニュートラルスケール、プライマリおよびステータスカラーのセマンティックカラーマッピング、各トークンの使用タイミングに関するドキュメントを備えた一貫性のあるデザイントークンシステム。
「impeccable」を使用しています。 適切なバリデーションを備えたアクセシブルな問い合わせフォームをデザインする
期待される結果:
表示ラベル、blur時のバリデーション、aria-describedby を使用した説明的なエラーメッセージ、focus-visible を使用した適切なフォーカスリング、モバイルユーザーに適切なサイズのタッチターゲットを備えたフォーム。
セキュリティ監査
低リスクAll 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
低リスクの問題 (1)
リスク要因
⚙️ 外部コマンド (1)
品質スコア
作れるもの
マーケティングサイトのリニューアル
スタートアップの創設者が、同質的なSaaSテンプレートが氾濫する中でランディングページを際立たせたいと考えています。Impeccableは、独自性の高いタイポグラフィとカラーチョイスによる大胆な美学の方向性を通じてAIを導きます。
デザインシステムの立ち上げ
既存のコードベースから一貫したデザイントークン、コンポーネント、パターンを抽出し、再利用可能なデザインシステムにまとめる必要があります。extractモードは再利用可能なパターンを特定し、形式化します。
アクセシブルなフォームとインタラクションデザイン
プロダクトチームが、適切にデザインされたフォーム、フォーカス状態、ローディングパターン、キーボードナビゲーションを必要としています。ImpeccableはWCAG準拠、Popover API、フォーカスリングデザインに関する参考資料を提供します。
これらのプロンプトを試す
/impeccable teach を実行して、プロジェクトのデザインコンテキストを収集します。まずコードベースをスキャンし、次に回答が必要な質問を投げかけてください。
/impeccable craft を実行してSaaSプロダクトのプライシングページを作成します。ターゲットオーディエンスは明確性とスピードを重視する中小企業のオーナーです。ブランドトーンは自信に満ち、実用的で、無駄のないものです。
/impeccable extract を実行して、既存のコンポーネントライブラリから共有デザイントークンと再利用可能なコンポーネントを抽出します。カラー、スペーシング、タイポグラフィ、バリエーションに焦点を当ててください。
/impeccable craft を実行して、SREが使用するオブザーバビリティツールのダークモードダッシュボードを作成します。インターフェースは情報密度が高い一方で読みやすさを保ち、抑制されたカラーパレットと強力なデータ可視化の階層構造が必要です。
ベストプラクティス
- デザイン作業を生成する前に、必ずユーザーからデザインコンテキストを収集してください。まず既存の指示を確認し、次に .impeccable.md を確認し、teachフローを実行します。
- 安全で一般的なデフォルトに後退するのではなく、大胆な美学の方向性にコミットしてください。マキシマリズムとミニマリズムはどちらも、意図を持って実行されれば機能します。
- すべての出力でAI slopテストを実行してください：これをAI生成物として即座に認識されてしまうでしょうか？その場合、デザインはより独自性の高い創造的な判断が必要です。
回避
- Inter、Fraunces、Space Grotesk、Cormorant などのリフレックスフォントの使用。これらはAI生成プロジェクト間で画一化を生み出します。
- ダーク背景にシアン、紫から青へのグラデーション、グローイングアクセントの使用。これらは最も認識されやすいAIデザインの特徴です。
- カードのborder-leftアクセントストライプ、グラデーションテキスト、グラスモーフィズムの装飾としての使用。これらはAI slopパターンとして明示的に禁止されています。
よくある質問
Impeccableはいつ起動すべきですか？
craft、teach、extractモードの違いは何ですか？
ImpeccableはReact、Vue、その他のフレームワークで動作しますか？
ImpeccableはAIらしい汎用的なデザインをどのように防いでいますか？
Impeccableはアクセシビリティ準拠に役立ちますか？
Impeccableを新しいバージョンに更新するとどうなりますか？
開発者の詳細
作成者
pbakausライセンス
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
参照
main