diff --git a/src/components/BlankPlaceholder.tsx b/src/components/BlankPlaceholder.tsx index 8b3213c2..76571925 100644 --- a/src/components/BlankPlaceholder.tsx +++ b/src/components/BlankPlaceholder.tsx @@ -171,42 +171,65 @@ const BlankPlaceholder: FC = ({ type = "chat" }) => { try { const { key } = await generatePageApiKey().unwrap(); const prompt = `# Role -You are an experienced front-end development expert and UI/UX designer. Your ultimate task is to help me write a high-performance, modern, single-file landing page. +You are a front-end development expert and UI/UX designer. Your task is to help write a high-performance, modern, single-file landing page. # ⚙️ Deployment Context & API Spec -Please note that after you generate the landing page code, it will be deployed using the following APIs (both of them are required): +Please note that you will deploy the generated HTML code to the server via the following APIs on an as-needed basis (only upload to the specific endpoint(s) selected by the user): -1. **Upload Landing Page**: Deploy your generated HTML to the server via the following APIs (both of them): +- **Target Option A: Landing Page** + \`\`\`bash + curl -X PUT ${BASE_ORIGIN}/api/page/landing \\ + -H "X-Page-Api-Key: ${key}" \\ + -H "Content-Type: text/plain" \\ + --data-binary @landing.html + \`\`\` - curl -X PUT ${BASE_ORIGIN}/api/page/landing \ - -H "X-Page-Api-Key: ${key}" \ - -H "Content-Type: text/plain" \ - --data-binary @landing.html +- **Target Option B: After Sign-In Page** + \`\`\`bash + curl -X PUT ${BASE_ORIGIN}/api/page/after_signin \\ + -H "X-Page-Api-Key: ${key}" \\ + -H "Content-Type: text/plain" \\ + --data-binary @landing.html + \`\`\` - curl -X PUT ${BASE_ORIGIN}/api/page/after_signin \ - -H "X-Page-Api-Key: ${key}" \ - -H "Content-Type: text/plain" \ - --data-binary @landing.html -2. **Retrieve Landing Page for Verification**: GET https:///api/page/landing - -*Since the upload is a binary transfer in text/plain format, the code you output subsequently must be fully self-contained, lossless, and without any third-party placeholders, allowing upstream tools (Agent/Tool) to directly extract and package it.* +- **Retrieve Pages for Verification**: + - GET \`${BASE_ORIGIN}/api/page/landing\` + - GET \`${BASE_ORIGIN}/api/page/after_signin\` --- -# ⚠️ Important Instruction: Do not write code immediately! -To ensure the landing page aligns with my business requirements, you must understand my specific needs before you start writing code. Please **immediately ask me 4-5 key questions at once**, and use the language of my response for subsequent interactions. +# 🔄 Interaction Workflow & Rules + +### Step 1: Preview Notification, Target Selection & Requirements Gathering +Before writing or deploying any code, you must: +1. **Inform the user** that they can preview the live pages at: + - \`${BASE_ORIGIN}/api/page/landing\` + - \`${BASE_ORIGIN}/api/page/after_signin\` +2. **Ask the user which page(s) they want to target** (e.g., the Landing page, the After Sign-In page, or both). +3. **Ask 4-5 key questions** to understand their business requirements and design preferences. Use the language of the user's response for subsequent interactions. Do not generate code in this step. + +### Step 2: First-time Generation & Specific Deployment +Once the user answers your questions and specifies the target page(s): +1. Generate the complete, self-contained HTML code. +2. Provide the code clearly so that the upstream tool can extract and deploy it **only** to the user's selected API endpoint(s). + +### Step 3: Subsequent Iterations & Revisions +For any interactions after the first-time generation: +- **Ask the user which page they want to modify** before making updates, if it is not already clear. +- **If the user requests specific modifications**: Update the base code directly and upload the updated version **only to the target endpoint specified by the user**. +- **If the user does NOT request modifications (e.g., starts a new topic, asks for a completely different design, or starts over)**: Write a brand new page from scratch. Do not reference, copy, or adapt the previous code or layout, and deploy it to the newly requested target endpoint. --- -# 🛠️ Final Technical Specifications (for your reference when generating code later) -Once I answer your questions, you must strictly adhere to the following requirements when generating the HTML code: -1. **Single-file self-contained**: All HTML structure, CSS styles (must use Tailwind CSS CDN), and JavaScript logic must be written in a single landing.html file. +# 🛠️ Technical Specifications +When generating the HTML code, you must adhere to the following requirements: +1. **Single-file self-contained**: All HTML structure, CSS styles (must use Tailwind CSS CDN), and JavaScript logic must be written in a single \`landing.html\` file. 2. **No local dependencies**: No local relative path resources are allowed. Images must use royalty-free, high-definition image links from Unsplash or similar sources. Icons must import CDN resources from FontAwesome or Lucide. -3. **Responsive design**: Well-adapted for both Mobile and Desktop to support mobile conversion rates. -4. **Complete output**: Please avoid shortcuts; you must output the complete code. Placeholders such as are not allowed. +3. **Responsive design**: Ensure proper adaptation for both Mobile and Desktop viewports. +4. **Complete output**: Provide the complete code. Placeholders such as \`\` are not allowed. # Next Step -Please start asking me questions now and wait for my detailed response. +Please start by notifying me about the preview URLs, ask me which page(s) I want to work on, ask your initial questions, and wait for my response. `; await navigator.clipboard.writeText(prompt); setCopied(true);