mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

* fix(ai): add icon name aliases and fix multi-path SVG concatenation

Add 55+ common icon name aliases (burger→hamburger, sushi→fish, etc.)
to both client icon-resolver and server icon API for robust AI-generated
icon resolution. Register Lucide's own aliases for broader coverage.

Fix SVG path concatenation bug where joining multiple <path> d-values
caused incorrect rendering — a standalone <path> treats initial lowercase
"m" as absolute, but after concatenation it becomes relative to the
previous sub-path endpoint. Now ensures each sub-path starts with
absolute "M".

Add tryAsyncIconFontResolution for icon_font nodes that miss local
lookup — fetches from server API, caches result, and triggers canvas
re-render.

* fix(canvas): preserve badge/overlay absolute positioning in auto-layout

Add isBadgeOverlayNode() detector for badge, indicator, notification-dot,
and overlay nodes. These nodes now retain their x/y coordinates instead
of being stripped by layout sanitization.

Update computeLayoutPositions to exclude badge nodes from the layout flow
— they keep absolute positioning and render on top (prepended for correct
z-order in reverse iteration).

* fix(ai): prevent duplicate canvas objects and fix emoji-to-icon pipeline

Streaming path: add ensureUniqueNodeIds before inserting nodes to prevent
ID collisions across multiple AI generations. Track newly inserted IDs
so subsequent streaming nodes don't collide either.

Canvas sync: deduplicate Fabric objects sharing the same penNodeId —
keep only the one tracked in objMap, remove stale duplicates.

Badge nodes: use shared isBadgeOverlayNode() for z-order insertion
and skip x/y stripping in layout parents.

Fix emoji-to-icon pipeline: re-run applyIconPathResolution after
applyNoEmojiIconHeuristic converts emoji text nodes to path nodes,
so the icon resolver can match by name (e.g. "Pizza Emoji Path" → pizza).

* fix(canvas): add async icon resolution fallback for icon_font nodes

When lookupIconByName fails locally, queue tryAsyncIconFontResolution
to fetch from server API. Cache result in ICON_PATH_MAP and trigger
canvas re-render via store update. Store iconFontName and iconStyle
on Fabric object for sync tracking.

* fix(ai): strengthen emoji ban in prompts and improve orchestrator defaults

Update all AI prompts to explicitly ban emoji characters with concrete
examples and redirect to icon_font nodes instead of the previously
incorrect "path nodes" guidance.

Add z-order rule to orchestrator prompt: overlay elements must come
before content they overlap.

Add padding support to OrchestratorPlan rootFrame type. Default mobile
root frame gap to 16 for consistent spacing.

* feat(electron): add publisher name to Windows build configuration

Updated the `electron-builder.yml` to include a publisher name for Windows builds, enhancing the identification of the application during installation. Additionally, revised the README files across multiple languages to reflect the new project description and features, emphasizing OpenPencil as the world's first AI-native open-source vector design tool with concurrent agent teams and design-as-code capabilities.

---------

Co-authored-by: Fini <fini.yang@gmail.com>

2026-03-11 21:18:49 +08:00

15 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

🎨 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 ผ่าน Electron อัปเดตอัตโนมัติจาก GitHub Releases เชื่อมโยงไฟล์ .op — ดับเบิลคลิกเพื่อเปิด

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

# ติดตั้ง dependencies
bun install

# เริ่ม dev server ที่ http://localhost:3000
bun --bun run dev

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

bun run electron:dev

ข้อกำหนดเบื้องต้น: Bun >= 1.0 และ Node.js >= 18

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

จาก Prompt สู่ UI

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

รองรับหลาย Agent

Agent	วิธีตั้งค่า
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 ที่ย่อลงเพื่อความเสถียรสูงสุด

MCP Server

MCP Server ในตัว — ติดตั้งได้ด้วยคลิกเดียวใน Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
การทำ 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 จาก design tokens

ฟีเจอร์

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) ในผลลัพธ์โค้ด

นำเข้าจาก Figma

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

Desktop App

รองรับ macOS, Windows และ Linux แบบ native ผ่าน Electron
เชื่อมโยงไฟล์ .op — ดับเบิลคลิกเพื่อเปิด, single-instance lock
อัปเดตอัตโนมัติจาก GitHub Releases
เมนูแอปพลิเคชันและ file dialog แบบ native

Tech Stack


Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui
Canvas	Fabric.js v7
State	Zustand v5
Server	Nitro
Desktop	Electron 35
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Runtime	Bun · Vite 7
รูปแบบไฟล์	`.op` — ใช้ JSON, อ่านได้โดยมนุษย์, Git-friendly

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

src/
  canvas/          Fabric.js engine — การวาด, sync, layout, guides, pen tool
  components/      React UI — editor, panels, shared dialogs, icons
  services/ai/     AI chat, orchestrator, การสร้างดีไซน์, streaming
  services/figma/  Figma .fig binary import pipeline
  services/codegen React+Tailwind และ HTML+CSS code generators
  stores/          Zustand — canvas, document, pages, history, AI, settings
  variables/       การแก้ไข design token และการจัดการ reference
  mcp/             MCP server tools สำหรับการเชื่อมต่อ CLI ภายนอก
  uikit/           ระบบ component kit ที่นำกลับมาใช้ใหม่ได้
server/
  api/ai/          Nitro API — streaming chat, generation, validation
  utils/           Claude CLI, OpenCode, Codex, Copilot client wrappers
electron/
  main.ts          Window, Nitro fork, native menu, auto-updater
  preload.ts       IPC bridge

คีย์ลัด

คีย์	การทำงาน	คีย์	การทำงาน
`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+E`	ส่งออก
`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`	ตัดกันบูลีน

Scripts

bun --bun run dev          # Dev server (port 3000)
bun --bun run build        # Production build
bun --bun run test         # รันการทดสอบ (Vitest)
npx tsc --noEmit           # ตรวจสอบ type
bun run electron:dev       # Electron dev
bun run electron:build     # Electron package

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

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

Fork และ clone
สร้าง branch: git checkout -b feat/my-feature
รันการตรวจสอบ: npx tsc --noEmit && bun --bun run test
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)
โปรไฟล์ความสามารถหลายโมเดล
การแก้ไขร่วมกัน
ระบบปลั๊กอิน

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

ชุมชน

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

15 KiB

Raw Blame History

OpenPencil

ทำไมต้อง OpenPencil

🎨 Prompt → Canvas

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

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

🔌 MCP Server

📦 Design-as-Code

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

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

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

ฟีเจอร์

Tech Stack

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

คีย์ลัด

Scripts

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

Roadmap

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

ชุมชน

Star History

สัญญาอนุญาต

15 KiB Raw Blame History

OpenPencil

ทำไมต้อง OpenPencil

🎨 Prompt → Canvas

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

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

🔌 MCP Server

📦 Design-as-Code

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

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

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

ฟีเจอร์

Tech Stack

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

คีย์ลัด

Scripts

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

Roadmap

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

ชุมชน

Star History

สัญญาอนุญาต

15 KiB

Raw Blame History