Communitygithub.com

xntj-ai/ppvi

PinPin Visual Identity(ピンピン・ビジュアル・アイデンティティ)— Claude Codeスキル。制限、グレースケールベース、厳格な階層、グラスモーフィズム、密度の呼吸という5つのコア原則で、AI生成Webページに意図的なデザインをもたらします。

ppvi とは?

このスキルは、AIエージェントが生成するWebページのビジュアル品質を大幅に向上させるための、実戦で磨かれたデザイン手法を定義しています。Claude CodeのようなAIコーディングエージェントがフロントエンドコード(HTML/CSSなど)を生成する際に、一般的で安っぽい見た目になるのを防ぎ、意図的でプロフェッショナルなビジュアルアイデンティティを実現します。「制限(restraint)」「グレースケールベース(grayscale base)」「厳格な階層(strict hierarchy)」「グラスモーフィズム(glassmorphism)」「密度の呼吸(density breathing)」という5つの核となる原則に基づいて、配色、スペーシング、コンポーネントのスタイリング、視覚的重みのバランスをガイドします。これらの原則は、ホワイトスペース、限られたカラーパレット、一貫したタイポグラフィ階層、半透明のガラス効果、そしてコンテンツ密度の意図的なコントラストを通じて、AIに「ミニマルで洗練された」デザインの判断を下させるためのルールセットとして機能します。このスキルは主にClaude Codeを対象としていますが、CursorやCodexなど、カスタムスキルや指示をサポートする他のAIエージェントにも適用可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add xntj-ai/ppvi

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ppvi は何をしますか?

PinPin Visual Identity(ピンピン・ビジュアル・アイデンティティ)— 実戦で磨かれたデザイン手法をコード化したClaude Codeスキル。5つのコア原則(制限、グレースケールベース、厳格な階層、グラスモーフィズム、密度の呼吸)により、AIが生成するWebページを凡庸ではなく、意図的に見せます。

  • ソース: https://github.com/xntj-ai/ppvi
  • GitHubスター: 9
  • 最終プッシュ: 2026-06-16T10:15:44Z
  • Awesome Skillsデイリースキルハンターにより2026-06-16に追加。

関連スキル