1. One‑Shot Sale Page Generator (Design‑to‑Deploy)
คำอธิบาย
พรอมป์นี้สั่งให้ AI ออกแบบ Salepage HTML หน้าเดียวให้เสร็จในครั้งเดียว ตั้งแต่กำหนดกลยุทธ์ การเขียนคอนเทนต์ UX ไปจนถึงโค้ดพร้อมใช้งาน และสร้างลิงก์พรีวิวแบบคลิกดูได้ทันที (เช่น StackBlitz/CodePen) เหมาะเมื่อคุณต้องการต้นฉบับที่เผยแพร่ได้รวดเร็ว มี SEO/Tracking ครบ
--------
Prompt:
คุณคือ “Conversion Strategist + Senior Frontend Engineer” จัดทำ Salepage (HTML หน้าเดียว) สำหรับ [สินค้า/ข้อเสนอ] ให้ “เสร็จในครั้งเดียว” โดย
Context: เน้น Conversion, โหลดเร็ว, ใช้ได้ทันที, มีลิงก์ตัวอย่างสด
Details:
กำหนด Persona, JTBD, UVP, Big Promise (สรุป 1 บรรทัด)
โครงหน้า: Header Sticky → Hero → Social Proof → Benefits → Features → Offer/Bonus → Pricing (3 แพ็ก) → FAQ → Guarantee → Final CTA → Footer
คอนเทนต์ไทยกระชับ: Headline ≤ 10 คำ, Subhead ≤ 18 คำ, Bullet เริ่มด้วยกริยา
ฟอร์มสั่งซื้อ/ลงทะเบียน (validation พื้นฐาน, placeholder, aria-label)
SEO: <title>, meta description, OG/Twitter, FAQPage JSON‑LD
Performance: CSS ใน <style> ≤ 15KB, ภาพใช้ loading="lazy", ไม่ใช้ framework
Analytics: วาง data-attributes สำหรับ event (data-event="click_cta")
Responsive: Mobile‑first, max‑width 1200px, คอนทราสต์ดี, ลำดับโฟกัสชัด
สร้าง “ลิงก์พรีวิวพร้อมใช้” (เช่น StackBlitz/CodePen/JSFiddle) และแนบ URL
Constraints: ส่งโค้ดครบ 1 ไฟล์ (index.html) พร้อมคอมเมนต์ <!-- TODO --> จุดแก้คอนเทนต์
Example Output:
ตาราง Persona/JTBD/UVP (ย่อ)
โค้ด index.html ครบทุกส่วน
URL พรีวิวใช้งานได้ทันที
2. Brand‑Themed Sale Page + Asset Auto‑Generator
คำอธิบาย
พรอมป์นี้เหมาะเมื่อมีแบรนด์ไกด์ไลน์ (สี ฟอนต์ โทน) และอยากได้ Salepage ที่สะท้อนอัตลักษณ์แบรนด์ รวมถึงการสร้างภาพประกอบ/ไอคอนจากคำสั่ง ออกโค้ด HTML/CSS พร้อม และให้ลิงก์พรีวิวสดทันที เพื่อง่ายต่อการเสนอผู้บริหาร/ลูกค้า
-----------
Prompt:
Act as “Brand UX Lead & Frontend Engineer.” สร้าง Salepage ที่ยึดตาม Brand Guide ต่อไปนี้: [ชื่อแบรนด์, สีหลัก/รอง (HEX), ฟอนต์ (Fallback), โทนภาษา, โลโก้ (ลิงก์ถ้ามี)].
Context: ต้องสะท้อนแบรนด์ชัด, ใช้ภาพ/ไอคอนสอดคล้อง
Details:
สร้าง Color System (Primary/Secondary/Neutral/States) และ Token (CSS vars)
เฮดไลน์/ซับเฮด/ไมโครคอปปี้ตามโทนแบรนด์
สร้างภาพ Hero/ไอคอน (ถ้าใช้ AI ภาพ ให้ลิงก์ไฟล์/placeholder alt text)
Sections: Hero, Value Props (3‑5 การ์ด), Proof (โลโก้ลูกค้า/รีวิว), Offer/Bonus, Pricing, FAQ, CTA
Accessibility: aria‑*, focus state, ขนาดตัวอักษรอ่านง่าย
ส่ง “ลิงก์พรีวิวสด” + โค้ด index.html 1 ไฟล์
Constraints: ไม่มี framework, CSS ≤ 15KB, ไม่ใช้ JS ถ้าไม่จำเป็น
Example Output:
ตาราง Brand Tokens
โค้ด HTML พร้อม <style>
URL พรีวิวพร้อมใช้
3. SEO‑First, Speed‑First Sale Page (One‑Prompt Delivery)
คำอธิบาย
พรอมป์นี้เน้น SEO และความเร็วโหลด สำหรับแคมเปญที่ต้องการอันดับและคุณภาพโค้ดสูง สั่งให้ AI วางโครงสคีมา, OG, ลำดับ H1‑H3 อย่างถูกต้อง พร้อม Lighthouse‑friendly โค้ด และสร้างลิงก์ตัวอย่างสดที่ตรวจงานได้ทันที
----------
Prompt:
คุณคือ “Technical SEO + HTML Performance Engineer” ทำ Salepage สำหรับ [คีย์เวิร์ดเป้าหมาย/ข้อเสนอ] ให้ได้ “โค้ดพร้อมพรีวิว” ครั้งเดียวจบ
Context: คะแนน Lighthouse ดี, Core Web Vitals ผ่าน
Details:
โครงสร้างหัวข้อ: H1 1 ครั้ง, H2/H3 แยกส่วนชัด
Meta: title ≤ 60 ตัวอักษร, meta description ≤ 155, OG/Twitter ครบ
Schema: Product/Offer + FAQPage JSON‑LD
Internal anchor nav (jump to Pricing/FAQ)
รูป/ไอคอนใช้ SVG/placeholder พร้อม alt ชัด
Minimal CSS <style> + Critical styles, ไม่มีบล็อคเรนเดอร์
ติด data‑event สำหรับการคลิก CTA/ส่งฟอร์ม
ส่ง “URL พรีวิวสด” + โค้ด index.html
Constraints: ไม่มี JS เกินจำเป็น, ไม่ใช้เฟรมเวิร์ก
Example Output:
ลิสต์คีย์เวิร์ดรอง 5 คำ (แทรกอย่างเป็นธรรมชาติ)
โค้ด HTML ครบ
ลิงก์พรีวิว (StackBlitz/CodePen)
4. A/B Variant Sale Page (Two Links, One Prompt)
คำอธิบาย
พรอมป์นี้สร้าง Salepage สองเวอร์ชันสำหรับทดสอบ A/B ในครั้งเดียว โดยเน้นต่างที่ Headline/CTA/Hero เพื่อเทสต์อิมแพ็กต่อ Conversion พร้อมแนบลิงก์พรีวิวสองลิงก์ แนะนำ KPI/อีเวนต์ติดตาม และตารางสรุปความต่างเพื่อเลือกใช้งานเร็ว
Prompt:
Act as “Experiment‑Driven UX Copywriter & Frontend Dev.” สร้าง Salepage 2 เวอร์ชัน: Variant‑A (Benefit‑First) และ Variant‑B (Problem‑First) สำหรับ [สินค้า/ข้อเสนอ]
Context: ใช้เทสต์ A/B ภายใน 14 วัน
Details:
ส่วนต่างหลัก: Headline, Subhead, Hero Visual, Primary CTA
ส่วนเหมือน: โครงหน้า, Proof, Pricing, FAQ, Guarantee
ใส่ data‑event (click_cta_A, click_cta_B, form_submit)
ส่งโค้ด 2 ไฟล์ index‑A.html, index‑B.html + “ลิงก์พรีวิวสด” 2 ลิงก์
แนบตารางสรุปความต่าง + สมมติฐาน (Hypothesis)
Constraints: โค้ดสะอาด, ไม่มีเฟรมเวิร์ก, รองรับมือถือ
Example Output:
ตาราง Diff & Hypothesis
โค้ด 2 เวอร์ชัน
ลิงก์ A และ B แยกกัน
5. Localized TH/EN Sale Page with Instant Preview
คำอธิบาย
พรอมป์นี้เหมาะเมื่ออยากได้หน้าเดียวรองรับไทย/อังกฤษในทันที โดยใช้ HTML + สวิตช์ภาษาแบบไม่ต้องพึ่งเฟรมเวิร์ก พร้อมสำเนาเนื้อหาที่เทียบเท่ากันทั้งสองภาษา มีโครงสร้าง SEO/Schema และแนบลิงก์พรีวิวสด
Prompt:
คุณคือ “Bilingual UX Writer & Vanilla Frontend Dev.” สร้าง Salepage TH/EN สำหรับ [สินค้า] แบบสลับภาษาได้ (ไม่ใช้เฟรมเวิร์ก)
Context: เน้นความเข้าใจเร็ว, แปลคู่ความหมายตรง
Details:
คอนเทนต์ทุกส่วนมี TH/EN คู่กัน (data‑lang)
ปุ่มสลับภาษาแบบโค้ด JS สั้น (ไม่เกิน 60 บรรทัด)
Sections: Hero, Benefits, Features, Proof, Pricing, FAQ, CTA
SEO: <html lang="th"> ค่าเริ่มต้น + hreflang ใน <head>
Accessibility: ป้ายกำกับชัด, โฟกัสเห็นได้
ส่ง “URL พรีวิวสด” + โค้ด index.html
Constraints: CSS ≤ 15KB, โหลดเร็ว
Example Output:
สรุปคีย์ข้อความ TH/EN (ตารางย่อ)
โค้ด HTML/JS ในไฟล์เดียว
ลิงก์พรีวิวคลิกดูได้ทันที
6. Story-Driven Sale Page (One Prompt to Final Link)
คำอธิบาย
พรอมป์นี้ออกแบบ Salepage โดยใช้ Storytelling เป็นแกนดำเนินเรื่อง เริ่มจากปัญหา → จุดเปลี่ยน → ผลลัพธ์ → ข้อเสนอ พร้อมโค้ด HTML/CSS สำเร็จและลิงก์พรีวิวสด เหมาะสำหรับสินค้าหรือบริการที่ขายด้วยเรื่องราวและอารมณ์
Prompt:
คุณคือ “Storytelling Copywriter + HTML/CSS Dev” สร้าง Salepage สำหรับ [สินค้า/บริการ] ที่เล่าเรื่องในลำดับ: Hook → Pain → Turning Point → Solution → Offer → CTA โดย:
Details:
Headline/Opening Hook ≤ 12 คำ
Story Section: 3 ย่อหน้าสั้น, มีภาพประกอบ (placeholder)
Offer: bullet benefit, bonus, การันตี
CTA Button 2 ตำแหน่ง (กลาง/ท้าย)
SEO, OG Tags, Schema FAQPage JSON-LD ครบ
CSS ใน <style> ≤ 15KB, Mobile-first
ส่งโค้ด index.html พร้อม “URL พรีวิวสด”
Constraints: ภาษาไทยสั้นกระชับ, ไม่มี JS เกินจำเป็น
Example Output: ตาราง Story Flow + HTML Code + Preview Link
7. Minimalist High-Conversion Sale Page
คำอธิบาย
พรอมป์นี้เหมาะสำหรับคนที่ต้องการ Salepage เรียบง่าย โฟกัสข้อความและ CTA โดยไม่มีองค์ประกอบเกินจำเป็น แต่ยังคงโครงสร้าง Conversion พร้อมโค้ด HTML และลิงก์พรีวิวสด
Prompt:
คุณคือ “Minimalist UI/UX Designer + Frontend Engineer” สร้าง Salepage HTML หน้าเดียวสำหรับ [ข้อเสนอ] โดย:
Details:
Sections: Hero, Benefits (3 bullet), Single Proof, Pricing, CTA
Headline 1 บรรทัด, Subhead ≤ 14 คำ
ปุ่ม CTA ใหญ่ สีตัดพื้นหลัง, sticky บนมือถือ
CSS <style> ≤ 10KB, ไม่มี animation หนัก
SEO & OG ครบ, Schema Product
ส่งโค้ด index.html และ “ลิงก์พรีวิวสด”
Constraints: ไม่มี JS, Mobile-first
Example Output: Layout Sketch (ASCII) + HTML Code + Preview URL
ทดลองทำประมาณ 3 นาที จาก Prompt ที่ 1 https://chatgpt.com/canvas/shared/68986d8d6c608191ab0947fe32e6664d
จาก Prompt ที่ 1 อันเดียวกันทำใน Gemin นาทีกว่า ๆ ก็เสร็จ สวยกว่าด้วย https://gemini.google.com/share/aaa5e3bb27f3
ไม่มีความคิดเห็น:
แสดงความคิดเห็น