Modurian logo
Modurian
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.

Get started freeExplore product

Want mode details? See agent modes