Design Engineered

The visual interface for Claude Code, Codex, Gemini & Opencode

Prompt. Preview. Refine. All in one space.

Projekt is a visual workspace that wraps your AI coding agents in a real-time preview, an editable DOM, and a prompt-first interface. Write naturally, see instantly, refine visually.

How it works

Connect your agents

Terminal

$npm i -g @anthropic-ai/claude-code

Claude Code

Open any project

No setup, no config, no boilerplate. Point Projekt at any folder and start building.

Open Project

New Project

Start with Prompt

Recent ProjectsClear all

portfolio-site
~/Projects/portfolio-site
dashboard-v2
~/Projects/dashboard-v2
api-service
~/Work/api-service
design-system
~/Projects/design-system

Prompt & preview

Describe what you want. See live previews update in real time as your agent writes code.

localhost:3000
<Button>

Claude

Build a landing page for my design tool. Hero section with a bold headline, waitlist signup form, and a section showing how the product works with 3 steps.

$Analyzing project structure...
$Creating HeroSection component...
$Adding waitlist form with validation...
$Building HowItWorks section...
$Writing responsive styles...
$✓ 4 components created

Refine & commit

Select any element, edit inline, tweak styles visually. When it's right, commit and deploy.

Git

feature/alpha-l...
Changes (6)
Mcomponents/HeroSection.tsx
Mcomponents/Navigation.tsx
Mstyles/globals.css
Acomponents/WaitlistForm.tsx
Acomponents/HowItWorks.tsx
?assets/hero-image.png
Add hero section and waitlist formAI Generate
Commit All
Pull
Push

All your agents, working together

Launch Claude Code, Codex, Gemini & Opencode side by side. See what each agent is doing in real time.

Claude

Codex

Gemini

OpenCode

$Analyzing project structure...
$Found 12 components in src/
$Generating Header component...
$Writing responsive layout...
$Adding dark mode support...
$✓ Header.tsx created

Your keys, your models

Use your existing API keys. No redundant subscriptions. No vendor lock-in. Full control over your spend.

The best of both worlds

Everything starts with a prompt. Every element is inspectable, selectable, and editable via direct manipulation.

Explorermy-project
▾my-project/
▾src/
▾components/
Header.tsx
Hero.tsx
Features.tsx
Footer.tsx
▾ui/
Button.tsx
Card.tsx
Input.tsx
▾lib/
utils.ts
constants.ts
▸styles/
▸hooks/
App.tsx
main.tsx
▸public/
package.json
tsconfig.json
vite.config.ts
.gitignore
localhost:3000
<div class="hero">

What makes Projekt different

The principles that shape every decision.

AI-native from day one

Not a code editor with AI added. Not a design tool with a chatbot. Built from scratch around prompting, previewing, and shipping — all in one place.

Only what you need

No feature bloat. No panels you'll never open. No overwhelming settings. A clean, minimal workspace with exactly the tools a builder needs and nothing else.

Your keys, your code, your stack

Bring your own API key. Work on any project. No proprietary formats, no lock-in. Projekt isn't reselling AI to you — it's the best workflow to use whatever model you want.

One window, whole workflow

File explorer, live preview, and chat in a single workspace. No switching between terminal, browser, and editor.

Always evolving

As AI tools, models, and workflows get better, so does Projekt. Best practices and technologies get adopted as they emerge so your workspace keeps up without you having to start over.

Built for builders

For people who go from idea to shipped product without waiting on anyone. Projekt assumes you're the whole team.

Download the Alpha

Early access for designers who engineer.

Download Download on Desktop