leglas

Code is becoming the source of truth. Features go from prompt to working code in minutes, while mockups and design files fall behind the product they describe. The fastest teams already design in the medium they ship, and Leglas is built for working that way: many design directions, explored at once, live in your own app.

The goal is to help devs and designers try many variations of a component, feature, page or user-flow quickly and make coming up with ideas extremely easy.

Ask your agent for a handful of directions for the landing page, the checkout, the empty states or your onboarding flow. Leglas runs every one of them as your actual app, in one place, and keeps your notes on each. Explore far and wide without losing focus: you see more ideas without losing your opinion of any of them.

And because every direction is the real product, your judgment is real too. Everything behaves the way it will in production, motion and data included. Choosing between two directions is choosing between two things that already exist, and the winner never has to be rebuilt from a picture.

Leglas asks nothing of your app: no package, no import, no build step. It sits in front of the dev server you already run, and its config file is optional. New directions go in .leglas/, a folder Leglas adds to your .gitignore, and keeping a winner clears the rest away. Sessions clean up after themselves too: stopping Leglas shuts down everything it started, from dev servers and branch checkouts to the share tunnel and any agent still at work.

What Leglas does

• Put any two directions side by side when it gets hard to choose.
• Name each direction, drag to reorder and set aside the ones that don't feel right. Your opinion of every idea survives a long exploration.
• Share the rail with someone who has no repo: a client, a cofounder, a teammate on another machine. They get the real app, in your order, and cannot change anything. Share it from the interface, from a terminal with npx leglas share or by asking your agent. See Sharing.
• Compare things no design tool can hold: three git branches, a local build against production, yesterday's direction against today's.
• Hand the workflow to your coding agent. leglas init teaches it, and leglas explore briefs an exploration: five separate ideas, or five variants of the one you already like. You choose the spread; your agent supplies the taste.
• Ask for changes without leaving the comparison. Describe what you want on the direction you are looking at, or point at it, and Leglas turns that into a precise request for your agent, file path and screenshots included. Pick any agent on your machine from beside the send button. Your agent, your subscription, no keys.
• A change makes a variant, not a rewrite. The result appears under the direction it came from, with the original still there to compare against.
• Keep the winner with one command. Leglas moves it into your source tree, writes down what the exploration decided and cleans up after itself.
• No app yet? Leglas compares plain HTML files the same way, with no dev server.

Get started

Start your dev server, then run Leglas from the project directory:

npx leglas

Leglas starts on port 4100, proxies your app and opens http://localhost:4100/leglas. With no configuration you get a single preview of your app root. To compare more than one thing, create leglas.config.ts at the project root:

export default {
  devServer: "http://localhost:3000",
  previews: [
    { title: "Current", url: "/" },
    { title: "Wave", url: "/?v-hero=wave", note: "Full-bleed, anchored low." },
    { title: "Dot grid", url: "/?v-hero=dotgrid", note: "Lattice that wakes near the pointer." },
  ],
};

Each preview is a URL your dev server already answers. Setting up a project covers every field, plain HTML files with no dev server, git branches side by side and how the proxy works.

It works with whatever you are building in. Leglas never imports or executes your framework, so the target can be Next, Vite, Remix, SvelteKit, Astro or a folder of static files. It needs Node 24 or newer and nothing else; npx fetches it the first time you run it. Leglas tells you when a newer version is out and can update itself. To pin a version for a project, npm install -D leglas; to type leglas without npx, npm install -g leglas.

With your agent

npx skills add FredAmartey/leglas

One install, and your agent recognises "give me a few directions for the pricing page" as a Leglas exploration in any project, including ones that have never seen Leglas. In a project, npx leglas init writes the whole workflow into AGENTS.md, so Claude Code, Cursor, Codex or whatever you switch to next opens the project already knowing how to add design directions to it. Working with agents has the one rule that workflow is built around, the commands an agent runs, the MCP server and the Agent Plugin.

Documentation

Page	What it covers
Using Leglas	The rail and the stage, comparing, asking for a change, pointing at the problem, the keys, updating
Sharing	Sending the rail to someone with no repo, how far a viewer can go, links and the tunnel
Setting up a project	The config file and every field, plain HTML without a dev server, comparing branches, how the proxy works, limitations
Working with agents	Add beside, never rewrite; the commands an agent runs; running requests; the MCP server; the Agent Plugin
Command line	Every command and the flags they share
Changelog	What each release changed

Contributing

Bugs and ideas go in issues. Two packages are published from this repository, leglas and leglas-mcp, and the repository is also the Agent Plugin. How to build, what a pull request needs and how a release is cut are in CONTRIBUTING.md.

License

MIT