ให้ Claude เขียน HTML และ CSS ทำหน้าเว็บได้อย่างไร? พร้อม Prompt ตัวอย่าง

Claude ช่วยเขียน HTML และ CSS จากคำอธิบายหน้าเว็บได้ เช่น หน้าแนะนำบริการ การ์ดสินค้า หรือส่วนคำถามที่พบบ่อย คุณบอกโครงสร้าง เนื้อหา สี และรูปแบบที่ต้องการเป็นภาษาธรรมดา แล้วขอให้แยก HTML กับ CSS เพื่อให้นำไปทดลองและปรับแก้ได้ง่าย ผู้ใช้ ComSiam สามารถเริ่มจากส่วนเล็ก ๆ ของหน้าเว็บก่อน แล้วค่อยต่อยอดเป็นหน้าเต็ม

Anthropic ระบุว่า Claude ช่วยสร้างและอธิบายโค้ดได้ การระบุผลลัพธ์และข้อจำกัดให้ชัด เช่น ต้องรองรับมือถือหรือไม่ และห้ามใช้ไลบรารีภายนอก จะช่วยกำหนดทิศทางคำตอบได้ดีขึ้น

ก่อนสั่งให้ Claude สร้างหน้าเว็บ ควรกำหนดอะไร

① เป้าหมายของหน้า — เช่น แนะนำบริการ รับรายชื่อลูกค้า หรือแสดงข้อมูลสินค้า
② ส่วนประกอบที่ต้องมี — เช่น ส่วนหัว รูปภาพ ปุ่มติดต่อ รายการคุณสมบัติ และ FAQ
③ ข้อความบนหน้าเว็บ — ส่งข้อความจริงหรือบอกให้ใช้ข้อความตัวอย่าง
④ รูปแบบภาพรวม — เช่น เรียบง่าย ทางการ ใช้โทนสีเขียว หรือมีพื้นที่ว่างมาก
⑤ การแสดงผลบนหน้าจอขนาดต่าง ๆ — ระบุให้รองรับทั้งคอมพิวเตอร์และมือถือ
⑥ ข้อจำกัดด้านเทคนิค — เช่น ใช้ HTML และ CSS ปกติ ไม่ใช้ JavaScript หรือเฟรมเวิร์ก
⑦ รูปแบบไฟล์ที่ต้องการ — ขอแยกเป็น index.html และ style.css หรือรวมไว้ไฟล์เดียว

วิธีสั่ง Claude เขียน HTML และ CSS

① อธิบายจุดประสงค์และกลุ่มผู้เข้าชม
② ไล่ส่วนต่าง ๆ ของหน้าเว็บตามลำดับจากบนลงล่าง
③ ให้ข้อความ สี และตัวอย่างเนื้อหาที่ต้องการ
④ ระบุข้อกำหนดเรื่องมือถือ การเข้าถึง และการใช้แท็ก HTML ให้เหมาะสม
⑤ ขอให้แยกโค้ดตามไฟล์ พร้อมบอกวิธีนำไปทดลอง
⑥ เปิดดูหน้าเว็บจริง แล้วส่งภาพหน้าจอหรืออาการที่พบกลับไปปรับต่อ

Claude ช่วยร่างโค้ดได้ แต่การดูผลลัพธ์ในเบราว์เซอร์จริงยังจำเป็น เพราะสิ่งที่แสดงอาจต่างจากที่คาดเมื่อใช้ฟอนต์ รูปภาพ หรือ CSS ร่วมกับเว็บไซต์เดิม

Prompt ตัวอย่างสำหรับสร้างหน้าแนะนำบริการ

ช่วยสร้างหน้าเว็บแนะนำบริการด้วย HTML และ CSS

เป้าหมาย:
หน้าแนะนำบริการดูแลเว็บไซต์สำหรับธุรกิจขนาดเล็ก

ส่วนประกอบจากบนลงล่าง:
1. ส่วนหัว มีชื่อแบรนด์และเมนู 3 รายการ
2. ส่วนแนะนำบริการ มีหัวข้อ คำอธิบาย และปุ่มติดต่อ
3. รายการจุดเด่น 3 ข้อ
4. ขั้นตอนการใช้บริการ 3 ขั้น
5. คำถามที่พบบ่อย 3 ข้อ
6. ส่วนท้ายมีข้อมูลติดต่อแบบตัวอย่าง

รูปแบบ:
- ดูเรียบง่าย อ่านง่าย และน่าเชื่อถือ
- ใช้โทนสีน้ำเงินเข้มกับพื้นหลังสีอ่อน
- รองรับมือถือและคอมพิวเตอร์
- ใช้ HTML ที่มีความหมายเหมาะสม
- ใช้ข้อความตัวอย่างภาษาไทย
- ไม่ใช้ JavaScript, framework หรือไลบรารีภายนอก

ขอคำตอบเป็น:
1. โค้ดไฟล์ index.html
2. โค้ดไฟล์ style.css
3. วิธีเชื่อมไฟล์ CSS กับ HTML
4. จุดที่ควรเปลี่ยนเมื่อต้องใส่เนื้อหาจริง

Prompt นี้บอกทั้งเป้าหมาย โครงหน้า สไตล์ และข้อจำกัด จึงช่วยลดการเดา หากมีข้อความจริง โลโก้ หรือสีแบรนด์ ให้ใส่ไว้ใน Prompt เพื่อให้ผลลัพธ์ใกล้กับเว็บไซต์ที่จะนำไปใช้มากขึ้น

ตัวอย่างโครง HTML และ CSS แบบสั้น

HTML กำหนดโครงสร้างและเนื้อหา ส่วน CSS ควบคุมการจัดวางและรูปลักษณ์ ตัวอย่างเบื้องต้น:

<section class="intro">
  <h1>ดูแลเว็บไซต์ให้พร้อมใช้งาน</h1>
  <p>บริการช่วยตรวจสอบและปรับปรุงเว็บไซต์สำหรับธุรกิจ</p>
  <a class="button" href="#contact">ติดต่อเรา</a>
</section>

.intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}

.button {
  display: inline-block;
  padding: 12px 20px;
  background: #174ea6;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

เมื่อนำไปใช้ ควรตรวจว่า CSS เชื่อมกับ HTML ถูกต้อง และทดสอบปุ่มหรือลิงก์ว่าพาไปยังตำแหน่งที่ต้องการ

วิธีให้ Claude ปรับหน้าเว็บจากร่างแรก

อย่าบอกเพียงว่า “ทำให้สวยขึ้น” ให้ระบุสิ่งที่อยากเปลี่ยน เช่น:

• “เพิ่มช่องว่างระหว่างหัวข้อกับข้อความ”
• “ปรับปุ่มให้มองเห็นชัดขึ้น แต่คงสีหลักเดิม”
• “บนมือถือให้การ์ดเรียงเป็นคอลัมน์เดียว”
• “เพิ่มความแตกต่างของสีข้อความกับพื้นหลังเพื่อให้อ่านง่าย”
• “แก้เฉพาะ CSS และอย่าเปลี่ยนข้อความใน HTML”

การขอแก้ทีละประเด็นช่วยให้เทียบผลก่อนและหลังได้ง่าย และลดการเปลี่ยนส่วนที่ไม่เกี่ยวข้อง

วิธีตรวจโค้ดก่อนนำไปใช้

① เปิดไฟล์ HTML ในเบราว์เซอร์และตรวจว่าหน้าแสดงผลครบ
② ตรวจว่าชื่อไฟล์และตำแหน่งของ CSS ตรงกับที่ระบุใน HTML
③ ปรับขนาดหน้าจอเพื่อดูการแสดงผลบนมือถือ
④ ทดลองปุ่ม ลิงก์ เมนู และแบบฟอร์มว่าทำงานตามที่ต้องการ
⑤ ตรวจว่าข้อความอ่านง่าย สีตัดกันเหมาะสม และไม่มีส่วนสำคัญถูกซ่อน
⑥ นำไปใช้กับเว็บไซต์จริงหลังตรวจว่าไม่ชนกับสไตล์หรือระบบเดิม

หากจะนำโค้ดไปวางใน WordPress หรือระบบเว็บไซต์ที่มีธีมอยู่แล้ว ควรทดลองในหน้า Preview หรือสภาพแวดล้อมทดสอบก่อน เพราะ CSS บางกฎอาจกระทบองค์ประกอบอื่นของเว็บไซต์

คำถามที่พบบ่อย

ต้องรู้ HTML และ CSS ก่อนใช้ Claude หรือไม่

ไม่จำเป็นสำหรับการเริ่มต้น แต่ควรอ่านโค้ดและเข้าใจส่วนสำคัญก่อนนำไปใช้ เพื่อให้แก้ข้อความ สี หรือลิงก์ได้อย่างมั่นใจ

ควรให้ Claude เขียน HTML และ CSS ไฟล์เดียวกันหรือแยกไฟล์

ทั้งสองแบบใช้ได้ หากต้องการทดลองอย่างง่ายอาจรวมไฟล์ได้ แต่การแยก index.html และ style.css ช่วยให้จัดการและปรับแก้โค้ดได้เป็นสัดส่วน

Claude สร้างเว็บไซต์พร้อมใช้งานได้ทันทีหรือไม่

Claude ช่วยสร้างโค้ดตั้งต้นได้ แต่ควรตรวจหน้าจริง ลิงก์ การแสดงผลบนมือถือ และการทำงานร่วมกับเว็บไซต์เดิมก่อนเผยแพร่

สรุป

การให้ Claude เขียน HTML และ CSS ควรเริ่มจากกำหนดเป้าหมาย ส่วนประกอบ สไตล์ และข้อจำกัดของหน้าเว็บให้ชัด ขอให้แยกโค้ดและบอกวิธีทดลอง จากนั้นตรวจหน้าเว็บจริงและปรับทีละจุด ผู้อ่าน ComSiam สามารถนำ Prompt ตัวอย่างไปเปลี่ยนเป็นข้อมูลบริการหรือเนื้อหาของเว็บไซต์ตนเองได้