Quickstart - CLI

Locofy CLI is designed for developers who prefer working directly from the terminal and want to bring design-to-code workflows into their existing development process.

This workflow is ideal if you spend most of your time in tools like Cursor, Claude Code, Windsurf, VS Code, or the terminal. Instead of installing a Figma plugin or working from the browser, you can generate, refine, and export frontend code directly from the command line.

Step 1: Create your Locofy account

Go to Locofy.ai and click Get Started. You can sign up with Google, GitHub, or email, then complete onboarding (name, role, and how you plan to use Locofy).

Your Locofy account links the CLI to your projects and generated code.

Step 2: Install Locofy CLI

Install the Locofy CLI globally:

npm install -g @locofy/cli

Step 1: Install Locofy CLI

Install the Locofy CLI globally:

npm install -g @locofy/cli

Note: The minimum version of Node required is 18.

Once installation completes, you're ready to generate code from your designs.

Step 3: Log in to your Locofy account

Authenticate the CLI with your Locofy account:

locofy login

You'll be redirected to the Locofy website. Sign in, then return to the terminal—the CLI will show a connected state.

To sign out later, run locofy logout.

Step 4: (Optional) Connect your custom components

If your project uses a custom component library, connect it before generating screens so Locofy can map Figma components to your existing code.

In your terminal:

1. Navigate to your project root.
2. Run locofy init to create a locofy.config.json file.
3. Run locofy push to upload your component library to Locofy.

In Figma (your designer): Custom component mapping also requires the Locofy plugin in Figma Design Mode. Ask your designer to open the design file, run the Locofy plugin, and click I have completed all the steps after your push so components appear for mapping. You do not need Figma access yourself—see Using Custom Code Components for the full developer ↔ designer handoff.

Step 5: Generate your first screen

Run the convert command:

locofy convert

When prompted, paste your Figma URL.

If Locofy doesn't have access to the file yet, your browser opens so you can log in to Locofy and allow Figma access. Once connected, the CLI continues automatically.

Locofy analyzes the design and generates frontend code using its Large Design Models (LDMs). During this process, Locofy understands:

• Components
• Design systems
• Variables
• Layout structures
• Responsive patterns
• Visual hierarchy

This helps generate frontend code that is much closer to how developers actually build applications.

Note: Generation time depends on project size and complexity. Large files may take a few minutes.

Step 6: Interactive Mode

Once code generation completes, the CLI enters Interactive Mode automatically. Instead of manually editing files, describe the changes you want using natural language prompts.

For example:

Add dark mode support to this screen

Improve accessibility for all form inputs

Convert the header layout into a reusable component

Locofy applies the changes and updates the generated code accordingly. You can also drag-and-drop screenshots, existing code files, or markdown specifications into the terminal for additional context.

Read more in Interactive Mode.

Step 7: Using skills

Skills extend what the CLI can do during Interactive Mode—built-in skills cover common improvements, and custom skills let you encode your team's standards and patterns.

• See Using skills for how to use skills in Interactive Mode.
• Run locofy skills install to add editable skills to your project.
• Create custom skills for team-specific conventions like styling migrations or component standards.

Step 8: Continue development

Once you're happy with the generated output, continue developing using your preferred workflow. The generated code can be:

• Committed to GitHub
• Opened in your IDE
• Extended using AI coding assistants
• Integrated into an existing codebase

Because Locofy operates directly from the command line, it fits naturally into modern AI-assisted development workflows.

When to use Locofy CLI

Locofy CLI is recommended when:

• You prefer working from the terminal
• You want to generate code without using the Figma plugin
• You want a developer-first workflow
• You want to refine generated code using prompts
• You want to integrate design-to-code directly into your existing development process

What's next

Prefer a browser-based workflow? See Import from URL. Prefer working inside Figma? See the Plugin quickstart.