บทช่วยสอนแบบเต็ม: สร้างแอปบนมือถือที่สวยงามด้วย Claude Code และ Pencil ใน 16 นาที

In This Article

เรียนสมาชิก วันนี้ ฉันต้องการแสดงให้คุณเห็นถึงวิธีสร้างแอปบนอุปกรณ์เคลื่อนที่ที่สวยงามเพื่อติดตามการออกกำลังกายของคุณ การสร้างแอปบนอุปกรณ์เคลื่อนที่ที่เคยต้องใช้ทีมวิศวกร แต่เครื่องมือ AI เช่น Claude Code และ Pencil ช่วยให้คุณจัดส่งแอปที่สวยงามด้วยตัวเองได้อย่างง่ายดาย แม้ว่าคุณจะไม่รู้วิธีเขียนโค้ด ดูบทช่วยสอนของฉันเพื่อดูวิธีดำเนินการภายในเวลาเพียง 16 นาที การประทับเวลา:(0:00) สิ่งที่เราจะสร้าง: แอปมือถือที่สวยงามเพื่อติดตามการออกกำลังกายของคุณ (2:01) ขั้นตอนที่ 1: กำหนดข้อกำหนดด้วย Claude (6:11) ขั้นตอนที่ 2: สร้างการออกแบบด้วยดินสอ (8:56) ขั้นตอนที่ 3: สร้างแอปด้วย Claude Code (14:21) รับแอปจาก App Store (15:19) สรุปทั้ง 3 ขั้นตอนรับชมตอนนี้บน YouTube หรืออ่านคำแนะนำที่เป็นลายลักษณ์อักษรด้านล่างฉันภูมิใจที่ได้ร่วมงานกับ…GranolaGranola เพิ่งเปิดตัว Spaces ซึ่งเป็นวิธีใหม่สำหรับทีมของคุณในการจัดระเบียบและแบ่งปันบันทึกการประชุมระหว่างกัน ตัวอย่างเช่น คุณสามารถสร้างพื้นที่ "การโทรของผู้ใช้" ในการสัมภาษณ์เพื่อให้ใครก็ตามถามคำถามเกี่ยวกับความต้องการของผู้ใช้ได้ คุณยังถามคำถามได้โดยตรงใน Claude, ChatGPT หรือ Gemini ด้วย API และ MCP ใหม่ของ Granola ลองใช้ Granola ฟรี สิ่งที่เราจะสร้าง: แอปบนอุปกรณ์เคลื่อนที่เพื่อติดตามการออกกำลังกายของคุณ เราอยู่ในยุคที่การเขียนโค้ดแอปบนอุปกรณ์เคลื่อนที่ของคุณเองง่ายกว่าการค้นหาแอปที่คุณชอบอยู่แล้ว ดังนั้นมาสร้างแอปที่สามารถ: สร้างการออกกำลังกายโดยเลือกการออกกำลังกาย จากนั้นเลือกจำนวนเซ็ตและจำนวนครั้ง ติดตามการออกกำลังกายแบบสดๆ โดยการแตะแต่ละเซ็ตการออกกำลังกายเพื่อทำให้เสร็จสิ้น วัดความคืบหน้าผ่านปฏิทินและแผนภูมิสำหรับการออกกำลังกายแต่ละครั้ง ฉันจะแนะนำวิธีสร้างการออกกำลังกายใน 3 ขั้นตอนด้านล่าง 1. กำหนดข้อกำหนดด้วย Claude ขอให้ Claude ถามคำถามคุณเสมอเมื่อกำหนดข้อกำหนดด้วยกันมาเริ่มต้นด้วยการวางข้อความแจ้งนี้ลงใน Claude:มาทำงานร่วมกันเกี่ยวกับข้อกำหนดสำหรับแอปฟิตเนสบนมือถือกันเถอะ ฉันต้องการสามหน้าจอ:เพิ่ม/แก้ไขการออกกำลังกาย: สร้างการออกกำลังกายและเพิ่มการออกกำลังกายด้วยเซ็ตและการทำซ้ำ เซสชั่นการออกกำลังกาย: ติดตามการออกกำลังกายแบบเรียลไทม์ แตะเพื่อทำเซ็ตต่างๆ ปฏิทิน: ดูว่าคุณออกกำลังกายวันไหนและดูรายละเอียดการออกกำลังกาย นี่เป็นพื้นฐาน แต่มาทำงานกับข้อมูลจำเพาะกันเถอะ ฉันอยากให้คุณปฏิบัติตามข้อกำหนดอย่างเคร่งครัด และหากคุณมีคำถามใดๆ ให้ถามพวกเขาในรายการที่มีลำดับเลข ส่วนที่สำคัญที่สุดของข้อความนี้คือ “หากคุณมีคำถามใดๆ ให้ถามพวกเขาในรายการที่มีลำดับเลขกำกับ” ฉันมักจะรวมบรรทัดนี้ไว้เสมอเมื่อหารือเกี่ยวกับข้อกำหนดกับ Claude เพื่อให้สามารถถามคำถามฉันเพื่อทำให้ข้อมูลจำเพาะดีขึ้น ต่อไปนี้เป็นตัวอย่างคำถามและคำตอบ:Claude: คุณต้องการจับเวลาพักไหม? ฉัน: ใช่ ให้ฉันปรับแต่งมันในการตั้งค่าด้วย Claude: คุณต้องการทำการดีโหลดอัตโนมัติหลังจากตั้งค่าล้มเหลวหรือไม่? ฉัน: ไม่ มาทำให้มันง่ายกันดีกว่า หลังจากที่ Claude ได้รับข้อมูลจำเพาะไปยังสถานะที่คุณพอใจแล้ว ให้ขอให้:“แบ่งข้อมูลจำเพาะออกเป็นข้อกำหนดด้านการออกแบบและทางเทคนิค อย่าให้รายละเอียดเกี่ยวกับข้อกำหนดการออกแบบมากเกินไปเพื่อให้มีพื้นที่ยืดหยุ่นได้” ใส่บรรทัดสุดท้ายเพราะ Pencil (นักออกแบบ AI ของเรา) ออกแบบได้ดีกว่า Claude 🙂 เรามาพูดถึงเรื่องต่อไปกันดีกว่า เมื่อโมเดลต่างๆ ดีขึ้น ฉันขี้เกียจมากขึ้นในการแจ้งเตือน (และแย่กว่านั้นในการสะกดคำ)2 ออกแบบหน้าจอมือถือด้วยดินสอดินสอสร้าง 8 หน้าจอที่สวยงามตั้งแต่เริ่มต้นจากความต้องการของเรานี่คือจุดที่ความมหัศจรรย์เกิดขึ้น ต่อไปนี้คือวิธีใช้ Pencil เพื่อสร้างหน้าจอมือถือที่สร้างขึ้นอย่างสวยงาม แทนที่จะเป็น AI slop: อ่านเพิ่มเติม

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw