DEV Community

Amani Moses
Amani Moses

Posted on

How to Use Claude Design 2.0 to Create High-Quality UI (Without AI Slop)

#claude #frontend #design #art

Avoiding "AI Slop" in Design

"AI slop" happens when you let artificial intelligence build everything all at once with zero guidance, resulting in generic, corporate-looking interfaces. By taking on the role of a creative director—providing specific style references, establishing a design system, and tweaking the output iteratively—you can steer AI toward unique, high-quality UI.

Access & Requirements

Before getting started, note where and how to access the tool:

  • Availability: Claude Design 2.0 (Design Labs) is accessible via the Claude Desktop App and web interface.
  • Account Tiers: It requires an active paid plan (Claude Pro, Team, or Enterprise). Free tier accounts do not currently have access to Design Labs.

Step 1: Gather Real-World Design Inspiration

Before opening any AI tool, establish the visual direction you want to pursue.

  • Browse Live Sites for Style: Use platforms like Mobbin to look at real, production websites rather than static concepts.
  • Filter by Vibe: Search categories by style. For example, selecting a "Fun" filter yields vibrant, interactive sites with custom animations—a sharp contrast to standard corporate templates.
  • Collect Visual References: Take screenshots of specific components (hero sections, cards, layout structures) across different sites that capture your target aesthetic.

Step 2: Set Up a Custom Design System in Claude

Instead of prompting a full web page from scratch, start by establishing your brand identity inside Claude Design.

  1. Launch Design Labs: Open the desktop app, navigate to Design Labs, and select Design Systems > Create Design System.
  2. Define Brand Context: Enter your company name and a brief pitch (e.g., FunAddict – We make running fun).
  3. Upload Reference Assets: Drag and drop your curated screenshots directly into the asset uploader.
  4. Prompt the System: Instruct Claude to capture the collective mood, colors, and playful UI styles from your screenshots to generate a single, coherent design system.

Step 3: Refine Your Design System Tokens

Once Claude generates the baseline system, review and customize its tokens to give your brand a distinct personality:

  • Brand Voice & Personality: Adjust the tone settings. For example, you can switch from standard placeholder copy to dark, sarcastic, or comedic microcopy.
  • Color Palette: Open the edit view to fine-tune primary and hover states. Choose high-contrast accent colors (such as vibrant purples and bright accents) over generic defaults.
  • Custom Component Details: Direct the AI to add specific elements to recurring components (e.g., placing a custom running-person badge encased in a white circle at the top of sticker cards).
  • Publish: Once satisfied with the foundations, toggle the design system to Published so it can be referenced in page builds.

Step 4: Build the Hero Section

With your design system active, generate your main layout with a structured prompt.

Create a landing page hero section using our FunAddict design system. Central to this section, create an animated SVG of a cartoonish running figure. Include a prominent centered headline, a supporting sub-headline, a primary CTA button to download the app, and floating sticker cards highlighting key features (like GPS tracking and rewards).
Enter fullscreen mode Exit fullscreen mode

Step 5: Iterative Refinement & Polish

The initial output gives you a functional baseline, but direct feedback turns it into a polished product.

  • Clean Up Clutter: Prompt the tool to remove awkward visual elements like out-of-place dashes or odd lines.
  • Integrate Custom Graphics: If the generated mascot needs work, draft a rough character layout in Figma or generate a base image, then feed it back into Claude as visual context.
  • Add Interactive Motion: Ask Claude to implement smooth scrolling libraries (like Lenis) or targeted CSS animations—such as an eye-tracking effect or a rolling background globe beneath the mascot.

Step 6: Exporting & Integrating with Your Backend

Claude Design generates clean, standard frontend code (HTML, CSS, JavaScript, or React components). To make this UI functional in real-world web or mobile applications:

  • Web Application Integration: Export the markup/React components directly into your codebase (e.g., Next.js, Vite, or Go/Python HTML templates). Replace static placeholder text and hardcoded lists with dynamic state or API responses.
  • Mobile & Cross-Platform Apps: Convert the generated layout structure into mobile component trees (React Native, Flutter) or embed the responsive HTML directly using Native WebViews.
  • Connecting Backend APIs: Wire up buttons, forms, and interactive widgets to trigger fetch/axios requests against your REST or WebSocket endpoints (e.g., binding the "Download App" button or user authentication forms to live backend routes).

Top comments (1)

Collapse
 
merbayerp profile image
Mustafa ERBAY •

The “creative director” framing is the part that makes sense to me. Giving the model references, constraints and a design system first is very different from just asking it to “build a modern landing page.”

I’d still separate high-quality visual output from production-ready UI though. Once exported, I’d want to review accessibility, responsive edge cases, component reuse and performance just like any other frontend code.

AI can get you surprisingly far on the visual direction now, but the last 20% still feels very human.