docs: Refactor of Build with AI section

sources/platform/actors/development/quick_start/build_with_ai.md

@@ -1,12 +1,12 @@
 ---
 title: Build with AI
 sidebar_position: 3
-description: Use pre-built prompts, use Apify docs via llms.txt, and follow best practices to effective vibe coding.
+description: Use pre-built prompts, refer to Apify Docs via llms.txt, and follow best practices for effective vibe coding.
 slug: /actors/development/quick-start/build-with-ai
 toc_max_heading_level: 4
 ---
 
-**Use pre-built prompts, use Apify docs via llms.txt, and follow best practices to build Actors efficiently with AI assistants.**
+**Use pre-built prompts, reference Apify Docs via llms.txt, and follow best practices to build Actors efficiently with AI coding assistants.**
 
 ---
 
@@ -15,41 +15,39 @@ import PromptButton from "@site/src/components/PromptButton";
 import InstallMCPButton from "@site/src/components/InstallMCPButton";
 import copyForAI from "./images/copy-for-ai.png";
 
-This guide shows you how to build Actors efficiently with AI coding assistants. You'll learn how to use pre-built instructions, integrate Apify documentation into your AI editor, and apply best practices for AI-assisted development.
+You will learn several approaches to building Apify Actors with the help of AI coding assistants. This guide includes independent instructions, tools, and best practices that you can use individually or combine together. Each section focuses on a specific part of the process such as prompt usage, Actor templates, Apify MCP server tools, or documentation integration, so you can follow only the parts that fit your development style.
 
 ## AI coding assistant instructions
 
-Use the following prompt in your AI coding assistant ([Cursor](https://www.cursor.com/), [Claude Code](https://www.claude.com/product/claude-code), [GitHub Copilot](https://github.com/features/copilot), etc.):
+Use the following prompt in your AI coding assistant such as [Cursor](https://www.cursor.com/), [Claude Code](https://www.claude.com/product/claude-code) or [GitHub Copilot](https://github.com/features/copilot):
 
 <PromptButton prompt={AGENTS_PROMPT} title="Use pre-built prompt for your AI coding assistant" />
 
+The prompt guides AI coding assistants such as Cursor, Claude Code or GitHub Copilot to help users create and deploy an Apify Actor step by step. It walks through setting up the Actor structure, configuring all required files, installing dependencies, running it locally, logging in, and pushing it to the Apify platform and following Apify’s best practices.
+
 ### Quick Start
 
-- _Step 1_: Create directory: `mkdir my-new-actor`
-- _Step 2_: Open the directory in _Cursor_, _Claude Code_, _VS Code with GitHub Copilot_, etc.
-- _Step 3_: Copy the prompt above and paste it into your AI coding assistant (Agent or Chat)
-- _Step 4_: Run it, and develop your first actor with the help of AI 🎉
+1. Create directory: `mkdir my-new-actor`
+1. Open the directory in _Cursor_, _Claude Code_, _VS Code with GitHub Copilot_, etc.
+1. Copy the prompt above and paste it into your AI coding assistant (Agent or Chat)
+1. Run it, and develop your first actor with the help of AI
 
-:::info Start in an AI coding assistant
+:::info Avoid copy-pasting
 
-To maximize efficiency, copy the prompt to Cursor, VS Code with GitHub Copilot, or another AI coding assistant. The AI will follow the guide step-by-step, and you'll avoid copy-pasting from tools like ChatGPT or Claude.
+The AI will follow the guide step-by-step, and you'll avoid copy-pasting from tools like ChatGPT or Claude.
 
 :::
 
 ## Use Actor templates with AGENTS.md
 
-All [Actor Templates](https://apify.com/templates) have AGENTS.md that will help you with AI coding. If you prefer a more traditional approach, run the following command:
-
-:::info Install Apify CLI
-
-If you don't have Apify CLI installed, install it first. Check the [installation guide](/cli/docs/installation).
-
-:::
+All [Actor Templates](https://apify.com/templates) have AGENTS.md that will help you with AI coding. You can use the [Apify CLI](/cli/docs) to create Actors from Actor Templates.
 
 ```bash
 apify create
 ```
 
+If you do not have Apify CLI installed, see the [installation guide](/cli/docs/installation).
+
 The command above will guide you through Apify Actor initialization, where you select an Actor Template that works for you. The result is an initialized Actor (with AGENTS.md) ready for development.
 
 ## Use Apify MCP Server
@@ -64,7 +62,7 @@ We have prepared the [Apify MCP server configuration](https://mcp.apify.com/), w
 
 ## Provide context to assistants
 
-Every page in the Apify documentation has a _Copy for LLM_ button. You can use it to add additional context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions.
+Every page in the Apify documentation has a **Copy for LLM** button. You can use it to add additional context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions.
 
 <img src={copyForAI} alt="Copy for LLM" width="250" />
 

src/components/PromptButton.jsx

@@ -56,7 +56,7 @@ export default function PromptButton({ prompt = QUICK_START_PROMPT, title = 'Use
                         className={styles['toggle-button']}
                         onClick={togglePrompt}
                     >
-                        {showPrompt ? 'Hide the prompt' : 'Show the prompt'}
+                        {showPrompt ? 'Hide prompt' : 'Show prompt'}
                     </button>
                     <button
                         className={`${styles['copy-button']} ${copied ? styles.copied : ''}`}

src/components/PromptButton.module.css

@@ -14,7 +14,7 @@
 }
 
 /* Apply margin-bottom only when the next sibling is not a heading */
-.prompt-card:not(:has(+ h1, + h2, + h3, + h4, + h5, + h6)) {
+.prompt-card:not(:has(+ h1, + h2, + h3, + h4, + h5, + h6)), .full-prompt-container:not(:has(+ h1, + h2, + h3, + h4, + h5, + h6)) {
   margin-bottom: var(--ifm-leading);
 }
 
@@ -133,6 +133,19 @@
   transform: translateY(0);
 }
 
+/* Dark theme: make secondary button appear as white pill with dark text */
+html[data-theme='dark'] .toggle-button {
+  background: #ffffff;
+  color: #111827; /* nearly black for contrast */
+  border-color: #e5e7eb; /* subtle gray border */
+}
+
+html[data-theme='dark'] .toggle-button:hover {
+  background: #f8fafc; /* slight hover tint, keep white look */
+  color: #111827;
+  border-color: #d1d5db;
+}
+
 .full-prompt {
   margin-top: 1.2rem;
   padding: 1.2rem;