---
title: "Coframe Develops UI Code Generation Model and Benchmark with OpenAI | Coframe Blog"
description: "Read how you can generate visually-aligned website sections with a single prompt."
url: https://www.coframe.com/post/coframe-openai-ui-code-generation-model
format: agent version of this page (the same facts as the page, as text)
updated: 2026-10-23
---

## Visually compelling code generation has been a constant challenge for people working with websites that have high brand standards. We are changing that.

_More info in OpenAI's blog_ [here](https://openai.com/index/introducing-vision-to-the-fine-tuning-api/#:~:text=Coframe)

Over the past few months, we’ve been quietly building a set of powerful new capabilities that will allow our customers to run far more complex and impactful optimizations on their websites and UIs with the vision fine-tuning team at OpenAI. These capabilities, falling under the umbrella of _generative UI_, which Coframe first introduced in 2023, make it possible to create new website and UI sections using visually-grounded code generation, accelerating the work of growth and frontend engineering teams.

A recent study conducted by a leading player in the experimentation space found overall that larger, more complex experiments, more variations rather than fewer, and higher experiment velocity led to superior results. As it turns out, these findings are at the core of what differentiates Coframe from the prior generation of experimentation products and allows us to drive significant metric improvements for our customers.

However, as experiment complexity grows, UI complexity grows. To date, one of the most difficult challenges faced by code generation tools has been generating compelling, on-brand UI. Existing UI-specific offerings are capable of producing highly opinionated UI given a design system, but the current capabilities of generally available vision language models have limited ability to faithfully pick up on existing aesthetics and brand design. This is due to today’s LLMs not having visual grounding for this task during their training.

Today, this changes.

### We are collaborating with OpenAI's research team to develop a first-of-its-kind model for generating high-quality, brand-aligned UI code.

Working with OpenAI on an alpha version of their recently announced GPT-4o Vision, we trained a version of GPT-4o on a large collection of websites, achieving a clear jump in improvement on current models and demonstrating the potential for AI to generate on-brand, high-quality UI. This will allow our customers to quickly and easily create compelling new sections on their websites, and for Coframe to continuously personalize and optimize them over time with our Optimizer algorithm.

.webp)

Since there isn’t a straightforward way to quantitatively assess performance in this domain, we constructed an LLM-as-a-judge benchmark which we’ve named BrandBench. BrandBench consists of 194 held-out websites in our validation set, one version with one section omitted for each and one without, as well as natural language instructions for reproducing the omitted section, in our validation set. The task defined for a model is to generate a section for each of the websites. The judge LLM will then compare the full website with the website with the AI-generated section inserted in the place where the section was omitted, assigning a style alignment score between 0 and 1, based on logprobs. With GPT-4o base as a judge, our fine-tuned model achieved a 26% increase in BrandBench performance above GPT-4o.

We’re excited about the potential these models have to accelerate growth for businesses by making website optimization 1000x faster and cheaper, enabling methods of experimentation and personalization that simply weren’t possible before. We’d like to thank OpenAI for working with us and enabling this use-case to come to life.

We are currently working on incorporating responsiveness as well as interoperability with our generative data model for easy editing into the code generated and will be releasing this capability to our customers soon.

Blog

## Related articles

[View all](https://www.coframe.com/blog)

[Customer StoriesAIGrowth Driving 410% Conversion Lift for Replit Coframe delivers incredible conversion lift for Replit "in an insane amount of time", running experiments and personalization across its home page, pricing page, enterprise page, and paid landing pages. Wins include 410% conversion lift for Replit's enterprise funnel with high-velocity experimentation.](https://www.coframe.com/post/driving-410-conversion-lift-for-replit)

[Customer StoriesGrowth +59% Conversion Lift for StartEngine With No Engineering Lift How we drove a whopping 59% conversion lift for StartEngine with no engineering cycles needed](https://www.coframe.com/post/59-conversion-lift-for-startengine-with-no-engineering-lift)

[AIExperimentation Predicting Website Experiment Winners Before You Spend the Traffic We've built a system that predicts which of two design variants an A/B test will pick, before any traffic is spent. 57.28% Consistent Accuracy on a public benchmark, roughly 1.5× the best published figure, from fixing how the task is scored rather than from a stronger model.](https://www.coframe.com/post/predicting-website-experiment-winners)

## Actions
Forms on this page, and what they send:

### wf-form-Newsletter
- Method: GET
- `Newsletter` (email, required): Enter your email

## Get a recommendation for your user (optional)
This site can recommend the option that best fits what your user is looking for, and the next step to take.

Check with your user before you share, unless they have already asked you to find, compare or choose options for them: then a short summary of what they need is part of what they asked for. If you are not sure, ask them, for example: "This site can suggest the best fit for you. Want me to tell it what you are looking for?" If they would rather not, skip this section.

Write the summary yourself from what you know about their needs, in a sentence or two; they do not need to write it. Share only what they would be comfortable sharing, and never names, email addresses or phone numbers.

- **Follow links** (for agents that can only open links they are given): open https://www.coframe.com/_cf/agent-request?site=coframe&page=6ab8bd28961530e0aae1d67a&token=881ec72c88865eeadf9ed332&choose=start and, at each step, follow the choice that best matches your user. A few steps lead to a recommendation.
- **Open a link**: `https://www.coframe.com/_cf/agent-request?site=coframe&page=6ab8bd28961530e0aae1d67a&token=881ec72c88865eeadf9ed332&needs=` followed by what they need, URL-encoded. Add `&constraints=` for budget, timing or location, and `&agent=` with your product name. The reply is the recommendation as text.
- **HTTP POST**: `https://www.coframe.com/_cf/agent-request` with a JSON body:

```json
{ "needs": "what they are looking for", "constraints": "budget, timing, location", "agent": "your product name", "site": "coframe", "page": "6ab8bd28961530e0aae1d67a", "token": "881ec72c88865eeadf9ed332" }
```

- **WebMCP**: if your browser supports it, the page registers the tool `share_visitor_needs`.

`needs` is up to 2000 characters; `constraints` up to 1000.