▸case-14 I accepted an OpenDesign user profile card visual artifact for integration into Next.js App Router. What structural guidance must accompany the generated React code upon delivery? | pass→fail | 14,816 | 11,204 | -24% | 1 | 1 | 0% | 2,148 | 1,764 | -18% | 0 | 0 | — |
▸case-01 I have an accepted OpenDesign UI artifact for a product feature page. I need to port this directly into our Next.js App Router project. Please produce the complete code structure along with clear guidance on file organization, asset handling, font and image integration, and any required data props. | fail→pass | 36,063 | 47,593 | +32% | 1 | 1 | 0% | 7,175 | 8,089 | +13% | 0 | 0 | — |
▸case-02 We are building a client-rendered single page application using Vite and React. We have an OpenDesign desktop hero UI component. How should we structure the routing and metadata files for this feature? | pass→pass | 20,757 | 22,965 | +11% | 1 | 1 | 0% | 3,076 | 3,600 | +17% | 0 | 0 | — |
▸case-03 I need to extract raw design tokens such as colors and spacing values from an OpenDesign asset into a standalone JSON file for a Swift iOS app. How should I convert these tokens into Next.js App Router layout components? | fail→fail | 18,758 | 22,001 | +17% | 1 | 1 | 0% | 3,416 | 3,274 | -4% | 0 | 0 | — |
▸case-04 We have an existing legacy Next.js 12 Pages Router codebase with pages/dashboard.tsx using getStaticProps. How do we refactor this file to use App Router server components without any OpenDesign visual design handoff? | pass→pass | 22,487 | 13,940 | -38% | 1 | 1 | 0% | 3,387 | 2,877 | -15% | 0 | 0 | — |
▸case-05 I am porting an OpenDesign interactive pricing card artifact for the Acme SaaS platform into Next.js App Router. The card contains static copy, feature checkmarks, and a dynamic seat-count slider. The base model suggests adding 'use client' at the top of app/pricing/page.tsx to enable slider state. How should the component hierarchy be split? | pass→pass | 13,859 | 16,006 | +15% | 1 | 1 | 0% | 2,401 | 3,044 | +27% | 0 | 0 | — |
▸case-06 I have an OpenDesign blog post card artifact featuring standard html img tags and standard html a links for the article preview. Should these standard html elements remain unchanged when exported to a Next.js App Router site? | pass→pass | 12,609 | 10,114 | -20% | 1 | 1 | 0% | 2,269 | 1,733 | -24% | 0 | 0 | — |
▸case-07 We are exporting an OpenDesign checkout modal component into a Next.js App Router project that already includes tailwind.config.js. A developer suggested creating isolated CheckoutModal.module.css files for all styling. What styling format should be used? | pass→pass | 27,402 | 11,781 | -57% | 1 | 1 | 0% | 1,916 | 2,333 | +22% | 0 | 0 | — |
▸case-08 I am transferring an OpenDesign header navigation bar into a plain Next.js App Router repository that does not have Tailwind CSS installed. Should I force-install Tailwind CSS or use modular local styling? | fail→pass | 13,303 | 15,762 | +18% | 1 | 1 | 0% | 2,104 | 2,767 | +32% | 0 | 0 | — |
▸case-09 I have an OpenDesign persistent sidebar navigation artifact designed for the /dashboard sub-routes in a Next.js App Router application. Should this visual layout be placed in app/dashboard/page.tsx or app/dashboard/layout.tsx? | pass→pass | 8,020 | 10,789 | +35% | 1 | 1 | 0% | 1,574 | 2,066 | +31% | 0 | 0 | — |
▸case-10 An OpenDesign landing hero artifact specifies the Google Font 'Inter' for headings. To implement this in Next.js App Router, a team member proposed inserting standard HTML link tags in a head component. How should the font be imported? | pass→pass | 11,092 | 9,580 | -14% | 1 | 1 | 0% | 1,651 | 1,608 | -3% | 0 | 0 | — |
▸case-11 An OpenDesign product page layout specifies title tags, description strings, and OpenGraph image URL properties. Should these be rendered using third-party React Helmet head elements inside the component JSX? | pass→pass | 13,265 | 7,826 | -41% | 1 | 1 | 0% | 2,158 | 1,717 | -20% | 0 | 0 | — |
▸case-12 An OpenDesign marketing page includes static hero sections, feature benefit lists, and a newsletter subscription modal triggered by a button. Should the entire top-level route file be marked with 'use client'? | pass→pass | 8,791 | 10,357 | +18% | 1 | 1 | 0% | 1,594 | 1,792 | +12% | 0 | 0 | — |
▸case-13 An OpenDesign hero section artifact references local SVG icons and background JPEG assets. Should these static image files be base64-encoded inline within the React JSX code? | fail→pass | 12,503 | 12,478 | -0% | 1 | 1 | 0% | 2,160 | 2,219 | +3% | 0 | 0 | — |
▸case-15 I am porting an OpenDesign static terms of service visual artifact into Next.js App Router. Should I set up Server Actions, database connectors, and API middleware routes alongside the static text page? | pass→pass | 12,842 | 8,431 | -34% | 1 | 1 | 0% | 2,001 | 1,742 | -13% | 0 | 0 | — |
▸case-16 An OpenDesign banner artifact specifies exact hex color #1E40AF and token padding 32px. Should these visual token values be replaced with generic browser defaults during Next.js export? | pass→pass | 11,153 | 5,431 | -51% | 1 | 1 | 0% | 1,562 | 1,143 | -27% | 0 | 0 | — |
▸case-17 An OpenDesign full-page analytics dashboard artifact contains a top bar, sidebar, quarterly stats cards, recent transaction tables, and global footer. Should all 1,500 lines of UI markup be written inside a single app/analytics/page.tsx file? | pass→pass | 14,396 | 11,070 | -23% | 1 | 1 | 0% | 2,139 | 2,223 | +4% | 0 | 0 | — |
▸case-18 An OpenDesign profile card artifact shows mock avatar images, display names, and follower counts. Should these values be hardcoded inside the component body without props? | fail→pass | 10,990 | 8,634 | -21% | 1 | 1 | 0% | 1,466 | 1,728 | +18% | 0 | 0 | — |
▸case-19 An OpenDesign site header artifact has static logo graphics, static nav links, and a mobile hamburger menu button. Should the entire header file be designated as a client component? | pass→pass | 12,566 | 13,787 | +10% | 1 | 1 | 0% | 1,908 | 2,303 | +21% | 0 | 0 | — |
▸case-20 An OpenDesign footer artifact includes internal site links to /privacy and /terms. Should these links use window.location navigation handlers inside button click listeners? | pass→pass | 9,991 | 9,765 | -2% | 1 | 1 | 0% | 1,655 | 1,459 | -12% | 0 | 0 | — |
▸case-21 An OpenDesign card artifact specifies explicit dark mode styles using dark container backgrounds and white text. How should these dark mode visual variants be retained when exporting to Next.js with Tailwind CSS? | pass→pass | 14,314 | 20,239 | +41% | 1 | 1 | 0% | 2,479 | 3,057 | +23% | 0 | 0 | — |
▸case-22 An OpenDesign global footer component must be added to a Next.js App Router site. Should this artifact be structured as a standalone route file at app/footer/page.tsx? | pass→pass | 9,128 | 10,009 | +10% | 1 | 1 | 0% | 1,533 | 2,141 | +40% | 0 | 0 | — |