Skip to content

Blog

Why we built click-to-edit

Some changes are easier to point at than to describe. Click-to-edit lets you select any element in your app's preview and change it directly, or ask for a new take.

Kuika AI team3 min read

Describing a change in words works well for behavior: "add a filter", "send an email when the status changes". It works less well for the things you can see. "Make that card a bit less heavy" leaves room for guessing. Which card? How much less? So we built click-to-edit: you point at the thing on the screen and change it there.

The problem with describing pixels

Picture a clinic manager looking at the appointment app Kuika AI just built. The header is fine, but the "Book now" button feels too loud and the cards on the schedule are cramped. In a chat, that becomes a paragraph:

"On the schedule page, the button at the top right that says Book now, make it less bright, and give the appointment cards more space inside, but not the ones on the dashboard."

That is a lot of words for two small changes, and every extra word is a chance to be misunderstood. Clicking is faster and clearer.

How it works

Turn on Edit design in the preview. From then on, a click selects an element instead of using the app. A small toolbar appears next to whatever you selected, with the controls that make sense for it:

  • Background and text color, using your app's own theme colors
  • Font and font size
  • Alignment
  • Corner radius and opacity
  • Spacing inside and around the element

Change a value and the preview updates right away. The change is written into your app, not painted on top of it, so it stays after a reload and is part of the code you download or publish.

Text works the same way. Select a heading or a label and type the new wording on the screen.

When the toolbar is not enough

Sometimes you know what you do not like, but not what you want instead. For that there are two options on the same toolbar.

Edit Element opens a small prompt for just that element. "Show the doctor's photo on the left of this card" is a clear request when Kuika AI already knows which card you mean.

Regenerate asks Kuika AI for a new version of the element. You can pick a direction, such as "Explore other styles", "Try another layout", "Switch the colours", "Start fresh" or "Surprise me", or write your own.

Small details that matter

  • Select several at once. Change every card on a page together instead of one by one.
  • Undo and redo sit right in the preview tools, so trying something costs nothing.
  • Stay on theme. Colors come from your app's design system first. A custom color is possible, and Kuika AI tells you when it steps outside the theme.
  • Version history keeps everything. If you want to go back further than undo, restore an earlier version.

Chat and click work together

We do not see click-to-edit as a replacement for chat. They are two tools for two kinds of change. A typical session goes back and forth: ask in the chat for a new page, click to tidy the spacing, ask in the chat for a new rule, click to fix a label.

The goal is simple: the shortest path from "that is not quite right" to "that is right".

PromptTry this prompt
Build an appointment app for a small clinic. Patients pick a doctor and a free time slot. Reception sees today's schedule and can mark patients as arrived. Doctors see their own appointments for the week.

Build it, turn on Edit design and try changing one thing by clicking. That is the fastest way to see why we built it.

What will you build today?

Describe it in a sentence. Kuika AI does the rest.

Press Enter to build, Shift + Enter for a new line. You will review it in Kuika AI before anything starts.