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

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

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

Anyone with a Copilot Pro+, Copilot 맥스, or Copilot Enterprise license can use Spark.

이 기사에서

소개

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

보내는 프롬프트와 컨텍스트를 개선하여 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의 입력 필드에 붙여넣어 스파크를 생성합니다.

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.