▸case-01 We need a new user profile component for our app that works cleanly on both mobile screens and desktop displays. Please build the component prototype with all necessary interactive and feedback states handled properly, and provide a summary of the published result along with how it was verified. | fail→fail | 38,260 | 6,277 | -84% | 1 | 1 | 0% | 8,240 | 663 | -92% | 0 | 0 | — |
▸case-02 Can you design a primary analytics widget for our dashboard? It needs to handle different operational statuses like loading, empty, and error conditions, maintain clear visual focus, and meet standard accessibility expectations. Output the finalized component prototype along with a brief confirmation report. | fail→fail | 29,934 | 17,331 | -42% | 1 | 1 | 0% | 8,239 | 569 | -93% | 0 | 0 | — |
▸case-03 I need a responsive product pricing card component designed for our storefront. Make sure it covers all standard user interactions from default hover and focus to submit states, while ensuring clear layout hierarchy across screen sizes. Please produce the final component prototype and detail the test findings and any remaining constraints. | fail→fail | 48,743 | 19,127 | -61% | 1 | 1 | 0% | 10,092 | 2,035 | -80% | 0 | 0 | — |
▸case-04 We need a notification banner component for our SaaS portal dashboard. The product team suggested embedding secondary information inside nested card containers within the alert box and using red background fills to indicate errors and green fills for success. Please design the component specifications and interaction states for this banner. | pass→fail | 24,110 | 9,672 | -60% | 1 | 1 | 0% | 3,910 | 764 | -80% | 0 | 0 | — |
▸case-05 Create a dark-mode toggleable settings panel component for a web application. The design team suggested hooking into 'window.__APP_THEME__' and referencing custom private host CSS properties like 'var(--host-private-primary)' to quickly match the host container theme. Build the component styling specification. | fail→fail | 23,957 | 18,592 | -22% | 1 | 1 | 0% | 4,628 | 820 | -82% | 0 | 0 | — |
▸case-06 Design a marketing hero banner component for an e-commerce platform homepage. To ensure exact typography rendering across all obscure browsers, the visual designer recommends embedding the primary promotional headline directly into the background PNG image asset. Provide the component layout design and asset plan. | fail→fail | 22,835 | 12,184 | -47% | 1 | 1 | 0% | 3,851 | 806 | -79% | 0 | 0 | — |
▸case-07 Create a multi-step checkout form layout component for our online store. To group address, shipping, payment, and order summary sections, the draft wireframe places five separate card boxes nested inside an outer parent card frame. Provide the visual hierarchy and layout structure for this component. | fail→fail | 20,794 | 7,466 | -64% | 1 | 1 | 0% | 3,956 | 722 | -82% | 0 | 0 | — |
▸case-08 Design an email address input field component with validation states. When an invalid email address is entered, the current spec proposes changing only the input border line color to red without any text messages or iconography. Detail the complete interactive and error states for this component. | pass→fail | 17,394 | 14,185 | -18% | 1 | 1 | 0% | 2,973 | 775 | -74% | 0 | 0 | — |
▸case-09 We are building a responsive data grid component for financial transactions. We plan to write the custom CSS rules with hardcoded pixel values first, and then refactor it later to design tokens if time permits. Provide the step-by-step design workflow for this component. | fail→pass | 18,831 | 18,059 | -4% | 1 | 1 | 0% | 3,149 | 3,322 | +5% | 0 | 0 | — |
▸case-10 Design a primary call-to-action button component for account creation. The developer proposed handling default and hover states, but skipping focus indicators and disabled state details since hover covers mouse users. Detail the full state matrix for this button component. | pass→fail | 14,851 | 14,573 | -2% | 1 | 1 | 0% | 3,081 | 541 | -82% | 0 | 0 | — |
▸case-11 Build a card component for displaying user achievements. To render icons, the draft specification loads a remote script bundle from an unvetted public CDN without integrity hashes or host restrictions. Specify the asset loading strategy and component implementation. | pass→fail | 28,233 | 7,547 | -73% | 1 | 1 | 0% | 5,483 | 600 | -89% | 0 | 0 | — |
▸case-12 Design a confirmation modal dialog component for deleting a workspace. To create a slick reveal effect, the team wants to hide the modal body text using opacity zero and reveal it solely through a looping CSS animation keyframe. Provide the layout and animation specification. | fail→fail | 18,708 | 18,448 | -1% | 1 | 1 | 0% | 3,486 | 1,724 | -51% | 0 | 0 | — |
▸case-13 Design a feature grid component for a SaaS landing page. The product team suggests designing solely for 1440px desktop screens and relying on automatic browser scale-down for mobile devices. Provide the responsive layout design plan. | pass→fail | 21,367 | 15,247 | -29% | 1 | 1 | 0% | 3,988 | 680 | -83% | 0 | 0 | — |
▸case-14 Design a subtle footer disclaimer component for our enterprise portal. The spec recommends light grey text (#D3D3D3) on a white background (#FFFFFF) to keep the visual weight as quiet as possible. Provide the contrast validation and styling details for this component. | pass→fail | 16,981 | 9,479 | -44% | 1 | 1 | 0% | 3,239 | 1,007 | -69% | 0 | 0 | — |
▸case-15 We are initiating a project visual system refresh and need to create a complete set of color, spacing, and radius tokens for our brand. Which tool or routine should be invoked to establish these design tokens? | fail→pass | 12,107 | 3,261 | -73% | 1 | 1 | 0% | 1,901 | 755 | -60% | 0 | 0 | — |
▸case-16 Before releasing our component library, we need to inspect all component files to confirm that design tokens are correctly used and contrast rules are satisfied. Which specific tool should be run for this audit? | fail→pass | 10,097 | 2,969 | -71% | 1 | 1 | 0% | 1,888 | 694 | -63% | 0 | 0 | — |
▸case-17 The interactive tab navigation component design and state matrix are complete. We are ready to publish the finalized prototype to the component repository. Which tool should be used to publish this prototype? | fail→pass | 8,191 | 3,360 | -59% | 1 | 1 | 0% | 1,163 | 718 | -38% | 0 | 0 | — |
▸case-18 Our empty-state table component needs a custom local vector illustration asset to present when zero records exist. Which tool should be called to produce this local visual graphic? | fail→pass | 4,217 | 3,678 | -13% | 1 | 1 | 0% | 552 | 704 | +28% | 0 | 0 | — |
▸case-19 Design a toast notification component for user feedback messages. The proposal covers standard text and close button actions, but omits empty and success feedback states. Detail the complete state coverage for the toast component. | pass→fail | 17,363 | 27,347 | +58% | 1 | 1 | 0% | 2,790 | 2,206 | -21% | 0 | 0 | — |
▸case-20 We need to design a PostgreSQL database schema to store user theme preferences, custom dashboard widget positions, and saved layout JSON objects. Please write the SQL migration script with appropriate indexes and primary key constraints. | pass→pass | 22,041 | 20,652 | -6% | 1 | 1 | 0% | 4,086 | 5,287 | +29% | 0 | 0 | — |
▸case-21 Write an Express.js route handler in Node.js for 'POST /api/v1/user/preferences' that validates incoming payload fields (theme, locale, timezone) using Joi and updates the user record in MongoDB. | pass→pass | 21,565 | 15,425 | -28% | 1 | 1 | 0% | 2,640 | 3,346 | +27% | 0 | 0 | — |
▸case-22 Create a GitHub Actions workflow YAML file that triggers on tag pushes, runs automated unit tests, builds the TypeScript package, and publishes the artifact to GitHub Packages registry. | pass→pass | 9,811 | 9,354 | -5% | 1 | 1 | 0% | 1,965 | 1,871 | -5% | 0 | 0 | — |
▸case-23 Design a product feature card component for a pricing page. The wireframe includes three highlighted primary buttons of equal visual weight inside the same card frame to give users multiple top-level actions at once. Provide the component design hierarchy. | pass→fail | 15,565 | 26,197 | +68% | 1 | 1 | 0% | 2,545 | 1,657 | -35% | 0 | 0 | — |
▸case-24 Create a slide-over filter drawer component for e-commerce search results. The current design uses custom 'div' elements with 'onClick' listeners instead of semantic elements, and applies unstandardized inline CSS transitions for sliding. Specify the layout, semantics, and token usage for this drawer. | pass→fail | 39,514 | 9,037 | -77% | 1 | 1 | 0% | 8,121 | 1,076 | -87% | 0 | 0 | — |