How I Built an AI That Extracts Design Styles From Any Website using Firecrawl, Mistral, Supabase
Learn how Firecrawl’s branding format, Mistral Vision, and Supabase power an AI that extracts full design systems from any website.
I can't design. But I can code my way out of it.
I don’t know difference between Neo-Brutalism and Minimalism. I can’t tell you why some websites feel premium while others feel cheap. I just know what I like when I see it.
And when I see a beautiful website? I want to build something that looks like that.
But here’s the problem: I don’t have the deep technical design knowledge. I’m a non-technical guy trying to build products that look good.
My process was painful — screenshots, inspecting elements, trying to decode the “secret sauce.”
I needed a better way. Something that could look at any website and hand me the recipe. That was the birth of “ designstyles.xyz”
What I Built (In Short)
I built designstyles.xyz — a tool that lets you:
Paste any website URL
Instantly extract its design style (Minimalist, Neo-Brutalist, Glassmorphism, etc.)
Get colors, typography, and layout cues
Copy a ready-to-use CSS / prompt to recreate the look
All without knowing design theory.
If you would like to know about the latest updates in AI & Productivity do subscribe
How I Built It: The End-to-End Architecture
User Input → Astro Frontend → Firecrawl API
Firecrawl → Screenshot + Branding JSON → Mistral Vision
Mistral → Design Classification → Supabase (JSONB)
Database → Render Brand Card → Copy-to-Clipboard
The Discovery: Firecrawl’s Branding Format
I went looking for tools that could “see” and understand websites. I found Firecrawl.
Their /scrape endpoint with the branding format is a something that I needed. One API call extracts everything:
{
"url": "https://example.com",
"formats": ["branding", "screenshot"]
}The branding format returns structured design data:
{
"colors": {
"primary": "#1a1a1a",
"secondary": "#f5f5f5",
"accent": "#1d9bf0",
"text": "#333333"
},
"typography": {
"fonts": ["Inter", "SF Pro"],
"headingSizes": [48, 32, 24],
"lineHeight": 1.6
},
"assets": {
"logo": "https://...",
"favicon": "https://..."
}
}Adding Visual Intelligence: Mistral Vision
Structured data is great, but classifying design styles is visual. That’s where Mistral comes in.
Instead of chasing giant, expensive models, Mistral focuses on high signal per parameter — models that are small, sharp, and practical for real products.
I use the Mistral’s Ministral 3B vision-capable model because it’s the perfect trade-off for this use case. At ~3B parameters, it’s cheap, fast, and surprisingly good at visual reasoning. I don’t need a massive model to write essays — I need one that can look at a screenshot, understand layout, spacing, typography, and vibe, and give me a clean, structured design judgment.
Why Ministral 3B works so well here:
Cost-effective: Inference is cheap enough that each analysis costs cents, not dollars
Fast: Low latency keeps the UX snappy
Good visual intuition: Strong enough to classify design styles and hierarchy without fine-tuning
No overkill: Bigger models wouldn’t add meaningful value for this task
In short: Mistral 3B is “just enough intelligence” — which is exactly what you want when you’re turning screenshots into product decisions at scale.
Model: https://huggingface.co/mistralai/Ministral-3-3B-Instruct-2512
Check out this powerful demo to know its capabilities : https://huggingface.co/spaces/mistralai/Ministral_3B_WebGPU
I pass the Firecrawl screenshot to Mistral’s vision model with this prompt:
Analyze this website screenshot:
- Identify the design style (Neo-Brutalism, Glassmorphism, Minimalism, etc.)
- Describe the visual hierarchy
- Generate a CSS/prompt to replicate this aestheticWhy This Stack?
Firecrawl handles JavaScript-heavy sites that break traditional scrapers. The branding format is purpose-built for design extraction. ( around $0.006 per credit)
Mistral is cheap ($0.07/1K images) and fast. No fine-tuning needed — it understands design aesthetics out of the box.
Supabase JSONB stores nested design data without rigid schemas. Query any color, font, or style instantly.
Total cost per analysis: ~$0.0067
Builder Tip: Self-Host Supabase to Avoid Extra SaaS Costs
I didn’t use Supabase Cloud.
For Designstyles, I self-hosted Supabase on my Hostinger VPS ($5 per month). My needs were simple (Postgres + JSONB). Hostinger is affordable for smaller projects like mine.
Why this worked:
Supabase is open-source → easy to self-host
JSONB is perfect for nested design data
No usage-based pricing
One less SaaS bill
I already had the server running, so the extra cost was basically zero.
Final Thoughts
This started with frustration, not a startup idea.
I didn’t need better design taste—I needed a faster way to borrow it. Most websites already expose their design decisions; Designstyles simply turns that into something usable.
If you’re a builder who struggles with design, try it once:
paste a URL, get the design system, and move on with your build.
If you’re building solo, here’s the lesson:
Don’t overbuild. Don’t overthink.
Pick cheap primitives, connect them well, and ship.