Velork
Open app

Go from install to your first useful change in Velork. Sign in, paste a design, ask Agent to generate UI, and review the result.

Quickstart

This guide gets you from install to your first useful change in Velork. You will sign in, paste a design, ask Agent to generate UI, and review the result in canvas and code.

Install Velork and sign in

Download Velork from the download page. Open the app and complete the first-run steps:

  1. Pick a keybinding preset — VS Code, Vim, Emacs, or Sublime Text
  2. Choose Velork Dark or Velork Light
  3. Sign in with Continue in browser, or Skip for now
  4. Connect an AI provider (optional) — credentials stay on this device
  5. Paste a Figma frame (optional), or Skip for now
  6. Open a workspace — pick a recent folder, Browse for folder…, or Skip for now

Your repo on disk is the project.

macOS

  • macOS 12 (Monterey) and later
  • Native installer (.dmg)
  • Apple Silicon and Intel support

Windows

  • Windows 10 and later
  • Native installer (.exe)

Linux

  • AppImage or .deb from the download page
  • AppImage: chmod +x Velork-*.AppImage && ./Velork-*.AppImage

Paste a design

Copy a frame in Figma. In Velork, open Canvas and paste with Cmd + V (macOS) or Ctrl + V (Windows/Linux).

Layers appear in the Design sidebar. Name frames clearly in Figma — Velork uses layer names when mapping to code.

Ask Agent to generate UI

Open chat from the right auxiliary bar. Press Cmd + L to focus the input.

Start with context, then ask for a concrete output:

Explain the design I just pasted — layers, spacing, and typography.

Then implement it as a React component with Tailwind CSS in this repo.

Agent reads the canvas selection and searches your project before proposing edits.

Review the diff and verify

Switch views to confirm the result:

  • CanvasCmd + Alt + C
  • EditorCmd + Alt + E
  • Preview — live preview pane

Review every diff before accepting. Ask Agent to run checks your repo already uses — typecheck, lint, or tests.

Use Plan mode for bigger changes

For work that spans multiple files, switch to Plan mode before coding. Agent explores the repo, asks clarifying questions, and outlines steps — then waits for you to approve before making broad edits.

Next steps

Workspace

View modes, Settings, and the Get started checklist

Chat

Prompt patterns, blueprints, and tool permissions

Keyboard shortcuts

Reference for chat, canvas, and Capture

Plans and usage

Free tier limits and when to upgrade