Phase 1: Design กับ Claude
Workshop Phase 1: เริ่มสร้าง portfolio website โดยให้ Claude ช่วยออกแบบก่อน — คุณแค่บอกว่าคุณเป็นใคร อยากได้สไตล์ไหน
เมื่อเรียนจบบทนี้ คุณจะ…
- บอกข้อมูลส่วนตัวและสไตล์ที่ชอบให้ Claude ได้
- ขอให้ Claude เสนอแนวทางการออกแบบเว็บไซต์ได้
- เลือกแนวทางการออกแบบที่ถูกใจจาก Claude ได้
ทำไมต้องให้ Claude ช่วยออกแบบเว็บไซต์?
ก่อนที่เราจะลงมือสร้างบ้าน เราก็ต้องมีแบบแปลนที่ดีก่อนใช่ไหมครับ? การสร้างเว็บไซต์ก็เหมือนกัน การออกแบบที่ดีคือหัวใจสำคัญที่จะทำให้เว็บไซต์ของเราน่าสนใจ ใช้งานง่าย และสื่อถึงตัวตนของเราได้ชัดเจน
สำหรับมือใหม่ที่อาจจะยังไม่ถนัดเรื่องออกแบบ หรือไม่มีไอเดียในหัวเยอะ การใช้ AI อย่าง Claude เข้ามาช่วยออกแบบในขั้นแรกนี้ จะช่วยให้คุณประหยัดเวลา ลดความกังวล และได้ไอเดียเจ๋ง ๆ ที่อาจจะคาดไม่ถึงเลยล่ะครับ
บอก Claude ว่า 'คุณคือใคร' (ตัวตนและอาชีพ)
การจะให้ Claude ออกแบบเว็บไซต์ให้เราได้ตรงใจที่สุด เราก็ต้องแนะนำตัวให้ Claude รู้จักเราก่อนครับ เหมือนเวลาเราไปสั่งตัดเสื้อ เราก็ต้องบอกช่างว่าเราเป็นคนแบบไหน ชอบสไตล์ไหน เพื่อให้ช่างออกแบบชุดที่เข้ากับเราที่สุด
ข้อมูลสำคัญที่คุณควรบอก Claude คือ 'อาชีพ' ของคุณ และ 'ตัวตน' ที่คุณอยากให้เว็บไซต์สื่อออกไป เช่น คุณเป็นกราฟิกดีไซเนอร์ที่ชอบความเรียบง่าย หรือเป็นนักการตลาดที่ชอบความสนุกสนาน ข้อมูลเหล่านี้จะช่วยให้ Claude เข้าใจบริบทและสร้างสรรค์ดีไซน์ที่ 'ใช่' สำหรับคุณ
เลือกสไตล์และโทนสีที่ 'ใช่' สำหรับคุณ
หลังจากแนะนำตัวแล้ว สิ่งต่อมาคือการบอกความชอบด้านสไตล์การออกแบบครับ เว็บไซต์ของเราควรมี 'บุคลิก' ที่ชัดเจน เช่น คุณชอบสไตล์ modern ที่ดูทันสมัย, minimal ที่เน้นความเรียบง่าย, หรือ playful ที่ดูสนุกสนานขี้เล่น
นอกจากสไตล์แล้ว การกำหนด 'โทนสี' ก็สำคัญมากครับ เช่น โทนสีอบอุ่นอย่างเอิร์ธโทน หรือโทนสีเย็นอย่างฟ้า-น้ำเงิน การเลือกโทนสีและสไตล์ที่เข้ากับตัวตนของคุณ จะช่วยให้เว็บไซต์มีเอกลักษณ์และน่าจดจำครับ
วิธีบอก Claude ให้เสนอแนวทางการออกแบบ (พร้อม Prompt ตัวอย่าง)
เมื่อเรามีข้อมูลพร้อมแล้ว ก็ถึงเวลา 'สั่งงาน' Claude ให้เริ่มออกแบบครับ เราจะใช้ 'Prompt' หรือข้อความคำสั่ง เพื่อบอกความต้องการทั้งหมดของเราให้ Claude เข้าใจ และขอให้ Claude เสนอแนวทางการออกแบบมาให้เลือก 2-3 แบบ
การขอหลาย ๆ แบบจะช่วยให้เรามีตัวเลือกมากขึ้น และเห็นภาพรวมของความเป็นไปได้ต่าง ๆ ก่อนที่เราจะตัดสินใจเลือกแนวทางที่ชอบที่สุดครับ
- เปิดหน้าต่างแชทกับ Claude หรือในพื้นที่ที่คุณสามารถป้อนคำสั่งได้
- คัดลอก Prompt ตัวอย่างนี้ไปวาง:
ฉันเป็น [อาชีพ] อยากได้ portfolio website สไตล์ [modern/minimal/playful] สีโทน [สี] มี section: hero, about, projects, contact ช่วยเสนอแนวทาง design 2-3 แบบก่อน แล้วฉันจะเลือก- แก้ไขส่วน
[อาชีพ],[modern/minimal/playful],[สี]ให้เป็นข้อมูลของคุณ (เลือกสไตล์ที่ชอบ 1 แบบ และสี 1 โทน) - กด Enter หรือส่ง Prompt เพื่อให้ Claude ประมวลผลและตอบกลับ
เลือกแนวทางที่โดนใจจากข้อเสนอของ Claude
หลังจากที่คุณส่ง Prompt ไปแล้ว Claude จะเสนอแนวทางการออกแบบมาให้คุณ 2-3 แบบ โดยแต่ละแบบอาจจะมีข้อเสนอเรื่องโทนสี รูปแบบการจัดวาง (layout) และอารมณ์ของเว็บไซต์ (mood) ที่แตกต่างกันออกไป
หน้าที่ของคุณคือการพิจารณาแต่ละแนวทางที่ Claude เสนอมา ลองดูว่าแบบไหนที่ 'โดนใจ' คุณมากที่สุด แบบไหนที่รู้สึกว่าใช่และเป็นตัวคุณมากที่สุด เหมือนเวลาเราเลือกแบบเสื้อผ้าจากแคตตาล็อกนั่นแหละครับ
เคล็ดลับ: เพิ่มความ 'ปัง' ให้ดีไซน์ด้วยตัวช่วยพิเศษ
บางครั้ง Claude อาจจะมี 'เครื่องมือพิเศษ' หรือ 'โหมดผู้เชี่ยวชาญ' ที่สามารถช่วยยกระดับการออกแบบของคุณให้มีรสนิยมและเป็นมืออาชีพมากขึ้นได้ครับ
ลองมองหาฟีเจอร์หรือคำสั่งที่เกี่ยวข้องกับการออกแบบประสบการณ์ผู้ใช้ (UX/UI) หรือการปรับแต่งสไตล์ เพื่อให้ได้ดีไซน์ที่ละเอียดและสมบูรณ์แบบมากยิ่งขึ้น หากไม่แน่ใจ ลองถาม Claude ตรงๆ ว่า 'มีเครื่องมืออะไรช่วยเรื่องการออกแบบเพิ่มเติมได้บ้าง?'
- บอกตัวตน + สไตล์ ให้ Claude design
- เลือกทิศทางก่อน build
- ใช้ skill design ช่วยได้