AI UI Designer Logo
AI UI Designer

วางโครงหน้าจอให้ชัดก่อนเขียนโค้ด

Skill ออกแบบ UI ฟรี สำหรับ Codex และ Claude Code

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

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

จากความต้องการ สู่เลย์เอาต์ที่ตรวจดูได้

กำหนดตำแหน่งข้อมูลและการทำงานหลักก่อน แล้วค่อยเลือกตัวอักษร ระยะห่าง และสี

ไวร์เฟรม SVG ที่มีช่องข้อมูลสินค้า ตัวเลือกขนาด ปุ่มสร้าง และการ์ดผลลัพธ์สี่ใบ
02 ตรวจสอบไวร์เฟรม
แบบ SVG สีของเครื่องมือเดียวกัน มีส่วนควบคุมสีม่วงและโปสเตอร์สินค้าขวด
03 ปรับแบบ UI

โครงเดียวกัน จากไวร์เฟรมสู่แบบหน้าจอ

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

01 อธิบายหน้าที่ต้องการ

ใช้ Skill ai-ui-designer
ออกแบบเครื่องมือทำโปสเตอร์สินค้า โดยมีชื่อสินค้า จุดขาย ตัวเลือกขนาด ปุ่มสร้าง และกริดแสดงผลลัพธ์

บอกเป้าหมายของหน้าและสิ่งที่ผู้ใช้ต้องทำให้ชัดเจน

02 ตรวจสอบไวร์เฟรม

ไวร์เฟรม SVG ที่มีช่องข้อมูลสินค้า ตัวเลือกขนาด ปุ่มสร้าง และการ์ดผลลัพธ์สี่ใบ
ตรวจว่าช่องกรอกครบ ปุ่มหลักชัด และมีพื้นที่แสดงผลเพียงพอ
เปิด SVG

03 ปรับแบบ UI

แบบ SVG สีของเครื่องมือเดียวกัน มีส่วนควบคุมสีม่วงและโปสเตอร์สินค้าขวด
เก็บโครงที่ตกลงไว้ แล้วปรับตัวอักษร ระยะห่าง สี และภาพตัวอย่าง
เปิด SVG

ติดตั้งแล้วเริ่มไวร์เฟรมแรก

ดาวน์โหลดและแตกไฟล์ ZIP จากนั้นนำโฟลเดอร์ ai-ui-designer ไปไว้ในไดเรกทอรี skills ของ Codex หรือ Claude Code ที่ใช้อยู่

  1. 1.วางไฟล์ให้ถูกตำแหน่ง

    SKILL.md ต้องอยู่ภายใน ai-ui-designer โดยตรง ชุดดาวน์โหลดมีคำสั่งงานออกแบบ เอกสารอ้างอิง และสคริปต์ช่วยงาน

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    ตรวจว่าไม่มีโฟลเดอร์ซ้อนเพิ่มอีกชั้นหลังแตกไฟล์

  2. 2.ระบุผู้ใช้และการทำงานหลัก

    เรียกใช้ Skill ในผู้ช่วย แล้วอธิบายหน้าที่ต้องการ กลุ่มผู้ใช้ และเนื้อหาที่จำเป็น

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

ออกแบบไวร์เฟรม SVG สำหรับหน้าแรกของผลิตภัณฑ์ โดยมีจุดเด่น ฟีเจอร์ และปุ่มสมัครใช้งาน

  3. 3.เปิด SVG แล้วขอแก้ไขเป็นจุด

    ดูไฟล์ในเบราว์เซอร์หรือโปรแกรมดู SVG แล้วขอปรับให้ชัดเจน เช่น เน้นหัวข้อหรือเพิ่มระยะรอบปุ่มหลัก

    หากไม่พบ Skill ให้ตรวจพาธและ SKILL.md โดย Codex จะตรวจจับการเปลี่ยนแปลงอัตโนมัติ หากยังไม่แสดงให้เริ่มใหม่ ส่วน Claude Code ให้ดูเมนู /

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

ตัดสินใจเรื่องหน้าจอทีละขั้น

จัดลำดับข้อมูลก่อน

วางบล็อกเนื้อหา ช่องกรอก และการทำงานในไวร์เฟรมโทนเทา

ค่อยปรับงานภาพ

ปรับตัวอักษร ระยะห่าง สี และภาพบนโครงที่ตรวจสอบแล้ว

แก้ต่อจากแบบเดิม

เก็บ SVG ไว้ในโปรเจกต์ แล้วให้ผู้ช่วยแก้ไขเฉพาะจุดเมื่อความต้องการชัดขึ้น

ดาวน์โหลดฟรีได้อะไรบ้าง

เริ่มจากโจทย์ของคุณเอง

Skill รองรับไวร์เฟรม แบบ UI สี การใช้ธีม และการจัดการแพ็กในเครื่อง

แพ็กฉากเป็นตัวเลือกสำหรับใช้อ้างอิงงานออกแบบ ไม่จำเป็นต่อการเริ่มใช้งานฟรี

แบบหน้าจอสำหรับตรวจสอบ

ผลลัพธ์คือไฟล์ SVG และแนวทางออกแบบ ปุ่มเข้าสู่ระบบ ชำระเงิน หรือสร้างภาพที่วาดไว้จะไม่ทำงานจริง

การสร้างแอปเป็นงานพัฒนาแยกต่างหาก ความพร้อมของผู้ช่วยและค่าบริการโมเดลเป็นไปตามเงื่อนไขของแต่ละเครื่องมือ

คำถามก่อนเริ่ม

ต้องสมัครสมาชิกหรือซื้อแพ็กไหม?
ดาวน์โหลด Skill ได้ฟรีและเริ่มออกแบบจากโจทย์ของคุณเอง เฉพาะการดาวน์โหลดแพ็กเสริมจากเว็บไซต์นี้เท่านั้นที่ต้องมีสมาชิกแบบเสียเงินที่ยังใช้งานได้
เรียกใช้ใน Codex และ Claude Code อย่างไร?
ติดตั้งในไดเรกทอรีที่ตรงกับเครื่องมือ แล้วใช้ $ai-ui-designer ใน Codex หรือ /ai-ui-designer ใน Claude Code จากนั้นอธิบายงานออกแบบ
สร้างแอปที่ใช้งานได้เลยหรือไม่?
ขั้นตอนนี้สร้างไวร์เฟรมและแบบ UI เป็น SVG แบบคงที่ ส่วนโค้ด ระบบหลังบ้าน และการโต้ตอบจริงต้องพัฒนาแยก
ติดตั้งแล้วทำไมไม่เห็น Skill?
ตรวจว่า SKILL.md อยู่ใน ai-ui-designer โดยตรงและพาธถูกต้อง หากจำเป็นให้เริ่ม Codex ใหม่ หรือค้นหา /ai-ui-designer ใน Claude Code

เริ่มหน้าถัดไปด้วยโครงที่ชัดเจน

ติดตั้ง Skill ออกแบบ UI ฟรีในผู้ช่วยเขียนโค้ด แล้วเปลี่ยนความต้องการเป็นเลย์เอาต์ SVG ที่เปิดตรวจและปรับแก้ได้ก่อนพัฒนา

ดาวน์โหลด Skill ฟรีกลับไปวิธีติดตั้ง