|
### 🎨 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, 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
|
## การติดตั้ง
**macOS (Homebrew):**
```bash
brew tap zseven-w/openpencil
brew install --cask openpencil
```
**Windows (Scoop):**
```powershell
scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil
```
**ดาวน์โหลดโดยตรงสำหรับ Linux / Windows:** [GitHub Releases](https://github.com/ZSeven-W/openpencil/releases) — `.exe` (Windows), `.AppImage` / `.deb` (Linux)
**Nix (Linux x86_64):**
```bash
nix develop
nix run . # เปิดแอป desktop
nix build .#openpencil # native web host + CanvasKit web bundle
nix build .#op-cli # `op` CLI
nix build .#prebuilt # ใช้ upstream desktop archive ที่ตรงกัน
nix build .#prebuilt-cli # ใช้ upstream CLI archive ที่ตรงกัน
nix build .#web-server # native web server ที่ไม่ใช้ GL + web bundle
nix build .#runtime-prebuilt # prebuilt desktop + `op` CLI runtime
nix build .#web-sdk-packages # npm tarball สำหรับ web SDK
nix build .#appimage # desktop AppImage แบบพกพา
```
flake ใช้ Rust toolchain ที่ pin ไว้ใน `rust-toolchain.toml` และปัจจุบันเผยแพร่
สำหรับ `x86_64-linux` โดย flake ยังไม่สร้างแพ็กเกจ Debian หากต้องการ `.deb`
ให้ใช้ artifact จาก upstream release ส่วน output `prebuilt` จะใช้เวอร์ชัน
release และ hash ที่ pin ไว้ใน `nix/release-manifest.json` โดยไม่ขึ้นกับเวอร์ชัน
source ของ workspace หลังเผยแพร่ release แล้ว release workflow จะเปิด PR
เพื่ออัปเดต manifest นี้ จนกว่า PR จะ merge output แบบ prebuilt จะยังใช้
release ที่เผยแพร่ก่อนหน้า ส่วน output ที่ build จาก source จะใช้ source
ที่ checkout อยู่เสมอ
**CLI (`op`):**
```bash
brew install zseven-w/openpencil/op
```
หรือใช้สคริปต์ติดตั้ง (macOS / Linux):
```bash
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
```
หากต้องการอนุญาต pre-release ล่าสุด:
```bash
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
```
Windows PowerShell:
```powershell
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
```
หากต้องการอนุญาต pre-release ล่าสุด:
```powershell
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
```
## Clone (พร้อม submodule)
```bash
git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# หาก clone แล้ว ให้ sync ก่อนเพื่อให้ URL submodule เดิมรับการเปลี่ยนแปลงจาก .gitmodules:
git submodule sync --recursive && git submodule update --init --recursive
```
มี submodule สามรายการภายใต้ `vendor/` ทั้งหมดเป็นสาธารณะและดึงผ่าน HTTPS (ไม่ต้องใช้ SSH key): `jian` (GPU-Skia UI framework — widget/render/event), `casement` (winit fork) และ `agent` (`agent-rs` — Rust agent runtime ข้ามผลิตภัณฑ์ที่ OP และ Zode ใช้ร่วมกัน) ส่วน `vendor/anthropic-agent-sdk` ถูกติดตามโดยตรงใน repository และไม่ใช่ submodule
## เริ่มต้นอย่างรวดเร็ว
```bash
# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh
```
หรือรันเป็นแอปพลิเคชัน Desktop:
```bash
cargo run -p op-host-desktop
```
> **ข้อกำหนดเบื้องต้น:** ต้องใช้ [Rust](https://www.rust-lang.org/) (stable) เพื่อ build ผลิตภัณฑ์ [Bun](https://bun.sh/) >= 1.0 และ [Node.js](https://nodejs.org/) >= 18 จำเป็นเฉพาะสำหรับ web SDK ใน `packages/` เท่านั้น
### Docker
Rust release ที่มี tag จะเผยแพร่ image แบบ web host เพียงตัวเดียว ส่วน image TypeScript เดิมที่รวม AI CLI จะไม่ถูกเผยแพร่อีกต่อไป
| Image | รวม |
| --- | --- |
| `ghcr.io/zseven-w/openpencil-web:vX.Y.Z` | Rust web host, wasm bundle และ CanvasKit assets |
Web UI แสดงเฉพาะ built-in agent profiles เท่านั้น เครื่องมือ Claude/Codex/OpenCode/Copilot CLI จะไม่ถูกบันเดิลใน Docker images
**รัน:**
```bash
VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"
```
จากนั้นเปิด `http://localhost:3100/`
**Build ในเครื่อง:**
```bash
docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust
```
## การออกแบบที่ขับเคลื่อนด้วย 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+,`) |
**โปรไฟล์ความสามารถของโมเดล** — ปรับ 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 / OpenCode / Kiro / Copilot CLIs
- ไม่ต้องใช้ Node.js — stdio transport ผ่าน binary เดสก์ท็อป (`--mcp