Announcing No Cost AI Powered MechCloud Page Designer

Announcing No Cost AI Powered MechCloud Page Designer

Shailendra Singh's photo
·

4 min read

Introduction

MechCloud Page Designer now has AI capabilities, allowing you to add native (HTML) or custom components to a page by simply giving instructions in plain English. The AI-powered MechCloud Page Designer is available for free.

Use cases

  • You can use it to create mockups for a (multi-page) website.

  • You can use it to create demo pages for any vuejs component library. All you need to do is create a micro app and reference all the components in a component library in this micro app making sure all the components are in global scope. Finally configure this micro app at team or site level in order to consume it in a site in MechCloud website builder.

  • You can use it to create html mockups for a website which is as close to the real websites as possible. For vuejs based websites, reactivity, navigation and any complex logic (which is difficult to simulate in a tool like Figma) will work like the real website. With this the typical design and development process will be like this -

    • Create you design system in a tool like Figma.

    • Convert your design system to a css framework.

    • Use this css framework to create your UI component library.

    • Load you css framework and UI component library in MechCloud using a micro app.

    • Use MechCloud AI Page Designer to create mockups / page designs using these reusable assets by giving commands in plain english and eliminate the pain of converting a Figma page design to the code from this point onward.

  • Eliminate the need of designing (an internal) website first in Figma and then converting it to the code by taking reusable code and first/third party css framework and creating mockups with these reusable assets where complex logic works like the real website and which are very close to the real website in functionality.

How to add native (html) components

Here are some examples of how you can add native (html) components to a page using AI enabled page designer -

  • add a h1 heading with 'Button Variants' text

  • add a paragraph tag with 'Demo of different types of MechCloud buttons' text

  • Adding a css grid when every child is an image -

      Create a grid component with following grid areas -
    
      "area1 area1 area4"
      "area2 area3 area4"
    
      Each grid item should be an image with '<image_url>' as url.
    
  • Adding a css flex container with two buttons from MechCloud UI components library (issue below commands one by one) -

    • add a container with 1rem top margin, 1px dashed border, 0.5rem padding and 1rem gap

    • add a mech button component

    • add a mech button component

How to add components from MechCloud UI components library

In order to add a component from MechCloud UI component library, make sure that the prompt is in "add a mech <component_name> component" format. Here component_name is the name of the component which must be from the below list. A component name with multiple words in it can be specified in multiple formats. E.g. IconLink can be specified in any of the following formats -

  • IconLink

  • Icon Link

  • iconlink

  • icon link

Here are some of the supported components at this moment -

  • Breadcrumb

  • Button

  • ButtonBar

  • Checkbox

  • Dropdown

  • Icon

  • IconLink

  • LineSeparator

  • Link

  • LinkButtonsBar

  • ListEditor

  • MultiSelect

  • Notification

  • NumberRangeInput

  • Password

  • Select

  • Switch

  • Table

  • Tag

  • TagList

  • Text

You can access full list of components under MechCloud UI component library here.

Here are some examples of how to add components from MechCloud UI components -

  • Add a mech button component

  • Add a mech input text component

  • Add a mech icon link component

How to add demo or generic components

Any site created under Default (Managed) team has access to all the components from https://github.com/mechcloud/mechcloud-demo-microapp1 repository. To add a component from this repository to your page, simply use 'demo' keyword before the component name. Here are some examples -

  • Add demo hero component

  • Add demo pricing component

  • Add demo plan component

  • Add demo 'plan features group' component

For adding any other generic component, use a prompt in "add a <component_name" component" format. Multiple words in a component name can be specified in case insensitive manner and can be separated with a space character.

Adding css classes and styles

You can add css styles and classes using plain english commands too. Here are some examples -

  • Add a h2 heading with blue font color

  • Add a div with yellow background and 1px solid border

  • Add a div with class1, class2 classes

Updating component props and css styles/classes

You can update properties of a component using the properties editor which is displayed in the right most column when a component is selected. Achieving same using AI and updating css styles/classes for a component / html tag will be available in next few days.

Demos

Summary

This post describes how you can add native/custom components to a page using MechCloud AI enabled page builder. Join our discord server to learn more about MechCloud WebSite Builder.

Did you find this article valuable?

Support MechCloud by becoming a sponsor. Any amount is appreciated!