mirror of
https://github.com/ZSeven-W/openpencil.git
synced 2026-06-01 03:14:29 +07:00
ca1b5370ae
* feat(boolean-operations): implement boolean operations in the editor - Added a new BooleanToolbar component for union, subtract, and intersect operations. - Integrated boolean operations into the layer context menu and keyboard shortcuts. - Enhanced the editor layout to include the boolean toolbar for improved user interaction. - Updated internationalization support with new translation keys for boolean operations. - Bumped version to 0.3.0 to reflect the addition of these features. * refactor(editor): update editor layout and panels for improved functionality - Replaced the PropertyPanel with a new RightPanel that includes both Property and Code panels. - Removed the CodePanel from the main editor layout and integrated it into the RightPanel. - Updated keyboard shortcuts to switch the right panel to the code tab. - Enhanced the LayerPanel with a resizable width feature for better user experience. - Added internationalization support for new right panel labels and code panel features. - Introduced new code generation capabilities for various frameworks in the CodePanel. - Improved overall layout structure for better responsiveness and usability. * feat(electron): implement .op file association and enhance file handling - Added support for .op file association in electron-builder, allowing OpenPencil documents to be opened directly from the file system. - Implemented IPC handlers for opening and reading .op files, ensuring proper loading of document content. - Enhanced the main process to handle file opening events on macOS and single-instance locking on Windows/Linux. - Updated the renderer to listen for file open events and load documents accordingly. - Improved README to reflect new file association feature. * fix(canvas): improve layout accuracy for AI-generated designs - Unify lineHeight default via canonical defaultLineHeight() function - Unify text measurement by removing duplicate estimators in generation-utils - Fix optical centering formula to scale proportionally with fontSize - Round layout positions to whole pixels to prevent sub-pixel artifacts - Recursively sanitize nested x/y in streaming layout containers - Fix input trailing icon alignment using fill_container instead of space_between * feat(canvas): right-align agent badge and add breathing glow border - Agent badge now right-aligned to frame's right edge instead of after label - Added breathing glow border around agent-owned frames during generation - Glow border uses same color and lifecycle as the agent badge - Removed unused BADGE_GAP constant and useDocumentStore import * feat(code-panel): enhance tab scrolling functionality and add scrollbar utility - Introduced left and right scroll buttons for tab navigation in the CodePanel, improving user experience for navigating long tab lists. - Added a custom utility to hide scrollbars for a cleaner interface. - Updated styles for better responsiveness and usability in the CodePanel layout. * fix(docs): update Discord invite links in multiple README files - Replaced outdated Discord invite links with the new link across all language-specific README files. - Ensured consistency in the documentation for community engagement. * feat(code-panel): enhance system prompt for responsive design - Updated the ENHANCE_SYSTEM_PROMPT to emphasize the importance of responsive design in code rewriting. - Added detailed guidelines for converting fixed pixel widths to relative units and using responsive Tailwind breakpoints. - Ensured that the output remains visually faithful on desktop while adapting gracefully across screen sizes. * feat(docs): add WeChat group information to README.zh.md and include group image - Introduced a new section in the Chinese README to provide details about the WeChat group for community engagement. - Added an image representing the WeChat group for better visibility and user interaction. * feat(electron): enhance theme management and title bar overlay for Windows/Linux - Updated the `setTheme` method in the Electron API to accept custom colors for the title bar overlay, improving theme synchronization across platforms. - Adjusted title bar overlay colors for Windows and Linux to ensure proper visibility and aesthetics. - Enhanced the top bar component to read computed CSS colors and apply them dynamically, ensuring a consistent user interface. - Improved handling of theme changes in the application to support background and foreground color customization. * fix(screenshot): update screenshot image for improved clarity and quality * fix(docs): update WeChat group image path in README.zh.md for consistency * fix(ai): fix post-generation validation pipeline and text centering - Fix Agent SDK validation: save temp screenshots inside project dir (.openpencil-tmp/) so Claude Code plan mode can read them, instead of /tmp/ which is outside the project sandbox - Enrich validation tree dump with fill colors, stroke, fontSize, fontWeight, textAlign, cornerRadius, opacity for comprehensive visual analysis - Add multi-round validation with quality scoring (threshold 8/10), 500ms stabilization delay between rounds - Add detailed debug logging to applyValidationFixes showing which nodes were found/skipped and property changes - Fix canvas sync needsTextbox check to also account for textAlign (matching isFixedWidthText in factory), preventing IText↔Textbox thrashing on every sync tick - Auto-center text in vertical+center layouts by expanding to full container width and injecting textAlign:'center' - Force Textbox for non-left-aligned text so textAlign is respected (IText ignores width and computes its own) * fix(canvas): use precise text width estimation for fit-content layout Remove the 14% safety factor from text width estimation when computing fit-content/natural-width text dimensions. IText auto-computes its own width and ignores our setting, so the safety margin only inflated the layout allocation, making text appear left-shifted within its container. * fix(canvas): center fit-content text in horizontal layouts For text nodes with fit-content width in horizontal layouts, set textAlign:'center' to compensate for width estimation inaccuracy. The estimated box is typically wider than the actual rendered text, causing left-aligned text to appear visually shifted. Centering distributes the estimation error evenly on both sides. * feat(ai): show validation details in checklist panel - Accumulate validation log (screenshot, analysis, fixes) instead of overwriting status messages, so the full process is visible - Preserve step thinking content in buildFinalStepTags (was discarded) - Add details field to pipeline items and render in checklist UI - Each validation step now shows: screenshot captured, issues found, quality score, fixes applied * feat(ai): add visual reference pipeline types and integration hooks - Add DesignSystem and VisualReference types to ai-types - Add 'visual-ref' mode to AIDesignRequest and SubTask.htmlReference - Detect visual-ref candidates in chat handlers (landing pages, websites) - Wire visual-ref mode in design-generator and orchestrator - Inject HTML reference snippets into sub-agent prompts * feat(ai): add modular design principles for sub-agent context - Add design-principles module with topic files: color, typography, spacing, composition, components - Selectively load relevant principles based on prompt content - Inject design principles into sub-agent system prompts * feat(ai): implement visual reference pipeline - Add design-system-generator: generates color/typography/spacing tokens - Add design-code-generator: generates HTML/CSS from design system - Add html-renderer: renders HTML to screenshot via html2canvas - Add visual-ref-orchestrator: coordinates the full pipeline (design system → HTML code → screenshot → enrich subtasks) - Add html2canvas dependency for client-side HTML rendering * feat(mcp): default filePath to live canvas and fix cross-platform issues - Default all MCP tool filePath to live://canvas when omitted, so tools operate on the real-time canvas instead of stale files - Remove filePath from required params in all tool schemas (21 interfaces) - Fix mcp-server-manager.ts using process.cwd() which fails in Electron production on Linux — now checks ELECTRON_RESOURCES_PATH first - Fix stopMcpHttpServer using SIGTERM on Windows — use taskkill instead - Force new children reference in applyExternalDocument to ensure canvas sync subscriber always detects MCP-pushed document updates * feat(mcp): enhance design prompt with semantic roles, CJK typography, and layout rules Add comprehensive design knowledge to MCP design prompt for better AI-generated designs: design type detection (mobile vs desktop), full semantic role reference with context-aware defaults, CJK typography rules, expanded text/layout/form guidelines, and detailed post-processing documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(ai): implement intent classification for chat handlers - Replace hardcoded keyword matching with a lightweight LLM call to classify user intent in chat messages. - Introduce a new function `classifyIntent` to determine if the request is for design generation or conversation. - Update design request handling in `useChatHandlers` to utilize the new classification method. - Enhance design prompt documentation to reflect changes in design type detection based on intent rather than keywords. * fix(ai): handle string qualityScore in validation response parsing The LLM sometimes returns qualityScore as a string (e.g. "8" instead of 8), causing it to fall through to 0. Also hide misleading "quality: 0/10" display when the score couldn't be determined, and log raw response for debugging. * fix(ai): increase validation timeout to 90s and fix quality score parsing Agent SDK validation requires spawning a process, reading the image, and analyzing it — 30s was consistently timing out. Also handle string qualityScore values from LLM responses and hide misleading 0/10 display. * fix(ai): fix validation timeout and response parsing - Increase validation timeout from 30s to 180s (Agent SDK needs time for subprocess spawn + OAuth auth + multi-turn image reading) - Strip <tool_use> XML blocks from Agent SDK response before extracting JSON — the tool call XML was confusing the regex, causing qualityScore to parse as 0 despite valid JSON being present - Handle string qualityScore values and hide misleading "quality: 0/10" - Revert unnecessary direct API key approach for validation * fix(ai): prevent node ID collisions between generations When generating new content on a canvas with existing nodes, AI-generated IDs (e.g. brand-spacer) would collide with previous generations. Now captures pre-existing node IDs at generation start and checks against them during upsert sanitization. Remapped IDs are tracked in generationRemappedIds so progressive streaming updates can still find their nodes. * fix(ai): require styleGuide in orchestrator plan and fix validation detail icons - Add fallback default styleGuide when orchestrator LLM omits it - Strengthen prompt to mark styleGuide as REQUIRED - Replace emoji icons in validation details with [done]/[pending]/[error] markers for consistent styling with the checklist design system * feat(server): add port file plugin for server instance discovery - Introduce a new Nitro plugin that writes a port file on server startup to allow the MCP server to discover the running instance, whether it's a development server or Electron. - Implement error handling in the Electron main process for writing the port file, logging any failures. - Update Vite configuration to include additional external dependencies in the rollup configuration. * feat(electron): implement IPC for retrieving pending file paths - Added a new IPC handler `file:getPending` to retrieve and clear the pending file path when the React app mounts. - Updated the Electron API to include `getPendingFile` for renderer access. - Enhanced the `useElectronMenu` hook to load any pending file on application startup. - Updated UI components to reflect changes in file handling and improved user experience. * fix(panels): replace emoji icons with styled icons in validation checklist - Parse [done]/[pending]/[error] prefixes in detail lines and render as styled circle icons matching the parent checklist design system - Replace remaining emoji markers in design-validation.ts with text prefixes - Fix isApplied detection to recognize new [done] Applied marker * refactor(electron): update settings path to use platform-standard app data directory - Changed the settings file path to utilize Electron's user data directory for better cross-platform compatibility. - Updated the settings writing function to ensure the user data directory is created if it doesn't exist. - Added comments to clarify the storage location for different operating systems. - Implemented a fixed partition for localStorage/cookies to maintain data across server port changes. * feat(ai): enhance validation with pre-checks, structural fixes, and border detection - Add design-pre-validation.ts: pure code checks before LLM validation - Invisible container detection (same fill as parent → auto-add border) - Sibling consistency (majority-rule for height/cornerRadius) - Add structural fixes to validation: addChild/removeNode operations - Icon injection via lookupIconByName with server fallback - autoFixParentLayout with child count guard to prevent layout breakage - Add strokeColor/strokeWidth to safe fix properties for border fixes - Simplify intent classification: all design requests use visual-ref pipeline - Fix checklist: "Found N issues" now shows [done] instead of [pending] - Fix qualityScore: only update when > 0 to preserve valid round scores * fix(ai): cherry-pick safe validation improvements, drop aggressive pre-checks Keep: stroke tree dump bug fix (object not array), qualityScore=0 false positive detection, fit_content→fixed safety guard, empty path removal, type-specific sibling consistency, repeated fix filtering, screenshot extraction to design-screenshot.ts. Drop: detectForcedFixedHeight (destroyed input/button heights), MAX_VALIDATION_ROUNDS 5 (too many rounds), removal of quality threshold early stop, section regeneration phase. --------- Co-authored-by: Fini <fini.yang@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
8.7 KiB
8.7 KiB
OpenPencil
AI 네이티브 오픈소스 디자인 툴. 디자인-애즈-코드.
프롬프트에서 캔버스 UI로. 멀티 에이전트 오케스트레이션. 내장 MCP 서버. 코드 생성.
English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia
빠른 시작 · AI · 기능 · Discord · 기여하기
이미지를 클릭하여 데모 영상 보기
빠른 시작
# 의존성 설치
bun install
# http://localhost:3000 에서 개발 서버 시작
bun --bun run dev
또는 데스크톱 앱으로 실행:
bun run electron:dev
AI 네이티브 디자인
OpenPencil은 AI를 플러그인이 아닌 핵심 워크플로로서 처음부터 구축했습니다.
프롬프트에서 UI로
- 텍스트-투-디자인 — 페이지를 설명하면 스트리밍 애니메이션으로 실시간으로 캔버스에 생성
- 오케스트레이터 — 복잡한 페이지를 공간적 서브태스크로 분해하여 병렬 생성 지원
- 디자인 수정 — 요소를 선택하고 자연어로 변경 내용을 설명
- 비전 입력 — 스크린샷이나 목업을 참조로 첨부하여 디자인
멀티 에이전트 지원
| 에이전트 | 설정 방법 |
|---|---|
| Claude Code | 설정 불필요 — 로컬 OAuth로 Claude Agent SDK 사용 |
| Codex CLI | 에이전트 설정에서 연결 (Cmd+,) |
| OpenCode | 에이전트 설정에서 연결 (Cmd+,) |
MCP 서버
- 내장 MCP 서버 — Claude Code / Codex / Gemini / OpenCode / Kiro CLI에 원클릭 설치
- 터미널에서 디자인 자동화: MCP 호환 에이전트를 통해
.op파일 읽기, 생성, 편집 가능
코드 생성
- React + Tailwind CSS
- HTML + CSS
- 디자인 토큰에서 CSS Variables 생성
기능
캔버스 & 드로잉
- 팬, 줌, 스마트 정렬 가이드, 스냅 지원의 무한 캔버스
- 사각형, 타원, 직선, 다각형, 펜(베지어), Frame, 텍스트
- 불리언 연산 — 합치기, 빼기, 교차 (컨텍스트 도구 모음)
- 아이콘 피커(Iconify)와 이미지 가져오기(PNG/JPEG/SVG/WebP/GIF)
- 오토 레이아웃 — 수직/수평 방향, 갭·패딩·justify·align 지원
- 탭 내비게이션이 있는 멀티 페이지 문서
디자인 시스템
- 디자인 변수 — 컬러·숫자·문자열 토큰,
$variable참조 지원 - 멀티 테마 지원 — 여러 테마 축, 각 축에 여러 변형(라이트/다크, 컴팩트/컴포터블)
- 컴포넌트 시스템 — 인스턴스와 오버라이드를 가진 재사용 가능한 컴포넌트
- CSS 동기화 — 커스텀 프로퍼티 자동 생성, 코드 출력에
var(--name)사용
Figma 가져오기
- 레이아웃, 채우기, 선, 효과, 텍스트, 이미지, 벡터를 유지하며
.fig파일 가져오기
데스크톱 앱
- Electron을 통한 네이티브 macOS·Windows·Linux 지원
- GitHub Releases에서 자동 업데이트
- 네이티브 애플리케이션 메뉴와 파일 다이얼로그
기술 스택
| 프론트엔드 | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui |
| 캔버스 | Fabric.js v7 |
| 상태 관리 | Zustand v5 |
| 서버 | Nitro |
| 데스크톱 | Electron 35 |
| AI | Anthropic SDK · Claude Agent SDK · OpenCode SDK |
| 런타임 | Bun · Vite 7 |
| 파일 형식 | .op — JSON 기반, 사람이 읽을 수 있는, Git 친화적 |
프로젝트 구조
src/
canvas/ Fabric.js 엔진 — 드로잉, 동기화, 레이아웃, 가이드, 펜 툴
components/ React UI — 에디터, 패널, 공유 다이얼로그, 아이콘
services/ai/ AI 채팅, 오케스트레이터, 디자인 생성, 스트리밍
services/figma/ Figma .fig 바이너리 가져오기 파이프라인
services/codegen React+Tailwind 및 HTML+CSS 코드 생성기
stores/ Zustand — 캔버스, 문서, 페이지, 히스토리, AI, 설정
variables/ 디자인 토큰 해석 및 참조 관리
mcp/ 외부 CLI 통합용 MCP 서버 툴
uikit/ 재사용 가능한 컴포넌트 킷 시스템
server/
api/ai/ Nitro API — 스트리밍 채팅, 생성, 유효성 검사
utils/ Claude CLI, OpenCode, Codex 클라이언트 래퍼
electron/
main.ts 윈도우, Nitro 포크, 네이티브 메뉴, 자동 업데이터
preload.ts IPC 브리지
키보드 단축키
| 키 | 동작 | 키 | 동작 | |
|---|---|---|---|---|
V |
선택 | Cmd+S |
저장 | |
R |
사각형 | Cmd+Z |
실행 취소 | |
O |
타원 | Cmd+Shift+Z |
다시 실행 | |
L |
직선 | Cmd+C/X/V/D |
복사/잘라내기/붙여넣기/복제 | |
T |
텍스트 | Cmd+G |
그룹화 | |
F |
Frame | Cmd+Shift+G |
그룹 해제 | |
P |
펜 툴 | Cmd+Shift+E |
내보내기 | |
H |
핸드(팬) | Cmd+Shift+C |
코드 패널 | |
Del |
삭제 | Cmd+Shift+V |
변수 패널 | |
[ / ] |
순서 변경 | Cmd+J |
AI 채팅 | |
| 화살표 키 | 1px 이동 | Cmd+, |
에이전트 설정 | |
Cmd+Alt+U |
불리언 합치기 | Cmd+Alt+S |
불리언 빼기 | |
Cmd+Alt+I |
불리언 교차 |
스크립트
bun --bun run dev # 개발 서버 (포트 3000)
bun --bun run build # 프로덕션 빌드
bun --bun run test # 테스트 실행 (Vitest)
npx tsc --noEmit # 타입 검사
bun run electron:dev # Electron 개발 모드
bun run electron:build # Electron 패키징
기여하기
기여를 환영합니다! 아키텍처 세부 정보와 코드 스타일은 CLAUDE.md를 참고하세요.
- 포크 후 클론
- 브랜치 생성:
git checkout -b feat/my-feature - 검사 실행:
npx tsc --noEmit && bun --bun run test - Conventional Commits 형식으로 커밋:
feat(canvas): add rotation snapping main브랜치에 PR 생성
로드맵
- CSS 동기화가 있는 디자인 변수 & 토큰
- 컴포넌트 시스템(인스턴스 & 오버라이드)
- 오케스트레이터를 통한 AI 디자인 생성
- MCP 서버 통합
- 멀티 페이지 지원
- Figma
.fig가져오기 - 불리언 연산(결합, 빼기, 교차)
- 공동 편집
- 플러그인 시스템
기여자
커뮤니티
Discord에 참여하기
— 질문하기, 디자인 공유, 기능 제안.
라이선스
MIT — Copyright (c) 2026 ZSeven-W