Changelog
0.1.0, unreleased
The first version. Everything below is new. The canvas and the other guides say where a feature works only in part.
The canvas
- An infinite canvas where every layer is an HTML element with CSS: frames, flex and grid, absolute position with constraints, fixed, hug and fill sizes.
- Tools for frames, shapes, lines and arrows, text, the pen and pencil, images, comments and shaders.
- Smart guides, snapping, measuring, gap and padding handles, reordering flex children by dragging.
- Fills with layered gradients and handles on the canvas; borders, shadows, filters, blend modes; any CSS property under Other styles, and Simplify styles.
- Rich text ranges, Google Fonts and local fonts with variable axes; text that merges per character when several people type.
- Vector editing, shape to path and boolean operations.
- Lucide icons, shader layers, video and iframe embeds, and layers repeated from JSON, CSV or a URL.
- Prototype links, hover styles and transitions, a preview with present mode, and a motion panel with keyframes.
- Command palette, find on canvas, layer search, settings, minimal UI, and a shortcuts dialog.
- Comments with attachments and mentions; cursors, presence, follow and cursor chat.
- A home screen with folders, search and thumbnails.
Design systems
- Tokens as CSS variables, theme modes with one value per mode, and text styles.
- Components with instances, overrides, props, variants and slots.
- Shared libraries between files, with updates you accept.
- Code components: React components from your own project, rendered by its own code.
Brands
- Brands as documents of their own, synced, with logos, palette, type, layout, voice and rules.
- Extraction from files, live pages, CSS and Tailwind configs, as suggestions you confirm.
- The brand check with a score that explains itself, waivers by a person, and strict mode.
- Versions, impact on linked files, and applying a change as one undo step per file.
- Templates that lay out a brand system, a landing page or social images from a brand.
Your agent
- An MCP server with 129 tools, resources with subscriptions, four prompts and guides, over stdio and HTTP, working with no editor open.
bogen installfor Claude Code, Codex, Cursor, VS Code, OpenCode, Gemini CLI and Zed, with a Bogen skill for Claude Code and Codex.- Ctrl+K runs your own
claudeorcodexwith only Bogen's tools;@claudeand@codexin a comment start a run that answers in the thread. - Model and effort per runner, run history, proposals to accept or discard, events to wait for, agents that point at things, and undo per agent and per step.
- Live site mode: pick an element on your running dev server and have your agent edit the source.
Getting things in and out
- Snapshot copies a live page, or a whole site, onto the canvas as editable layers, keeps self-hosted fonts, and fills in a second colour scheme as theme mode values.
- Import from Figma through the REST API with your own token.
- Export to PNG, JPG, WebP, AVIF, SVG with real vectors, PDF, HTML, MP4 and WebM, with size presets to a zip.
- Code as HTML, React or React with Tailwind, with components as typed React components.
- Tokens out as CSS or a Tailwind theme, and in from your repo's CSS.
History
- Every change on a timeline, revertable on its own or as a whole agent run.
- Commits, compare with a visual difference, restore, and branches.
- Design folders that diff well, and a Git mirror that never pushes.
Devices and desktop
- Sync between your own machines over Tailscale, with conflict notes and version checks.
bogen doctorchecks the whole setup and prints the fix for each problem.bogen peer deployupdates another Omarchy machine over ssh.- Omarchy integration: theme following, bar widget, notifications, launcher, keys, a user service and screenshots to the canvas.
- Install scripts for macOS, not yet run on a Mac.
- An npm package,
bogen-design, and an ArchPKGBUILD, neither published yet.
Fixes before release
- The brand check accepts the weights of every role a family is listed for. A family used for display at 800 and for body at 400 no longer flags all body text.
- Google Fonts families with a width axis load it, so
font-stretchworks for families such as Archivo.