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

アプリのアイデアを Spark に説明する際に、最良の結果を得る方法について説明します。

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

Anyone with a Copilot Pro+ license can use Spark.

この記事の内容

はじめに

Spark を使うと、1 つの自然言語プロンプトから公開可能な Web アプリを構築できます。

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

Spark を使った構築を始めるには、https://github.com/spark にアクセスしてください。

Copilot と連携して最初の Spark プロンプトを微調整する

Copilot にコンテキストと指示を与えることで、Spark に対する最初のプロンプトが Copilot によって調整され、要件をより的確に伝えられるようになります。

  1. Copilot Chat を開きます。

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

    Copilot Chat 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 などの Markdown ファイルを Spark の入力フィールドにドラッグ アンド ドロップし、次のプロンプト例を使います。

プロンプトの例

Copilot Chat 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 Chat 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 Chat 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.