Build Frontend UIs with AI — From Wireframe to Code

Build a [component type, e.g., 'dashboard page' / 'pricing section' / 'user settings form' / 'data table with filters'] for my [describe your application, e.g., 'project management app' / 'e-commerce site' / 'analytics dashboard']. **Layout description:** [Describe the layout in spatial terms. Use compass directions, columns, rows, above/below/left/right. e.g., 'A two-column layout: left sidebar (240px wide, fixed) with navigation links, right content area (fills remaining width) with a header row showing page title and a 'New Project' button on the right, then a grid of project cards below'] **Visual style:** - Color palette: [e.g., 'Dark theme: background #0F172A, cards #1E293B, primary action blue #3B82F6, text white/gray' OR 'Clean minimal, white background, one accent color #6366F1' OR 'Match this existing design: [paste any CSS variables or Tailwind config you have'] - Typography: [e.g., 'Inter font, headings semibold, body text 14px regular'] - Border radius: [sharp / slightly rounded (4px) / rounded (8px) / very rounded (16px+)] - Component style: [e.g., 'flat, no shadows' / 'subtle card shadows, 1px borders' / 'Material Design-like' / 'shadcn/ui style'] **Each element I need:** [List every visible element and its behavior. Be specific about what it shows and what happens when interacted with. e.g.: - Project card: shows project name (bold), client name (gray, smaller), status badge (colored pill: Active=green, Paused=yellow, Complete=gray), last updated date, and a 3-dot menu icon in the top right - New Project button: primary blue, opens a modal when clicked - Search input: at the top of the content area, filters cards in real time as you type] **States to handle:** [e.g., empty state (no data), loading state (skeleton screens), error state, hover states on interactive elements] **Tech stack:** - Framework: [React / Vue / Svelte / plain HTML+CSS / Next.js] - Styling: [Tailwind CSS / CSS Modules / styled-components / plain CSS] - Component library (if any): [shadcn/ui / Material UI / Radix / Ant Design / none] - TypeScript: [yes / no] **Reference (optional):** [Name or describe any existing site/product whose design I should reference. e.g., 'Similar aesthetic to Linear.app' / 'Similar card layout to Notion database view'] Build this as a single, self-contained component with realistic dummy data included so I can see it working immediately.

Convert this generated UI into a production-ready, reusable component for my codebase. Here's the generated code: ```[language] [Paste the AI-generated component from Step 1] ``` **My project structure:** ``` [Describe where components live, e.g.: src/ components/ ui/ ← primitive components (Button, Input, Card) features/ ← feature-specific components layouts/ ← page layout components] ``` **Existing components I want to use:** [List any components you already have that should be reused. e.g., 'Use my existing <Button> component instead of a plain button. Use <Card> instead of a div with shadow. I'll paste these below.'] ```[language] [Paste 1-2 existing components for AI to match style/pattern] ``` **Make the following improvements:** 1. **Props interface**: Extract all hardcoded values that should be configurable into typed props. For each prop, specify: - Type (string, number, boolean, specific union type) - Required or optional (with default value if optional) - Description as a JSDoc comment 2. **Data separation**: Remove the dummy data from the component and replace with a typed data prop. Show the TypeScript interface for the data shape. 3. **Component decomposition**: If this component has sections that logically belong in sub-components (and would be reused elsewhere), extract them. Each sub-component should be in its own file. Show me the file structure. 4. **Accessibility**: Add: - semantic HTML elements (nav, main, section, article — not just divs) - aria-label on icon-only buttons - keyboard navigation support on interactive elements - Focus visible styles on all interactive elements - Alt text on any images 5. **Style cleanup**: Remove any inline styles and replace with class names. Ensure the component doesn't have hardcoded pixel values that should be design tokens/variables. Output each file separately with its full path. Don't output just the changes — output the complete file.

Add interactivity to this component. Here's the current static version: ```[language] [Paste your current component code] ``` **Interactions to implement:** [List each interaction. For each one, describe: what triggers it, what happens, and what the end state looks like. Be specific about transitions and timing. Examples:] 1. **[Interaction name]**: [e.g., 'Clicking the 3-dot menu icon on a card opens a dropdown menu positioned relative to the icon. The dropdown contains: Edit (navigates to /edit/[id]), Duplicate (calls duplicateProject(id) and shows a success toast), Delete (opens a confirmation dialog). Clicking outside the dropdown closes it. Pressing Escape also closes it.'] 2. **[Interaction name]**: [e.g., 'The search input filters the project list in real time as the user types. Filtering is client-side (no API call). The filter is case-insensitive and matches on project name and client name. When no results match, show the empty state UI.'] 3. **[Interaction name]**: [e.g., 'Clicking New Project opens a modal/dialog with a form. The form has: Project Name (required text input), Client Name (optional text input), Status (select dropdown: Active/Paused/Complete). Submit button is disabled until Name is filled. On submit, call createProject(formData) and close the modal.'] **State management:** - State scope: [local component state / parent component / global state management] - State library (if applicable): [useState only / Zustand / Redux / Jotai / Pinia / Vuex / none] **API integration:** - Data fetching: [SWR / React Query / useEffect + fetch / Next.js Server Components / none yet — use dummy data] - On user actions that modify data (create/update/delete): - Optimistic update: [yes — update UI immediately and revert on error / no — wait for server] - Loading state: [show spinner / disable button / skeleton / nothing] - Error handling: [toast notification / inline error message / none yet] - Success feedback: [toast / inline message / redirect / nothing] **Animations:** [Describe any animations needed. e.g., 'Dropdown opens with a fast fade+slide down (150ms). Modal opens with a backdrop fade (200ms) and content scale from 95% to 100% (200ms). Cards in the grid animate in with a stagger effect on initial load.'] Use [Framer Motion / CSS transitions / no animation library] for animations.

Make this component fully responsive. Here's the current desktop version: ```[language] [Paste your current component code] ``` **Breakpoints to target:** [Use your framework's breakpoints or specify custom ones, e.g.: - Mobile: < 640px (sm) - Tablet: 640px - 1024px (md) - Desktop: 1024px+ (lg)] **Layout behavior at each breakpoint:** **Mobile (< 640px):** [Describe what changes. Think about: which columns collapse to full width, which elements stack vertically, what gets hidden or moved, whether the navigation becomes a hamburger menu, how touch targets become larger. e.g.: - Two-column layout becomes single column - Sidebar collapses to a hamburger menu that slides in from the left - Cards stack in a single column and take full width - Action buttons move to a fixed bottom bar instead of top right] **Tablet (640px - 1024px):** [e.g.: - Two-column layout stays but sidebar is narrower (180px) - Cards show in a 2-column grid instead of 3 - Table columns: hide 'Last Updated' column to save space] **Desktop (1024px+):** [The current design — describe if anything changes at very wide screens, e.g., max-width container, layout stays centered] **Touch interactions:** - Mobile hover states: [remove hover effects that don't make sense on touch / replace with tap states] - Touch targets: all interactive elements must be at least 44x44px on mobile - Swipe gestures (if any): [e.g., 'swipe left on a list item to reveal delete action'] **Images and media:** [How should images scale? Fixed aspect ratios? Object-fit cover? Lazy loading?] **Performance on mobile:** - Lazy load below-fold content: [yes / no] - Reduce animations on mobile: [yes — respect prefers-reduced-motion / no] After making it responsive, give me a checklist of things to manually verify at each breakpoint in the browser DevTools device emulator.

Help me polish this UI to production quality and get it deployed. **Current component code:** ```[language] [Paste your component] ``` **Polish checklist — review my code for each item:** 1. **Interaction states**: Does every interactive element have a distinct visual state for: - Hover (desktop) - Active/pressed - Focus (keyboard navigation — visible focus ring that meets WCAG 2.1 AA contrast) - Disabled (if applicable) - Loading (if the element triggers an async action) 2. **Loading states**: Does every async operation have a loading indicator? Are loading states accessible (not just visual — also for screen readers with aria-busy)? 3. **Empty states**: Is there a designed empty state (no data) for every list, table, and feed? Does it explain why it's empty and what the user can do next? 4. **Error states**: Is there an error state for every operation that can fail? Does the error message tell the user what went wrong and what to do? 5. **Transitions**: Are state changes (showing/hiding elements, expanding/collapsing) animated or abrupt? Abrupt changes feel broken — add CSS transitions where elements show/hide. 6. **Typography**: Is there consistent use of text sizes and weights? Are long strings truncated appropriately (text-ellipsis) instead of breaking layout? 7. **Dark mode** (if applicable): Does the component work correctly in both light and dark mode? Are there any hardcoded colors that don't respond to the color scheme? 8. **Performance**: Are there any unnecessary re-renders? Any components that should be memoized? Any images that should be lazy-loaded or sized explicitly to prevent layout shift? **For each item that needs work, show me the fix.** **Deployment:** - Target platform: [Vercel / Netlify / Cloudflare Pages / GitHub Pages / self-hosted] - Framework: [Next.js / Vite + React / Astro / plain HTML] - Environment variables needed: [list any, or 'none'] Generate: 1. A deployment configuration file for my platform (vercel.json / netlify.toml / etc.) if non-default settings are needed 2. A build script in package.json that produces a production-ready build 3. A pre-deployment checklist: what to check before deploying (e.g., check for console.log statements, verify environment variables are set, run tests, check bundle size)