Create a Simple App with Claude AI
App Near the Heart of Veteran 💜, a project created with Claude, a deep-concept line, appeasing the elderly but not the old design. 😄
The concept is "quick to find, easy to use, no pain in your eyes." Big letters, clear buttons. Find a pharmacy, hospital, restaurant near your home in a few clicks. It tells you the distance, the time of opening and closing, and save your favorites.
In other words, it is an app that makes parents' lives more comfortable, but the design also looks modern, the way we want to use it. ✨
ถ้าใครกำลังหาไอเดีย “claude design” เพื่อทำแอป/เว็บให้ใช้งานง่าย (โดยเฉพาะกลุ่มผู้สูงวัย) ฉันลองทำโปรเจกต์แนว “หาได้ไว ใช้ง่าย ไม่ปวดตา” ด้วย Claude AI ผ่านฟีเจอร์ Artifacts แล้วเวิร์กมาก เลยสรุปทริคที่ช่วยให้ได้หน้าตาแอปออกมาดูดีและใช้งานจริงได้ค่ะ 1) เริ่มจากตั้งโจทย์ให้ชัด (ก่อนพิมพ์ prompt) ฉันกำหนด “ผู้ใช้หลัก” = พ่อแม่/ผู้สูงวัย และ “งานหลัก” = ค้นหาสถานที่ใกล้บ้าน เช่น ร้านยา โรงพยาบาล ร้านอาหาร จากนั้นลิสต์ข้อมูลที่ต้องแสดงในผลค้นหาให้ครบ: ชื่อสถานที่, คะแนน/รีวิว (ถ้ามี), ระยะทาง, เวลาเปิด–ปิด และปุ่ม “บันทึกรายการโปรด” พอเราชัด Claude จะออกแบบ flow ได้ตรงจุดมากขึ้น 2) เลือกให้ถูกใน Claude: Artifacts → + New artifact → Apps and websites อันนี้เป็นทางลัดสำคัญ เพราะทำให้ Claude สร้างหน้าตาแอปเป็นชิ้นงานให้ดูได้ทันที (เหมือนมีต้นแบบ/โปรโตไทป์) แล้วเราค่อยสั่งแก้ต่อได้ ไม่ต้องเริ่มจากศูนย์ 3) โครง prompt ที่ฉันใช้แล้วได้ผล - “วัตถุประสงค์แอป”: ค้นหาสถานที่ใกล้เคียงแบบ 2–3 คลิก - “หน้าที่ต้องมี”: หน้าค้นหา, หน้าผลลัพธ์, หน้ารายละเอียด, หน้าโปรด - “ข้อมูลที่ต้องโชว์”: ระยะทาง, เวลาเปิด–ปิด, ปุ่มโทร/นำทาง (ถ้าทำได้) - “ข้อกำหนดการมองเห็น”: ตัวอักษรใหญ่, คอนทราสต์สูง, ปุ่มใหญ่กดง่าย - “สไตล์ (modern ไม่แก่)”: โทนม่วง/ขาว, มุมโค้ง, ไอคอนเรียบ เขียนเป็นบูลเล็ตแบบนี้ Claude จะจับ requirement ได้ครบ และงานจะไม่หลุดธีม 4) ทริคด้าน UI ที่ช่วยให้ “อ่านง่ายจริง” - ขนาดตัวอักษร: หัวข้อใหญ่กว่าข้อความ 1–2 ระดับ และเว้นบรรทัดเยอะขึ้น - ปุ่มหลัก (CTA) มีปุ่มเดียวเด่นๆ ต่อหน้าจอ เช่น “ค้นหาใกล้ฉัน” - ผลลัพธ์เป็นการ์ด: ชื่อร้านใหญ่, ใต้ชื่อค่อยเป็นระยะทาง/เวลาเปิด–ปิด - ใช้ข้อความตรงๆ เช่น “เปิดอยู่/ปิดแล้ว” แทนข้อความยาว 5) ขอให้ Claude สร้างข้อมูลตัวอย่างในหน้าจอด้วย ฉันชอบให้ Claude ใส่ตัวอย่างผลค้นหาแบบ “ร้านข้าวต้มคุณยาย” หรือ “ร้านขายยาเมดิก้า” พร้อมระยะทางและเวลาทำการ เพราะพอมี data สมจริง เราจะเห็นทันทีว่าเลย์เอาต์แน่นไปไหม และปุ่ม “เซฟรายการโปรด” วางตำแหน่งเหมาะหรือเปล่า ถ้าจะให้เนี้ยบขึ้น ลองสั่ง Claude เพิ่มเงื่อนไขเรื่องการเข้าถึง (accessibility) เช่น สีที่คอนทราสต์สูง, ขนาดพื้นที่กดปุ่มขั้นต่ำ และหลีกเลี่ยงตัวอักษรเล็ก/สีเทาอ่อน เท่านี้ก็ได้ “Claude design” ที่ทั้งสวย โมเดิร์น และใช้งานง่ายแบบตั้งใจจริงค่ะ
