Skip to the main content

Building a site with AI

You can build a whole site with an AI assistant, from the first drawing to the finished pages. The Webal Blocks design system gives the assistant the colours, type and parts of Webal Blocks. The AI help tab of the builder turns its drawing into a layout. You stay in charge at every step, and nothing goes live until you press Publish.

The Webal Blocks design system

The design system is a set of pages in Claude Design. It shows each Webal module as it really prints, with its options, its colours in light and dark, and its accessibility notes. It also holds a page called site-design.md, the rules a drawing must keep so that the builder can make it.

The design system is for drawing only. It never changes your site, and it holds no part of your site.

1. Write a brief

A good brief gives the assistant the facts, so it does not invent them. Write down:

  • the business, the pages, and the one job of each page;
  • the menu, in order;
  • your own photos, or a clear note of the kind of photos you want;
  • a colour scheme: one brand colour, a second colour, two light tints and a dark;
  • two fonts that suit the trade, one for headings and one for text;
  • the facts the assistant must not make up, such as prices, reviews and registration numbers. Write them as [placeholders] until you have the real ones.

2. Ask for the design

  1. In Claude Design, start a new design with the Webal Blocks design system.
  2. Paste your brief, and ask for the pages.
  3. Ask it to follow site-design.md: sections from its list, one named module in each band with its position name, the page content marked, and space in Bootstrap's own steps.
  4. Ask for the Wide page width (91.5 rem). It gives the pages room to breathe.

3. Check the drawing

  • Look at every page at desktop width and at phone width.
  • Anything that no Webal module can show is taken out, or listed as "will differ".
  • Check that every text and every button is easy to read on its background.
  • Leave space between the bands. Pages with room to breathe look calm and are easier to read.

4. Build the layout

  1. Open Components, then Webal Layouts, and open a layout in the builder.
  2. Press AI help, then Copy for AI.
  3. Paste the text into the assistant, together with the drawing, and ask for the layout as JSON only.
  4. Paste the answer under Paste from AI and press Check and use. The builder checks it with the same rules as Publish.
  5. Look at the preview at each width. For the Component with a sidebar, choose Roomy or Spacious in Gap between main column and sidebar if the drawing has more space there.
  6. When you are happy, press Publish.

5. Fill the positions

  1. On Joomla's Modules screen, make each Webal module the drawing names. Put it in its position and choose its pages.
  2. Set only the module's own options: its words, pictures, look and animations.
  3. Download the two fonts on the Webal Blocks Fonts screen. They are then served from your own site.
  4. Set the colours in the Webal Blocks Options. The Options check the contrast for you.

6. Check the site

  • Look at every page at each width, in light and dark.
  • Open every accordion and load every map. Nothing should change width when you do.
  • Read the Checks tab of the builder.
  • Run an accessibility test before the site goes live.

What the assistant must never do

  • Write HTML, CSS or script into a layout or a module.
  • Use a colour that is not in the design system or your Options.
  • Skip a heading level.
  • Say a page is accessible, or that it works, without a test that shows it.