Hermes Desktop Design Plugin

Hermes Design is the open-source Design plugin built specifically for Hermes Desktop. It runs inside the Hermes Desktop plugin runtime and is not a standalone design application.

Create editable social graphics and visual UI prototypes without leaving Hermes Desktop. The plugin connects the active Hermes model and image-generation capabilities to a multi-Artboard canvas, lets you explore three brand-aware directions, and keeps every accepted result fully editable.

Hermes Design combines a direct-manipulation SVG canvas with contextual AI generation. Instead of returning a flattened picture or an opaque JSON blob, every Candidate combines newly generated imagery with editable text, shapes, layout, and visual treatment.

Built for Hermes Desktop

• Opens from the Hermes Desktop Design sidebar entry, command palette, or /design route
• Uses the active Hermes session, model profile, and image_generate capability
• Reads Brand Guide, Moodboard, and existing Design context from the current workspace
• Persists Designs and Candidate Runs through Hermes plugin storage
• Uses Hermes Desktop filesystem access for generated images, local assets, and exports
• Ships as a single plugin.js file loaded by the Hermes Desktop plugin runtime

Why Hermes Design?

• Editable AI output - Generated images live alongside real Text, Shape, Line, and Image Layers.
• Three visual directions - Compare structurally different Candidates against the unchanged Baseline before accepting anything.
• Brand-aware generation - Brand Guide, Moodboard, existing Design imagery, and uploaded references are included as visual evidence.
• Social design and UI prototyping - Start from Instagram, YouTube, X, LinkedIn, print, carousel, or landing-page prototype formats.
• Safe canonical state - Preview, Regenerate, Discard, revision checks, and explicit Accept protect the working Design.
• Local-first assets - Workspace Designs pin their asset and export paths instead of depending on temporary image URLs.

Screenshots

Generated image and editable Candidate

Candidate generation can produce a new image and compose it with editable Text, Shape, and layout Layers. The image in this screenshot was generated specifically for the public demo and does not come from a private project.

Layer Properties

Select a Layer on the Canvas to edit its content, sizing, typography, alignment, opacity, position, and visual treatment through direct controls.

Multi-stop gradients

Text and Shape Layers support solid, linear-gradient, and radial-gradient fills. Gradient stops can be added, selected, recolored, dragged, nudged with the keyboard, or removed.

Editable multi-Artboard canvas

All screenshots use isolated standalone demo data and contain no private workspace, session, or project information.

Features

Canvas editing

• Text, rectangle, ellipse, line, and image Layers
• Multi-select, marquee selection, grouping, z-order, duplication, and deletion
• Eight-point resize handles and proportional Text scaling
• Cursor-anchored zoom, viewport pan, and movable Artboards
• Shift-drag smart snapping to Artboard and nearby Layer edges and centers
• Solid, linear-gradient, and radial-gradient fills
• Draggable gradient stops with insertion, keyboard nudging, and removal
• Image backgrounds with Fill and Fit behavior
• Tight Auto-height Text bounds and fixed-height vertical centering
• Resizable Chat, Layers, and Assets panel

AI Candidate workflow

1. Select Layers or target the complete Artboard.
2. Add up to six Composer Reference images when needed.
3. Choose an Intent, Layout Archetype, Art Direction, and Variation Level.
4. Generate three image-and-Layer Candidates.
5. Compare them with the Baseline on the real Canvas.
6. Accept one Candidate, Regenerate, or Discard.

Every Candidate must contain its own newly generated image plus editable non-image Layers. Layer-only responses, flattened image-only scenes, reused Candidate imagery, invented URLs, and unreadable generated paths are rejected. A fully invalid response receives one automatic repair attempt.

Generation remains visible when the Design view is closed or reopened. Candidate Runs persist independently from canonical Designs and recover from delayed sessions, remounts, network continuations, and previously completed session history.

Visual context

• Workspace Brand Guide
• Moodboard images and notes
• Existing Design images
• Brand reference URLs
• Composer References uploaded for a single generation run
• Reference synthesis into one coherent, direction-specific image per Candidate

Templates and output

• Instagram Post and Story
• Instagram Carousel with 3, 5, or 8 slides
• YouTube Thumbnail
• X / Twitter Post and Carousel
• LinkedIn Carousel
• Facebook Cover
• A4 Print
• Editable landing-page UI Prototype
• PNG, JPG, WebP, SVG, and editable JSON export

UI Prototype is a visual interface exploration mode on the same editable Artboard engine. It is not a DOM editor, HTML generator, or website builder.

Install in Hermes Desktop

Hermes Design requires Hermes Desktop and is distributed as one runtime plugin file with no build step. Download the latest release directly into the Hermes Desktop plugin directory:

mkdir -p ~/.hermes/desktop-plugins/design
curl -L https://github.com/labsiqbal/hermes-design-plugin/releases/latest/download/plugin.js \
  -o ~/.hermes/desktop-plugins/design/plugin.js

When installing from a cloned repository instead:

mkdir -p ~/.hermes/desktop-plugins/design
cp plugin.js ~/.hermes/desktop-plugins/design/plugin.js

Hermes Desktop watches desktop-plugins/ automatically. If the Design entry does not appear:

1. Open the Hermes Desktop command palette.
2. Run Reload desktop plugins.
3. Open Settings, then Plugins, and enable Design if needed.

Open the plugin from the Design sidebar entry, the Design: Open command, or the /design route.

Requirements

• Hermes Desktop with disk-plugin support. This plugin does not run standalone.
• An active Hermes model/profile for AI Candidate generation
• The image_generate capability when generating Candidates
• Node.js 20 or newer only for development and tests

Manual canvas editing and export do not require an AI generation run.

Development

npm ci
npm test
npm run check

The runtime stays in plugin.js. Rendered user-flow tests exercise the public /design route through a Hermes SDK adapter in tests/design-plugin.test.js.

Architecture

• One plain ESM runtime plugin
• React supplied by the Hermes Desktop host
• SVG rendering without Konva or an additional runtime framework
• One Artboard and Layer engine shared by Graphic Design and UI Prototype
• Typed <design-candidates> response contract
• Durable Candidate Runs stored separately from canonical Designs
• Gateway-first generated-image hydration with desktop filesystem fallback

See CONTEXT.md for domain terminology and docs/adr for the main architecture decisions.

Data and privacy

• Design documents and settings are stored through Hermes plugin storage.
• Workspace image assets are written under .hermes-design-studio-<design-id>-assets/ in the pinned workspace.
• Standalone Designs have no workspace owner and ask for an export destination.
• Composer References are sent to the active Hermes session only when generation starts.
• The plugin contains no analytics or telemetry integration.

Current limitations

• Requires the Hermes Desktop plugin runtime.
• Moodboards do not crawl remote pages for Open Graph assets.
• Brand Guide content is entered manually.
• UI Prototype produces editable visual Artboards, not production frontend code.
• Generation quality and latency depend on the active Hermes model and image-generation capability.

Contributing

Issues and pull requests are welcome. Read CONTRIBUTING.md before submitting a change.

License

Released under the MIT License.