Inspiration
The idea came from wanting to bridge visual design and code — taking something visual and translating it into pure HTML and CSS. CSS art has been a creative medium in the developer community, and the challenge of programmatically recreating images using only markup and stylesheets felt like an interesting problem to solve
What it does
Zen AI converts uploaded images into standalone HTML/CSS code that visually recreates the original image. The output uses CSS gradients, box-shadows, border-radius, transforms, clip-paths, and pseudo-elements to build the composition — no SVG, canvas, or external assets. Users can preview the result, copy the code, or download it as a self-contained HTML file.
How we built it
The frontend is plain HTML, CSS, and JavaScript with no frameworks or dependencies. Images are read client-side via the FileReader API. The generated code is rendered inside a sandboxed iframe for preview. The project uses the Gemini API for image analysis and code generation, with prompt engineering to produce structured, self-contained CSS art.
Challenges we ran into
Getting the model to output clean, render-ready HTML without markdown formatting required iterative prompt refinement. The CSS art output can be lengthy, so adjusting the output token limit was necessary to avoid truncated responses. Cross-origin iframe issues also came up when rendering generated code in the preview panel.
Accomplishments that we're proud of
The generated CSS art often captures the composition and color palette of the original image remarkably well using only CSS primitives. The workflow is seamless — upload, generate, preview, copy — all within a single page with no backend.
What we learned
How to craft effective prompts for structured code generation, how to handle multimodal inputs (images + text), and how to sandbox and render dynamically generated HTML safely in the browser.
What's next for Zen ai
- Support for adjusting the output style (minimalist, abstract, detailed)
- Comparison slider between original image and CSS rendering
- Export to CSS-only files for use in web projects
- Gallery of community creations
