One of the hardest parts of design work is not changing colors. It is describing the look you want clearly enough for someone else, or for a system, to understand it.
Most of the time, the thought is simple: "Make the form feel like this page."
That is exactly why screenshot-based design adjustment is useful in FORMLOVA. Instead of naming every color, spacing rule, or font upfront, you can send a reference image and say what you want in one sentence. FORMLOVA then reads the visual direction, explains what it found, applies the changes, and returns a preview.
In this guide, I will walk through that flow using a real example based on the FORMLOVA landing page.
Start by Sending a Screenshot
The input is intentionally short.
Match the form design to this screenshot
That is all.
In this example, the screenshot used as a reference was the FORMLOVA landing page. It has an off-white background, near-black text, a vivid pink accent, and a clean minimal layout. Instead of describing all of that manually, the screenshot carries the design intent.
This is what makes the workflow practical. You do not have to translate visual taste into a long written brief before you begin. You can simply show the page you want to borrow from and let FORMLOVA react to it.
That first step is the real convenience here. The system can start from a visual reference rather than forcing you to express the entire design in words.
FORMLOVA Explains What It Read
What I like most in this example is that the response did not stop at "Done."
FORMLOVA described what it read from the screenshot before applying the design. In this case, the response highlighted the following:
- background color: off-white
#F5F4F0 - text color: near-black
#1A1A1A - accent color: vivid pink
#FF1F6E - font direction: bold gothic-style Japanese UI typography
- overall mood: minimal and clean
That explanation is important.
It means the adjustment is not a black box. You can see how FORMLOVA interpreted the screenshot, and if the interpretation is slightly off, you immediately know what to correct. You can say things like:
Make the pink softer
Use a lighter type feel
Keep the same tone but add more whitespace
The point is not just that the form changes visually. The point is that the interpretation becomes visible enough to continue the conversation productively.
The response also returned a preview link right away, which is the correct next step. Design work is easier when the system explains what it saw and then immediately shows the result.
The Preview Feels Much Closer to the Reference
Once the updated preview opens, the difference is easy to notice.
In this example, the form shifts toward the landing page style in several visible ways. The background becomes off-white, the text becomes darker and cleaner, the primary button turns vivid pink, and the typography is adjusted toward Noto Sans JP. The end result feels much more aligned with the FORMLOVA page than the default draft did.
That does not mean the form becomes an exact clone of the landing page. It should not.
A landing page hero section and a form UI do different jobs. A landing page is built to communicate brand and direction. A form is built to support input and completion. So the right goal is not "pixel-perfect identity." The right goal is "clear visual consistency."
And that is what this preview achieves.
When you look at it, it feels like part of the same product family. The form still behaves like a form, but it no longer feels visually disconnected from the page that led the user there.
That is the level of alignment most teams actually need.
Before and After Is the Best Way to Show the Value
For a guide like this, before-and-after comparison is more useful than long explanation.
The default draft gives you a functional form. The screenshot-based adjustment gives you a form that feels branded. In this example, the biggest differences are easy to point to:
- the background tone
- the button color
- the typographic feel
- the overall minimal presentation
Those are exactly the kinds of changes people usually struggle to describe from scratch. Once a screenshot becomes the reference, the design conversation becomes much easier.
That is why I think this guide works best when the screenshots do most of the talking. If the reader can see the original state and the adjusted preview side by side, the value becomes obvious almost immediately.
Before
After
Think in Terms of Matching the Mood, Not Copying the Screen
This is the main caution I would include in the guide.
FORMLOVA can get surprisingly close from a screenshot, but "close" is the right word. It is better to think of this feature as mood matching, not exact duplication.
Why? Because the reference and the target have different responsibilities. A homepage hero can use different spacing, composition, and emphasis than a form that needs to be readable, fillable, and easy to submit. FORMLOVA translates the visual direction into a form-friendly UI rather than forcing a literal copy.
That is a good thing.
When framed that way, the result in this example is very strong. The off-white background, black text, vivid pink call-to-action, and clean type treatment carry over clearly. The preview feels aligned without becoming awkward as a working form.
And if you want to push it further, the next adjustments can still stay lightweight:
Add more whitespace
Tone the pink down slightly
Make the heading feel more branded
That is the ideal pattern. Use the screenshot to establish direction, then use short chat follow-ups to fine-tune the result.
This Is the Easiest Workflow to Start With
If you want to try this yourself, the flow is simple.
- Create a draft form first
- Send the screenshot you want to reference
- Ask FORMLOVA to match the form design to that screenshot
- Review the extracted design traits
- Open the preview and make one or two short follow-up adjustments if needed
That is enough to get a form much closer to your site, campaign page, or event page without writing a full design brief.
This is especially useful when the form should feel native to an existing page rather than standing apart from it. It helps reduce visual friction and makes the overall flow feel more coherent to the user.
If you are unsure what to type first, this is enough:
Match the form design to this screenshot
Then open the preview, compare it with the reference, and refine the last few details in chat.
