効果的なプロンプトを作成し、Spark に役立つコンテキストを提供する

Sparkするアプリのアイデアを説明するときに最適な結果を得る方法について説明します。

この機能を使用できるユーザーについて

Anyone with a Copilot Pro+, Copilot Max（コパイロット・マックス）, or Copilot Enterprise license can use Spark.

この記事で

はじめに

Spark は、単一の自然言語プロンプトから発行可能な Web アプリを構築できます。

Sparkに送信するプロンプトとコンテキストを改善して、Sparkアプリのアイデアを最も効果的に現実に変える方法がいくつかあります。

Sparkでビルドを開始するには、https://github.com/sparkに移動します。

Copilotと組み合わせて、最初のSpark プロンプトを微調整する

Copilotにコンテキストと指示を提供することで、Copilotは最初のプロンプトをSparkするように調整し、要件を最適に伝えることができます。

  1. コパイロットチャット を開きます。

  2. 次のプロンプトを Copilotに送信し、独自のアプリのアイデアに合わせて単語を編集します。

    Copilot prompt
    I have a no-code app builder that can build an entire app through a single prompt. It's called GitHub Spark. Let's work together to build a Spark prompt.

The prompt should focus on adequately describing the features and requirements so I can get an great app that [DESCRIBE APP IDEA].

Do not include in the prompt where to place files in the project directory, explain coding standards, tell the agent how to code a feature, or request a README.

The prompt should use vibrant and specific language to describe the app idea.

The final prompt should allow the app to be extensible and easily iterated on.

Ask follow up questions if necessary.

  3. 新しいブラウザー タブで、 Sparkを開きます。

  4. Copilotの出力をSparkの入力フィールドに貼り付けて、Spark を生成します。

Markdown ドキュメントをアップロードする

Sparkするプロンプトに非常に詳細な要件を含めるには、README.mdなどのマークダウン ファイルをSparkの入力フィールドにドラッグ アンド ドロップし、次のプロンプトの例を使用します。

プロンプトの例

Copilot prompt
Build a production-ready app inspired by the requirements outlined in this markdown file.

Carefully interpret the features, user flows, and design details described, and transform them into a visually engaging, intuitive, and responsive application.

Prioritize usability, accessibility, and seamless user experience throughout.

スケッチや画像をアップロードする

デジタル ツールを使って、または手書きでアプリのアイデアをスケッチできます。 次に、デザインの写真またはスクリーンショットを撮り、次のプロンプトの例と共に、 Sparkの入力フィールドに画像を添付します。

プロンプトの例

Copilot prompt
Build a production-ready app inspired by the attached image.

Interpret the visual design, layout, and any details shown in the image to create a vibrant, intuitive, and user-friendly experience.

Prioritize usability, accessibility, and seamless user experience throughout.

スタイル要件を具体的に指定する

Sparkでは、ガラスの形、ミニマリスト、レトロ、遊び心など、特定のデザイン スタイルを参照できます。 また、フォント スタイル、カラー パレット、アニメーション効果の詳細を指定したり、 Spark ビジョンに合ったインターフェイスを作成したりできます。

プロンプトの例

Copilot prompt
Design my task management app with a glassmorphic style. Use modern, rounded sans-serif fonts for a sleek, contemporary look, and add gentle animations when tasks are completed.