Skip to content
Work

Web app · AI design tool

Racik

A Canva-style design editor with AI — write an idea and Claude lays out the whole design while an image model makes the visuals, and everything stays editable, down to PPTX export with real text.

Role
Full-stack Developer
Timeline
2026
Context
Personal project
Stack
  • Vue 3
  • Nuxt
  • fabric.js
  • Go
  • PostgreSQL
  • Elasticsearch
  • Docker

Teaser video

From a one-line prompt to an editable multi-page design.Live site View on GitHub

What it does

Students, designers and marketing teams usually bounce between a chatbot for the copy, a separate image generator for the visuals and Canva or PowerPoint to put it all together. Racik does it in one place: the first page is a prompt box, no sign-up needed (a guest account is created automatically), and one click later the design opens in the editor.

  • Magic Design: a prompt becomes a complete multi-page design — layout, copy, palette, fonts and AI-generated images. Magic Redesign reworks the active page from an instruction such as "more minimal".
  • A real editor, not a picture: text, images, shapes, icons, layers (reorder, lock, hide), groups, alignment with smart guides, filters, undo/redo, Magic Resize and a board that shows every page side by side.
  • Export to PNG/JPG, multi-page PDF, SVG and PPTX with editable text.
  • It learns your taste: rate results with 👍/👎 and a note, set a Brand Kit (colors, fonts, logo, tone), and both are fed back into the next prompt.

How it's built

  • Frontend: Nuxt 3 SPA with a fabric.js v6 canvas; a JSON "design spec" is the bridge between AI output, templates and editable canvas objects. Export uses pptxgenjs, jspdf and jszip.
  • Backend: plain Go net/http (no framework), PostgreSQL via pgx with migrations on start, JWT and password hashing from the standard library.
  • AI: Claude writes the layout and copy through an OpenAI-compatible gateway; image placeholders are generated in parallel. Admins pick the models per feature from a model catalog — visitors never see which provider is behind it.
  • Usage-based balance: every AI call is charged up front atomically and refunded automatically when a vendor or an image fails. All AI requests are logged, with a system log in Elasticsearch.
Chat with me