mcpField
M
muapi-url-to-design

muapi-url-to-design

github.com/samuraigptデザイン・UI25659 回インストール4 週間前に更新
リポジトリ

muapi-url-to-design について

muapi-url-to-designは、ウェブサイトのURLまたは提供されたスクリーンショットから、デスクトップとモバイルの改版モックアップを作るLLMオーケストレーション型スキルです。ページ種別、デザインの方向性、既存ブランドを維持するかを指定できます。

主な機能

  1. 01デスクトップ版の改版モックアップを生成
  2. 02モバイル版の改版モックアップを生成
  3. 03ページ種別とビジュアルスタイルを指定
  4. 04ブランド要素を維持するか選択
  5. 05URLを取得できない場合にスクリーンショットを使用

活用シーン

  1. 01ランディングページの改版案を検討
  2. 02デスクトップとモバイルのページ案を比較
  3. 03提供されたスクリーンショットを基にページを改版

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-url-to-design

インストール後、Claude Code で/muapi-url-to-designを入力して読み込まれたか確認します。

詳細

URL からデザインを作成

Web サイトの URL を分析し、デザインを刷新して改善した UI を生成します。モダンな美しさ、優れた階層構造、新しいブランドの方向性で、ビジュアルデザインを再現します。

入力

名前型必須デフォルト説明
urlテキストはい—分析してデザインを刷新する Web サイトの URL（例："https://example.com/pricing"）。
page_typeテキストいいえランディングページページの種類 — "ランディングページ"、"料金ページ"、"製品ページ"、"ダッシュボード"、"概要ページ"。
redesign_styleテキストいいえモダン、ミニマル、プレミアム、ダークモードデザイン刷新後のビジュアルスタイル（例："グラスモーフィズム、鮮やかなグラデーション"、"洗練されたコーポレート、ライトモード"）。
keep_brandテキストいいえはい既存のブランドカラーやロゴを維持するかどうか — "はい"または"いいえ"（全面的に再構想）。
screenshotimage_urlいいえ—URL をクロールできない場合に使用する、現在のページの任意のスクリーンショット。

手順

フェーズ A — デザイン刷新の生成

次の 2 つのステップを並行して実行するよう依頼します。

  1. フルページのデザイン刷新モックアップ — {{screenshot}} が指定されている場合は muapi image edit（model=gpt4o-edit）を使用し、それ以外の場合は muapi image generate（model=gpt4o-text-to-image）を使用します：

    • プロンプト：Professional UI/UX redesign of a {{page_type}} for the website at {{url}}. {{redesign_style}} design. Modern web design, 2025 aesthetic. Includes: hero section with clear headline and CTA button, features/benefits section, social proof, clean footer. Pixel-perfect, Figma-quality mockup. Desktop viewport, 1440px width design.
    • {{keep_brand}} が "no" の場合は、次を追加します：Completely reimagined brand identity, new color palette.
    • アスペクト比：9:16（ページ全体のセクションが表示される縦長）

  2. モバイル版モックアップ — muapi image generate（model=bytedance-seedream-v4.5）：

    • プロンプト：Mobile-first responsive redesign of the same {{page_type}} — {{redesign_style}} style. iPhone 15 Pro frame, scrollable layout. Clean mobile navigation, thumb-friendly CTAs, optimized for 390px width. Modern 2025 mobile UI design.
    • アスペクト比：9:19.5

生成後：

  • デスクトップ版とモバイル版のモックアップを並べて表示します
  • デザインの改善点を文章で要約します
  • ヒーロー、料金カード、お客様の声など、特定のセクションを個別のアセットとして生成することを提案します

注意事項

  • URL にアクセスできない場合は、スクリーンショットの提供または現在のデザインの説明をユーザーに依頼します。
  • タイポグラフィの階層構造、余白、CTA の視認性、モバイル対応は必ず改善します。

トリガーキーワード

url to design、redesign website、website redesign、ui redesign、landing page design、page redesign、website to design、convert url to design

実行エージェント向けの注意事項

  • このレシピは LLM によってオーケストレーションされます。各フェーズを読み、不足している入力をユーザーから集めてから、muapi CLI コマンドを呼び出します。MUAPI_API_KEY が設定されていない場合は、まず muapi auth configure を使用します。
  • まだ CLI エイリアスがないモデル ID については、curl -X POST https://api.muapi.ai/api/v1/<endpoint> -H "x-api-key: $MUAPI_API_KEY" -H 'content-type: application/json' -d '{...}' で未加工のエンドポイントにアクセスし、muapi predict wait <request_id> でポーリングします。
  • 各呼び出しを実行する前に、{{input_name}} プレースホルダーをユーザーの実際の入力に置き換えます。

コメント

Markdown 対応