AI Project: Convert Screenshots into Pixel-Perfect UI Code with Grok Vision & Next.js 15 | Src Code

[@BugNinza]

app/api/vision/route.ts:
prompt: text: "Generate a complete, single HTML file that exactly replicates the screenshot's UI. Requirements:
- Use a single HTML file with embedded CSS in tag
- Include any necessary JavaScript in tag within the same file
- Use Tailwind CSS classes for styling
- Ensure pixel-perfect visual reproduction
- Include all functional elements
- Minimize external dependencies
- Provide ONLY the raw HTML file code, without any additional explanation or comments",
components/ImageUploader.tsx:
svg:
app/global.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #f4f4f8;
--foreground: #1a202c;
--primary: #3182ce;
--secondary: #4a5568;
--accent: #6b46c1;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #121721;
--foreground: #e2e8f0;
--primary: #4299e1;
--secondary: #718096;
--accent: #9f7aea;
}
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--secondary);
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 4px;
}
tailwind.config.ts:
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
primary: "var(--primary)",
secondary: "var(--secondary)",
accent: "var(--accent)",
},
},
},
plugins: [],
};