Build a landing page footer with a mini CTA banner, navigation links, app store badges, social icons, and trust signals like SSL badge or reviews. Make it visually balanced, mobile responsive, and conversion-friendly.

Create a password input field with real-time strength indicator (weak → strong) and validation checklist (min length, special char, number, etc.). Show checkmarks as user types. Use subtle animations and tooltips.

Build a minimalist landing page with a short headline, subheading, and a single input field for email or phone. Add a “Get Started” button. Use soft colors, white space, and smooth fade-in elements.

Design a floating action button (bottom right) that triggers a compact contact form modal. Include fields for name, email, and message. Add subtle opening animation, blur background, and “Thank You” state after submission.

Create a compact lead capture form for gated content. Include fields for name, email, and company. Add a compelling headline and CTA button. On submit, show a “Check your inbox” confirmation with a success checkmark.

Build a full-page login screen with a gradient background and two-column layout: left side with welcome text and illustration, right side with the login form. Add soft shadows, glowing inputs, and a modern font.

Design a newsletter signup section with a short benefit list, an email input field, and a CTA button. Show a success message on submission with a checkmark animation. Make it visually appealing and mobile-friendly.

Create a landing page hero section with a bold headline, subheading, and a clear CTA button. Add a right-side image or autoplaying video. Use responsive layout, light animations, and emphasize visual hierarchy for conversion.

Build a modal-based auth form with tabs for “Login” and “Sign Up”. Include inputs for email and password, a show/hide password toggle, and Google/GitHub login buttons. Add transitions between the tabs and error handling for validation.

Design a 3-step form wizard with clear step indicators at the top. Each step should include form fields and a “Next” button. Add transitions between steps and validate input before moving forward. Include a final “Submit” with confirmation animation.

Build a responsive team section with profile cards showing name, role, avatar, skill tags, and social links. Include hover animations that reveal extra info or contact buttons. Mobile-friendly layout.

Create a collapsible FAQ section with search input, category filters (tabs), and animated expand/collapse. Allow one open item at a time. Smooth UX with accessible keyboard navigation.

Build a notification bell icon that opens a dropdown with categorized notifications (e.g., Messages, Alerts). Include icons, timestamps, and action buttons (mark as read, dismiss). Smooth animation on open/close.

Design a drag-and-drop file uploader component with file previews (image or file type icon), progress bar animations, max size validation, and success/error messages. Allow users to remove files before upload.

Create a testimonials section with avatar images, 5-star ratings, short feedback text, and rotating carousel animation. Include company logos for credibility. Enable swipe/scroll support on mobile.

Generate four dashboard cards showing KPIs with animated counters and mini line/bar charts. Add subtle gradients in the background and icons for context. Include percentage change indicators with arrows (up/down).

Build a 3-column responsive feature grid with icons and brief descriptions. Add hover effects that highlight the card, and enable a “Learn More” modal on click. Ensure mobile responsiveness and accessibility.

Create a vertical progress timeline with 5 project milestones. Each milestone should include an animated progress icon, a colored status badge (e.g. completed, in-progress), and expandable sections with more details.

Build a smart search bar component with real-time autocomplete suggestions. Show recent search history, categorized results, and smooth dropdown animation. Include keyboard navigation and icon indicators for categories.

Design three responsive pricing cards with subtle hover animations. Include a badge for “Most Popular” on the middle tier with a soft gradient. Each card should list 4 features with check icons and a CTA button. Add responsive layout and smooth...

Make the UI pixel-perfect according to Figma or design specs. You can adjust margins, paddings, alignment, and visual elements—but do not modify component logic, props, state, or API integration. Ensure app behavior is unchanged after visual...

Modernize the UI using updated styling (e.g., rounded corners, shadows, hover states). Do not change the structure, props, or any logic behind components. Confirm through testing that every feature works exactly as before.

Run a visual regression audit on the UI. Identify purely visual bugs or inconsistencies and fix them. Do not touch component logic, state, or API behavior. Use screenshots or snapshots to verify visual integrity remains consistent.

Improve the accessibility of the UI by adding ARIA labels, semantic tags, and better contrast ratios. Do not change any app logic, interactivity, or data flow. Ensure these improvements do not introduce regressions or break the original...

Replace raw values (e.g., #000000, 16px) with design tokens from the existing design system. Apply only visual changes—colors, spacing, typography. Do not affect functional code or app logic. Test to ensure the UI behaves exactly the same.

Refactor UI code to remove unused CSS classes, inline styles, or duplicated stylesheets. Do not remove any functional code or impact component behavior. After refactoring, test each component to ensure nothing is visually or functionally broken.

Add a dark mode theme to the UI using CSS variables or a theme switcher. Do not touch component logic, state, or API integrations. Your focus is purely visual. Ensure that toggling between modes does not interfere with the app’s logic or data.

Go through the entire UI and ensure consistent usage of fonts, button styles, border radius, and spacing. You are only allowed to touch CSS/styling—do not alter any component logic, state, or data handling. Test thoroughly to confirm that user...

Update the existing UI to support responsiveness across mobile, tablet, and desktop. Do not modify state logic, component behavior, or API calls. Focus only on layout and style (media queries, flex/grid, etc). Ensure the app still functions the...

You are a frontend engineer tasked with polishing the UI without affecting app logic. Focus on improving spacing, color consistency, typography, and visual hierarchy. Do not change component structure, logic, state, or API calls. After each...