Spark docs improvements (Part I) (#57416)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jules <19994093+jules-p@users.noreply.github.com>

content/copilot/tutorials/index.md

@@ -10,11 +10,10 @@ children:
   - /copilot-chat-cookbook
   - /customization-library
   - /coding-agent
+  - /spark
   - /enhance-agent-mode-with-mcp
   - /compare-ai-models
   - /speed-up-development-work
-  - /easy-apps-with-spark
-  - /build-apps-with-spark
   - /roll-out-at-scale
   - /explore-a-codebase
   - /explore-issues-and-discussions

content/copilot/tutorials/spark/build-apps-with-spark.md

@@ -1,6 +1,6 @@
 ---
 title: Building and deploying AI-powered apps with GitHub Spark
-shortTitle: Build apps with Spark
+shortTitle: Build and deploy apps
 allowTitleToDifferFromFilename: true
 intro: 'Learn how to build and deploy an intelligent web app with natural language using {% data variables.product.prodname_spark %}.'
 versions:
@@ -10,6 +10,7 @@ topics:
   - Copilot
 redirect_from:
   - /copilot/tutorials/building-ai-app-prototypes
+  - /copilot/tutorials/build-apps-with-spark
 contentType: tutorials
 ---
 
@@ -19,11 +20,9 @@ contentType: tutorials
 
 ## Introduction
 
-With {% data variables.product.prodname_spark %}, you can describe what you want in natural language and get a fullstack web app with data storage, AI features, and {% data variables.product.github %} authentication built in. You can iterate using prompts, visual tools, or code, and then deploy with a click to a fully managed runtime.
+{% data reusables.copilot.spark-overview %}
 
-{% data variables.product.prodname_spark_short %} is seamlessly integrated with {% data variables.product.github %} so you can develop your spark via a synced {% data variables.product.github %} codespace with {% data variables.product.prodname_copilot_short %} for advanced editing. You can also create a repository for team collaboration, and leverage {% data variables.product.github %}'s ecosystem of tools and integrations.
-
-This tutorial will guide you through building and deploying an app with {% data variables.product.prodname_spark_short %} and exploring its features.
+This tutorial will guide you through the full lifecycle of building and deploying an app with {% data variables.product.prodname_spark_short %} and exploring its features.
 
 ### Prerequisites
 
@@ -49,7 +48,7 @@ For this tutorial, we'll create a simple marketing tool app, where:
    ```
 
    > [!TIP]
-   > * Be specific, and provide as many details as possible for the best results. You can [{% data variables.copilot.copilot_chat_short %}](https://github.com/copilot) to refine or suggest improvements to your initial prompt.
+   > * Be specific, and provide as many details as possible for the best results. You can ask [{% data variables.copilot.copilot_chat_short %}](https://github.com/copilot) to refine or suggest improvements to your initial prompt.
    > * Alternatively, drop a markdown document into the input field to provide {% data variables.product.prodname_spark_short %} with more context on what you're hoping to build.
 
 1. Optionally, upload an image to provide {% data variables.product.prodname_spark_short %} with a visual reference for your app. Mocks, sketches, or screenshots all work to provide {% data variables.product.prodname_spark_short %} with an idea of what you want to build.
@@ -146,7 +145,7 @@ You can view or edit your app’s code directly in {% data variables.product.pro
 > * You can also choose to share your spark as **read-only** so that other users can view your app's content, but they cannot edit content, delete files or records, or create new items.
 
 1. In the top right corner, click **Publish**.
-1. By default, your spark will be private and only accessible to you. Under "Visibility", choose whether you want your spark to remain private, or make it available to all {% data variables.product.github %} users.
+1. By default, your spark will be private and only accessible to you. Under "Visibility", choose whether you want your spark to remain private, or make it available to members of a specific organization on {% data variables.product.github %}, or all {% data variables.product.github %} users.
 
    ![Screenshot of the {% data variables.product.prodname_spark %} publication menu. The "All {% data variables.product.github %} users" visibility option is outlined in orange.](/assets/images/help/copilot/spark-github-user-visibility.png)
 

content/copilot/tutorials/spark/index.md

@@ -0,0 +1,14 @@
+---
+title: Building apps with GitHub Spark
+shortTitle: Spark
+intro: 'Learn how to build and deploy an app using natural language with GitHub Spark.'
+versions:
+  feature: spark
+topics:
+  - Copilot
+children:
+  - /your-first-spark
+  - /prompt-tips
+  - /build-apps-with-spark
+contentType: tutorials
+---

content/copilot/tutorials/spark/prompt-tips.md

@@ -0,0 +1,80 @@
+---
+title: Write effective prompts and provide useful context for Spark
+shortTitle: Prompt tips
+intro: 'Learn how to get the best results when you are describing your app idea to {% data variables.product.prodname_spark_short %}.'
+allowTitleToDifferFromFilename: true
+versions:
+  feature: spark
+product: 'Anyone with a {% data variables.copilot.copilot_pro_plus_short %} license can use {% data variables.product.prodname_spark_short %}.'
+contentType: tutorials
+---
+
+## Introduction
+
+{% data variables.product.prodname_spark_short %} can build a publishable web app from a single natural language prompt.
+
+There are a couple of ways to improve the prompt and context you send to {% data variables.product.prodname_spark_short %}, to help {% data variables.product.prodname_spark_short %} most effectively turn your app idea into reality.
+
+To start building with {% data variables.product.prodname_spark_short %}, go to https://github.com/spark.
+
+## Pair with {% data variables.product.prodname_copilot_short %} to fine-tune your initial {% data variables.product.prodname_spark_short %} prompt
+
+By providing {% data variables.product.prodname_copilot_short %} with some context and instruction, {% data variables.product.prodname_copilot_short %} can help you refine your initial prompt to {% data variables.product.prodname_spark_short %} so that it best communicates your requirements.
+
+1. Open [{% data variables.copilot.copilot_chat_short %}](https://github.com/copilot).
+1. Send the following prompt to {% data variables.product.prodname_copilot_short %}, editing the wording to align with your own app idea.
+
+   ```copilot copy
+   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.
+   ```
+
+1. In a new browser tab, open [{% data variables.product.prodname_spark_short %}](https://github.com/spark).
+1. Paste {% data variables.product.prodname_copilot_short %}'s output into {% data variables.product.prodname_spark_short %}'s input field to generate your spark.
+
+## Upload a markdown document
+
+To include very detailed requirements in your prompt to {% data variables.product.prodname_spark_short %}, you can drag and drop a markdown file, such as a `README.md`, into {% data variables.product.prodname_spark_short %}'s input field, and then use the following example prompt.
+
+### Example prompt
+
+```copilot copy
+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.
+```
+
+## Upload a sketch or image
+
+You can sketch out your app idea using a digital tool or by hand. Then, take a photo or screenshot of your design and attach the image into {% data variables.product.prodname_spark_short %}'s input field, together with the following example prompt.
+
+### Example prompt
+
+```copilot copy
+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.
+```
+
+## Be specific with styling requirements
+
+With {% data variables.product.prodname_spark_short %}, you can reference specific design styles, such as glassmorphic, minimalist, retro, playful. You can also provide details on font styles, color palettes or animation effects, and {% data variables.product.prodname_spark_short %} can create an interface that matches your vision.
+
+### Example prompt
+
+```copilot copy
+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.
+```

content/copilot/tutorials/spark/your-first-spark.md

@@ -1,13 +1,13 @@
 ---
-title: Building your first app in minutes with GitHub Spark
-shortTitle: Easy apps with Spark
-intro: 'Learn how to use {% data variables.product.prodname_spark %} to quickly create and deploy an app without writing any code.'
-allowTitleToDifferFromFilename: true
+title: Your first spark
+shortTitle: Your first spark
+intro: 'Learn how to build your first {% data variables.product.prodname_spark %} app in minutes, without writing any code.'
 versions:
   feature: spark
 product: 'Anyone with a {% data variables.copilot.copilot_pro_plus_short %} license can use {% data variables.product.prodname_spark_short %}.'
 redirect_from:
   - /copilot/tutorials/building-your-first-app-in-minutes-with-github-spark
+  - /copilot/tutorials/spark/easy-apps-with-spark
 contentType: tutorials
 ---