효과적인 프롬프트를 작성하고 Spark에 유용한 컨텍스트 제공

Spark에 앱 아이디어를 설명할 때 최상의 결과를 얻는 방법을 알아보세요.

누가 이 기능을 사용할 수 있나요?

Anyone with a Copilot Pro(프로)+ license can use Spark.

이 문서의 내용

소개

Spark는 단일 자연어 프롬프트만으로도 게시 가능한 웹앱을 빌드할 수 있습니다.

Spark에 보내는 프롬프트와 컨텍스트를 개선할 수 있는 몇 가지 방법이 있으며, 이를 통해 Spark가 앱 아이디어를 가장 효과적으로 현실로 실현할 수 있습니다.

Spark로 빌드를 시작하려면 https://github.com/spark로 이동하세요.

Copilot과 페어링하여 초기 Spark 프롬프트 미세 조정

Copilot에 컨텍스트와 지침을 제공하면 Copilot이 초기 프롬프트를 Spark로 개선하여 요구 사항을 가장 잘 전달하는 데 도움이 될 수 있습니다.

  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.