Use cases

Built for real builders

From landing pages to dashboards and deployable URLs — see how teams use Modurian across the product lifecycle.

12+

Common workflows

3

Agent modes

1-click

Deploy to Spaces

Websites & marketing

Landing pages, portfolios, and launch sites — responsive HTML/CSS from a single brief.

SaaS landing pages

Build mode

Describe your product — agents scaffold HTML, CSS, and JS with hero sections, pricing, and responsive layouts.

Example prompts

  • Create a dark-themed landing page for a devtools startup with three pricing tiers
  • Add a testimonials section and gradient hero to the existing index.html
  • Make the pricing table mobile-friendly and match our purple brand color

Portfolio & personal sites

Build mode

One-page or multi-section sites with about, projects, and contact — polished typography without a separate design tool.

Example prompts

  • Build a minimalist portfolio for a product designer with project cards and a contact form
  • Add a dark mode toggle and smooth scroll between sections
  • Replace the hero with a full-width photo and short bio

Waitlist & launch pages

Build mode

Email capture, social proof, and clear CTAs for pre-launch products — ideal for validating ideas fast.

Example prompts

  • Waitlist page with headline, three benefits, email form, and footer
  • Add a countdown banner and FAQ accordion above the footer
  • Wire the form to show a success message (no backend yet)

Snap-to-Build: screenshot to code

Build mode

Upload a screenshot of any website or UI design — vision AI analyzes every section, color, and component, then rebuilds it as responsive HTML/CSS.

Example prompts

  • Rebuild a competitor landing page from a screenshot
  • Clone a UI design from Dribbble into working code
  • Turn a wireframe mockup into a responsive website

Apps & interfaces

Dashboards, stores, and multi-page experiences with real structure and styling.

Internal dashboards

Build mode

Admin panels with sidebars, KPI cards, charts placeholders, and data tables — great for ops and internal tools.

Example prompts

  • Admin dashboard with sidebar nav, revenue stats cards, and a sortable user table
  • Add a filter bar and empty state when the table has no rows
  • Style the sidebar with icons and highlight the active nav item

E-commerce & storefronts

Build mode

Product grids, cart UI, and checkout flows — start from a template and iterate in chat.

Example prompts

  • Start from the e-commerce template and add a working cart drawer
  • Product detail page with image gallery, size selector, and Add to cart
  • Checkout summary page with order totals and a placeholder payment button

Blogs & multi-page sites

Build mode

Article lists, post layouts, and shared navigation across pages — structure that scales beyond one screen.

Example prompts

  • Multi-page blog with home, post template, and about page linked from a shared nav
  • Blog index with featured post, tags, and readable article typography
  • Add author byline and related posts at the bottom of each article

Plan, fix & extend

Use the right agent mode before you ship — architecture, debugging, and refactors.

Plan before you build

Plan mode

Plan mode maps file structure, dependencies, and implementation steps before any code is written.

Example prompts

  • Architect a multi-page blog with CMS-style routing — list files and steps only
  • Plan a todo app: data model, components, and build order without creating files
  • Review my project and propose a refactor plan for splitting CSS and JS

Debug & iterate

Build mode

Ask for explanations in Ask mode; switch to Build to patch files with full project context.

Example prompts

  • Fix the broken login form validation in app.js
  • Why is the mobile menu not closing after a link click? Then fix it
  • The deploy preview shows a 404 on /about — find and fix the broken link

Refactor & redesign

Build mode

Restructure CSS, extract components, or refresh UI while keeping behavior — agents read what you already have.

Example prompts

  • Convert inline styles to a separate stylesheet without changing layout
  • Redesign the dashboard cards to use a softer shadow and rounded-2xl corners
  • Split index.html into header, main, and footer partials if the project supports it

Forms & integrations

Build mode

Contact forms, webhooks placeholders, and client-side validation — ready to hook up to your API later.

Example prompts

  • Contact form with name, email, message, and client-side validation messages
  • Newsletter signup with loading state on submit (mock API for now)
  • Add fetch to POST form data to a placeholder endpoint and handle errors

Ship & share

Preview in the workspace, deploy to a public URL, and demo progress to your team.

Prototype to production

Build mode

Preview locally in the workspace, deploy to Spaces for a public URL, or export when you are ready.

Example prompts

  • Deploy the todo app and give me the public URL
  • Run npm install and npm run build, then fix any errors
  • Prepare the project for deploy — check index paths and asset links

Team demos & handoff

Build mode

Session history, templates, and shareable deploy links make it easy to show progress in meetings.

Example prompts

  • Duplicate the landing template and rebrand for Acme Corp in one session
  • Summarize what changed in this session for a standup update
  • Polish the demo: fix spacing on mobile and add one screenshot-ready hero

Copy, paste, customize

Start with a prompt like these in Build or Plan mode — then iterate in chat until it matches your vision.

Dark SaaS landing with pricing tiers and FAQAdmin dashboard with sidebar and user tableScreenshot to code — rebuild a landing page from an imageWaitlist page with email capture and social proofE-commerce grid + cart from the store templatePlan a blog architecture before writing codeFix mobile nav and form validation bugsDeploy and share the public Spaces URL

From idea to live URL

Most projects follow the same rhythm — describe, build, preview, ship.

Step 1

Describe

Tell the agent what you want — layout, colors, pages, or constraints.

Step 2

Plan or build

Use Plan for architecture, Build to create and edit files, Ask for Q&A.

Step 3

Preview

See changes live in the workspace preview as agents update your project.

Step 4

Deploy

Ship to Spaces for a shareable URL, or export when you are ready.

Ready to try your first prompt?

Sign in with Google, pick a template or describe your app, and send your first message.

Want mode details? See agent modes