I made an AI image to Bricks converter

1

Hey!

I made an image to Bricks and HTML/CSS to Bricks AI converter. At first I made it to make the “wireframing” part faster for me, but it can output an 80-90% done section now.

You can use it here for FREE with your own OpenRouter key:

It has hundreds of lines of prompt, but still FAR from perfect (especially the ACSS part).

You can choose between the newest models, some work better than others.. GPT 5.1 takes a lot of time to start, but I couldn’t figure out why.

I get the best results, (when working from Figma,) if I export and convert each section one by one.

It’s pretty cheap to run too:

Screenshot 2025-12-10 at 17.54.27
Screenshot 2025-12-10 at 17.54.271168×619 78.1 KB

Security Measures:

  • All communication uses HTTPS (encrypted in transit)

  • API keys never appear in server logs

  • API keys never stored in database or files

  • API keys only exist in browser memory/localStorage

  • Server acts as a proxy only - no persistent storage

  • No user data is collected or stored

  • No analytics or tracking of API keys

  • All processing happens in real-time, no data persistence

It doesn’t even have a database connected, lol. Best practice is to make a new key, only for the converter, and set a credit limit to it, just to be sure.

There is a chat function too, to refine after conversion!

It saves me a lot of work, I hope it will help you too! If you have feedback please use the button on the site or drop a DM here!

Have fun! :raising_hands:

2 Likes
2

Hi cool, I’ll try it, but I don’t use acss? Only advanced themer… is that okay too?

3

It’s only taught to output the ACSS classes and variables, but ACSS is disabled by default. If you leave it turned off the output will have normal classes and CSS styling. :slight_smile:

4

I always get this error

Error

Warning: No content received from the API.

5

Swapped GPT 5.1 for 5.2. Now that seems to be working, with the other models too.

I checked with a fresh key, all models, with and without ACSS option.

Please check now. If it doesn’t work still, can you share details? (Browser, Model, Image or HTML/CSS, etc.)

6

Does it work fine now?

7

Tried all models with or without ACSSstill getting same error

PAYLOAD

{“html”: "  \n    \n      Build Better Products\n      \n        Design, develop, and launch faster with clean and scalable solutions.\n      \n      \n        Get Started\n        Learn More\n      \n    \n  ",“css”: “/* Modifier /\n.hero–centered {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n\n/ ===== Elements ===== /\n.hero__content {\n  max-width: 700px;\n}\n\n.hero__title {\n  font-size: 3rem;\n  font-weight: 700;\n  margin-bottom: 1rem;\n}\n\n.hero__subtitle {\n  font-size: 1.25rem;\n  line-height: 1.6;\n  margin-bottom: 2rem;\n  opacity: 0.9;\n}\n\n.hero__actions {\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n/ ===== Buttons ===== /\n.hero__button {\n  padding: 0.75rem 1.75rem;\n  font-size: 1rem;\n  border-radius: 4px;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n/ Button Modifiers /\n.hero__button–primary {\n  background-color: #ffffff*;\n  color:* #1e40af*;\n}\n\n.hero__button–primary:hover {\n  background-color:* #e5e7eb*;\n}\n\n.hero__button–secondary {\n  border: 2px solid* #ffffff*;\n  color:* #ffffff*;\n}\n\n.hero__button–secondary:hover {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n\n/* ===== Responsive ===== */\n@media (max-width: 768px) {\n  .hero__title {\n    font-size: 2.25rem;\n  }\n\n  .hero__subtitle {\n    font-size: 1.1rem;\n  }\n}”,“apiKey”: “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”,“model”: “openai/gpt-5.2”,“useACSS”: true,“stream”: true}

REPOSNSE

data: {“content”:“”,“status”:“starting”}

data: {“error”:“OpenRouter API error: 402 - {“error”:{“message”:“This request requires more credits, or fewer max_tokens. You requested up to 32768 tokens, but can only afford 2857. To increase, visit  and upgrade to a paid account”,“code”:402,“metadata”:{“provider_name”:null}},“user_id”:“user_35QREy4qPTxVhMB9WO4dXsgZECv”}”}
8

Hi! According to the API response, you have set a credit too low for the key, or you don’t have enough for the run.