For macOS

Free and open source

The word

dī·vī·na

Adjective, Latin

  1. 1Divine, heavenly.
  2. 2Inspired by the gods.

The app

Figma for a real frontend.

A macOS app where you drag, move and tweak the interface of your running web project, and the coding agent you already use rewrites the source to match.

$brew install shreyas-dhakal/tap/divina
Read the source

Coding agents rarely build a layout the way you picture it, and fixing that in words takes hours. Moving the button yourself takes seconds.

I

How it works

Your hand moves it.
The code follows.

The preview is your own dev server, running your own project. Every edit you make by hand becomes a change in your source files.

Arrange

Click to select. Drag to move. Pull a corner to resize. Double-click to retype. Each change previews at once and joins your pending edits.

Send

One press saves a checkpoint and hands your edits to the agent in its own terminal tab, with your login and your settings.

Behold

The agent rewrites the source and your page reloads with the real result. Show diff to review it. Undo to take it back.

II

Principles

Seven pillars.

The rules Divina is built on. None of them bend.

III

Works with

Any frontend
that runs.

Start from a template or open the folder you already have. You write the command that starts it, and Divina runs exactly that.

ReactNext.jsVueSvelteKitLeptosLaravelDjangoRailsPHP

Agent

Claude Code

claude auth login

Agent

Codex

codex login

Agent

opencode

opencode auth login

IV. Install

Begin.

One line in your terminal.

$brew install shreyas-dhakal/tap/divina
  • macOS, Apple Silicon or Intel
  • Node.js
  • One agent, installed and logged in