# Open Design: ทางเลือก Open-Source แทน Claude Design ที่พุ่ง 2,700 ดาวใน 24 ชั่วโมง By [nanobro](https://blog.nanobro.co) · 2026-04-30 open-design, ai-design, open-source, claude-design, ai, design-systems --- ถ้าฟีลคล้าย Claude code แต่ไม่ต้องใช้ claude subscription ลองกันได้ครับ ——--- Open Design: ทางเลือก Open-Source แทน Claude Design ที่พุ่ง 2,700 ดาวใน 24 ชั่วโมง ================================================================================== เมื่อ 17 เมษายน 2026 Anthropic เปิดตัว **Claude Design** พร้อมกับโมเดล Opus 4.7 - เปลี่ยน LLM จากการเขียนข้อความธรรมดา มาเป็นการสร้าง design artifact จริงๆ โพสต์ไวรัลทันที แต่ติดปัญหาใหญ่: ปิดซอร์ส, ใช้ได้แค่บน claude.ai, จ่ายเงินเท่านั้น, ล็อคอยู่กับโมเดลของ Anthropic ไม่มีวัน self-host หรือ deploy เองได้ **Open Design** (OD) คือคำตอบ open-source ที่เกิดขึ้นห่างกันแค่ 11 วัน แกนหลัก 6 ข้อที่ทำให้ OD ต่างจาก Claude Design ---------------------------------------------- **1\. เราไม่ต้องส่ง agent มาให้ - ของคุณดีพอแล้ว** OD ไม่ได้มาพร้อม agent ของตัวเอง แต่สแกนหา coding agent ที่คุณมีอยู่แล้วบนเครื่อง - Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code หรือ GitHub Copilot CLI - แล้วใช้ตัวนั้นเป็น design engine เลย ไม่มี agent? ใช้ Anthropic API แบบ BYOK ได้ **2\. Skill คือไฟล์ ไม่ใช่ plugin** ตาม convention ของ Claude Code SKILL.md แต่ละ skill ก็คือโฟลเดอร์ (SKILL.md + assets/ + references/) ดรอปเข้าไปใน `skills/` รีสตาร์ท daemon ก็เสร็จ ไม่ต้อง build ไม่ต้อง registry มี **19 skills** พร้อมใช้: prototype, deck, mobile app, dashboard, pricing, docs, blog, SaaS landing, email marketing, social carousel, sprite animation และ document templates อีก 10 แบบ (PM spec, OKRs, runbook, invoice, kanban ฯลฯ) **3\. Design System คือ Markdown ไม่ใช่ theme JSON** เรือธงเรื่องนี้เลย - **71 design systems** ที่มาเป็นไฟล์ DESIGN.md 9 หมวด (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns) สลับระบบได้ทันที artifact ต่อไปก็ใช้ token ใหม่ มีตั้งแต่ Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Cursor, Supabase, Figma, Coinbase, Binance, Shopify, Spotify ไปจนถึง SpaceX **4\. Question Form ป้องกัน 80% ของการ redirect** กฎข้อ 1 ของ OD: turn แรกต้องเป็น `` เท่านั้น ห้ามเขียนโค้ด ห้ามคิด ห้ามเรนเดอร์ surface, audience, tone, brand context, scale - ตอบ 30 วินาทีด้วย radio button ดีกว่าเสียเวลาแก้ 30 นาทีหลังเสร็จ **5\. Daemon ทำให้ agent รู้สึกเหมือนอยู่บนเครื่องคุณ - เพราะมันอยู่จริงๆ** Daemon spawn CLI ของคุณใน project folder จริงๆ agent ได้ `Read`, `Write`, `Bash`, `WebFetch` ครบ - เข้าถึง filesystem จริง อ่าน template, grep หา hex color, เขียน brand-spec.md, สร้าง .pptx/.zip/.pdf ที่ปรากฏใน file workspace ทันที session ทั้งหมดเก็บใน SQLite เปิดมาวันต่อมา todo card ยังอยู่ที่เดิม **6\. Prompt stack คือตัวผลิตภัณฑ์** ที่ส่งไปไม่ใช่แค่ "system + user" แต่เป็น 7 เลเยอร์: DISCOVERY directives + identity charter + active DESIGN.md + active SKILL.md + project metadata + skill side files + deck framework directive (ถ้าเป็น deck mode) ทุกเลเยอร์แก้ไขได้ ทุกเลเยอร์คือไฟล์ Anti-AI-Slop: กลไกป้องกันผลงาน AI ที่ดูเป็น AI ---------------------------------------------- นี่คือสิ่งที่แยก OD ออกจาก "AI ลองทำ design" ทั่วไป: * **Question form ก่อนเสมอ** - Turn 1 คือคำถามเท่านั้น ไม่มีโค้ด ไม่มีการคิด * **Brand-spec extraction** - 5 ขั้นตอน: locate, download, grep hex, codify brand-spec.md, vocalize - ห้ามเดาสีแบรนด์จากความจำเด็ดขาด * **5-dim self-critique** - ก่อนส่ง artifact agent ต้องให้คะแนนตัวเอง 1-5 ตาม philosophy, hierarchy, execution, specificity, restraint ต่ำกว่า 3/5 = แก้ใหม่ * **Slop blacklist** - ไล่แบน purple gradient, generic emoji icons, rounded card + left-border accent, hand-drawn SVG humans, Inter เป็น display face, invented metrics * **Placeholder ที่ซื่อสัตย์ > ตัวเลขปลอม** - ไม่มีข้อมูลจริง = ใช้ `—` หรือ grey block ห้ามเขียน "10x faster" แบบไม่มีที่มา Visual Directions: 5 ทิศทางไม่มี AI Improvise --------------------------------------------- เมื่อผู้ใช้ไม่มี brand spec agent จะเสนอ 5 ทิศทางให้เลือก แต่ละทางคือ deterministic spec ครบ - palette ใน OKLch, font stack, layout posture cues, references เลือกคลิกเดียว = ระบบ visual พร้อมใช้ ไม่มีการ improvise: ทิศทาง บรรยากาศ Editorial - Monocle/FT นิตยสารสิ่งพิมพ์, หมึก + ครีม + warm rust Modern Minimal - Linear/Vercel เย็น, โครงสร้าง, accent น้อย Tech Utility หนาแน่น, monospace, terminal Brutalist ดิบ, type ขนาดใหญ่, ไม่มีเงา, accent แรง Soft Warm กว้าง, contrast ต่ำ, neutral อบอุ่น เปรียบเทียบรวดเดียว ------------------- Claude Design Open Design License ปิด Apache-2.0 Deploy เองได้ ไม่ได้ Vercel / local Agent มาพร้อม (Opus 4.7) ใช้ agent ที่มีอยู่ Skills กรรมสิทธิ์ 19 SKILL.md file-based Design systems กรรมสิทธิ์ 71 ระบบ markdown Init question form ไม่มี มี (hard rule) Anti-slop ไม่มี 5-dim critique + blacklist Export จำกัด HTML / PDF / PPTX / ZIP / MD สถานะปัจจุบัน ------------- เพิ่งเปิด 28 เมษายน 2026 - วันเดียว 2,710 ดาว, 329 forks closed loop หลัก (detect agent, เลือก skill + design system, chat, parse artifact, preview, save) ทำงานได้ครบจบ prompt stack และ skill library คือจุดที่ value สูงสุดและ stable แล้ว UI component ยัง update รายวัน Roadmap ที่กำลังจะมา: comment-mode surgical edits, AI-emitted tweaks panel, Vercel deployment recipe, `npx od init`, skill marketplace ลองเลย ------ git clone https://github.com/nexu-io/open-design.git cd open-design nvm use corepack enable pnpm install pnpm dev:all # daemon (:7456) + Vite (:5173) open http://localhost:5173 **ที่มา:** [https://github.com/nexu-io/open-design](https://github.com/nexu-io/open-design) --- *Originally published on [nanobro](https://blog.nanobro.co/open-design-%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81-open-source-%E0%B9%81%E0%B8%97%E0%B8%99-claude-design-%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%9E%E0%B8%B8%E0%B9%88%E0%B8%87-2700-%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B9%83%E0%B8%99-24-%E0%B8%8A%E0%B8%B1%E0%B9%88%E0%B8%A7%E0%B9%82%E0%B8%A1%E0%B8%87)*