Design

Describe a landing page, get working HTML.

A real page you can open and click, not a picture of one.

Signed & notarized by Apple · opens without a Gatekeeper warning

sha256 698955a0187bc039f4c74f5d05a9f10fbb27376a45788a0a241d1326b73873c7

$curl -fsSL https://lucidtrain.com/install.sh | sh

Give Design mode a one-line brief and it asks whether you are building a landing page or an app UI, then generates page layouts as self-contained HTML documents. You choose a theme from thirteen, a palette from eleven, and which kinds of imagery the page may use: real photos sourced from the web, inline SVG illustrations, Excalidraw diagrams, a three.js scene or a background video. Every variant uses the same theme so you are comparing layouts rather than colour schemes.

Layouts vary, the theme does not

When it generates alternatives it holds the theme constant across all of them deliberately. Comparing two layouts that also differ in colour and typography is comparing nothing useful, because the eye goes to the palette first. Fixing the theme means the only variable left is the structure, which is the decision you are actually trying to make.

Real content, not placeholder

The generator is instructed to write content specific to the product being described rather than filler, and to include real image slots rather than grey rectangles. A page full of Lorem Ipsum tells you nothing about whether the layout survives contact with a real headline length, and that is usually the thing that breaks.

It avoids the tells

The prompt carries an explicit list of the visual clichés that mark a page as AI-generated, cream with a serif and terracotta, near-black with acid green, purple-to-blue gradients, unmotivated glassmorphism, and is told to avoid them unless the brief actually calls for that. It is a small thing that makes the difference between output you can show someone and output that announces where it came from.

One file, no build step

Output is one self-contained HTML document with every style inside a single style tag. No build step, no bundler, no external stylesheet and no framework. That is a real constraint and it is also why the result is portable: it opens in a browser, drops into a pull request, attaches to a brief and deploys to a static host without carrying a toolchain behind it.

Which engine runs it

Design runs on the Claude Code CLI or the Codex CLI installed on your machine, signed in as you. There is no separate design subscription and no API key for the design engine. Cursor CLI and OpenCode can drive coding tabs but not this one, because the design canvas has no provider implemented behind them.

What you choose before it generates

Choice	Options
Kind	Landing page or app UI
Theme	13, or let it pick
Palette	11, or match the app theme
Imagery	Photos, SVG, Excalidraw, three.js, video

FAQ

Questions

Can I edit the result?

Yes, in two ways. Click any element on the canvas to have just that fragment rewritten, or export the HTML and edit it like any other file.

Does it use stock placeholder images?

It sources real photos from the web when you allow that imagery mode, and can also generate inline SVG illustrations, Excalidraw diagrams, a three.js scene or a background video instead.

Is it a Figma alternative?

For a first draft of a page, often, because you get a working page rather than a picture of one. For design systems, component libraries and team handoff, no. Figma is a collaborative editor and this is a desktop tool that writes HTML.

Wireframe to High Fidelity
A finished-looking mockup gets reviewed as a design. A rough one gets reviewed as a structure.
Click to Edit an AI Design
The difference between iterating and rerolling.
Design With Your Claude Code or Codex Login
No second subscription for the design tool, because it is running the one you already pay for.
Design to Code
Not generated components you then have to rewrite. A reference, and an agent that knows your codebase.

Last updated 22 August 2026