Kayshen-X ffd9d38d66 docs(readme): add ecosystem section and reframe jian as UI framework

Introduce the ZSeven-W product family (zode, agent-rs, jian, noema)
with a new Ecosystem section across all 15 locales, and reframe jian
from 'widget/render/event toolkit' to 'GPU-Skia UI framework' in the
Tech Stack table, Ecosystem table, and Project Structure tree.

2026-07-08 21:06:47 +08:00

38 KiB

Raw Blame History

OpenPencil

เครื่องมือออกแบบเวกเตอร์โอเพนซอร์สที่ขับเคลื่อนด้วย AI ตัวแรกของโลก
_{ทีม Agent ทำงานพร้อมกัน • Design-as-Code • MCP Server ในตัว • ปัญญาหลายโมเดล}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{คลิกที่รูปภาพเพื่อดูวิดีโอสาธิต}

หมายเหตุ: มีโปรเจกต์โอเพนซอร์สอีกโปรเจกต์หนึ่งที่ใช้ชื่อเดียวกัน — OpenPencil ซึ่งเน้นการออกแบบภาพที่เข้ากันได้กับ Figma พร้อมการทำงานร่วมกันแบบเรียลไทม์ โปรเจกต์นี้เน้นเวิร์กโฟลว์ AI-native สำหรับการแปลงดีไซน์เป็นโค้ด

ทำไมต้อง OpenPencil

🎨 Prompt → Canvas

อธิบาย UI ใดก็ได้ด้วยภาษาธรรมชาติ ดูมันปรากฏบน Canvas ไม่จำกัดขนาดแบบเรียลไทม์พร้อม animation แบบ streaming แก้ไขดีไซน์ที่มีอยู่โดยเลือกองค์ประกอบแล้วพิมพ์สนทนา

🤖 ทีม Agent ทำงานพร้อมกัน

Orchestrator แบ่งหน้าที่ซับซ้อนออกเป็น sub-task เชิงพื้นที่ AI agent หลายตัวทำงานในส่วนต่าง ๆ พร้อมกัน — hero, features, footer — ทั้งหมด streaming แบบขนาน

🧠 ปัญญาหลายโมเดล

ปรับตัวตามความสามารถของแต่ละโมเดลโดยอัตโนมัติ Claude ได้ prompt เต็มรูปแบบพร้อม thinking; GPT-4o/Gemini ปิด thinking; โมเดลขนาดเล็ก (MiniMax, Qwen, Llama) ได้ prompt แบบย่อเพื่อผลลัพธ์ที่เสถียร

🔌 MCP Server

ติดตั้งได้ด้วยคลิกเดียวใน Claude Code, Codex, Gemini, OpenCode, Kiro หรือ Copilot CLIs ออกแบบจาก terminal ของคุณ — อ่าน สร้าง และแก้ไขไฟล์ .op ผ่าน agent ที่รองรับ MCP

📦 Design-as-Code

ไฟล์ .op เป็น JSON — อ่านได้โดยมนุษย์, Git-friendly, เปรียบเทียบความแตกต่างได้ Design variables สร้าง CSS custom properties ส่งออกโค้ดเป็น React + Tailwind หรือ HTML + CSS

🖥️ ใช้งานได้ทุกที่

เว็บแอป + เดสก์ท็อปแบบ native บน macOS, Windows และ Linux — Rust core เดียว, binary แบบ self-contained เดียว ไม่มี browser engine เชื่อมโยงไฟล์ .op — ดับเบิลคลิกเพื่อเปิด

⌨️ CLI — `op`

ควบคุมเครื่องมือออกแบบจาก terminal ของคุณ op design, op insert — batch design DSL, จัดการ node Pipe จากไฟล์หรือ stdin ทำงานร่วมกับแอปเดสก์ท็อปหรือ web server

🎯 ส่งออกโค้ดหลายแพลตฟอร์ม

ส่งออกจากไฟล์ .op ไฟล์เดียวไปยัง React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native Design variables กลายเป็น CSS custom properties

เริ่มต้นอย่างรวดเร็ว

# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh

หรือรันเป็นแอปพลิเคชัน Desktop:

cargo run -p op-host-desktop

ข้อกำหนดเบื้องต้น: ต้องใช้ Rust (stable) เพื่อ build ผลิตภัณฑ์ Bun >= 1.0 และ Node.js >= 18 จำเป็นเฉพาะสำหรับ web SDK ใน packages/ เท่านั้น

Docker

มี image หลายรูปแบบให้เลือก — เลือกแบบที่เหมาะกับความต้องการของคุณ:

Image	ขนาด	รวม
`openpencil:latest`	~226 MB	เว็บแอปเท่านั้น
`openpencil-claude:latest`	—	+ Claude Code CLI
`openpencil-codex:latest`	—	+ Codex CLI
`openpencil-opencode:latest`	—	+ OpenCode CLI
`openpencil-copilot:latest`	—	+ GitHub Copilot CLI
`openpencil-gemini:latest`	—	+ Gemini CLI
`openpencil-full:latest`	~1 GB	เครื่องมือ CLI ทั้งหมด

รัน (เว็บเท่านั้น):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

รันพร้อม AI CLI (เช่น Claude Code):

AI chat ต้องใช้การเข้าสู่ระบบ OAuth ของ Claude CLI ใช้ Docker volume เพื่อเก็บรักษา session การเข้าสู่ระบบ:

# ขั้นตอนที่ 1 — เข้าสู่ระบบ (ครั้งเดียว)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# ขั้นตอนที่ 2 — เริ่มต้น
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

Build ในเครื่อง:

# พื้นฐาน (เว็บเท่านั้น)
docker build --target base -t openpencil .

# พร้อม CLI เฉพาะตัว
docker build --target with-claude -t openpencil-claude .

# เต็มรูปแบบ (CLI ทั้งหมด)
docker build --target full -t openpencil-full .

การออกแบบที่ขับเคลื่อนด้วย AI

จาก Prompt สู่ UI

ข้อความเป็นดีไซน์ — อธิบายหน้า แล้วสร้างขึ้นบน Canvas แบบเรียลไทม์พร้อม animation แบบ streaming
Orchestrator — แบ่งหน้าที่ซับซ้อนออกเป็น sub-task เชิงพื้นที่เพื่อการสร้างแบบขนาน
การแก้ไขดีไซน์ — เลือกองค์ประกอบ แล้วอธิบายการเปลี่ยนแปลงด้วยภาษาธรรมชาติ
Vision input — แนบ screenshot หรือ mockup เพื่อใช้เป็นข้อมูลอ้างอิงในการออกแบบ

รองรับหลาย Agent

Agent	วิธีตั้งค่า
ในตัว (9+ ผู้ให้บริการ)	เลือกจากพรีเซ็ตผู้ให้บริการพร้อมตัวสลับภูมิภาค — Anthropic, OpenAI, Google, DeepSeek และอื่น ๆ
Claude Code	ไม่ต้องตั้งค่า — ใช้ Claude Agent SDK พร้อม local OAuth
Codex CLI	เชื่อมต่อใน Agent Settings (`Cmd+,`)
OpenCode	เชื่อมต่อใน Agent Settings (`Cmd+,`)
GitHub Copilot	`copilot login` จากนั้นเชื่อมต่อใน Agent Settings (`Cmd+,`)
Gemini CLI	เชื่อมต่อใน Agent Settings (`Cmd+,`)

โปรไฟล์ความสามารถของโมเดล — ปรับ prompt, โหมด thinking และ timeout ตามระดับโมเดลโดยอัตโนมัติ โมเดลระดับเต็ม (Claude) ได้ prompt ครบถ้วน; โมเดลระดับมาตรฐาน (GPT-4o, Gemini, DeepSeek) ปิด thinking; โมเดลระดับพื้นฐาน (MiniMax, Qwen, Llama, Mistral) ได้ prompt แบบ nested-JSON ที่ย่อลงเพื่อความเสถียรสูงสุด

i18n — การแปลภาษาเต็มรูปแบบใน 15 ภาษา: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia

MCP Server

MCP Server ในตัว (op-mcp crate) — ติดตั้งได้ด้วยคลิกเดียวใน Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
ไม่ต้องใช้ Node.js — stdio transport ผ่าน binary เดสก์ท็อป (--mcp <path>) พร้อม live HTTP endpoint (127.0.0.1:<port>/mcp) จากแอปที่กำลังทำงาน
การทำ Design automation จาก terminal: อ่าน สร้าง และแก้ไขไฟล์ .op ผ่าน agent ที่รองรับ MCP
Layered design workflow — design_skeleton → design_content → design_refine สำหรับดีไซน์หลายส่วนที่มีความละเอียดสูงขึ้น
Segmented prompt retrieval — โหลดเฉพาะความรู้ด้านดีไซน์ที่ต้องการ (schema, layout, roles, icons, planning ฯลฯ)
รองรับหลายหน้า — สร้าง เปลี่ยนชื่อ เรียงลำดับ และทำซ้ำหน้าผ่าน MCP tools

การสร้างโค้ด

React + Tailwind CSS, HTML + CSS, CSS Variables
Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

CLI — `op`

ติดตั้งแบบ global และควบคุมเครื่องมือออกแบบจาก terminal ของคุณ:

brew install zseven-w/openpencil/op

op start                     # เปิดแอปเดสก์ท็อป
op design @landing.txt       # ออกแบบแบบ batch จากไฟล์
op insert '{"type":"RECT"}'  # แทรก node
op import:figma design.fig   # นำเข้าไฟล์ Figma
cat design.dsl | op design - # Pipe จาก stdin

รองรับ 3 วิธีการป้อนข้อมูล: สตริงแบบ inline, @filepath (อ่านจากไฟล์) หรือ - (อ่านจาก stdin) ทำงานร่วมกับแอปเดสก์ท็อปหรือ web dev server ดู CLI README สำหรับคู่มือคำสั่งฉบับเต็ม

LLM Skill — ติดตั้งปลั๊กอิน OpenPencil Skill เพื่อสอน AI agent (Claude Code, Cursor, Codex, Gemini CLI ฯลฯ) ออกแบบด้วย op

ฟีเจอร์

Canvas และการวาด

Canvas ไม่จำกัดขนาดพร้อม pan, zoom, smart alignment guides และ snapping
Rectangle, Ellipse, Line, Polygon, Pen (Bezier), Frame, Text
การดำเนินการบูลีน — รวม ลบ ตัดกัน พร้อมแถบเครื่องมือตามบริบท
ตัวเลือก Icon (Iconify) และนำเข้ารูปภาพ (PNG/JPEG/SVG/WebP/GIF)
Auto-layout — แนวตั้ง/แนวนอนพร้อม gap, padding, justify, align
เอกสารหลายหน้าพร้อมการนำทางด้วย tab

Design System

Design variables — color, number, string tokens พร้อมการอ้างอิง $variable
รองรับหลาย theme — หลาย axis แต่ละ axis มี variants (Light/Dark, Compact/Comfortable)
ระบบ Component — component ที่นำกลับมาใช้ใหม่ได้พร้อม instance และ override
CSS sync — สร้าง custom properties อัตโนมัติ, var(--name) ในผลลัพธ์โค้ด
UIKits ที่นำกลับมาใช้ใหม่ได้ — นำเข้า/ส่งออกชุด component จากไฟล์ .pen

AI และ Agents

Prompt-to-canvas พร้อมการสร้างแบบ streaming และการแตกย่อยเชิงพื้นที่ที่ขับเคลื่อนโดย orchestrator
Concurrent Agent Teams — นักออกแบบหลายคนทำงานกับส่วนต่าง ๆ พร้อมกัน พร้อมตัวบ่งชี้บน canvas สำหรับแต่ละสมาชิก
Layered workflow — design_skeleton → design_content → design_refine พร้อม prompt ที่เน้นเฉพาะในแต่ละเฟส
Style Guides — สไตล์ในตัวกว่า 50 แบบ (glassmorphism, brutalist, retro ฯลฯ) พร้อม fuzzy matching ตาม tag ใช้ในการวางแผนและการสร้าง
โปรไฟล์ความสามารถหลายโมเดล — ปรับโหมดการคิด ความพยายาม และรูปแบบ prompt อัตโนมัติตามระดับโมเดล
Agent runtime ในตัว (Rust) + ผู้ให้บริการ Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini
Passthrough รูปแบบ Anthropic สำหรับผู้ให้บริการ LLM จีน — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

การเชื่อมต่อ Git

ตัวช่วย Clone พร้อมการยืนยันตัวตน SSH / HTTPS และการจัดการ SSH key
ตัวเลือก branch — สร้าง สลับ ลบ merge ทั้งหมดจาก Git panel
Cascade สำหรับ pull / push พร้อม auth retry และการจัดการ non-fast-forward
Three-way merge โหมดโฟลเดอร์พร้อมการติดตามสถานะ MERGE_HEAD บนดิสก์
Conflict panel พร้อมการ์ด three-way ต่อ node / field, ตัวแก้ไข JSON inline, bulk actions และบล็อก diff inline
UI สำหรับตั้งค่า remote และ SSH keys; i18n 15 ภาษาครอบคลุมทั้งส่วนของ Git

การส่งออก

ส่งออก Canvas — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
ส่งออกโค้ด — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
Pipeline การสร้างโค้ด MCP แบบเพิ่มทีละส่วน — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

นำเข้าจาก Figma

นำเข้าไฟล์ .fig โดยคงไว้ซึ่ง layout, fills, strokes, effects, text, images และ vectors

Desktop App

รองรับ macOS, Windows และ Linux แบบ native — binary แบบ self-contained เดียว (winit + GPU Skia, ไม่มี Electron)
เชื่อมโยงไฟล์ .op — ดับเบิลคลิกเพื่อเปิด, single-instance lock
ตรวจสอบอัปเดตแบบเบื้องหลังจาก GitHub Releases
เมนูแอปพลิเคชันแบบ native พร้อม Save As, Open Recent และกล่องโต้ตอบการเปลี่ยนแปลงที่ไม่ได้บันทึกเมื่อปิด
การเก็บรักษาไฟล์ล่าสุด

Tech Stack


Core	Rust workspace (`crates/`) — editor state, widgets, hosts, MCP, AI, codegen
Rendering	GPU Skia ทุกที่ — `skia-safe` (GL) บน native, CanvasKit (WASM/WebGL2) บนเบราว์เซอร์
เฟรมเวิร์ก UI	jian — เฟรมเวิร์ก UI แบบ GPU-Skia ที่เป็น pure-Rust และ vendored: widgets, layout, events, hot reload (`vendor/jian`)
Windowing	winit (vendored `casement` fork)
Desktop	Native binary `openpencil-desktop` — ไม่มี browser engine
Web SDK	`op-web-sdk` + React 19 / Vue 3 adapters — `.op` viewer แบบอ่านอย่างเดียว (TypeScript)
CLI	`op` — ควบคุมจาก terminal, batch design DSL
AI	Agent runtime ในตัว (Rust) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Lint	clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK)
รูปแบบไฟล์	`.op` — ใช้ JSON, อ่านได้โดยมนุษย์, Git-friendly

ระบบนิเวศ

OpenPencil เป็นส่วนหนึ่งของตระกูลเครื่องมือแบบ pure-Rust ที่ขับเคลื่อนด้วย AI จาก ZSeven-W ซึ่งประกอบเข้าด้วยกัน: jian เรนเดอร์ OpenPencil, agent-rs รันเอเจนต์ของมัน, noema จดจำ, และ zode ออกแบบจากเทอร์มินัล

โปรเจกต์	คืออะไร
Zode	ผู้ช่วยเขียนโค้ดแบบโอเพนซอร์สที่ขับเคลื่อนด้วย AI สำหรับเทอร์มินัลของคุณ — Rust TUI (`ratatui`) ที่รวดเร็วซึ่งอ่านโค้ดของคุณ รันคำสั่ง ค้นหาไฟล์ และจัดการ git ขับเคลื่อน OpenPencil ผ่าน MCP
agent-rs	async runtime แบบ pure-Rust สำหรับส่งมอบ LLM agent — รองรับหลายผู้ให้บริการ ใช้เครื่องมือได้แบบ end-to-end สิทธิ์แบบมีโครงสร้าง MCP จริง และ `unsafe` เป็นศูนย์ ขับเคลื่อน agent runtime ในตัวของ OpenPencil (`vendor/agent`) และ Zode
jian	เฟรมเวิร์ก UI แบบ GPU-Skia ที่เป็น pure-Rust — widgets, layout, events และ hot reload ในสแตกเดียว เปลี่ยนเอกสาร `.op` แบบ declarative ให้เป็นแอปแบบ native ที่ควบคุมด้วย AI ได้ โดยไม่มี JS runtime, ไม่มี DOM, ไม่มี Electron เฟรมเวิร์ก UI ของ OpenPencil (`vendor/jian`)
noema	ระบบหน่วยความจำแบบ local-first ที่ไม่ใช่เวกเตอร์สำหรับ coding agent หน่วยความจำที่คงทนในรูปแบบไฟล์ที่ตรวจสอบได้ คิวสำหรับตรวจทานรายการใหม่ และการเรียกคืนแบบ lexical (ไม่ใช้ embedding) — ทำงานได้ทั้งบน Zode, Codex, Claude Code และ MCP runtime

ทำไมต้อง Rust

OpenPencil ถูกเขียนใหม่ตั้งแต่ต้นด้วย Rust (#129) การเขียนใหม่เสร็จสมบูรณ์แล้ว — editor แบบ TypeScript + Electron ถูกเลิกใช้ที่ v0.7.5 และ Rust workspace ในรีโปนี้คือตัวผลิตภัณฑ์: core แบบ native เดียวที่เล็กและเร็วกว่าอย่างเห็นได้ชัด และรองรับได้บนหลายแพลตฟอร์มจาก codebase เดียว

	TypeScript + Electron (เลิกใช้แล้ว, `v0.7.5`)	Rust (ปัจจุบัน)
Desktop runtime	Electron — รวม Chromium + Node.js	หน้าต่างแบบ native (`winit` + GPU Skia) ไม่มี browser engine
ขนาดบน Desktop	Chromium runtime เต็มรูปแบบต่อการติดตั้ง	ไฟล์ binary เดียวที่พร้อมใช้งาน — 55.5 MB
ขนาด payload บนเว็บ	JS + WASM bundle	8.2 MB wasm / 2.18 MB gzip บนเครือข่าย
การ Render	CanvasKit/Skia บนเว็บ	Skia backend เดียวที่เร่งด้วย GPU บน ทุก เป้าหมาย
หน่วยความจำ	JavaScript GC หยุดชั่วคราว	ไม่มี GC — Rust ownership latency คาดเดาได้
Codebase	Web stack + Electron	Rust workspace เดียว: editor · CLI · MCP · AI · codegen · Figma · Git
เป้าหมาย	Web + desktop สอง stack แยกกัน	Desktop (macOS/Win/Linux) · mobile (iOS/Android) · browser — one core

ผลการวัดที่ได้จริง

ขนาดเล็กมาก — แอปเดสก์ท็อปทั้งหมดเป็น binary แบบ native เดียวขนาด 55.5 MB แทนที่จะเป็น browser engine รวมกับ Node runtime เว็บบิลด์มีขนาด 8.2 MB raw / 2.18 MB gzip หลังจากแยก icon catalog (−48% บนเครือข่าย)
รองรับเอกสารขนาดใหญ่ — canvas ที่มี 10,000-node (nested auto-layout สี่ระดับ) เขียน อ่าน และ snapshot layout โดยไม่มี panic และ ~0% idle CPU; การ snapshot layout ทั้งหมด 10k node คืนค่าใน ~0.68 s
การโต้ตอบที่รวดเร็ว — pan/zoom ไม่ต้อง re-serialize เอกสารทุก frame อีกต่อไป (การแก้ไข hot-path เพียงครั้งเดียวลด CPU ของ wheel-zoom จาก ~69% เหลือ ~0%); การลากแก้ไข scene แบบ incremental การวัดตัวอักษรถูก cache และการวาดซ้ำรวมเป็นหนึ่งต่อ frame
Core เดียว ทุกหน้าจอ — editor state และ render backend เดียวกันคอมไพล์ไปยัง native desktop, mobile และ browser ผ่าน WASM — ไม่ต้องคงการ implement แบบคู่ขนานให้ตรงกัน
GPU Skia ทุกที่ — native render ผ่าน skia-safe บน GL context; browser render ผ่าน CanvasKit บน WebGL2 — โค้ดการวาดเดียวกัน ผลลัพธ์เดียวกัน
Accessibility แบบ native — AccessKit บน macOS, Windows และ Linux พร้อม DOM mirror บนเว็บ แทนที่จะพึ่งพา a11y tree ของ browser
Workspace ที่ตรวจสอบ type เดียว — MCP host, CLI, AI providers, code generation, Figma import และ Git integration ทั้งหมดอยู่ใน Rust workspace เดียว พร้อม cargo-deny ตรวจสอบ supply-chain ใน CI

สถานะ: editor แบบ TypeScript ถูกเลิกใช้ที่ v0.7.5 และเหลืออยู่เพียงใน git history เท่านั้น รีโปนี้คือ Rust workspace รุ่น Rust v0.8.0 อยู่ระหว่างการพัฒนาอย่างต่อเนื่อง (ดู Roadmap ด้านล่าง)

โครงสร้างโปรเจกต์

openpencil/
├── crates/                   Rust workspace — ตัวผลิตภัณฑ์
│   ├── op-editor-core/       Editor state ของ `.op` (PenDocument) ที่เป็นแหล่งจริง + EditorCommand + design variables
│   ├── op-editor-ui/         Widget ที่ไม่ผูกกับแพลตฟอร์ม + RenderBackend facade (wasm32-clean)
│   ├── op-editor-host-core/  Host state machine ที่ไม่ผูกกับ transport ใช้ร่วมกันทุก host
│   ├── op-host-native/       Native host lib — winit + skia-safe GL (เดสก์ท็อป + มือถือ)
│   ├── op-host-web/          Browser bundle — wasm32 cdylib, CanvasKit renderer
│   ├── op-host-desktop/      Desktop binary `openpencil-desktop`; เป็น daemon `--serve-web` ด้วย
│   ├── op-host-services/     Headless serve-web / MCP daemon lib
│   ├── op-host-web-server/   Web-server binary แบบไม่มี GL
│   ├── op-cli/               เครื่องมือ CLI — คำสั่ง `op`
│   ├── op-mcp/               MCP server — tools, batch design, layered workflow
│   ├── op-ai/                AI providers, chat runtime, streaming
│   ├── op-ai-skills/         AI prompt skill engine (โหลด prompt ตามเฟส)
│   ├── op-orchestrator/      การจัดการทีม agent ที่ทำงานพร้อมกัน
│   ├── op-codegen/           Code generators (React, HTML, Vue, Flutter, ...)
│   ├── op-figma/             Figma .fig file parser และ converter
│   ├── op-git/               การเชื่อมต่อ Git — clone, branch, push/pull, merge
│   └── ...                   op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│                             op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/                 Web SDK workspace (Bun)
│   ├── op-web-sdk/           `.op` web viewer SDK แบบอ่านอย่างเดียว (wrap wasm bundle)
│   ├── op-web-sdk-react/     React 19 adapter
│   └── op-web-sdk-vue/       Vue 3 adapter
├── vendor/                   Subsystem แบบ vendored (git submodules)
│   ├── jian/                 เฟรมเวิร์ก UI แบบ GPU-Skia — widget/render/event
│   ├── casement/             winit fork
│   └── agent/                Rust agent runtime ข้ามผลิตภัณฑ์ (agent-rs)
└── .githooks/                Pre-commit version sync จาก branch name

คีย์ลัด

คีย์	การทำงาน	คีย์	การทำงาน
`V`	เลือก	`Cmd+S`	บันทึก
`R`	Rectangle	`Cmd+Z`	เลิกทำ
`O`	Ellipse	`Cmd+Shift+Z`	ทำซ้ำ
`L`	Line	`Cmd+C/X/V/D`	คัดลอก/ตัด/วาง/ทำซ้ำ
`T`	Text	`Cmd+G`	จัดกลุ่ม
`F`	Frame	`Cmd+Shift+G`	ยกเลิกการจัดกลุ่ม
`P`	Pen tool	`Cmd+Shift+P`	ส่งออก (PNG/JPG/WEBP/PDF)
`H`	Hand (pan)	`Cmd+Shift+C`	Code panel
`Del`	ลบ	`Cmd+Shift+V`	Variables panel
`[ / ]`	เรียงลำดับ	`Cmd+J`	AI chat
ลูกศร	เลื่อน 1px	`Cmd+,`	Agent settings
`Cmd+Alt+U`	รวมบูลีน	`Cmd+Alt+S`	ลบบูลีน
`Cmd+Alt+I`	ตัดกันบูลีน	`Cmd+Shift+S`	บันทึกเป็น

Scripts

# Product (Rust — run from the repo root)
cargo build --workspace              # Build all crates (add --release for prod)
cargo test --workspace               # Run all tests
cargo check --workspace              # Type check
cargo clippy --workspace --all-targets -- -D warnings   # Lint
cargo fmt --all                      # Format
bash scripts/start-web-rust.sh       # Web dev server (wasm bundle + headless host)
cargo run -p op-host-desktop         # Desktop app (binary: openpencil-desktop)
cargo run -p op-cli -- <args>        # CLI (binary: op)

# Web SDK / JS tooling (run from packages/)
cd packages && bun run lint          # Lint the web SDK (oxlint); also: bun run format
cd packages && bun run generate-iconify-catalog   # Regenerate the Rust icon catalog assets
cd packages && bun run bump <version>             # Sync SDK package.json versions

การมีส่วนร่วม

ยินดีต้อนรับการมีส่วนร่วมทุกรูปแบบ! ดู CLAUDE.md สำหรับรายละเอียดสถาปัตยกรรมและรูปแบบโค้ด

Fork และ clone
ตั้งค่า version sync: git config core.hooksPath .githooks
สร้าง branch: git checkout -b feat/my-feature
รันการตรวจสอบ: cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings
Commit ด้วย Conventional Commits: feat(canvas): add rotation snapping
เปิด PR เข้า main

Roadmap

Design variables และ tokens พร้อม CSS sync
ระบบ Component (instances และ overrides)
การสร้างดีไซน์ด้วย AI พร้อม orchestrator
การเชื่อมต่อ MCP server พร้อม layered design workflow
รองรับหลายหน้า
นำเข้า Figma .fig
Boolean operations (union, subtract, intersect)
โปรไฟล์ความสามารถหลายโมเดล
ปรับโครงสร้างเป็น monorepo พร้อม package ที่นำกลับมาใช้ใหม่ได้
เครื่องมือ CLI (op) ควบคุมจาก terminal
AI Agent SDK ในตัว รองรับหลายผู้ให้บริการ
i18n — 15 ภาษา
การเชื่อมต่อ Git (clone, branch, push/pull, three-way merge โหมดโฟลเดอร์)
การส่งออก Canvas แบบ raster (PNG / JPEG / WEBP / PDF)
การแก้ไขร่วมกัน
ระบบปลั๊กอิน

ผู้มีส่วนร่วม

ผู้สนับสนุน

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

ขอบคุณ MrQyun — อยากเห็นชื่อของคุณตรงนี้ใช่ไหม? เป็นผู้สนับสนุน →

ชุมชน

เข้าร่วม Discord ของเรา — ถามคำถาม แชร์ดีไซน์ เสนอฟีเจอร์

38 KiB

Raw Blame History

OpenPencil

ทำไมต้อง OpenPencil

🎨 Prompt → Canvas

🤖 ทีม Agent ทำงานพร้อมกัน

🧠 ปัญญาหลายโมเดล

🔌 MCP Server

📦 Design-as-Code

🖥️ ใช้งานได้ทุกที่

⌨️ CLI — `op`

🎯 ส่งออกโค้ดหลายแพลตฟอร์ม

เริ่มต้นอย่างรวดเร็ว

Docker

การออกแบบที่ขับเคลื่อนด้วย AI

CLI — `op`

ฟีเจอร์

Tech Stack

ระบบนิเวศ

ทำไมต้อง Rust

โครงสร้างโปรเจกต์

คีย์ลัด

Scripts

การมีส่วนร่วม

Roadmap

ผู้มีส่วนร่วม

ผู้สนับสนุน

ชุมชน

Star History

การประเมิน

สัญญาอนุญาต

38 KiB Raw Blame History Unescape Escape

OpenPencil

ทำไมต้อง OpenPencil

🎨 Prompt → Canvas

🤖 ทีม Agent ทำงานพร้อมกัน

🧠 ปัญญาหลายโมเดล

🔌 MCP Server

📦 Design-as-Code

🖥️ ใช้งานได้ทุกที่

⌨️ CLI — op

🎯 ส่งออกโค้ดหลายแพลตฟอร์ม

เริ่มต้นอย่างรวดเร็ว

Docker

การออกแบบที่ขับเคลื่อนด้วย AI

CLI — op

ฟีเจอร์

Tech Stack

ระบบนิเวศ

ทำไมต้อง Rust

โครงสร้างโปรเจกต์

คีย์ลัด

Scripts

การมีส่วนร่วม

Roadmap

ผู้มีส่วนร่วม

ผู้สนับสนุน

ชุมชน

Star History

การประเมิน

สัญญาอนุญาต

38 KiB

Raw Blame History

⌨️ CLI — `op`

CLI — `op`