วิธีที่ผมสร้าง Landing Page ใหม่ใน 4 ชั่วโมงด้วย Claude

@DhravyaShah
อังกฤษ3 เดือนที่ผ่านมา · 15 เม.ย. 2569
1.3M
1.5K
59
111
4.2K

TL;DR

Dhravya Shah แบ่งปันเวิร์กโฟลว์ในการสร้าง Landing Page ของ Supermemory ขึ้นมาใหม่ภายใน 4 ชั่วโมง โดยใช้ Claude Code ทักษะการทำแอนิเมชัน SVG แบบกำหนดเอง และการผสานรวมบริบทแบบ AI-native เพื่อข้ามขั้นตอนความล่าช้าจากเอเจนซี่ออกแบบทั่วไป

ความเร็วในการทำซ้ำ (iteration velocity) คือสิ่งที่สำคัญที่สุดสำหรับสตาร์ทอัพ หน้าแลนดิ้งเพจเวอร์ชันแรกของเราถูกสร้างโดยเอเจนซี่ออกแบบชั้นนำแห่งหนึ่ง จากนั้นไม่กี่เดือนเราก็สร้างใหม่หมดอีกครั้ง — คราวนี้เปลี่ยนเอเจนซี่

การเปลี่ยนแปลงครั้งใหญ่เหล่านี้เกิดขึ้นในแต่ละช่วงของการเดินทางของ supermemory อย่างต่อเนื่อง เนื่องจากผลิตภัณฑ์ แบรนด์ และสิ่งอื่นๆ ของเรามีการพัฒนาไปเรื่อยๆ เราจึงปรับปรุงวิธีการนำเสนอในงาน marketing อยู่เสมอ

เอเจนซี่ทำงานได้ยอดเยี่ยมมาก! พวกเขาสร้างแบรนด์และภาพลักษณ์ที่อยู่เบื้องหลัง supermemory ในปัจจุบันได้อย่างดีเยี่ยม ฉันรู้สึกขอบคุณพวกเขามากสำหรับความช่วยเหลือทั้งหมดที่ผ่านมา

แต่ฉันมีปัญหาอยู่ข้อเดียว

ความเร็วในการทำซ้ำ (iteration velocity)

ยุคสมัยเปลี่ยนไปแล้ว จริงๆ นะ — ถ้าคุณไม่ใช่ AI native อีกต่อไป คุณก็ไปไม่รอด

Dhravya Shah - inline image

วงจร feedback

ครั้งหนึ่ง ฉันถามเอเจนซี่ว่า: โปรเจกต์นี้ใช้เวลานานแค่ไหน?

ฉันคาดหวังแค่ไม่กี่วัน หรืออาทิตย์เดียว แต่พวกเขากลับส่งแผนใหญ่โตที่มีงานหลายขั้นตอน — 2 อาทิตย์สำหรับการออกแบบว่าให้หน้าตาเป็นยังไง 1 อาทิตย์หลังจากนั้นสำหรับการ implement ฯลฯ ฯลฯ

ทั้งโปรเจกต์ใช้เวลาเป็นเดือน แล้วหน้าแลนดิ้งเพจก็จะอยู่บน Framer ส่วนอย่างอื่นล่ะ? แอป, ดีไซน์คอนโซล — เราต้อง implement ดีไซน์ของพวกเขาหลังจากที่เสร็จแล้ว

คำสาปของ no code

ก่อนที่ Claude Code จะเก่งขนาดนี้ หน้าแลนดิ้งเพจของเราอยู่บน Framer ทั้งหมด — ซึ่งดูแลโดยคนที่ออกแบบเอง พวกเขามีรสนิยมดี และแน่นอนว่าต้องใช้ความพยายามมหาศาล แต่การเปลี่ยนแปลงอะไรก็ตามต้องอาศัยคนที่รู้ Framer เท่านั้นถึงจะทำได้

มันกลายเป็นคำสาปจริงๆ การเพิ่มหน้า marketing, บล็อก ฯลฯ กลายเป็นเรื่องปวดหัว เว็บไซต์โหลด JavaScript มากเกินไป หรือ SEO ไม่ดี หรืออนิเมชั่นทำให้เบราว์เซอร์ช้าลง — แล้วเราก็ต้องบอกให้พวกเขาปรับปรุง

และเราไม่รู้จริงๆ ว่าจะปรับปรุงยังไงให้ดีขึ้น — มันยากสำหรับเรา (เพราะตอนนั้นทุกคนใน supermemory เป็น developer) ที่จะทำ A/B test หรือหาวิธีสื่อสารข้อความของเราให้ดีที่สุด หรือปรับปรุง copy นอกจากจะจ่ายค่า designer แล้ว เรายังต้องจ่าย Framer หลายพันดอลลาร์ต่อปี สำหรับการเปลี่ยนแปลงใดๆ ฉันไม่สามารถแค่บอก agent ของฉันให้ทำได้ ฉันต้องบอกพวกเขาอย่างละเอียดว่าต้องทำยังไง แล้วก็ทำงานร่วมกันแบบวนไปจนกว่าจะได้ตามที่เราต้องการ

ฉันเลยตัดสินใจเลิกทั้งหมดนี้ ไม่แคร์แล้ว ฉันจะทำหน้าแลนดิ้งเพจเอง

ดีไซน์ที่ยอดเยี่ยมด้วย Claude Code

ฉันไม่ใช่ดีไซเนอร์ แต่คุณควรลองดู https://supermemory.ai — มันถูกสร้างขึ้นในเวลาแค่ 4 ชั่วโมงด้วย Claude Code

ใช่แล้ว คุณอ่านไม่ผิด ฉันเริ่มด้วยการถาม Claude ว่าเราควรสื่ออะไรให้ผู้ใช้ของเรารู้ และหาคำที่เหมาะสม (copy)

ทั้งหมดนี้คือเซสชันเดียวใน Claude Opus 4.6 1M

เตรียมทักษะ (skills)

จากแผนของฉัน ฉันรู้ว่าอยากให้ Claude ทำ SVG animation ที่เจ๋งมาก ฉันค้นหาคอร์ส SVG animation ที่ดีที่สุดในอินเทอร์เน็ต ถอดเทป และสร้าง skill จากสิ่งที่เรียนรู้มา Skill ไม่ได้ใหญ่อะไรมาก แต่ก็เพียงพอที่จะทำให้พื้นฐานแข็งแรง

subagent เป็นคนเตรียมสิ่งนี้: https://github.com/supermemoryai/skills/blob/main/svg-animations/SKILL.md

ในทำนองเดียวกัน ฉันเตรียม skill พื้นฐานที่จำเป็นสำหรับทุกสิ่งที่ฉันรู้ว่าต้องการให้ดีไซเนอร์รู้

Dhravya Shah - inline image

ส่วนนี้ เป็นต้น ใช้ SVG animations ทั้งหมด

สร้างเครื่องมือ (tooling)

สำหรับภาพต่างๆ มากมาย ฉันรู้ว่าต้องใช้ library บางตัว — โดยเฉพาะสำหรับ animated ASCII art และเอฟเฟกต์ pixelization

ฉันเลยส่ง subagent สองตัวไปหาวิธีที่ดีที่สุดในการทำอนิเมชั่นเหล่านี้บนเว็บ ให้มีประสิทธิภาพ แล้วสร้าง package แยกออกมาเพื่อไม่ให้สับสนกับงานดีไซน์หลัก

Claude สร้าง package อัตโนมัติ วางไว้บน Github ของฉันที่นี่ — https://github.com/dhravya/landing-effects และยังบันทึกและเพิ่ม GIF เพื่อแสดงว่าอนิเมชั่นจะมีลักษณะอย่างไร

Dhravya Shah - inline image
Dhravya Shah - inline image

ปิดวงจรด้วยความจำที่ดี (good memory)

ตลอดเซสชัน ฉันแน่ใจว่า Claude กำลังดูและคิดเกี่ยวกับหน้าตาของมันจริงๆ มันยังรู้ข้อกำหนดทางธุรกิจทั้งหมด สิ่งที่ทีมของเราใส่ใจ และสิ่งที่ผู้ใช้ของเราขอ เนื่องจากฉันใช้ปลั๊กอิน Supermemory Claude code

เราใส่ไฟล์บันทึกการสนทนากับลูกค้าและการประชุมทีมทั้งหมดลงใน supermemory ของทีมเราเอง และเซสชันการเขียนโค้ดก็ได้ข้อมูลเดียวกันด้วย เพราะ Claude รู้ทุกอย่างเกี่ยวกับสิ่งที่เราทำและเราเป็นใครแล้ว มันจึงสามารถสร้างภาษาและกลยุทธ์การออกแบบที่เพิ่ม Conversion ของเราขึ้น 40% https://github.com/supermemoryai/claude-supermemory

ส่วนสำคัญไม่ใช่แค่ความจำที่ดีของ Claude — supermemory ทำสิ่งนั้นได้ดีมาก ส่วนสำคัญคือความจริงที่ว่าความจำและบริบทนี้ถูกรวบรวมไม่เพียงแต่จากเซสชันการเขียนโค้ด แต่จากชีวิตประจำวันของเรา การแชทบน claude.ai ของเรา, agent OpenClaw ของทีม และอื่นๆ อีกมากมาย

ความสมบูรณ์ (Completeness)

ฉันขอให้มันวิเคราะห์ทั้งหน้าในด้านประสิทธิภาพและ SEO — และมันก็ทำ

Dhravya Shah - inline image

มันอาจดูเหมือน vibe coded หน่อยๆ — และฉันโอเคกับสิ่งนั้น ฉันรู้ว่าฉันสามารถวนทำซ้ำเพื่อให้ดีขึ้นเรื่อยๆ แทนที่จะรอเป็นเดือนเพื่อปล่อยอะไรสักอย่าง

AI native — เชื่อมต่อกับ background agent

เรามีพนักงานประจำแค่ 4 คนในการสร้าง supermemory เท่านั้นเอง และนั่นรวมฉันด้วย — ผู้ก่อตั้งเดี่ยว (solo founder)

หนึ่งในนั้นซึ่งไม่ใช่คนสายเทคนิค ก็สามารถทำงานทั้งหมดบนหน้าแลนดิ้งเพจได้โดยอัตโนมัติผ่าน background agent

Dhravya Shah - inline image

ซึ่งหมายความว่าทุกคนในทีมตอนนี้คือดีไซเนอร์ แค่มีรอบการทำซ้ำที่เพียงพอ

เรากำลังอยู่ในยุคที่บ้าคลั่ง งานออกแบบส่วนใหญ่สามารถ (และควร) ทำโดยทีมในขณะที่เรากำลังหาคำตอบอยู่

การออกแบบสำคัญกับผลิตภัณฑ์แน่นอน — แต่คนส่วนใหญ่อาจจะจ่ายแพงเกินไปสำหรับมัน

สร้างต่อใน YouMind

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
สำหรับครีเอเตอร์

เปลี่ยน Markdown ของคุณให้เป็นบทความ 𝕏 ที่สะอาดตา

เวลาคุณเผยแพร่งานเขียนยาวของตัวเอง การจัดรูปแบบรูปภาพ ตาราง และบล็อกโค้ดให้เข้ากับ 𝕏 นั้นน่าปวดหัว YouMind เปลี่ยนร่าง Markdown ทั้งฉบับให้เป็นบทความ 𝕏 ที่สะอาดตาและพร้อมโพสต์ทันที

ลอง Markdown เป็น 𝕏

แพตเทิร์นให้ถอดรหัสเพิ่มเติม

บทความไวรัลล่าสุด

สำรวจบทความไวรัลเพิ่มเติม