ブランディング向けの Agent Skills

トークンアーキテクチャ、コンポーネント仕様、スライド生成。3層トークン(プリミティブ→セマンティック→コンポーネント)、CSS変数、スペーシング/タイポグラフィスケール、コンポーネント仕様、戦略的スライド作成。デザイントークン、体系的なデザイン、ブランド準拠のプレゼンに使用。

提供元：nextlevelbuilder/ui-ux-pro-max-skill

• System

ユーザーのコードベース向けにカスタムデザインシステムルールを生成します。ユーザーが「create design system rules」「generate rules for my project」「set up design rules」「customize design system guidelines」と言った場合や、Figma-to-codeワークフロー向けのプロジェクト固有の規約を確立したい場合に使用します。Figma MCPサーバー接続が必要です。

提供元：openai/skills

• System

前提条件（自己申告）: MCP server

アプリケーションのページ、ビュー、または複数セクションのレイアウトをFigmaへ変換するタスクでは、figma-useと併用してこのスキルを使用します。トリガー例:「Figmaに書き出して」「コードからFigmaで作成して」「ページをFigmaにプッシュして」「このアプリ/ページをFigmaで構築して」「画面を作成して」「Figmaでランディングページを構築して」「コードに合わせてFigma画面を更新して」。ユーザーがコードや説明からFigmaで完全なページ、画面、ビューを構築または更新したいときは常に、このワークフロースキルが推奨されます。search_design_systemでデザインシステムのコンポーネント、変数、スタイルを発見し、それらをインポートし、ハードコードされた値ではなくデザインシステムのトークンを使ってセクションごとに画面を段階的に組み立てます。

提供元：openai/skills

公開ウェブサイトからデザインプリミティブを抽出し、プロジェクト用のスタータートークンファイルを生成します。

提供元：arvindrk/extract-design-system

Stitchプロジェクトを分析し、意味論的なデザインシステムをDESIGN.mdファイルに統合。

提供元：google-labs-code/stitch-skills

FigmaのコンテンツをHyperFramesコンポジションにインポートします — レンダリング済みアセット、ブランドトークン、コンポーネント、ストーリーボードセクション → 再構築されたモーション(フレームはスライドではなく状態として読まれる)(REST/CLI)、利用可能な場合はコネクタ支援のモーション、コネクタまたはネイティブエクスポートからのシェーダー。ユーザーが…

提供元：heygen-com/hyperframes

• Identity

HyperFrames 動画向けの非アニメーションのクリエイティブディレクション。デザイン仕様（frame.md / design.md）の扱い、パレット、タイポグラフィ、ナレーション、ビート設計、音声リアクティブなビジュアル、コンポジションパターン、ブランド/スタイルの判断に使用する。アトミックなモーションパターンとシーンブループリントには…を使用する。

提供元：heygen-com/hyperframes

ランディングページ、ポートフォリオ、リデザイン向けのアンチスロップなフロントエンドスキル。エージェントはブリーフを読み、適切なデザイン方向を推測し、テンプレートに見えないインターフェースを出荷。該当する場合は実際のデザインシステムを使用し、リデザインでは監査を優先し、厳格なプリフライトチェックを実施。

提供元：leonxlnx/taste-skill

• Brand strategy
• Identity

既存のウェブサイトやアプリをプレミアム品質にアップグレード。現在のデザインを監査し、ありがちなAIパターンを特定し、機能を壊さずにハイエンドなデザイン基準を適用。任意のCSSフレームワークやバニラCSSで動作。

提供元：leonxlnx/taste-skill

Web、モバイル、デスクトップ向けのUI/UXデザイン知能。ページ、コンポーネント、デザインシステム、アクセシビリティ、インタラクション、レスポンシブレイアウト、タイポグラフィ、色、チャート、スタック固有のUI実装など、インターフェースの設計、構築、レビュー、修正時に使用。…

提供元：nextlevelbuilder/ui-ux-pro-max-skill

エリートUX/UI＆アドバンスドGSAPモーションエンジニア。レイアウトの多様性のためのPython駆動の真のランダム化、厳格なAIDAページ構造、ワイドなエディトリアルタイポグラフィ（6行折り返しを禁止）、隙間のないベントーグリッド、厳格なGSAP ScrollTriggers（ピン留め、スタッキング、スクラビング）、インラインのマイクロ画像、そして巨大な…

提供元：leonxlnx/taste-skill

Google Stitch向けのセマンティックデザインシステムスキル。プレミアムで汎用的でないUI基準を強制するエージェントフレンドリーなDESIGN.mdファイルを生成します — 厳格なタイポグラフィ、調整された色、非対称レイアウト、絶え間ないマイクロモーション、ハードウェアアクセラレーションによるパフォーマンス。

提供元：leonxlnx/taste-skill

ユーザーがフロントエンドインターフェースを設計、再設計、形作る、批評する、監査する、磨く、明確にする、蒸留する、堅牢化する、最適化する、適応させる、アニメーション化する、彩色する、抽出する、その他改善したいときに使用。ウェブサイト、ランディングページ、ダッシュボード、プロダクト UI、アプリシェル、コンポーネント、フォーム、設定、オンボーディング、…

提供元：pbakaus/impeccable

前提条件（自己申告）: Node.js

Tailwind CSS v4、デザイントークン、コンポーネントライブラリ、レスポンシブパターンでスケーラブルなデザインシステムを構築。コンポーネントライブラリの作成、デザインシステムの実装、UIパターンの標準化に使用。

提供元：wshobson/agents

• System

Firecrawlのスクレイプ証拠を用いて、あらゆるウェブサイトのデザインシステムをエージェント対応のDESIGN.mdに抽出します。ユーザーがウェブサイトから色、フォント、スペーシング、コンポーネント、レイアウトパターン、ブランド/UIガイダンスを取得し、AIエージェントが新しいウェブサイトを作成したり、見た目をクローンしたり、その…にインスパイアされたページを構築できるようにしたい場合に使用します。

提供元：firecrawl/firecrawl-workflows

• Identity
• System

Penpotデザインのデザインシステム／トークンガバナンス問題（アクセシビリティとは別）を監査する：トークンが存在するのにハードコードされた色、グリッドから外れた間隔、孤立／未解決／未使用のトークン、重複した値、コンポーネントインスタンスであるべき分離されたパーツ。重大度レポートを生成し、セマンティックトークンへの置き換えを提案する。トリガー：「audit tokens」「find hardcoded colors」「token governance」「check design system consistency」「find off-grid spacing」「detect raw values」「are we using tokens correctly」。

提供元：penpot/penpot-ai-kit

既存のアプリケーションページ、ビュー、またはコンポーネントのコードを、既存のデザインシステムにバインドされたPenpotスクリーンに変換します。コードのスタイルをセマンティックトークンにマッピングし、生のシェイプではなくライブラリコンポーネントを再利用します。ユーザーが実際のコード/マークアップを持ち、それをPenpotでセクションごとにオンステムで再構築したい場合に使用します。トリガー：「build this in Penpot from code」「turn this React/HTML/CSS into a Penpot screen」「recreate this view in Penpot」「port this page to Penpot」「translate this component to Penpot bound to our tokens」「code to Penpot」。

提供元：penpot/penpot-ai-kit

シニアビジュアルデザイナーとして、ブリーフからPenpotで本番品質の画面を設計します — 既存のデザインシステム（トークン＋コンポーネント）を再利用し、セクションごとに組み立て、決して一発で仕上げません。説明から画面/ページ/ランディング/ダッシュボードを作成する際に使用します。既存コードの変換には使用しません（penpot-build-from-codeを使用）。トリガー：「ダッシュボードをデザインして」「ランディングページを作成して」「このアプリ画面をデザインして」「このブリーフからUIを構築して」「設定ページをデザインして」「Penpotで画面をモックアップして」。

提供元：penpot/penpot-ai-kit

PenpotファイルからDESIGN.mdデザインドキュメントファイルを抽出する：design-md形式のポータブルなMarkdown仕様（色・タイポグラフィ・角丸・スペーシング・コンポーネントのトークンマップを含むYAMLフロントマター＋Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gapsの散文セクション）。ファイルの実際のトークン、ライブラリアセット、サンプリングしたコンポーネントスタイルに基づき、決して創作しない。キャンバスは読み取り専用で、ローカルのMarkdownファイルを1つ書き出す。トリガー：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。

提供元：penpot/penpot-ai-kit

Penpotデザインを実装コード（ソースコンポーネントまたはStorybookストーリー）と照合してレビューし、構造化されたDRIFTレポートを出力します。エンジニアがビルドがデザインと一致するか確認する必要があるときに使用します。選択範囲からHTML/CSSを抽出し、そのトークン/構造/状態をコードコンポーネントにマッピングし、差分を取り、各側に欠けているものを重大度と調整案とともに列挙します。コードソースが提供されない場合は、デザインシステムトークンのチェックに優雅にフォールバックします。トリガー: 'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。

提供元：penpot/penpot-ai-kit