vanilla Qwen3-8B (left) vs + DFlash draft (right)

Win count (interactive judge): vanilla 6/11, DFlash 5/11. A tie scores one point for each side.
od673 · Stunning translucent calendar popup that smoothly blends into the interface.
vanillastatic 87 · interactive 95🏆 winner
✓ code 35/40 · functionality 60/60 — Complete single-file page, no external assets, no console errors. Modal opens/closes smoothly, translucent blur styling, day selection works with clear selected state, hover feedback present. Only flaw: hardcoded April 2024 day layout mismatched with the dynamic month header.
  • ✗ Hardcoded April 2024 grid (daysInMonth=30, firstDay=3) while header is dynamically set to current month ('September 2026'): dates are misaligned (Sep 1 2026 is a Tuesday, grid shows it under Wednesday) (-4)
  • ✗ Minor dead CSS: .modal-overlay transitions transform with no base transform set; .close-btn:hover color #fff is invisible on the light modal (-1)
DFlashstatic 87 · interactive 68
✓ code 32/40 · functionality 36/60 — Opens/closes via button and backdrop with translucent styling and correct current-month dates, but the calendar grid is structurally broken (tds without trs render as one overflowing row) and the brief-required date selection is entirely missing — no handler, no selected style.
  • ✗ date selection (brief, x2)
  • ✗ Invalid table structure: cells appended directly to with no rows, so the browser collapses all 32 cells into one anonymous row — calendar renders as a single horizontal strip overflowing the 368x128px modal (evidence: gridRows=0, screenshot od673_dflash_1_open.png) (-8)
od5 · Create a user interface for a life insurance website.
vanillastatic 87 · interactive 40
✓ code 40/40 · functionality 0/60 — Clean, well-formed single-file page with no external assets and zero console errors, but entirely static: nav/social links are href="#" placeholders, the CTA button has no handler, and the form submit gives no feedback. Visual shell only, nothing interactive.
  • ✗ nav links
  • ✗ hero 'Get a Quote' CTA button
  • ✗ CTA form submit
  • ✗ footer social links
DFlashstatic 87 · interactive 100🏆 winner
✓ code 40/40 · functionality 60/60 — Complete single-file page, no external assets, no console errors. Every interactive component works: nav anchors scroll to the correct sections, Get a Quote jumps to #contact, and the contact form prevents default and shows a 'Thank you for contacting us!' confirmation alert.
    od6 · Landing page selling dog-related products.
    vanillastatic 87 · interactive 68🏆 winner
    ✓ code 35/40 · functionality 33/60 — Clean, valid single-file page with data-URI images and zero console errors, but a layering bug kills the hero CTA and commerce/subscribe buttons are fake anchor jumps. Nav anchors and hover lift work.
    • ✗ hero Shop Now button
    • ✗ Add to Cart buttons
    • ✗ Subscribe Now button
    • ✗ footer links
    • ✗ .hero::after full-size overlay (z-index:0) paints above the non-positioned hero button and intercepts pointer events, making Shop Now unclickable (-5); hero h1/p set z-index:1 without position so it has no effect
    DFlashstatic 87 · interactive 61
    ✓ code 28/40 · functionality 33/60 — Functional nav (except broken #about anchor), working hero CTA and hover lift, but violates the single-file constraint with external placeholder images, and cart/subscribe buttons are fake anchor jumps.
    • ✗ nav About link
    • ✗ Add to Cart buttons
    • ✗ Subscribe Now button
    • ✗ footer links
    • ✗ 3 external image URLs https://via.placeholder.com/300x200?text=... violate the no-external-assets constraint; requests were issued and failed offline (-9)
    • ✗ nav About anchor href='#about' has no matching element id (section uses id='cta') - dead anchor (-3)
    od8 · Revamped Airbnb homepage for group adventures.
    vanillastatic 66 · interactive 96🏆 winner
    ✓ code 36/40 · functionality 60/60 — Complete, well-formed single-file page with zero external assets and no console errors. All five interactive components work: three nav anchors scroll correctly (scrollY 0->986), hero button scrolls to booking, and booking form submits with 'Booking submitted!' alert. Only flaw: four invisible Font Awesome icons with no stylesheet.
    • ✗ Font Awesome icon classes (fas fa-users/map-marked-alt/hotel/shield-alt) used on 4 elements but no Font Awesome CSS included anywhere: computed ::before content is 'none', icons render at 0 width (dead markup, -4)
    DFlashstatic 87 · interactive 78
    ✓ code 27/40 · functionality 51/60 — Clean markup and no console errors, nav/hero scrolling and both hover lifts all work. But three external picsum.photos images violate the single-file constraint, and the booking form is a div whose submit button has no handler at all — clicking after filling all fields produces zero feedback.
    • ✗ booking submit 'Find Accommodations'
    • ✗ 3 external image URLs https://picsum.photos/seed/{1,2,3}/400/300 in suggestion cards violate the no-external-assets constraint (-10)
    • ✗ 'Find Accommodations' button is dead code: no event handler attached and the container is a div, not a form (-3)
    od9 · Mobile application for vehicle loans and financing on iOS devices.
    vanillastatic 87 · interactive 55
    ✓ code 40/40 · functionality 15/60 — Clean single-file page with no console errors, no external assets, all CSS selectors live. But the primary CTA button has zero click handler and footer links are bare '#' placeholders; only hover feedback works.
    • ✗ hero 'Get Started' button
    • ✗ footer 'Privacy Policy' link
    • ✗ footer 'Terms of Service' link
    DFlashstatic 87 · interactive 64🏆 winner
    ✓ code 40/40 · functionality 24/60 — Clean single-file page, no console errors, no external assets. CTA button correctly fires an 'App download coming soon!' alert and hover changes background; all three footer links are dead '#' placeholders.
    • ✗ footer 'Privacy Policy' link
    • ✗ footer 'Terms of Service' link
    • ✗ footer 'Contact Us' link
    od10 · Homepage for an animation studio, Studio Ghibli inspired.
    vanillastatic 70 · interactive 83🏆 winner
    ✓ code 38/40 · functionality 45/60 — Clean single-file page, no external assets, no JS errors. CTA anchor scrolls correctly, hover effects fire. Only the contact form fails: default submit reloads the page with zero user-facing feedback.
    • ✗ Contact form submit
    • ✗ CTA labeled 'Explore Our Work' links to #contact instead of #work section (label/target mismatch, -2)
    DFlashstatic 63 · interactive 67
    ✓ code 37/40 · functionality 30/60 — Complete valid HTML, no external assets, no JS errors, hover effects work. But the main CTA button is completely inert and the contact form submits into a silent reload with no feedback.
    • ✗ CTA 'Explore Our Work' button click
    • ✗ Contact form submit
    • ✗ Primary CTA is a
    od340 · Photo card interface, hover triggers a gentle 3D flip effect.
    vanillastatic 30 · interactive 27
    ✓ code 27/40 · functionality 0/60 — External placeholder images that fail to load even online, a stray code fence rendered on the page, and a structurally broken flip: the back face is never pre-rotated, so hovering makes the card disappear entirely. Only the transform changes; the effect itself is wrong.
    • ✗ card hover 3D flip (brief, x2)
    • ✗ External asset violation: two (offline-hostile external URLs) (-8, incl. host being dead)
    • ✗ via.placeholder.com fails even with network: console error 'Failed to load resource: net::ERR_CONNECTION_CLOSED', requestfailed ERR_CONNECTION_CLOSED, img naturalWidth=0 -> no photo ever renders (-2)
    • ✗ Stray markdown fence '```' after renders as visible text on the page (-3)
    DFlashstatic 63 · interactive 87🏆 winner
    ✓ code 27/40 · functionality 60/60 — Correct, gentle 180deg flip: hover changes computed transform through mid-transition matrix to full rotateY(180deg), front photo swaps to a properly pre-rotated back photo, unhover restores. No console errors. Docked for external picsum URLs, a rendered stray fence, and flat (perspective-less) rotation.
    • ✗ External asset violation: background images url('https://picsum.photos/300/200') and url('https://picsum.photos/301/201') (-8)
    • ✗ Stray markdown fence '```' after renders as visible text on the page (-3)
    • ✗ perspective: 1000px is set on the rotating .card itself (not a wrapper) and overflow:hidden negates transform-style: preserve-3d, so the flip renders flat with no 3D depth (-2)
    od341 · Newsletter registration pop-up, soothing hues, smartphone optimized.
    vanillastatic 87 · interactive 85🏆 winner
    ✓ code 37/40 · functionality 48/60 — Clean single-file page, zero console errors, soothing teal palette, mobile viewport + media query. Popup shows on load, close button works, invalid email blocked. Submit dismisses the popup but shows no confirmation message, costing half the double-weighted subscribe flow. Decorative pseudo-element circle looks like a close button but is inert.
    • ✗ newsletter subscribe flow — confirmation step (partial)
    • ✗ .modal-content::before renders a circle at top-right styled/hovered like a close button but has no click handler — misleading non-functional affordance; the real .close-btn div has no CSS at all and renders as unstyled inline text (-3)
    DFlashstatic 87 · interactive 76
    ✓ code 40/40 · functionality 36/60 — Well-formed single-file page, no console errors, no external assets, calm blue palette, responsive. Popup renders on load and close button works (display:none). But the subscribe button is functionally dead for valid emails — onsubmit returns false with no confirmation or state change — failing the brief's double-weighted core flow.
    • ✗ newsletter subscribe flow (brief, x2)
    od11 · Create a user interface that resembles Spotify, focusing on music navigation and playlist
    vanillastatic 87 · interactive 48🏆 winner
    ✓ code 38/40 · functionality 10/60 — Clean constraint-compliant page (data-URI images, zero console errors), but a pure visual shell: nav links are '#' placeholders, search/play/create-playlist all lack handlers. Only sidebar hover works. Playlist creation is the brief's core ask and is entirely dead.
    • ✗ sidebar nav links
    • ✗ search input
    • ✗ Play buttons (x3)
    • ✗ create playlist flow (brief, x2)
    • ✗ Dead CSS: '.search-bar input' selector matches nothing (header div is class='main-header'), so the search input renders unstyled browser-default (-2)
    DFlashstatic 87 · interactive 37
    ✓ code 27/40 · functionality 10/60 — Same dead shell as vanilla (nav '#', inert search/play/create) but with working hovers on links and buttons. Additionally violates single-file constraint with three external placeholder images that fail to load, and renders a stray code fence.
    • ✗ sidebar nav links
    • ✗ search input
    • ✗ Play buttons (x3)
    • ✗ create playlist flow (brief, x2)
    • ✗ External asset violation: 3x (-8)
    • ✗ via.placeholder.com fails even with network: console error 'net::ERR_CONNECTION_CLOSED', all 3 imgs naturalWidth=0 -> broken-image icons in every card (-2)
    • ✗ Stray markdown fence '```' after renders as visible text at page bottom (-3)
    od20 · Create a template to display traffic data using interactive charts and graphs.
    vanillastatic 63 · interactive 20
    ✓ code 20/40 · functionality 0/60 — Truncated mid-statement; the whole script block is discarded by the HTML parser, leaving two empty bordered canvases. The tooltip logic that would have satisfied the brief never executes. Headers render; nothing else works or even draws.
    • ✗ line chart hover tooltip (brief, x2)
    • ✗ bar chart hover tooltip (brief, x2)
    • ✗ File truncated mid-expression: source ends at 'const barWidth = chartWidth / (data.length -' with no closing ; the unterminated script block is never executed, so both canvases render blank (0 painted pixels, screenshot vanilla_od20_0_initial.png) (-18)
    • ✗ Latent contrast bug in dead code: canvas filled #333 then axis labels drawn fillStyle '#000' (black on dark gray) (-2)
    DFlashstatic 82 · interactive 37🏆 winner
    ✓ code 37/40 · functionality 0/60 — Both canvas charts actually render (line 5804 painted px, bars 27000 painted px), zero console errors, self-contained. But the brief explicitly demands interactive charts and the page has literally zero event listeners: no tooltips, no click response. Static image of a dashboard.
    • ✗ line chart hover tooltip (brief, x2)
    • ✗ bar chart hover tooltip (brief, x2)
    • ✗ chart click interaction
    • ✗ Stray markdown fence '```' after renders as visible text bottom-left (screenshot dflash_od20_0_initial.png) (-3)
    od28 · Create interactive charts showcasing trading trends and accident statistics in New York.
    vanillastatic 20 · interactive 5
    ✓ code 5/40 · functionality 0/60 — Generation was cut off inside the tag. The browser renders a blank page; there is nothing to interact with and no code to evaluate beyond the truncation itself.</div><ul><li class="bad" title="file is 79 bytes ending mid-tag ('<title>Trading Trends & Accident Statistics</'); bodyTextLen=0, no chart containers, no SVG/canvas in DOM, page renders completely blank">✗ entire page</li><li class="bad">✗ Severely truncated file (79 bytes, 4 lines, ends mid-<title> tag): no body, no charts, no script ever emitted (-35)</li></ul></div> </div><div class="cell"> <div class="head"><b>DFlash</b><span class="sc">static 35 · interactive 17</span><span class="wbadge">🏆 winner</span> <button class="tgl" onclick="toggle(21)" id="t21">Code</button></div> <iframe id="f21" src="radar/dflash_frontend_od28.html" loading="lazy"></iframe> <pre id="p21" style="display:none"></pre> <div class="detail"><div class="fb">✓ code 17/40 · functionality 0/60 — The model's reasoning stream was saved as the deliverable: title, two empty chart boxes, then ~10k chars of visible self-talk including a half-written D3 attempt that throws ReferenceError on load (D3 would have violated the no-external-assets rule anyway). No chart renders, no tooltip exists.</div><ul><li class="bad" title="#trading-chart contains one empty <svg> (appended before the crash); hover at center: #tooltip stays display:none, empty text">✗ trading chart hover tooltip (brief, x2)</li><li class="bad" title="#accident-chart has 0 children (script aborted before createBarChart); hover: tooltip stays display:none">✗ accident chart hover tooltip (brief, x2)</li><li class="bad" title="clicked both containers: bodyChanged=false">✗ chart click interaction</li><li class="bad">✗ Model chain-of-thought leaked into the artifact: ~9.9k chars of reasoning prose ('Then, in the CSS...', 'But how to create the SVG elements...') rendered as visible page text after </html> (screenshot dflash_od28_0_initial.png) (-10)</li><li class="bad">✗ Leaked prose includes a live <script> that calls d3.scaleLinear with no D3 imported: pageerror 'ReferenceError: d3 is not defined', aborting chart creation after one empty <svg> (-6)</li><li class="bad">✗ Skeleton stubs left as dead code: <style>/* CSS here */</style> and <script>// JavaScript here</script> (-3)</li></ul></div> </div></div> <script> async function toggle(i) { const f = document.getElementById('f'+i), p = document.getElementById('p'+i), t = document.getElementById('t'+i); const showCode = p.style.display === 'none'; if (showCode && !p.textContent) p.textContent = await (await fetch(f.src)).text(); f.style.display = showCode ? 'none' : 'block'; p.style.display = showCode ? 'block' : 'none'; t.textContent = showCode ? 'Render' : 'Code'; } </script> </body></html>