While creating a code component the AI should get a context of existing styling of the site. This will help the AI to create similar type of components that closely match the styling of the site.
In this issue we are focusing on JS components only.
So if a user wants to create a new component using AI then to match the component with the theme of the website we need to tell LLM about the current styling of the existing components.
In this issue we fetch all the available JS components on the site and create a style guide which includes the components that can be helpful for the creation of a new component. We take the JS and CSS associated with the component along with the Global CSS for the site, which acts as a source of information for the LLM on how the styling/theming of the current site is. Keeping the style guide in mind the LLM then creates new components that matches the theme/styling of the site.
We have also taken care of the scenario when the user upload an image and says "Create a similar component", then we are not considering style guide and create a components which matches the image.
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | Screenshot 2025-09-19 at 7.52.36 PM.png | 97.06 KB | lauriii |
| #12 | Screenshot 2025-09-19 at 7.12.10 PM.png | 344.42 KB | lauriii |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !46changes, plain diff MR !26 Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !1504
Comments
Comment #3
utkarsh_33 commentedComment #4
utkarsh_33 commentedComment #9
utkarsh_33 commentedComment #10
utkarsh_33 commentedComment #11
utkarsh_33 commentedComment #12
lauriiiI've tested this first with the prompt "Can you please create a CTA component that allows me to use images with a bit of text and to include a CTA to link to other pages?" which design wise gave me surprisingly good results! However, I ran into #3547666: AI should not generate props using Tailwind classes.
I updated the prompt to "Can you please create a CTA component that allows me to use images with a bit of text and to include a CTA to link to other pages? Please do not use tailwind classes as props and instead provide pre-defined color options" and for some reason I started getting results that are not really consistent with the site and don't look as good. I tried this 5 times and I got pretty much the same result every time. I even tried deleting the old CTA components to make sure it didn't use those as context.
Here's a screenshot where you can see the first CTA which looks good, and then the two following it which is essentially what I got with the updated prompt:
Is it possible that the agent stopped considering the style guide after I instructed it about the color options?
Comment #13
lauriiiI tested to generate a pricing table. For some reason the features are a single field so it doesn't render nicely 😅 The styles look pretty close but there are some differences. For example, the headings are using 3xl size but we're actually using 4xl for other sections. I'm not sure why is it not using the heading component directly so that it would be consistent with other section components. It's also using a grey background which we're not doing anywhere else