Communitygithub.com

posimyth/uichemy-cursor-plugin

デザインアイデア、モックアップの説明、ムードボード、ブランド概要をUiChemyでWordPress対応サイトに変換し、ElementorまたはGutenbergにエクスポートします。

uichemy-cursor-plugin とは?

このスキルは、ユーザーがスタイル、ムードボード、デザインの説明、添付画像などの「ルック」から出発し、それを編集可能なWordPressサイトに変換するためのものです。Figmaファイルを直接読み取ることはできませんが、ユーザーがチャットで説明や画像を提供することで、その情報を基にUiChemyプロジェクトを作成します。スキルは、ビジネス情報、ページ構成、色、フォント、レイアウトを自動的に選択し、ElementorまたはGutenbergへのエクスポートまでをガイドします。このスキルは、Cursor、Claude Code、CodexなどのAIエージェントプラットフォームで使用でき、デザインからWordPressサイトへの迅速な変換を実現します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/posimyth/uichemy-cursor-plugin/tree/HEAD/skills/design-to-wordpress

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

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

ドキュメント

このスキルは、ユーザーが「ルック」(スタイル、ムードボード、デザインの説明、添付画像)から始めて、それを編集可能なWordPressサイトにしたい場合に使用します。

このプラグインはFigmaファイルを読み取ったり、別のWebサイトを開いたりすることはできません。ユーザーがこのチャットで記述または添付した内容に基づいて動作します。ユーザーがFigmaファイルの変換を必要としている場合は、その旨を1行で伝え、代わりに説明からデザインを再構築することを提案します。

手順:

  1. メッセージから以下の情報を収集します: ビジネス、ページ、ムード、色、フォント、画像。ビジネスの種類や名前が不足している場合のみ、バッチ処理された質問を1回行います。その他の選択は自分で行い、その選択を明示します。
  2. build-site-from-briefスキルに従ってプロジェクトを作成します。ルックを16進数の色、見出しフォント、本文フォントに変換し、説明されたスタイルに合ったレイアウトを選択します。
  3. uichemy_validateとuichemy_check_responsiveを実行し、報告された問題を修正します。
  4. ユーザーにElementorまたはGutenbergのどちらのビルダーを使用するか尋ね、export-to-wordpressスキルに従ってプロジェクトをエクスポート済みとしてマークします。
  5. ユーザーに構築した内容、行ったスタイルの選択、次のステップ(UiChemy WordPressプラグインを使用してWordPressサイトに取り込む、またはサイトアドレスが提供された場合はdeploy-to-own-wordpressに従う)を伝えます。

ルール:

  • 他社のコピー、ロゴ、画像をコピーしないでください。ユーザーが所有しているか、使用権限を持つコンテンツのみを使用します。
  • ユーザーが提供した画像URL、またはuichemy_upload_imageが返した画像URLのみを使用します。
  • プロジェクトを作成する前に、新しいプロジェクトがUiChemyアカウントに表示されることを伝えてください。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル