Editing Code

After running locofy convert, Locofy CLI enters Interactive Mode—an AI-powered editing environment where you improve and extend generated code using natural language prompts instead of manual file edits.

Interactive Mode builds on Locofy's Large Design Models, which first turn your designs into structured frontend code. On top of that foundation, you can quickly add theming, accessibility, validation, responsiveness, and other enhancements from the terminal.

How Interactive Mode starts

Interactive Mode begins automatically when:

• locofy convert finishes generating code
• locofy pull completes merging code into your local project

You'll see a prompt interface in the terminal where you can type instructions and review changes as they're applied.

What you can do

Instead of manually editing files, describe the changes you want. For example:

• Add dark mode support
• Improve accessibility
• Create reusable components
• Improve responsiveness
• Refactor layouts
• Update styling and theming
• Modify specific sections of the UI
• Align the code with your project's requirements

Example prompts

Refactor CreateNewPage.tsx to use Tailwind

Add accessibility improvements to CreateNewPage.tsx

Convert the layout component of Homepage.tsx into a reusable component

Make the navigation stack vertically on tablet and use a hamburger menu on mobile

Provide additional context

You can improve results by giving the CLI more context:

• Screenshots — drag and drop into the terminal to show expected UI
• Existing code files — reference patterns from your codebase
• Markdown specifications — share requirements or acceptance criteria
• Design requirements — describe constraints the generated code should follow

Note: Drag-and-drop screenshots or code files into the terminal to give the CLI better context, making your prompts more effective.

Improve code quality with Interactive Mode

The quality of code Locofy generates depends on how your Figma design is structured—and how you refine the output afterward. Well-structured designs produce cleaner, more predictable code. If the initial output needs work, use Interactive Mode to improve responsiveness, layout, and structure from the terminal.

See Optimising your designs for design-level best practices. You can also convert first and improve the result with prompts if you have not prepared your design in Figma.

Review and plan your fixes

1. After locofy convert completes, review the generated files in your IDE.
2. Open the screen in a browser or your dev server and resize the viewport to check tablet and mobile behaviour.
3. Note sections that do not adapt well—overflowing text, fixed widths, overlapping elements, or navigation that does not collapse.
4. Start with full-page responsiveness unless you are targeting a specific file or component.

Target specific files or sections

You do not need to fix an entire screen in one pass. Reference the file or component you want to improve in your prompt. Interactive Mode applies updates in context of your project, which gives you more predictable results.

This works well when you need to:

• Fix responsiveness in one page file, such as Homepage.tsx
• Improve accessibility on a single form component
• Refine layout, spacing, or styling for one section
• Clean up structure without affecting the rest of the project

For example:

Apply the responsiveness skill to components/Header.tsx only

Improve accessibility in CreateNewPage.tsx — add labels, error states, and keyboard focus styles

Responsiveness improvements

When prompting for responsiveness, be specific about what should change at each breakpoint:

• Layout — stack columns vertically on mobile, reflow grids, and prevent horizontal overflow
• Spacing — adjust padding and gaps so sections breathe on tablet and mobile
• Typography — scale font sizes and line heights for smaller screens
• Navigation — collapse menus into a hamburger or drawer on mobile
• Images and media — scale, crop, or switch aspect ratios so assets do not break the layout
• Visibility — hide or simplify non-essential elements on smaller breakpoints
• Touch targets — ensure buttons and links are large enough to tap on mobile

For example:

Make Homepage.tsx fully responsive — stack the hero text and image vertically on mobile, reduce padding, and scale down the heading

For the header navigation in Header.tsx, stack all elements vertically on smaller desktop and tablet with no overlapping, and on mobile screens convert it into a hamburger menu

Make the card grid in Products.tsx responsive — 3 columns on desktop, 2 on tablet, and 1 on mobile with consistent gaps

You can also create a custom skill for repeatable layout fixes, then follow up with targeted prompts.

Overall frontend code quality

You can also prompt for broader structural improvements before committing:

• Component structure — extract repeated markup, remove redundant wrappers, and split large components
• Layout fixes — replace fixed dimensions with flexible layouts, fix overlaps, and clean up spacing
• Accessibility — add labels, ARIA attributes, keyboard focus styles, and error states
• Code conventions — align naming, file structure, and patterns with your existing codebase

For example:

Clean up Homepage.tsx — improve naming, remove duplicate markup, and align with our project conventions

Clean up CreateNewPage.tsx — extract repeated markup, use semantic HTML, and follow our project's naming conventions

Refactor the layout in Dashboard.tsx to use CSS Grid with proper responsive breakpoints instead of fixed widths

See Using skills to install and invoke skills, or Creating custom skills to encode your team's conventions.

Prompting best practices

• Start with high-level improvements — fix overall page responsiveness and layout before smaller details
• Be specific — describe the exact behaviour you want at each breakpoint instead of vague requests like "fix this"
• Narrow the scope — target one file or section at a time for more predictable results
• Add context when helpful — drag screenshots, code files, or markdown specs into the terminal
• Refine your prompt — if the result is not right, adjust the instructions or scope rather than repeating the same request

Review the updated files in your IDE after each change, verify the layout at different viewport sizes, and keep iterating until the output meets your standards.

Interactive Mode vs skills

Interactive Mode is the session where you apply changes. Skills are reusable instruction sets that guide how those changes are made—see Using skills for built-in and custom skills you can invoke during a session.

Continuing after a session

When you're satisfied with your changes:

1. Review the updated files in your IDE.
2. Commit changes to version control.
3. Run locofy convert again for new designs, or locofy pull after generating updates in the plugin.

For pulling code into an existing codebase, see Pull code into your IDE.

What's next

• Using skills — built-in and custom skills for Interactive Mode
• Improve code quality — refine responsiveness and structure with prompts
• Quickstart — generate your first screen from the terminal