Designs 01 / 03
Designs Overview
What a DevDojo design is — a single, self-contained web page built from HTML, CSS, and JS panes with an AI assistant — and the flow from a prompt to a published, remixable page.
A design is the smallest creative unit in DevDojo: one visual canvas built by describing what you want to an AI assistant. Where an app is a full Laravel codebase and a Site is a multi-page website, a design is ideal for landing pages, pricing sections, hero concepts, dashboards, and reusable UI blocks you want to see live in seconds.
What a design is
Every design is composed from three code panes that DevDojo assembles into one complete HTML document:
- HTML — the body markup of the page.
- CSS — supplemental styles, plain Tailwind CSS v4 utilities or hand-written CSS, your choice — there's no separate mode to pick.
- JS — any interactions the page needs.
A design carries its own name, an auto-generated slug, its full AI chat history, and up to 30 version snapshots. It lives entirely in your DevDojo account — there is no repository behind it — and it can be published to a public URL, remixed by the community, duplicated, or exported as a ZIP at any time.
Every design keeps its exact CSS. There's no contract to choose when you create. Write plain CSS (or raw hex colors) for pixel-exact styling everywhere it goes, or build with the platform's semantic utility classes (bg-background, text-primary, …) and it will pick up whatever palette a Site defines when you insert it from the Library — through ordinary CSS, no extra step.
Creating your first design
Everything starts at /dashboard/designs, the Designs home (the old /designer URL redirects here). You'll need a verified email address to create a design.
- Choose a starting point. Describe a design, start with a blank canvas, or browse the 50 first-party starter blocks across heroes, pricing, features, FAQs, navigation, and more.
- Watch it stream. You land in the Designer workspace and the AI writes the page, streaming code token-by-token into the HTML, CSS, and JS editors while the live preview takes shape.
- Iterate. Keep chatting to refine the whole page, or click Select and pick a single element to change only that piece. Every AI change records a version you can restore.
- Reuse or ship it. Publish the design to make it available in the Library, insert it into a Site, share its public
/design/{slug}page, or export a ZIP. See Publishing & Community.
Prefer to write the code yourself? Choose start with a blank canvas — the workspace opens empty with the AI on standby.
Your design library
The Yours tab at /dashboard/designs lists everything you've made, right below the prompt. Each card shows a live, scaled-down preview of the actual design, when it was last updated, and its status — a pulsing green dot means Live (published), grey means Draft. From a card you can jump back into the canvas, open the live page, download a ZIP, duplicate, or delete.
AI engines and plans
Each generation runs on the engine you pick in the chat's engine picker:
- Claude, OpenAI, Gemini, Grok, Kimi, Qwen, DeepSeek, and MiniMax — available on Pro plans.
- Z.ai — available to everyone, including free accounts.
The picker remembers your last-used engine per design. Locked engines appear disabled with an upgrade hint. Generations are rate-limited to 10 per minute, and prompts can be up to 4,000 characters.
Where to go next
- The Designer — the workspace itself: panes, element-scoped edits, versions, shortcuts, and settings.
- Publishing & Community — publish to a public URL, reuse designs from the Library, and remix other work.
- Apps Overview — when you need a full application rather than a single page.