一个原生 macOS 的「Windows 11 画图」复刻 —— 但它真正的用途，是在 vibe coding 时代给 AI「画」出界面需求的工具。
A native macOS clone of Windows 11 Paint, built as a tool for drawing UI requirements to AI in the vibe-coding era.
语言 / Language: 中文（下方） · English ↓
在 vibe coding（用自然语言指挥 AI 写代码）越来越普及之后，我遇到一个反复出现的痛点：
有些界面调整需求，用语言很难精确表达。
"把这个按钮往左挪一点点"、"这块区域整体下移"、"这里的间距再紧一点"、"这两个元素换个位置" —— 这类空间/像素级的调整，文字描述往往含糊，AI 很容易理解偏，来回好几轮还对不上。
但现在的 AI 已经具备多模态能力。与其费劲用文字描述，不如直接在截图上做一点小调整：把一块区域移动 / 复制 / 剪切一下，拉个箭头，框住一段文字写个批注，然后把改好的图丢给 AI —— 它对意图的理解会精准得多。一图胜千言。
于是有了这个 MacPaint：一个专门服务于「快速对界面调整作出说明」的原生图像编辑器。它的核心不是画画，而是选区的像素操作（移动 / 复制 / 剪切 / 粘贴到新画布）加上一整套标注工具，让人能在几秒钟内把脑子里的调整「画」出来，交给 AI 精确执行。
📎 这个项目是一次探索。它的大部分能力后来被整合进了 fscapture 截屏项目（截图 + 标注一体化）；MacPaint 作为最初的原型保留在这里。
- 像素选区操作（核心）：矩形 / 自由选区，拖动移动、⌃-拖动复制、剪切 / 粘贴，⌥V 粘贴到新标签页 —— 用来快速重排界面里的元素
- 标注工具：箭头、荧光笔、步骤编号、气泡标注、放大镜、像素化、模糊、聚光灯
- 文字标注：可缩放/拖动的文字框、白边/阴影、色调化（Tailwind 风）与玻璃拟态样式预设
- 画笔与形状：9 种画笔、21 种矢量形状，共享的粗细/填充/虚线/阴影/箭头样式
- 图像编辑：图层、双色调色板、裁剪/缩放/旋转/翻转、多标签页、标签拼接、背景美化（ShareX 风）
- 截屏：⌘⇧S 区域截屏（→ 新标签页 + 剪贴板）、⌥⇧S 仅剪贴板、⌘⇧D 滚动截屏；常驻菜单栏、可开机自启
技术上是纯 AppKit（Swift），用固定自签证书让屏幕录制 / 辅助功能等系统授权在每次重建后依然保留。
bash scripts/setup-signing.sh # 首次：确认稳定签名身份
bash scripts/install.sh # 编译 → 签名 → 安装到 /Applications需要 macOS 14+ 与 Swift 工具链。首次运行需在「系统设置 → 隐私与安全性」授权一次（辅助功能 + 屏幕录制，滚动截屏依赖）。
A native macOS clone of Windows 11 Paint — but its real purpose is to draw UI requirements for AI in the vibe-coding era.
As "vibe coding" (directing AI to write code in plain language) became part of my daily workflow, I kept hitting the same wall:
Some interface tweaks are just hard to put into words.
"Nudge this button a little to the left", "shift this whole block down", "tighten the spacing here", "swap these two elements" — these spatial, pixel-level adjustments are easy to see but slippery to describe. Text descriptions come out vague, the AI guesses wrong, and you burn several round-trips still not landing it.
But today's AI is multimodal. Instead of laboring over a written description, it's far easier to make the small change directly on a screenshot: move / copy / cut a region, drop an arrow, box a piece of text and annotate it — then hand the edited image to the AI. It grasps the intent far more precisely. A picture is worth a thousand words.
So I built MacPaint: a native image editor made for one job — explaining interface changes, fast. Its heart isn't painting; it's pixel-level selection ops (move / copy / cut / paste-to-new-canvas) plus a full annotation toolkit, so you can "draw" the change in your head within seconds and hand it to the AI to execute precisely.
📎 This started as an exploration. Most of its capabilities have since been folded into the fscapture screenshot project (capture + annotate in one); MacPaint stays here as the original prototype.
- Pixel selection ops (the core): rectangular / free-form selection, drag to move, ⌃-drag to copy, cut / paste, ⌥V paste into a new tab — for quickly rearranging UI elements
- Annotation tools: arrow, highlighter, numbered step, speech-bubble callout, magnifier loupe, pixelate, blur, spotlight
- Text: resizable & draggable text box, white outline + shadow, tonal (Tailwind-style) and frosted-glass style presets
- Brushes & shapes: 9 brushes, 21 vector shapes with shared width / fill / dash / shadow / arrowhead styling
- Image editing: layers, dual-color palette, crop / resize / rotate / flip, native tabs, tab stitching, ShareX-style beautify
- Screenshots: ⌘⇧S region (→ new tab + clipboard), ⌥⇧S clipboard-only, ⌘⇧D scrolling capture; lives in the menu bar, can launch at login
Pure AppKit (Swift); a stable self-signed identity keeps Screen-Recording / Accessibility grants across every rebuild.
bash scripts/setup-signing.sh # first time: ensure the stable signing identity
bash scripts/install.sh # compile → sign → install to /ApplicationsRequires macOS 14+ and a Swift toolchain. On first launch, grant Accessibility + Screen Recording once in System Settings → Privacy & Security (scrolling capture needs both).
guohongbo 📮 guohongbo@outlook.com
这个项目从头到尾是用 Claude Code 结对「vibe coding」出来的 —— 它本身，就是这套工作方式的一个注脚。 This project was built end-to-end by pair-"vibe-coding" with Claude Code — it is, itself, a footnote to that way of working.