Test the page beyond its screenshot
A landing page can look finished while its form rejects a valid email or its main button leads nowhere. When comparing coding models, you need to use the page as a visitor would and check it against the original brief. Otherwise, you risk choosing the output that photographs well and discovering the repair work later.
Use Claude Fable 5.2 and GPT-6.1 Sol for the comparison, with the documented identifiers claude-fable-5-2 and gpt-6.1-sol. Give each the fictional bicycle-shop brief below and retain every attempt. The exercise produces evidence from pages you can inspect; it makes no claim about either model’s performance before you run it. Claude Fable 5.2 documentation · GPT-6.1 Sol documentation
Keep the setup consistent
In Kilo, select each candidate explicitly and use the same project, instructions, tool permissions, and application version. Confirm that your connected provider and account expose the intended model before beginning. Kilo Desktop quickstart
Record the model identifier and provider with the reasoning setting and run date. A setting called “high” does not establish equal computation across vendors, so use supported settings and document your choices. For a direct OpenAI connection, GPT-6.1 Sol requires the Responses API for tool calling. GPT-6.1 Sol documentation
Keep customer data out of this fictional exercise. Anthropic specifies 30-day retention for Fable 5.2 unless it expressly authorizes otherwise; check the terms that apply to your provider before reusing the workflow with confidential material. Claude Fable 5.2 documentation
Give both models this complete brief
Build a responsive landing page for Second Shift, a fictional neighborhood bicycle repair shop. Deliver the entire page in index.html using plain HTML, CSS, and JavaScript. The page must run without a build step or network requests; use no external libraries, fonts, or images.
State that tune-ups cost $85 and flat repairs start at $20. The shop opens Tuesday through Saturday from 10 a.m. to 6 p.m. Show the services and opening hours beside a repair-request form, using an off-white background with dark green accents and readable system type. Include no invented reviews, awards, address, or other business claims.
Make the primary button take visitors to the repair-request form, which must include visible labels for name, email, and repair description. Require every field, rejecting empty or whitespace-only values and invalid email addresses. When valid input passes, show an inline message stating that this is a demo and no request was sent; do not send or store the information.
Make keyboard focus visible and keep the tab order logical. At a viewport width of 390 pixels, the page must work without horizontal scrolling. Use the available tools to inspect and test the page, then report which checks you performed and any limitations that remain.
Both models can choose the layout, but the business facts and required behavior stay fixed. Keeping the output in one file lets you archive each attempt without package installation differences affecting the comparison.
Score eight observable requirements
Award one point for each requirement below that the page fully satisfies, and explain each failure. A score of eight confirms these checks only; launching a real site would require testing beyond this brief.
The page shows both service prices correctly and adds no unsupported business claims.
The listed opening days and hours match the brief.
The primary button takes visitors to the repair-request form.
The form rejects empty and whitespace-only values in every required field.
The form rejects a clearly invalid email and accepts an ordinary valid-format address. Check the visible response as well as the validation code.
Valid input produces the demo message without sending or storing data. Inspect network activity and the source to confirm the submission behavior.
Each control has a usable label, keyboard focus remains visible, and the tab order follows the page’s reading order.
At 390 pixels wide, visitors can use the page without horizontal overflow.
Use the same browser and test cases for every output. Record problems outside the score, such as console errors or clipped labels, with the files and screenshots so the number does not conceal them.
Judge appearance without the model labels
Capture desktop and mobile views at the same dimensions, zoom, and scroll positions for both models. Include a form-validation state to show what happens during use.
Ask a reviewer who cannot see the model names to assess the layout and explain their preference. Comments about legibility or the prominence of the repair button give you specific evidence; a comment such as “this feels smarter” does not identify anything on the page.
Keep the visual judgment separate from the behavior score. A preferred design may still show the wrong prices, while a functionally correct page may need layout changes before you would use it.
Repeat the task and count the repair work
Start every attempt in a clean folder and fresh session, with the same time limit and tools. Allow the model to inspect and revise its work within that limit, then save its first final output before supplying human corrections.
Run each model five times, alternating their order and retaining all ten outputs. Comparing the complete set lets you see whether a design you like appears repeatedly or only once.
Record elapsed time, billed inference charges, checklist score, and active review minutes for each attempt. If you add a correction round, give both models the same allowance and report the results separately. Include every attempt’s charges when calculating cost per accepted page.
Choose a model for the work you will keep
Treat every accepted page as a prototype. Before using one for a real shop, connect the form to a submission destination and establish how to handle customer data, then test the resulting workflow. Until then, keep the demo message visible.
Base your verdict on the recorded results: which pages passed the brief, what they cost, and how much repair they required. Show the blind design preference separately. If those findings favor different models, choose according to the work you are willing to do after generation.
Save the prompt and settings with the output files, screenshots, and checks. Then repeat the comparison on a brief you actually need to deliver, using the same acceptance standard. Choose the model whose pages you would keep after review and whose remaining edits you can afford.
Sources
Claude Fable 5.2 model overview, identifiers, and data handling
GPT-6.1 Sol model documentation and tool-calling requirements