▸case-01 I have a cluttered habit-tracking web application that users keep abandoning after three days. I need you to completely reimagine it into a sleek, habit-forming digital experience. Please output a complete product specification structured with these exact sections: the core concept summary, the primary signature interaction, the step-by-step user flow, visual identity details (colors, typography, radii), a list of UI components with required states, the project folder architecture, production-ready TypeScript component code, and a final polish checklist. | fail→fail | 32,554 | 32,975 | +1% | 1 | 1 | 0% | 6,244 | 13,204 | +111% | 0 | 0 | — |
▸case-02 I'm building a minimal distraction-free writing app for novelists and want to elevate it to a premium, world-class tool. Transform this idea and structure your output according to the standard product spec format: start with a paragraph outlining the core idea, explain the signature interaction mechanism, list the screen-by-screen workflow, define the visual brand identity and tokens, outline necessary components with states, display the directory tree, provide the full front-end implementation code, and end with the quality polish checklist. | fail→fail | 34,006 | 35,313 | +4% | 1 | 1 | 0% | 6,243 | 13,203 | +111% | 0 | 0 | — |
▸case-03 Our B2B invoice management platform feels slow, generic, and overwhelmed with confusing data table actions. Please execute a complete redesign to make it intuitive and memorable. Format your deliverable using the standard layout: a main conceptual summary, the unique signature interaction, the end-to-end user flow across screens, the complete visual identity breakdown, required components and variants, the source code directory layout, fully typed Next.js/Tailwind code, and a comprehensive polish checklist. | fail→fail | 30,270 | 29,176 | -4% | 1 | 1 | 0% | 6,236 | 13,196 | +112% | 0 | 0 | — |
▸case-04 Run the product invention workflow for a developer bookmarking CLI tool called 'DevMark'. I want 3 distinct initial concepts with metaphoric names, signature interactions, workflows, and risk tradeoffs before picking one to build. | pass→pass | 21,579 | 36,008 | +67% | 1 | 1 | 0% | 3,611 | 13,144 | +264% | 0 | 0 | — |
▸case-05 Design a financial dashboard screen for a crypto portfolio app named 'VaultX' where data fetches asynchronously. Should we show a centered full-page spinning wheel indicator or skeleton screen layouts during load states? Provide the technical UI pattern recommendation and implementation details. | pass→pass | 19,037 | 26,146 | +37% | 1 | 1 | 0% | 4,034 | 13,150 | +226% | 0 | 0 | — |
▸case-06 On a task management app called 'TaskFlow', users frequently delete item cards. The backend developer suggested popping up a modal dialog asking 'Are you sure you want to delete this task?' on every single deletion. Is this the recommended pattern, or is there a higher-grade UX alternative? | pass→pass | 11,407 | 19,357 | +70% | 1 | 1 | 0% | 2,035 | 10,983 | +440% | 0 | 0 | — |
▸case-07 We are architecting an interactive modern web app dashboard for a smart home system named 'AuraHome'. We need liquid transitions and spring-based gestural physics between cards. Which animation library should be selected in a React Next.js strict stack rather than raw CSS keyframes for complex interactive spring physics? | pass→pass | 16,706 | 22,836 | +37% | 1 | 1 | 0% | 3,215 | 11,756 | +266% | 0 | 0 | — |
▸case-08 Define the CSS design tokens for a dark SaaS developer tool theme named 'KubePulse'. Provide the root CSS variables for brand and surface color tokens. Which modern color space format should be used inside CSS variables for uniform perceptual brightness control? | pass→pass | 12,305 | 13,762 | +12% | 1 | 1 | 0% | 2,780 | 10,008 | +260% | 0 | 0 | — |
▸case-09 We are reviewing the mobile touch interactions for an e-commerce checkout flow called 'QuickBuy'. What is the minimum recommended touch target dimensions in pixels for touchable UI controls on mobile screens according to accessibility standards? | pass→pass | 7,271 | 7,194 | -1% | 1 | 1 | 0% | 1,314 | 8,241 | +527% | 0 | 0 | — |
▸case-10 Provide the standard screen responsive breakpoints configuration for a web platform called 'AtlasGeo'. List the pixel threshold values for small, medium, large, and extra-large device breakpoints. | pass→pass | 6,575 | 6,882 | +5% | 1 | 1 | 0% | 1,330 | 8,339 | +527% | 0 | 0 | — |
▸case-11 For a user onboarding form in a SaaS product called 'SyncDeck' with multi-step inputs, which state management and validation library pairing should be integrated for robust typed validation and form state handling? | pass→pass | 13,060 | 12,477 | -4% | 1 | 1 | 0% | 2,827 | 9,770 | +246% | 0 | 0 | — |
▸case-12 What are the minimum required WCAG AA color contrast ratios for standard body text and large headings when designing accessible UI components for 'DocuCraft'? | pass→pass | 6,292 | 7,371 | +17% | 1 | 1 | 0% | 1,222 | 8,445 | +591% | 0 | 0 | — |
▸case-13 Specify the standard motion duration tokens in milliseconds for fast, normal, and slow UI micro-interactions in a modern Web application design system named 'PulseUI'. | fail→pass | 7,709 | 6,513 | -16% | 1 | 1 | 0% | 1,652 | 8,193 | +396% | 0 | 0 | — |
▸case-14 A product designer proposes placing small helpful text tooltips next to every primary CTA button on an analytics app called 'StatGazer' to explain what each button does. Evaluate whether this approach aligns with radical simplicity principles or indicates a core UI flaw. | fail→pass | 12,193 | 7,403 | -39% | 1 | 1 | 0% | 2,123 | 8,249 | +289% | 0 | 0 | — |
▸case-15 For lightweight client-side global state management (such as UI theme state, sidebar collapse states, and user preferences) in a Next.js web application called 'FlowNote', which state management library is recommended over heavy options like Redux? | pass→pass | 10,615 | 11,690 | +10% | 1 | 1 | 0% | 2,018 | 9,280 | +360% | 0 | 0 | — |
▸case-16 Design the zero-data empty state for a new team workspace inside 'ProjectLoom' when no projects have been created yet. Should it show a plain blank card with 'No data available', or how should it be structured? | pass→pass | 11,540 | 18,750 | +62% | 1 | 1 | 0% | 2,019 | 11,217 | +456% | 0 | 0 | — |
▸case-17 When implementing standalone icon-only action buttons (like a trash bin icon or settings gear icon) in a React application called 'IconicApp', what mandatory HTML attribute must be included to ensure screen reader accessibility? | pass→pass | 5,081 | 6,678 | +31% | 1 | 1 | 0% | 1,051 | 8,232 | +683% | 0 | 0 | — |
▸case-18 In a complex dashboard design for 'CloudMatrix', developers are setting inline arbitrary z-index values like z-[9999] and z-[99999] to force dropdown menus above modals. Evaluate this practice and describe the clean CSS token alternative. | pass→pass | 15,601 | 15,306 | -2% | 1 | 1 | 0% | 2,768 | 9,887 | +257% | 0 | 0 | — |
▸case-19 How many distinct font size values should be visible on a single UI screen in 'StreamDash' to maintain visual hierarchy without creating cognitive noise? | fail→pass | 9,539 | 6,720 | -30% | 1 | 1 | 0% | 1,724 | 8,157 | +373% | 0 | 0 | — |
▸case-20 Write the server-side Node.js event tracking code using PostHog SDK to log a 'user_plan_upgraded' telemetry event with properties for plan_id, mrr_delta, and user_id. | pass→pass | 5,872 | 8,542 | +45% | 1 | 1 | 0% | 1,357 | 8,950 | +560% | 0 | 0 | — |
▸case-21 Write a PostgreSQL database migration SQL script to create tables for subscription plans, user invoices, and payment attempt logs for a SaaS platform. | pass→pass | 15,656 | 14,025 | -10% | 1 | 1 | 0% | 3,468 | 10,384 | +199% | 0 | 0 | — |
▸case-22 Write a 3-paragraph cold outreach email campaign targeting VP of Sales executives to pitch a B2B sales automation software product. | pass→pass | 6,102 | 10,227 | +68% | 1 | 1 | 0% | 1,157 | 8,507 | +635% | 0 | 0 | — |