Try Claude
SEO AnalysisAudit pages for ranking issues
AI Tools for UI Designers
AI tools that help UI designers generate color palettes, screenshot competitor UIs, check WCAG contrast, and create visual assets.
Get started for free
Works in Chat, Cowork and Code
#6366F1 (500) on White
3.1:1 — Fails AA (large text only)
#4F46E5 (600) on White
5.9:1 — Passes AA
#4338CA (700) on White
7.6:1 — Passes AAA
#3730A3 (800) on White
10.4:1 — Passes AAA
#C7D2FE (200) on #0A0A0A
9.8:1 — Passes AAA (dark bg)
Color system and token generation
Build a complete color token system from a brand hex color — tint and shade scales from 50 to 900, semantic color tokens for states (error, warning, success), and WCAG contrast ratio verification for every text combination. Ship a design system that is accessible from day one.
My brand primary is #6366F1. Generate the full 50–900 scale, flag which tones pass WCAG AA on white (4.5:1), and suggest a semantic color for error (#FF0000 family) that passes AA on white.
Generated 11-step scale: 50 (#EEF2FF) through 900 (#312E81). AA on white: 600 (#4F46E5) at 5.9:1, 700 at 7.6:1 (AAA), 800+ all AAA. For error: #DC2626 (Red 600) passes AA at 4.7:1 on white. Semantic tokens: --color-primary-action: 600; --color-primary-text: 700; --color-error: Red 600.
ToolRouter get_palette
#EEF2FF (50) on White
1.1:1 — Fail (background use only)
#4F46E5 (600) on White
5.9:1 — Passes AA ✓
#4338CA (700) on White
7.6:1 — Passes AAA ✓
#DC2626 (Error) on White
4.7:1 — Passes AA ✓
Semantic tokens
--primary-action: 600 · --primary-text: 700 · --error: Red 600
Competitor UI visual research
Screenshot production UIs of design-forward SaaS products at exact viewport sizes for competitive audits. Build a systematic reference library of how leading products handle navigation, typography, data density, and dark mode.
Capture the main dashboard of Linear, Vercel, and Notion at 1440px and 375px. I want to compare sidebar width, navigation typography scale, and empty state treatments.
Captured 6 screenshots. Desktop: Linear sidebar 240px, uses 13px mono for project names. Vercel: 260px sidebar, 14px sans-serif with icon grid. Notion: 240px, 14px with emoji icons. Mobile: all three collapse to full-screen left drawer with hamburger. Linear uses keyboard shortcut hints in sidebar; others do not.
Marketing and hero asset generation
Generate product mockups, hero images, and marketing visuals from text prompts. Create app screenshots in device frames, illustration-style hero sections, and product UI floating on gradient backgrounds for landing pages.
Generate a marketing hero image: a MacBook showing a dark-mode analytics dashboard with charts and a sidebar, floating on a deep purple to indigo gradient background. Modern, clean, tech-forward.
Generated hero image: MacBook Pro with M1 chip rendering, dark dashboard with purple accent charts, subtle glow on the screen. Background: #1E1B4B to #312E81 radial gradient. Perspective angle at 15°. Resolution: 2048x1152px ready for Retina displays.
Accessibility color contrast checking
Validate every color pair in your component library against WCAG 2.1 AA and AAA standards before handoff to development. Fix contrast failures at the design stage — not after a developer has already built the component.
Check WCAG contrast for my button states: primary #0F62FE on white, hover #0353E9 on white, disabled text #8D8D8D on #F4F4F4 background, and ghost button #0F62FE text on transparent/white.
Primary #0F62FE on white: 5.9:1 — AA pass. Hover #0353E9 on white: 7.1:1 — AAA pass. Disabled #8D8D8D on #F4F4F4: 2.6:1 — FAIL (minimum 4.5:1 for text). Ghost #0F62FE on white: 5.9:1 — AA pass. Fix disabled: use #525252 text on #F4F4F4 (4.7:1) or #767676 minimum.
ToolRouter check_contrast
Primary #0F62FE on White
5.9:1 — Passes AA
Hover #0353E9 on White
7.1:1 — Passes AAA
Disabled #8D8D8D on #F4F4F4
2.6:1 — FAILS AA (needs 4.5:1)
Ghost #0F62FE on White
5.9:1 — Passes AA
Fix: Disabled text
Use #525252 on #F4F4F4 → 4.7:1 (AA pass)
QR code and brand asset generation
Generate custom-styled QR codes for campaign landing pages, business cards, and event materials. Create print-ready QR codes with logo overlays, custom colors, and rounded vs square module styles.
Create a QR code for https://myapp.com/download. Use brand color #6366F1 for the modules, white background, rounded corners, and add our logo in the center. I need it at 1200x1200px for print.
Generated 1200px QR code: #6366F1 modules with white background, corner squares use rounded style, 30% center logo overlay area. Error correction level H to compensate for logo obscuring ~25% of code. Tested scannable on iOS and Android. PNG and SVG formats available.
Design trend research
Research current UI design trends — glassmorphism, bento grids, dark mode patterns, variable fonts — with examples from leading products. Ground design decisions in what is currently resonating in production UIs.
Research current SaaS dashboard UI trends in 2025: what color systems, typography scales, grid patterns, and component styles are leading products using? I need inspiration for a dashboard redesign.
Top 2025 trends: (1) Neutral dark backgrounds (#0A0A0A to #1A1A1A) with vibrant single-accent colors. (2) Geist and Inter as default type faces at 14px base. (3) 4px border-radius on cards (tighter than before). (4) Bento grid layouts replacing uniform card grids. (5) Reduced chrome — no visible card borders, separation via background tint only. Examples: Vercel, Linear, Resend.
ToolRouter research
Background Colors
Neutral dark #0A0A0A–#1A1A1A + single vibrant accent
Typography
Geist and Inter at 14px base — tight leading
Card Radius
4px border-radius — tighter than 2023/2024
Grid Patterns
Bento grid layouts replacing uniform card grids
Chrome Reduction
No card borders — background tint separation only
Ready-to-use prompts
Build brand color scale
Generate a full 50–900 color scale from brand primary #6366F1. Include WCAG AA and AAA contrast ratios against white and #0A0A0A dark backgrounds. Suggest semantic token names for primary, hover, active, disabled, and focus states.
Screenshot design-forward SaaS
Capture the main dashboard UI of Linear.app, Vercel.com/dashboard, and Resend.com/emails at 1440px desktop width. I want to compare their navigation patterns, typography hierarchy, and data table designs.
Generate marketing hero image
Generate a product marketing hero image: a MacBook displaying a dark-mode SaaS dashboard with charts and a sidebar, floating above a deep indigo to purple gradient background. Modern, minimal, tech-forward style. 2048x1152px.
Check button contrast ratios
Check WCAG contrast ratios for my design system button palette: primary #0F62FE on white, success #24A148 on white, danger #DA1E28 on white, warning #F1C21B on white, and disabled text #8D8D8D on #F4F4F4.
Create branded QR code
Generate a 1200x1200px QR code for https://myapp.com/download. Brand color #6366F1 modules on white background, rounded corner squares, high error correction (level H), and a centered 25% logo area.
Remove background from product shot
Remove the background from this product UI screenshot and return a clean transparent cutout, ready for placing on any background color or gradient.
Research dark mode UI patterns
Research dark mode UI design best practices for SaaS dashboards in 2025: what background colors, accent color approaches, surface elevation systems, and border vs shadow patterns are leading products using.
Audit page accessibility
Audit https://myapp.com/settings for accessibility issues: color contrast on all text elements, keyboard focus visibility, form label associations, button accessible names, and heading hierarchy.
Tools to power your best work
Image OpsResize, convert & optimize images
Generate ImageAI image generation, 20+ models
Deep ResearchAI research reports with citations
QR Code GeneratorQR codes for links, WiFi & contacts
Web ScreenshotScreenshot any page at any viewport
Color ToolsPalettes, contrast, and color info
Background RemovalCut out subjects from any photo
165+ tools.
One conversation.
Everything ui designers need from AI, connected to the assistant you already use. No extra apps, no switching tabs.
New design system color tokens
Build a complete accessible color system from a brand color — generate scales, validate contrast, and verify against real UI screenshots.
Marketing landing page asset creation
Create hero images, product screenshots with backgrounds removed, and QR codes for a product launch landing page.
Competitive UI audit
Systematically capture and analyze competitor UIs before a redesign kick-off.
Frequently Asked Questions
Can Color Tools extract colors from an existing website for competitive analysis?
Color Tools works with hex, RGB, and HSL values you provide. To extract colors from a competitor site, take a screenshot with Web Screenshot, then use the color picker in your design tool to sample the colors before checking them with Color Tools.
Can Generate Image create assets in specific dimensions for Figma or web use?
Yes. Specify the exact dimensions in your prompt — for example "2048x1152px at 2x for Retina" or "1200x628px for Open Graph". Generate Image produces PNG files at the specified dimensions ready for direct import into Figma or use in web production.
Does the QR Code Generator produce vector (SVG) output for print use?
Yes. QR Code Generator can output both PNG and SVG. For print materials, request SVG output in your prompt — it is resolution-independent and scales to any print size without quality loss.
How does Web Screenshot handle JavaScript-heavy SaaS UIs with lazy-loaded content?
Web Screenshot uses a full JS rendering engine and waits for page load to complete before capturing. It handles lazy-loaded content for most public-facing pages. Authenticated dashboard states require the UI to be publicly accessible for capture.
Does the accessibility audit check interactive component states like focus rings?
The SEO analysis and Page Speed Test accessibility audit check static HTML — they catch missing alt text, absent labels, and heading hierarchy issues. For dynamic interactive states like focus ring visibility, manual keyboard testing or Axe browser extension testing is needed in addition.
Give your AI superpowers.
Get started for free
Works in Chat, Cowork and Code