วิธีใช้ Claude Design ฟรี

Claude Design ได้รับความสนใจทันทีที่เปิดตัว เพราะคุณพิมพ์คำอธิบายสั้นๆ แล้วได้ pitch deck, landing page หรือ mockup มือถือกลับมาในไม่กี่วินาที แต่ถ้าคุณต้องการใช้งานแบบฟรีหรือควบคุมสภาพแวดล้อมเอง จะติดข้อจำกัดทันที: เป็นบริการมีค่าใช้จ่าย, ทำงานบนคลาวด์ และอยู่ในแพลตฟอร์มของ Anthropic เท่านั้น

ลองใช้ Apidog วันนี้

ทางเลือกที่ใกล้เคียงที่สุดคือ Open Design โปรเจกต์โอเพนซอร์สที่สร้างเวิร์กโฟลว์แบบ “artifact-first” คล้าย Claude Design แต่รันบนเครื่องคุณเองได้ คู่มือนี้จะพาคุณติดตั้ง Open Design 3 วิธี, เชื่อมต่อกับ coding agent ที่มีอยู่ และต่อยอดจาก prototype ไปเป็นผลิตภัณฑ์จริงด้วย API workflow

💡 เครื่องมือออกแบบให้ UI กับคุณ แต่ UI ที่มีแค่ mock data ยังไม่ใช่ผลิตภัณฑ์จริง เมื่อจับคู่ Open Design กับแพลตฟอร์ม API อย่าง Apidog คุณจะได้ mock server, API spec และ test workflow เพื่อให้ prototype เรียกข้อมูลจริงหรือข้อมูลจำลองที่มีโครงสร้างได้

TL;DR: วิธีใช้ Claude Design ฟรี

Claude Design เป็นเครื่องมือแบบ closed-source ของ Anthropic และต้องใช้งานผ่านบริการที่มีค่าใช้จ่าย หากคุณต้องการประสบการณ์ใกล้เคียงกันแบบฟรี ให้ติดตั้ง Open Design ซึ่งเป็นทางเลือกโอเพนซอร์สภายใต้ Apache-2.0

Open Design:

• รันได้บนเครื่องคุณเองหรือ self-host
• ใช้ coding-agent CLI เป็น design engine
• รองรับ Claude Code, Codex, Gemini CLI, Cursor Agent และ agent อื่นๆ
• ไม่มีค่าใช้จ่ายซอฟต์แวร์
• คุณจ่ายเฉพาะค่าโมเดล AI ที่เชื่อมต่อ หากใช้ agent ที่สมัครสมาชิกอยู่แล้ว ค่าใช้จ่ายเพิ่มอาจเป็นศูนย์

ทำไม “Claude Design ฟรี” จึงมีข้อควรระวัง

ก่อนเริ่ม ควรแยกให้ชัดว่า Claude Design เป็นผลิตภัณฑ์ของ Anthropic ไม่ใช่ซอฟต์แวร์โอเพนซอร์ส และไม่มีตัวเลือก self-host หรือเปลี่ยนโมเดลเอง หากต้องการใช้ผลิตภัณฑ์ Claude Design จริงๆ คุณต้องจ่ายเงินให้ Anthropic

ดังนั้น “ใช้ Claude Design ฟรี” ในทางปฏิบัติหมายถึงการใช้ เวิร์กโฟลว์แบบเดียวกัน:

1. อธิบายสิ่งที่ต้องการด้วยภาษาธรรมดา
2. ให้ AI สร้าง design artifact
3. preview, export และนำไปต่อยอด

Open Design ตอบโจทย์นี้ด้วยแนวทาง local-first และเปิดให้คุณเลือก agent หรือโมเดลเองได้

Open Design คืออะไร?

Open Design หรือ OD คือสภาพแวดล้อมออกแบบโอเพนซอร์สที่เน้นการทำงานบนเครื่องผู้ใช้ repository บน GitHub ระบุว่าเป็นทางเลือกแบบเปิดที่รองรับ agent สำหรับ Claude Design

สถาปัตยกรรมหลักมี 3 ชั้น:

1. Web front end

   • สร้างด้วย Next.js
   • เป็น UI สำหรับ chat, canvas และ preview
   • ใช้งานผ่าน browser และ deploy ไป Vercel ได้

2. Local daemon

   • เป็น Node.js server ขนาดเล็ก
   • ใช้ SQLite เก็บ project, conversation และ artifact
   • สแกนระบบเพื่อหา coding agent ที่ติดตั้งอยู่

3. Agent runtime

   • daemon เรียก coding-agent CLI โดยใช้ project folder เป็น working directory
   • agent อ่าน skill, design system และเขียนไฟล์ artifact ให้คุณ

จุดสำคัญคือ Open Design ไม่ได้มาพร้อมโมเดลของตัวเอง แต่ใช้ coding agent ที่คุณติดตั้งอยู่แล้ว เช่น Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI และ Kimi หากต้องการเข้าใจแนวคิดนี้เพิ่มเติม อ่านบทความเรื่อง สถาปัตยกรรม Claude Code agent harness

Open Design ยังมี asset สำคัญ 2 กลุ่ม:

• Skills: template และ checklist สำหรับงานประเภทต่างๆ เช่น landing page, dashboard, mobile app, email layout, social carousel และ presentation
• Design systems: ไฟล์ Markdown ที่อธิบายสี, typography, spacing, motion และ tone โดยจำลองจากแบรนด์จริง เช่น Linear, Stripe, Vercel, Notion และ Apple

แนวคิดนี้คล้ายกับการให้ coding agent อ่านไฟล์แนวทางออกแบบก่อนเริ่มสร้างงาน เช่น ไฟล์ DESIGN.md สำหรับ coding agents

Open Design สามารถสร้าง web prototype, desktop/mobile UI, presentation, image และ short video พร้อม preview ใน sandboxed iframe และ export เป็น HTML, PDF, PPTX, ZIP, Markdown หรือ MP4 ได้

วิธีติดตั้ง Open Design

เลือกวิธีติดตั้งตามระดับการควบคุมที่ต้องการ ทั้งหมดจะได้ผลลัพธ์เดียวกันคือ design studio ที่รันใน browser

ตัวเลือกที่ 1: ใช้แอปเดสก์ท็อป

เหมาะกับคนที่ต้องการเริ่มเร็วที่สุด โดยไม่ใช้ terminal

1. ไปที่ open-design.ai หรือ GitHub releases
2. ดาวน์โหลด build สำหรับระบบปฏิบัติการของคุณ
3. ติดตั้งและเปิดใช้งานเหมือนแอปทั่วไป

เมื่อเปิดครั้งแรก แอปจะ:

• สแกนหา coding agents ในเครื่อง
• โหลด skills และ design systems
• สร้าง runtime folder สำหรับ project

วิธีนี้เหมาะกับ designer, PM หรือ developer ที่ต้องการทดลอง workflow ก่อน โดยไม่ต้อง build จาก source

ตัวเลือกที่ 2: ใช้ Docker

เหมาะกับการรันเป็น service บนเครื่องส่วนตัวหรือเครื่อง shared

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

จากนั้นเปิด browser ไปที่:

http://localhost:7456

Docker ช่วยแยก environment ออกจากระบบหลัก และอัปเกรดได้ง่าย หากยังไม่คุ้นกับ container workflow อ่านพื้นฐานได้จาก เอกสาร Docker

ตัวเลือกที่ 3: รันจากซอร์สโค้ด

เหมาะกับ developer ที่ต้องการแก้ skill, design system หรือทดลองฟีเจอร์ล่าสุดบน branch main

ต้องมี:

• Node.js ประมาณเวอร์ชัน 24
• pnpm 10.33.x

ติดตั้งและรัน:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version    # ตรวจสอบว่าเป็น 10.33.x
pnpm install
pnpm tools-dev run web

คำสั่งที่ใช้บ่อย:

คำสั่ง	การทำงาน
pnpm tools-dev run web	เริ่ม daemon และเว็บแบบ foreground
pnpm tools-dev start web	เริ่ม daemon และเว็บแบบ background
pnpm tools-dev status	ดูสถานะ service
pnpm tools-dev logs	ดู log ของ daemon และเว็บ
pnpm tools-dev stop	หยุดทุก service

ถ้าคุณใช้ pnpm อยู่แล้ว ขั้นตอนนี้ตรงไปตรงมา ส่วน corepack enable จะช่วย pin version ของ package manager ให้ตรงกับที่โปรเจกต์ต้องการ

เชื่อมต่อ design engine ครั้งแรก

หลังติดตั้ง Open Design แล้ว คุณต้องมี engine สำหรับให้ AI สร้าง artifact มี 2 วิธีหลัก

วิธี A: ใช้ agent CLI

นี่คือวิธีที่แนะนำและมักประหยัดที่สุด

ตรวจสอบว่า coding agent ที่รองรับถูกติดตั้งและอยู่ใน PATH เช่น:

which claude
which gemini
which codex

ถ้าต้องการประสบการณ์ใกล้ Claude Design มากที่สุด ให้ใช้ Claude Code เพราะทำงานบนโมเดลของ Anthropic เช่นกัน daemon ของ Open Design จะตรวจจับ agent โดยอัตโนมัติ ไม่ต้องแก้ config เพิ่ม

Codex, Gemini CLI และ Cursor Agent ก็ใช้แนวคิดเดียวกัน หากคุณมี subscription ของ Claude, OpenAI หรือ Google อยู่แล้ว Open Design จะใช้ผ่าน agent เหล่านั้น โดยไม่มีค่าใช้จ่ายซอฟต์แวร์เพิ่ม ดูตัวอย่างการตั้งค่าได้ใน คู่มือ Claude Agent SDK และ Claude plan

วิธี B: ใช้ BYOK proxy

ถ้าไม่มี CLI agent ในเครื่อง คุณสามารถใช้ proxy ที่เข้ากันได้กับ OpenAI แล้วใส่ API key ของ provider เช่น:

• Anthropic
• OpenAI
• Azure OpenAI
• Google Gemini
• Ollama
• local model server

วิธีนี้มีค่าใช้จ่ายตาม token หากใช้ provider แบบ paid API แต่ไม่ต้องติดตั้ง agent CLI เพิ่ม

หากคุณจัดการ API key เอง ควรระวังเรื่องการเก็บ key และการเปิดเผย key ใน environment อ่านเพิ่มเติมได้จากแนวทางเรื่อง ความปลอดภัยของ API key ใน extension ของ editor

ถ้าต้องการฟรีจริง: ใช้ Ollama

หากเชื่อม Open Design กับโมเดลในเครื่องผ่าน Ollama workflow ทั้งหมดสามารถทำงานแบบ offline และไม่มีค่า API ได้ นี่คือรูปแบบที่ใกล้กับ “Claude Design ฟรี” มากที่สุดในเชิงต้นทุน

สร้าง design artifact ชิ้นแรก

เมื่อเชื่อมต่อ engine แล้ว ให้ทำตาม workflow นี้

1. เลือก skill

   • เช่น SaaS landing page, dashboard, mobile screen, marketing email หรือ presentation
   • skill จะบอก agent ว่าควรใช้ template และ checklist แบบใด

2. เลือก design system

   • เช่น Linear, Stripe, Vercel หรือ Notion
   • ถ้าไม่เลือก Open Design จะเสนอ style direction เช่น Editorial, Modern Minimal, Tech Utility, Brutalist และ Soft Warm

3. เขียน brief
   ใช้ภาษาธรรมดา เช่น:
   

   ออกแบบหน้า pricing สำหรับเครื่องมือ API ของนักพัฒนา

หรือ:

   สร้าง pitch deck สไตล์นิตยสารสำหรับ seed round

1. ตอบ discovery form

   • ระบุ audience, tone, brand context และ preference
   • ขั้นตอนนี้ช่วยลดการเดาผิดของโมเดล

2. ดู plan stream

   • agent จะแสดง task list แบบ real-time
   • คุณเห็นว่ามันกำลังสร้างอะไร แทนที่จะรอ loading เฉยๆ

3. preview ใน sandbox

   • artifact จะแสดงใน sandboxed iframe
   • แนวคิด sandbox ช่วยแยก generated code ออกจากระบบหลัก อ่านเพิ่มเติมได้ใน CubeSandbox มีความหมายอย่างไรสำหรับเอเจนต์ AI

4. export

   • รองรับ HTML, PDF, PPTX, ZIP, Markdown และ MP4
   • ไฟล์ยังอยู่ใน project folder และแก้ต่อได้โดยตรง

จุดที่ไม่ควรข้ามคือ discovery form เพราะคำถามไม่กี่ข้อช่วงต้นมักช่วยประหยัดเวลาการแก้ design หลังจากนั้นได้มาก

ปรับแต่ง Open Design ให้เหมาะกับทีม

หลังจากสร้าง artifact แรกแล้ว คุณสามารถปรับ workflow ให้เป็นของทีมได้มากขึ้น

แก้ไข skills

แต่ละ skill เป็น folder ที่มีไฟล์ SKILL.md และ asset ที่เกี่ยวข้อง คุณสามารถ:

• เปลี่ยน checklist
• เพิ่ม layout template
• ใส่ข้อกำหนดของทีม
• บังคับ pattern ที่ใช้ซ้ำ

เมื่อ agent สร้างงานครั้งต่อไป มันจะอ่าน skill เวอร์ชันที่คุณแก้ไข

เขียน design system เอง

Design system ใน Open Design เป็น Markdown ธรรมดา ไม่ใช่ไฟล์ binary ที่ล็อกอยู่ในแอป คุณสามารถอธิบาย:

• color tokens
• typography scale
• spacing
• component rules
• tone of voice

จากนั้นวางไว้ใน folder design-systems เพื่อให้ artifact ใหม่ทำตาม brand rule เดียวกัน

ใช้ BYOK เพื่อสลับโมเดล

BYOK proxy ช่วยให้คุณเลือกโมเดลตามงานได้ เช่น:

• ใช้โมเดล frontier สำหรับ presentation ลูกค้า
• ใช้โมเดลราคาถูกสำหรับ draft
• ใช้โมเดล local สำหรับงานภายในหรือ offline

หากต้องการเปรียบเทียบโมเดล อ่าน Gemini 3.5 vs GPT-5.5 vs Opus 4.7

ใช้ MCP server

Open Design มี Model Context Protocol server ในตัว ทำให้ coding agent อื่นเชื่อมต่อและอ่านไฟล์ design, artifact หรือ design system ได้โดยตรง โดยไม่ต้อง export/import ไปมา

สร้าง media จาก prompt

นอกจาก layout แล้ว Open Design ยังรองรับการสร้างรูปภาพ, poster, avatar, short video และ motion graphics แบบ HTML-to-MP4 จาก prompt ใน workflow เดียวกัน

จาก prototype สู่ผลิตภัณฑ์: ใช้ Open Design คู่กับ Apidog

Open Design สร้าง front end ที่ดูดีได้เร็ว เช่น landing page, dashboard หรือ mobile screen แต่ prototype ที่มี hardcoded mock data ยังไม่ใช่ผลิตภัณฑ์จริง เมื่อผู้ใช้กดปุ่มหรือโหลดข้อมูล UI ต้องมี API รองรับ

นี่คือจุดที่ Apidog เข้ามาช่วยใน workflow

สมมติว่า Open Design สร้าง dashboard สำหรับ developer tool ที่มี:

• usage chart
• billing panel
• account settings

คุณต้องมี endpoint เช่น:

GET /usage
GET /billing/invoices
GET /account/settings
PATCH /account/settings

ใน Apidog คุณสามารถออกแบบ API แบบ schema-first และสร้าง OpenAPI spec ที่ชัดเจน จากนั้นใช้ mock server เพื่อให้ front end เรียกข้อมูลที่มีโครงสร้างจริงได้ทันที

ตัวอย่าง response สำหรับ usage endpoint:

{
  "period": "2026-05",
  "requests": 128430,
  "errorRate": 0.012,
  "latencyP95Ms": 184
}

ประโยชน์ของ workflow นี้:

• front end ไม่ต้องรอ backend เสร็จ
• backend ใช้ spec เดียวกันในการ implement
• QA และทีมอื่นทดสอบกับ mock endpoint ได้
• ลดการ hardcode ข้อมูลตัวอย่างใน prototype

เมื่อ backend จริงพร้อม Apidog ยังช่วยทำ automated API testing ด้วย visual assertions และเชื่อมกับ CI/CD ได้ เพื่อให้ endpoint ที่ขับเคลื่อน UI ยังทำงานถูกต้องเมื่อระบบเติบโต อ่านเพิ่มเติมได้ที่ โหมด spec-first ใน Apidog

Open Design และ Apidog ยังเข้ากับ agent workflow ได้ดี เพราะ Apidog มี ตัวดีบักเอเจนต์ AI สำหรับตรวจสอบว่า agent เรียก endpoint อย่างไร

สรุป workflow ที่ใช้งานได้จริง:

1. สร้าง UI artifact ด้วย Open Design
2. นิยาม API spec ด้วย Apidog
3. เปิด mock server
4. ต่อ front end เข้ากับ mock endpoint
5. ให้ backend implement ตาม spec
6. เขียน API tests และรันใน CI/CD

หากต้องการเริ่มใช้งาน ไปที่ ดาวน์โหลด Apidog

Open Design เทียบกับ Claude Design เทียบกับ Figma

ปัจจัย	Open Design	Claude Design	Figma
ราคา	ฟรี, Apache 2.0	subscription แบบมีค่าใช้จ่าย	มีทั้งแผนฟรีและแผน paid
ซอร์สโค้ด	เปิด	ปิด	ปิด
การโฮสต์	local, self-host หรือ Vercel	cloud เท่านั้น	cloud
AI engine	agent ใดก็ได้, BYOK หรือ local model	โมเดล Anthropic เท่านั้น	manual และฟีเจอร์ AI เพิ่มเติม
ผลลัพธ์	code artifacts, slides, image, video	design artifacts	design files
ทำงาน offline	ได้ หากใช้ local model	ไม่ได้	จำกัด
เหมาะกับ	developer และทีมที่ต้องการควบคุม stack	คนที่ต้องการ hosted experience	designer ที่ต้องการ pixel-level control

Claude Design เด่นเรื่องความสะดวก เพราะเป็น hosted service ที่พร้อมใช้ทันที Figma ยังคงเหมาะกับงานออกแบบที่ต้องการควบคุมละเอียดและ collaboration แข็งแรง ส่วน Open Design เหมาะกับ developer ที่ต้องการเลือก agent เอง, รัน local ได้ และต่อยอด artifact เป็น code workflow ได้ง่ายกว่า

ข้อผิดพลาดที่พบบ่อย

1. ไม่มี agent ใน PATH

ถ้า daemon หา engine ไม่เจอ ให้ตรวจสอบด้วย:

which claude
which gemini
which codex

ถ้าไม่มี ให้ติดตั้ง CLI agent ที่รองรับ หรือใช้ BYOK proxy แทน

2. ใช้ Node หรือ pnpm ผิดเวอร์ชัน

การรันจาก source ต้องการ Node ประมาณเวอร์ชัน 24 และ pnpm 10.33.x ใช้คำสั่งนี้เพื่อลดปัญหา version mismatch:

corepack enable
corepack pnpm --version

3. คิดว่า API key แบบ paid จะไม่มีค่าใช้จ่าย

Open Design ฟรี แต่ API provider ไม่ได้ฟรีเสมอ หากใช้ Anthropic หรือ OpenAI API key ผ่าน BYOK proxy คุณจะจ่ายตาม token หากต้องการลดค่าใช้จ่าย ให้ใช้ agent ที่คุณมี subscription อยู่แล้ว หรือใช้ Ollama ในเครื่อง

4. ข้าม discovery form

อย่าข้ามคำถามช่วงต้น เพราะ form นี้ช่วยให้โมเดลเข้าใจ audience, tone และ brand context ก่อนสร้าง artifact

5. ถือว่า generated code พร้อม production ทันที

artifact จาก Open Design เป็นจุดเริ่มต้น ไม่ใช่ codebase ที่ผ่าน review แล้ว ควร:

• review code
• refactor
• เชื่อมกับ API จริง
• เพิ่ม automated tests
• ทดสอบ endpoint ด้วยเครื่องมืออย่าง Apidog

6. ใช้ build เก่าเกินไป

Open Design พัฒนาเร็ว หากเอกสารพูดถึงฟีเจอร์ที่คุณไม่เห็น อาจเป็นเพราะใช้ build เก่า ผู้ใช้ source install สามารถ pull main ส่วนผู้ใช้ binary ควรตรวจสอบ releases ใหม่

สรุป

คุณไม่สามารถใช้ผลิตภัณฑ์ Claude Design ของ Anthropic ได้ฟรี แต่คุณสามารถใช้เวิร์กโฟลว์ที่ใกล้เคียงกันได้ด้วย Open Design

สิ่งที่ควรจำ:

• Open Design เป็นโอเพนซอร์สภายใต้ Apache-2.0
• ติดตั้งได้ผ่าน desktop app, Docker หรือ source code
• ใช้ coding-agent CLI เป็น engine เช่น Claude Code, Codex หรือ Gemini CLI
• ใช้ Ollama ได้หากต้องการ workflow แบบ local และไม่มีค่า API
• skills และ design systems แก้ไขได้ด้วย Markdown
• prototype ที่สร้างจาก Open Design ควรต่อกับ API workflow เพื่อให้ใช้งานได้จริง
• ใช้ Apidog เพื่อออกแบบ API, สร้าง mock server และทดสอบ endpoint

ขั้นตอนต่อไปที่แนะนำ:

1. ติดตั้ง Open Design ด้วยวิธีที่เหมาะกับคุณ
2. เชื่อมต่อ coding agent หรือ BYOK proxy
3. สร้าง artifact แรก
4. ดาวน์โหลด Apidog
5. ออกแบบ API ที่อยู่เบื้องหลัง artifact
6. เปิด mock server แล้วต่อ front end เข้ากับ endpoint นั้น

ด้วย workflow นี้ คุณจะได้เส้นทางจาก prompt → prototype → API-backed product โดยใช้เครื่องมือที่ควบคุมได้มากกว่าและเริ่มต้นได้ฟรี.