[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Separator } from "@/components/ui/separator" import { AlertCircle, CheckCircle, Globe, Search, Star } from "lucide-react" interface LintResult { score: number issues: string[] tips: string[] } interface UXAnalysis { copywriting: LintResult layout: LintResult emphasis: LintResult accessibility: LintResult reward: LintResult overallScore: number } export default function UXLinterPage() { const [url, setUrl] = useState("") const [isAnalyzing, setIsAnalyzing] = useState(false) const [analysis, setAnalysis] = useState(null) const [previewUrl, setPreviewUrl] = useState("") const analyzeWebsite = async () => { if (!url) return setIsAnalyzing(true) setPreviewUrl(url) // Simulate analysis delay await new Promise((resolve) => setTimeout(resolve, 2000)) // Mock analysis results based on common UX issues const mockAnalysis: UXAnalysis = { copywriting: { score: 3, issues: ["Text blocks are too long", "Missing clear value proposition"], tips: [ "Break up long paragraphs into digestible chunks", "Lead with benefits, not features", "Use active voice and conversational tone", ], }, layout: { score: 2, issues: ["No clear CTA above the fold", "Poor visual hierarchy"], tips: [ "Place primary CTA prominently above the fold", "Use whitespace to create visual breathing room", "Establish clear information hierarchy with typography", ], }, emphasis: { score: 4, issues: ["Multiple competing CTAs"], tips: [ "Limit to one primary action per page section", "Use color and size to create CTA hierarchy", "Make the next desired action obvious", ], }, accessibility: { score: 3, issues: ["Small text size", "Missing alt text on images"], tips: [ "Use minimum 16px font size for body text", "Add descriptive alt text to all images", "Ensure sufficient color contrast (4.5:1 ratio)", ], }, reward: { score: 2, issues: ["No success feedback", "Missing progress indicators"], tips: [ "Show clear success states after user actions", "Provide feedback for form submissions", "Use progress indicators for multi-step processes", ], }, overallScore: 2.8, } setAnalysis(mockAnalysis) setIsAnalyzing(false) } const getScoreColor = (score: number) => { if (score >= 4) return "text-green-600" if (score >= 3) return "text-yellow-600" return "text-red-600" } const getScoreBadgeVariant = (score: number) => { if (score >= 4) return "default" if (score >= 3) return "secondary" return "destructive" } return (

{/* Header */}

UX Linter

Analyze any website for UX best practices and get actionable insights to improve usability and conversions

{/* URL Input Form */} Website Analysis Enter a website URL to analyze its UX against 5 key criteria

setUrl(e.target.value)} className="flex-1" onKeyDown={(e) => e.key === "Enter" && analyzeWebsite()} />

{/* Results Layout */} {(previewUrl || analysis) && (

{/* Website Preview */}

Website Preview

{previewUrl ? (