Cook an AEM Edge Delivery Site with Antigravity (like you cook instant noodles)

“Computers are to design as microwaves are to cooking” — Milton Glaser (American Graphic Designer)

Gemini Generated

I would like to frame this whole article more like a cooking manual rather than putting high words like “Gen-AI/SpecDriven Development/etc”.

The core factor for me and I belive most of the software lovers , enthusiast and technical consultants (I hate myself to call a “DEV”) around me is to get shit done according to a business requirement, but i believe in doing so what we do is miss out the fun of creation and creativity (Like your boss telling you to get it done by EOD) and you start praying that all your patch works hold on somehow.But this article is more of a creative article — (like bob ross paint a oil painting) — am getting too excited here 🥴, but the essence here would be to see how your very own AI works and makes a nice piece of “Art” for you.

Why AEM Edge Delivery : (Two Reason) —

1.Am a bit familiar with the workings and I believe it’s quite easy to kickstart for someone even who has a fair bit of technical knowledge

2.The whole tech stack plus Adobe’s provided cooking skills (skills) would help us a bit to put the things in place as required, also it’s just plain vanilla js and css to start with

Cooking Ingredients :

My objective here is to use as much household cooking ingedients as possible , for google antigravity prompts , AG (antigravity) using gemini 3.1 pro , i have got a gemini liscence which comes complementary with my prepaid mobile subscription — so everything here is freeee !!!

List goes as -

1. Google Antigravity (Since we are using gemini the antigravity really works well) —
2. Google Stitch ( This will enable me to put my imagination on steroids and come up with a cool design plan that can be transferred — oh yeah !!)
3. Adobe DA — Think of it as adobe’s own Google doc. (codenamed — Dark Alley or Document Authoring is a nice handy way where you can build blocks with document authoring without doing much or configuring stuffs inside GDrive etc) + Universal Editor flavor as well (more to that later)
4. Skills.sh (This is more like a add on to getter better at skills there’s a whole set of stitch skills available here; just a cool “masala” i would say for that extra taste out of your ingredients)
5. MCPS (we will be using chrome dev tool mcps and stitch mcp this ingredient will enhance the taste and give your virtual chef (gemini) a feedback about how he’s cooking) — feel free to learn more about mcps on the internet

Getting the skills :

For any chef to cook your favorite recipe you need to make the chef ready and understand what he/she is cooking or maybe train them on a particular cuisine (I always wanted to be a Chef), the essential skillset will determine how your chef will prepare the recipe for you, for me the chef is a virtual agent Gemini.

1. Adobe EDS building skills — us the following gh command set to get it inside your project —

# Install gh-upskill as a GitHub CLI extension
gh extension install ai-ecoverse/gh-upskill

# Add AEM skills to your project (run from project root)
gh upskill adobe/skills --path skills/aem/edge-delivery-services --all

2. Stitch Skills — we will use “skills.sh” to get google stitch skills essentially that would create a “DESIGN.md” file for us which would contain the design system, theme etc. (https://skills.sh/google-labs-code/stitch-skills)

3. getdesign.md — this one is a great site to get some of the flagship site design system into your own site, a nice place to start from an idea and develop into a shape.

My skill directory looks like this —

Antigravity IDE : “.agents/skills” — folder structure

Cooking Instruction :

The instruction here would be very basic assuming someone who would want to start getting their hands dirty with cooking with AI tools.

#1 Marinate the Design

First think of a design you want to have in your EDS website, for this article i would want to revamp wikipedia in style of claude code —

Get the base design skill with DESIGN.md from claude — “https://getdesign.md/claude/design-md”

Note : Not going over how to setup an EDS website things are pretty straight forward (https://www.aem.live/developer/tutorial)

For this article am setting up AEM Edge Delivery with DA (Document Authoring + Universal Editor Goodness), you can try with AEM as a content source as well (jcr based) Plan the stitch with a basic prompt to built the essential theme and blocks for you. what this will do it will create an implementation plan and an html draft of what you will be building — ( A cooking basic roadmap)

The prompt i used :

so stitch loop use better stitch commands to prompt stitch to build a website prototype page which would looke the one generated as above image !!

#2 Cook the Design

Prompt for mapping blocks out of draft html

The prompt essentially maps each blocks based on skills provided by adobe to create EDS compatible blocks and also update the style tokens in style.css and necessary font changes in font.css

You can keep adding more blocks and agent will understand the skills and keep on building accurate adobe recommended way of EDS blocks. This is where skills shines where agent follows a particualr pattern of development or mode of working given in a particular context

#3 Taste it for perfect salt

A feedback prompt to fix a block — sidenav

Now we need to have a feedback mechanism where the agent can understand what it has done , where the chrome dev tool mcp come in picture, what it does is actually navigate to http://localhost:3000 and by prompting (you can automate this if you are a pro — since this article is targeted for begginers we will do a manual prompt) , we can ask agent to rework on his work, by this way we are giving our virtual chef taste buds to rework and arrive at final result (This is very important for accuracy when working with GenAI tools we need to have a feedback mechanism of some sort to feed AI upon the task it did to do better and mostly that would be some data input of what it already done compared with a “golden” data set — here the data is my draft html from stitch).

Results after few shot prompting

You should always try to make your objective clear and crisp when prompting, use the feedback as much possible and you will see the agent willl start to recognize patterns in the development of next block.

Authoring View — DA:

DA — editing the index page

Authoring View — UE (Universal Editor):

UE — editing the same index page

My Thoughts:

It will take you hardly a day to launch a full prototype and show the prospective client how you are envisioning the website which is really cool, and what is more cool, this is open source even the universal editor stuff am using is on a trial liscence of my own; it doesn’t cost me a penny.

This gives you the confidence to go build your own website, start your small startup and let your imagination run wild !! Just make sure you keep an eye on your token expenditure 🤪🤪

This article is solely based for someone who just wanna explore AEM or want to explore and vibe code their favorite website , there’s lot of things and complex task we can achieve with agents, subagents,hooks and what not !!! but to that on a later article