翻訳待ち：Comparing Qwen3.8 Max and Fable 5 on UI

AI サービスが一時的に利用できないため、復旧後に翻訳を補完します。

Job Rietbergen Aug 19, 2026 Alibaba released Qwen3.8-Max on August 2, and it debuted at #4 on Arena.ai’s Frontend Code leaderboard, one spot above Claude Fable 5. It is the second model from a Chinese lab to pass Fable 5 on that board in three weeks, after Kimi K3 took the #1 spot in July. We gave both models the same ten UI design prompts and compared the outputs, the costs, and how each agent worked. For a long time, the answer to “which model should I use for design work” has been Anthropic. That covers more than websites. Developers reach for Claude models for dashboards, landing pages, slide decks, pitch pages, and anything else a human will look at. Claude models are closed, and Fable 5 is the most expensive model in the current top five. Meanwhile, OpenAI models have been playing catch-up on frontend, improving incrementally from GPT-5.4 through 5.5 to 5.6 Sol without closing the gap. Kimi K3 was the first model from outside the incumbents to match Fable 5 in our own testing, and it did our ten-task run at 29% of Fable’s cost. Qwen3.8-Max costs less per token than Kimi K3 does. TL;DR: Qwen3.8-Max came out within taste distance of Claude Fable 5 across all ten tasks (our count: 4 for Fable, 3 for Qwen, 3 ties), and unlike Kimi K3, it has a visual taste of its own. The full ten-task run cost $3.05 on Qwen3.8-Max and $8.44 on Fable 5. Pricing Fable 5 costs 5x more per input token and 8.3x more per output token than Qwen3.8-Max. We included Kimi K3 for reference because these three models are the ones trading places at the top of the frontend leaderboard right now. Alibaba has said the Qwen3.8-Max weights will be released, but as of this writing they have not shipped and the license is unknown. The Setup We ran both models in Kilo Code CLI in Code mode. Each task started in its own empty directory with no shared state. Both models received identical prompts, and we did not iterate. Every screenshot in this post is a one-shot output. We ran Qwen3.8-Max at xhigh reasoning, the highest of its five available levels. We ran Fable 5 at high thinking, the same setting we used in the Kimi K3 comparison. Reasoning labels are not comparable across vendors, so we picked Qwen’s highest level, kept Fable consistent with our previous posts, and report the costs as measured. The prompts were “vibe + minimum content” style. We named the product, listed the required content, and left every visual decision to the model. Each model produced a single self-contained index.html using Tailwind via CDN. Nine of the ten tasks worked that way. The settings page was the exception, where we handed both models a compact dark brand spec (three hex colors, a font pairing, no gradients, no pure black or white, corner radius capped at 8px) to see how each one executes direction instead of inventing it. One thing to keep in mind while reading: the calls in this post are our preferences, not verdicts. On most tasks the two outputs are close enough that picking one is a matter of taste. You may look at the same pairs and prefer the other one. That is why every task shows both outputs in full. In every screenshot, Claude Fable 5 is on the left and Qwen3.8-Max is on the right. Task 1: Physical Product Landing Page We asked for a landing page for Murmur, a pair of premium over-ear headphones sold direct at $349. Murmur landing pages, Claude Fable 5 left, Qwen3.8-Max right Both models drew the headphones themselves as an SVG illustration and surrounded it with floating spec callouts for the driver, the battery, and USB-C. Qwen’s illustration carries more detail. It marks the left and right ear cups, gives the callout tags a glass blur effect, and draws audio waves radiating from the headphones. It also designed an audiogram-style logo for the brand, where Fable placed an M inside a circle. Qwen put more care into the typography too. Its headline wraps deliberately, and the second line is set in the gold accent color, which makes the hero easier to scan. Within the limits of a one-shot page, Qwen’s reads as the more luxurious of the two, though neither would be mistaken for a real audio brand’s site. We lean Qwen here, mostly on the illustration detail and the typography. Task 2: E-commerce Product Detail Page Talus is an outdoor gear store, and the page sells the Crag 32L, a technical backpack. Talus product pages, Claude Fable 5 left, Qwen3.8-Max right The layouts are nearly the same. Both put the gallery with a thumbnail selector on the left and the purchase details on the right. Qwen added a quantity stepper next to its add-to-cart button, which Fable did not. Fable’s color and size selectors are more finished, and its description carries more useful buying information, including free shipping details, stock availability, and product details like the rope strap. Fable set the page on a cream background and centered its nav links, while Qwen kept a white background with the logo left and the account controls right. Neither gallery shows a backpack, because both models pulled generic placeholder photos, which the prompt’s image service made unavoidable. We lean Fable here, on the selectors and the description work, but this one is close. Task 3: Email Client Inbox Postline is an email client, and the prompt asked for the full three-pane inbox: folders, message list, and reading pane. Postline inboxes, Claude Fable 5 left, Qwen3.8-Max right The layouts match again, and the differences are in the details. Qwen’s inbox is more minimal and better spaced, with clearer hierarchy in the message rows. Its thread toolbar is icon-only with even spacing, where Fable labels each action with text. Fable’s compose button is missing horizontal padding. Fable does win the reading pane itself. It collapses the earlier messages in the thread, expands the current one, and keeps the attachment and the reply composer visible in the same viewport, while Qwen’s taller message cards push the reply composer below the fold. We lean Qwen here on the overall layout and spacing. Task 4: CRM Data Table Cairn is a CRM, and the prompt required a 12-row contacts table with filters, sorting, selected rows, and a bulk-action bar. Cairn CRM tables, Claude Fable 5 left, Qwen3.8-Max right Both models picked a green accent, though different greens, and both floated the bulk-action bar over the table, which is the nicest shared idea in the whole set. Qwen built a wide sidebar with a label next to every icon. Fable went icon-only, which leaves more horizontal room for the table. Each output has one data inconsistency. Qwen shows a descending sort indicator on the deal column, but its rows are not in that order. Fable shows an active filter that excludes deal stages that still appear in the table. We call this one a tie. Both are good screens, and the difference is taste. Task 5: Personal Finance Dashboard Alder is a personal finance app, and the prompt asked for balances, a spending chart, a category breakdown, transactions, bills, and a savings goal. Alder dashboards, Claude Fable 5 left, Qwen3.8-Max right Both models built a card-based bento grid. Qwen put the balance, monthly spending, and monthly income in one dark green card at the top, so the most important numbers sit in one place with the strongest treatment on the page. The category breakdowns split the two models. Qwen gave each category its own bar, so you can compare sizes at a glance. Fable built a single stacked bar where each chunk is colored, so reading it means matching colors against the legend. Qwen’s charts are the stronger set overall. We lean Qwen here. Task 6: Podcast Player Earshot is a podcast app, and the prompt asked for the now-playing view with a queue and playback controls. Earshot players, Claude Fable 5 left, Qwen3.8-Max right Both models placed the player in the center, the up-next queue on the right, and a sidebar with pinned shows on the left. The split is in the character of the controls. Fable’s player is minimal, with a serif episode title and a warm dark palette. Qwen went playful, with a waveform-style progress bar, a colored pause button, and large orange glows behind the controls. The waveform bar looks good, but it reads as decoration rather than a functional scrubber. Fable’s queue truncates several episode titles. We lean Fable here for the more restrained player, with Qwen close behind. Task 7: Smart Home Dashboard Haven is a smart home app, and the prompt required scenes, room-grouped devices, dimmer sliders, a thermostat, and an offline device. Haven dashboards, Claude Fable 5 left, Qwen3.8-Max right Both built a similar grid of device cards with toggles and sliders, and both surfaced the inside and outside temperatures in the header. Fable’s header treatment is easier to read at a glance, where Qwen wrapped its temperatures in pills. Qwen tried a floating tab bar for navigation, and it overlaps one of the panels. Qwen’s icons also never rendered. It linked the Phosphor icon library at a URL path that does not serve the icon font, so every icon on the page shipped as a blank space. Fable tailored its controls per device type, with color temperature on the lights, a recording state on the camera, and an offline speaker that matches the page-level warning. We lean Fable here, by more than usual. Task 8: Cinema Seat Selection Marquee is a cinema ticketing app. The prompt required a seat map with five distinct seat states, a legend, and a booking summary. Marquee seat selection, Claude Fable 5 left, Qwen3.8-Max right Both outputs look close to a real cinema checkout, with the screen at the top and the seat grid below it. The seat maps are roughly equal, and both handle available, taken, selected, accessible, and premium states. The booking summary is where they split. Fable put it in a floating card, which is compact and easy to scan. Qwen built a full-height sidebar, and the text on its continue button wraps onto a second line. The legends differ only in placement. Fable pinned its legend to the bottom of the page, and Qwen placed it directly under the seat map. We lean Fable here. Task 9: Onboarding Wizard Gantry is a project management tool, and the prompt asked for step 2 of its four-step onboarding, the workspace setup form. Gantry onboarding, Claude Fable 5 left, Qwen3.8-Max right The two pages mirror each other. Qwen put the form on the left and the visual panel on the right, and Fable did the opposite. The forms are nearly identical, with the same progress indicator (step 1 checked, step 2 active), the same fields, and the same continue button. Each model invented a product graphic for the other panel. Fable drew a roadmap timeline on an SVG grid background. Qwen drew a skeleton kanban board. Both added a testimonial. This pair shows the pattern of the whole run in one screenshot. The two models had the same idea and executed it with different taste. We call this one a tie. Task 10: Settings Page This was the constrained task. Both models got the same brand spec for Nocturne, a sleep tracking app: near-black background (#0B0D10), warm off-white text (#E8E6E0), candlelight amber accent (#D4A24E), Source Serif 4 for headings, IBM Plex Sans for body, no gradients, no pure black or white, and corner radius capped at 8px. Nocturne settings pages, Claude Fable 5 left, Qwen3.8-Max right We checked the HTML for every measurable rule. Both models used all three specified colors, loaded both fonts from Google Fonts, avoided gradients entirely, and used no pure black or white. The radius cap is where they split. Fable kept every radius at or below 8px, and you can see the constraint in its toggle switches, which are squarish instead of the usual pill shape because a pill would exceed the cap. Qwen used fully rounded toggles and a circular avatar, both of which break the 8px rule. Beyond the spec, the pages share the same skeleton, with the section nav on the left [truncated for AI cost control]