▸case-20 Provide the background styling rules for dark UI modules in our application shell. The front-end dev wants to use solid #0D0D0D flat hex fills across all panels to simplify CSS. | fail→pass | 12,284 | 14,570 | +19% | 1 | 1 | 0% | 2,314 | 3,925 | +70% | 0 | 0 | — |
▸case-06 Specify the color palette tokens for an industrial monitoring dashboard. The client wants to assign distinct bright accent colors to every module: bright blue for primary actions, vivid purple for secondary, neon green for success, bright amber for warnings, and bright magenta for selection. | fail→fail | 16,018 | 15,937 | -1% | 1 | 1 | 0% | 3,493 | 4,076 | +17% | 0 | 0 | — |
▸case-01 Can you create a design system spec for our SaaS landing page hero section? It should use a split layout with bold headlines on the left and a layered dark product console on the right, featuring subtle surface gradients, bevel-like component borders, and precise technical labels. | fail→pass | 28,764 | 27,024 | -6% | 1 | 1 | 0% | 6,194 | 7,075 | +14% | 0 | 0 | — |
▸case-02 Please generate the UI component styles for a hardware management tool interface, specifically dark interactive cards, search inputs, and action buttons. The controls should look touchable and engineered with subtle inner shadows, dark surface depth, and high contrast text, avoiding flat minimalism or overly glossy materials. | fail→pass | 25,903 | 26,696 | +3% | 1 | 1 | 0% | 6,196 | 7,077 | +14% | 0 | 0 | — |
▸case-03 We are designing a soft pastel wellness app that uses low-contrast, light-on-light neumorphic elements with extruded soft shadows and zero hard borders. Please provide CSS tokens and component guidance for this soft neumorphic design system. | pass→fail | 26,789 | 22,105 | -17% | 1 | 1 | 0% | 6,187 | 5,874 | -5% | 0 | 0 | — |
▸case-04 We need a retro 2000s media player interface spec featuring heavy chrome reflection gradients, realistic leather texture backgrounds, and glossy glass bubble buttons. Please write the visual style spec. | pass→fail | 26,501 | 23,956 | -10% | 1 | 1 | 0% | 4,580 | 5,440 | +19% | 0 | 0 | — |
▸case-05 Create a design system spec for a developer terminal tool that strictly uses flat monochrome dark surfaces with zero gradients, zero shadows, and no border highlights. Output the visual guidelines. | pass→pass | 22,477 | 25,363 | +13% | 1 | 1 | 0% | 4,448 | 5,982 | +34% | 0 | 0 | — |
▸case-13 Create CSS for file attachment tiles inside a dark operational workspace. The team proposed using flat dark gray boxes with no borders or lighting cues. | pass→pass | 18,828 | 24,311 | +29% | 1 | 1 | 0% | 4,448 | 7,049 | +58% | 0 | 0 | — |
▸case-07 Generate the CSS rules for product summary cards in our dark application interface. The developer suggests using a 3px solid bright blue border to make cards stand out clearly. | fail→fail | 12,001 | 16,846 | +40% | 1 | 1 | 0% | 2,591 | 4,557 | +76% | 0 | 0 | — |
▸case-08 Provide the layout container CSS structure for an industrial IoT dashboard. The team plans to place dark panels directly onto a full-screen dark viewport background without any enclosing container. | fail→fail | 11,008 | 27,043 | +146% | 1 | 1 | 0% | 2,206 | 7,029 | +219% | 0 | 0 | — |
▸case-09 Write the typography specification for a technical instrument panel. The design lead recommended pairing an ornate serif display font for section headings with a handwritten script font for status callouts. | fail→pass | 21,089 | 18,421 | -13% | 1 | 1 | 0% | 3,748 | 4,611 | +23% | 0 | 0 | — |
▸case-10 Draft the CSS styling rules for primary call-to-action buttons in our dark shell UI. To maximize clickability, the team proposed adding an intense neon glowing outer aura effect on hover. | fail→pass | 15,176 | 21,199 | +40% | 1 | 1 | 0% | 3,135 | 5,415 | +73% | 0 | 0 | — |
▸case-11 Design a visual component spec for a real-time system health monitor. The team wants a flat 2D vector graphic showing system nodes. | fail→fail | 20,725 | 28,854 | +39% | 1 | 1 | 0% | 3,912 | 7,050 | +80% | 0 | 0 | — |
▸case-12 Define the animation and micro-interaction guidelines for a dark tactical analytics platform. The product manager wants playful 3D flip card animations and springy bounce physics on open. | fail→pass | 20,522 | 21,814 | +6% | 1 | 1 | 0% | 3,453 | 4,828 | +40% | 0 | 0 | — |
▸case-14 Specify the CSS styling for search inputs inside our dark shell interface. The current proposal uses a flat pitch-black background with a thick neon green border. | fail→pass | 15,756 | 19,421 | +23% | 1 | 1 | 0% | 3,268 | 5,328 | +63% | 0 | 0 | — |
▸case-15 Design the micro-components for system status markers in an industrial cloud console. The lead engineer suggested using large glowing 20px status badges with gradient fills. | fail→fail | 18,767 | 26,310 | +40% | 1 | 1 | 0% | 3,432 | 7,054 | +106% | 0 | 0 | — |
▸case-16 Draft layout guidelines for structured data grids in our dark interface shell. The UI engineer proposed omitting all internal lines and borders to achieve an open minimalist look. | fail→pass | 15,632 | 16,086 | +3% | 1 | 1 | 0% | 2,670 | 3,875 | +45% | 0 | 0 | — |
▸case-17 Provide specifications for the main container background image in our dark UI shell. The team suggested adding a high-contrast diagonal carbon fiber pattern overlay. | fail→pass | 12,882 | 17,188 | +33% | 1 | 1 | 0% | 2,527 | 4,248 | +68% | 0 | 0 | — |
▸case-18 Specify text color tokens for a high-density industrial control panel. To maintain a dark stealth aesthetic, the team suggests using dark gray (#444444) text on black panels for both headings and body copy. | pass→pass | 14,456 | 17,839 | +23% | 1 | 1 | 0% | 2,697 | 4,210 | +56% | 0 | 0 | — |
▸case-19 Write hover state guidelines for dark interactive cards. The design team proposed expanding card dimensions by 15% and adding a bright multi-color border cycle on hover. | pass→pass | 14,026 | 12,815 | -9% | 1 | 1 | 0% | 2,593 | 3,264 | +26% | 0 | 0 | — |
▸case-21 Design a split-screen dashboard view where the left side contains marketing content and the right side displays system telemetry modules. The design team proposed making both sides dark with flat cards. | fail→fail | 18,189 | 27,756 | +53% | 1 | 1 | 0% | 3,123 | 7,057 | +126% | 0 | 0 | — |
▸case-22 Write the CSS shadow spec for dark nested panels. The developer suggested applying standard CSS drop-shadows box-shadow: 0 10px 20px rgba(0,0,0,0.5) on the outer edge, without any inset shadows or edge highlights. | fail→pass | 14,823 | 21,552 | +45% | 1 | 1 | 0% | 2,981 | 5,548 | +86% | 0 | 0 | — |