For the vibe coding era

Turn your project into
structured docs

Flowcharts, wireframes, and specs — generated from your code. Share docs that developers actually understand.

Get started free→Open Editor
Claude Code
$claude
AI
What would you like me to help you with?
You
Flowchart
Wireframe
Select
+ Node
+ Arrow
MCP
StartUser LoginAuth?DashboardSettingsAPI CallDatabaseRenderEnd

Everything you need to document

From quick sketches to detailed specs. Built for speed.

Flowchart

Visualize your app logic — auth flows, data pipelines, user journeys. Auto-layout with smart branching.

Wireframe

Sketch screen layouts with buttons, inputs, cards, and navbars. Enough fidelity for developers.

Spec Sheet

Functional specs auto-linked to your flows and screens. API endpoints, inputs, behaviors — documented.

How it works

01

Build

Vibe code, prototype, ship — however you build.

02

Import

Paste HTML, describe your flow, or let AI analyze your code.

03

Refine

Drag, resize, connect. Adjust until it looks right.

04

Share

One link — flowchart, wireframe, and spec together.

Connect with Claude

Use Lighten as an MCP server in Claude Code or Claude Desktop. Let AI generate flowcharts and wireframes directly into your projects.

Step 1Add to Claude config
"lighten": {
  "type": "stdio",
  "command": "npx",
  "args": [
    "tsx",
    "/path/to/lighten/mcp-server/src/index.ts"
  ]
}
Step 2Authenticate
1
lighten_loginOpens browser for auth
2
AuthorizeClick Authorize on the page
3
Done!Claude can now manage your projects

Available MCP Tools

lighten_open

Generate & open in editor

lighten_push_html

Update content in real-time

lighten_projects

List all your projects

lighten_create_project

Create a new project

lighten_load_project

Load project data

lighten_get_html

Read document content

Example prompt for Claude:

“Analyze my project and create a flowchart showing the auth flow, then open it in Lighten.”

Ready to document your project?

Free to use. No credit card required.

Start now→