Hypermatic Agent Skillsは、AIエージェントにWeblifyの簡潔な手順書を提供します。Weblifyのスキルは、サイト全体のエクスポート、選択レイヤーのコードのインスペクト、Webサイトのインポート、ローカルでの編集、デプロイを区別し、エージェントがそれぞれの結果を正確に報告できるようにします。

Hypermatic Agent Skillsをインストール

ターミナル用のインストーラーか、ターミナル不要のプロンプトをコピーします。1回のインストールで、Hypermaticの12個のプラグインのスキルがすべて入ります。

Weblifyのスキルをインストールする

1. Hypermatic Agent Skillsを開きます。
2. ターミナル用のコマンドをコピーするか、ターミナル不要のプロンプトをコピーしてエージェントに貼り付けます。
3. インストール済みのスキルにhypermatic-weblifyが表示されていることを確認します。
4. タスクにWeblifyのスキルを使うよう、エージェントに依頼します。

スキルでできること

• 完全な静的HTML・CSSのWebサイトを作成、プレビュー、監査、エクスポートする。
• 選択したFigmaレイヤーを、HTML、Tailwind、React、Vueのコードとしてインスペクトする。
• 公開サイトやログインが必要なサイトのコンテンツを、安全にFigmaにインポートする。
• 生成したコード、ローカルのブラウザでの確認、実際のデプロイを区別する。

Quick Actions

サポートされている繰り返しのタスクは、プラグインのパネルを表示せずにWeblifyのQuick Actionsで実行できます。リファレンスには、プレーンなフィールドの例、選択に関する要件、機械可読なレジストリが含まれています。インストール済みのプラグインのQuick Actionsの一覧から、サポートされているアクションを選んでください。結果は、通常の通知、ドキュメントの変更、保存されたファイルとして返されます。

プロンプトの例

• Use the Weblify skill to audit and export this responsive Figma page.
• Use the Weblify skill to inspect this component as React code.
• Use the Weblify skill to validate the exported static website locally.

承認と確認

エージェントはワークフローを案内できるほか、依頼した変更を承認すれば、利用可能なFigma、ブラウザ、ファイルシステム、コンピューター操作のツールを使って作業することもできます。クリップボードからのインポート、メタデータの修復、リポジトリの編集、デプロイは、それぞれ別の操作です。生成されたZIPやローカルのプレビューは、Webサイトがデプロイされた証拠にはなりません。

トライアルの上限

Weblifyがトライアル回数を使い切ったと表示した場合、エージェントは再試行をやめ、Weblifyの料金と購入オプションを案内する必要があります。決済とライセンスの有効化はご自身で行い、Weblifyが有効になったらエージェントに伝えてください。

スキルを最新に保つ

Hypermatic Agent Skillsに戻り、Updateコマンドを使って、Weblifyの最新の安定版の手順をインストールします。