Contrib.social

[Meta] Create an AI Powered Design System PoC

Open on Drupal.org →
Created on 18 August 2025, 28 days ago

Overview

Many AI powered page builders work off the designs and ideas of the AI model's own training which has the tendency to produce what some people refer to as "AI Slop" where it is clearly made by AI and not towards a specific set of human's vision. Alternative they can pick from a series of pre-existing templates that look good but don't really fit into a particular customer's goals and design vision, can be generic.

The goal of this meta is to prove that with AI, Experience Builder and Drupal we can build an AI Landing Page Agent that produces truly usable pages that fit into the organisation's design. We will want to show:

- What does a page builder look like without this (compare it to third party page builders or pure vibe coded landing pages with something like claude code).
- Show the design system working with similar prompts and how much better the landing page is generated with it.
- Show how it can be tweaked for a particular organisation's unique design goal and vision, then show how the same prompts produce landing pages relevant to that organisation. (Both visually and design.).

By Visually we mean simple things such as choice of colours etc. However we want to show how we can change the documentation of the design system to show their preferences. For example, one organisation may really like carousels, the other doesn't. One might want products as a call to action, the other wants an embedded form.

For this we aim to use Civic Theme, and code componenenets. This is because Civic Theme is fully open source but also because it has extensive documentation based on research on how to use those kinds of componenets. One hypothesis we have is that AI will need to be guided not just on WHAT the componenets in a design system are, but also HOW to use those componeents and when. This guide should be modifiable by a client to make it more aimed towards their goals.

Proposed resolution

(Each bullet should become its own issue)

  • Bring some of civic themes components into experience builder as Code Componenets (not SDCs).
  • Come up with a model prompt and manually built design that fits what we are aiming for AI to achieve.
  • Make sure XB AI can pick those componenets when the model prompt is used.
  • Bring in metadata about those components (what they are) and have AI able to search and understand those componenets to use them. Show before and after (How much has it improved given the metadata, how much longer does it take).
  • Bring in documentation about those components (How to use them), have AI search and understand the documentation and take planning steps to figure out the best approach. Show before and after (How much has it improved given the metadata, how much longer does it take).
  • Make sure images are used and this initiative pushes forward the agentic image handling as the designs won't look good without some assets.
  • Have the design apply to something more interactive such as a form.
  • Have AI edit the code components, not just use them.
  • Make it so AI can chooses whether or not to edit a componenet, use one, or assemble a section from existing atoms.

Notes:

  • - This is a Proof of Concept. The goal is to get something that works as quickly as possible. We do not need every aspect of Civic Theme ported to Experience builder before moving onto the next. Similarly we do not need all metadata, all documentation and all possible use-cases covered.
  • - Whilst this is a PoC, we want to make sure this is usable in Drupal and COULD go live if necessary. So this shouldn't be built entirely with prompts or frameworks outside of Drupal. It should be installable with a dev environement and we will target this template: https://www.drupalforge.org/template/drupal-cms-xb-ai-dev.
  • - However if future extensive refectoring is required on how everything is structured that is fine.
  • - This approach should eventually be design system agnostic. It should be clear and documented how Mercury will fit into it for Drupal CMS.
  • - Ideally the format of storing the metadata and documentation should fit into something that could be used in other platforms (such as story books), however this is not as essential for the PoC but might be an easy starting place.

User interface changes

- The Experiencce Builder experience should have little to now UI changes other than what is already planned but not implemented yet. This meta issue may push those things forwards.
- There will need to be a settings page for all the documentation and component metadata

🌱 Plan
Status

Active

Version

1.0

Component

AI

Created by

🇬🇧United Kingdom yautja_cetanu

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024