T Theonic.Edition
Journey Artifacts Resume Let’s talk
Week 2 · Assignment 2.1 Vibe coding

Building a webpage
by describing it.

I built the landing page for this learning journey without writing markup — image prompt to mockup, code prompt to working HTML, then iteration by description. The interesting part was not the speed. It was discovering that the job had changed from production to direction.

Written for Week 2 of the eight-week MIT Professional Education program Applied Agentic AI for Organizational Transformation. See the page it produced →

THEONIC WAYJUL 21, 20265 MIN READMIT PROFESSIONAL EDUCATION
01 / WHAT I BUILT

A page that had to match a brand it wasn’t built in

The deliverable was a public landing page documenting this course: the eight-week program, the coursework, the capstone. The constraint that made it interesting was that it could not look generated. It had to drop into theonic-edition.ai and read as though it had always been there — same cream and terracotta palette, same Bricolage and Sora pairing, same density.

So the work split into two halves that felt nothing alike. Getting to a page took one prompt. Getting to my page took a dozen — typography, spacing, palette, hierarchy — each one a description of a gap rather than an instruction to a machine.

02 / THE PROCESS

Two prompts, then a dozen corrections

STEP 01 · IMAGE PROMPT → MOCKUP

“A clean, editorial personal-portfolio homepage documenting a professional’s MIT course on Applied Agentic AI. Warm cream background, terracotta accents, a large headline, a numbered eight-week timeline, a project gallery, and a stats band. Modern, minimal, sophisticated.”

STEP 02 · CODE PROMPT → WORKING PAGE

“Turn this mockup into a functioning webpage. Write semantic HTML and CSS that matches the layout, colors, and typography of my personal website theonic-edition.ai. Make it responsive, with a sticky nav, hover states, and subtle scroll-reveal animations.”

Then the loop: save the output, open it in the browser, compare it against the intent, describe the next gap. Spacing, redundant markup, and accessibility all needed review — the generated code was a strong first draft, not a finished one.

03 / EVIDENCE

Mockup, then the running page

AI-generated website mockup: cream background, terracotta accents, eight-week timeline
STEP 01 OUTPUT  The mockup generated from the image prompt — layout, palette, and rhythm settled before a line of code existed.
The functioning HTML landing page open in a browser
STEP 02 OUTPUT  The working page from the code prompt, saved as HTML and opened locally — sticky nav, hover states, scroll reveals intact.
04 / REFLECTION

From production to direction

My role stopped being writing code and became judging output against intent, then describing the next correction. Quality tracked the quality of my description far more than any technical skill: vague prompts produced generic pages; specific direction — audience, tone, sections, hierarchy, brand — produced pages that were genuinely close to usable.

The skill being tested is not prompting. It is knowing what good looks like, precisely enough to describe the distance to it.

It is not automated. The output needed review for spacing, redundant markup, and accessibility. But as a way to reach a tangible, on-brand starting point in minutes rather than days, it worked — and refining afterwards was as simple as describing the change.

05 / WHERE THIS PAYS AT WORK

A release bottleneck becomes a same-day task

Every mobile app we submit to the App Store and Google Play needs a promotional page — hero, feature highlights, screenshots, download call-to-action. That used to mean briefing a designer and a developer and waiting days per app. Describing the app and its audience, generating a mockup, prompting for responsive on-brand HTML, and publishing takes under an hour — and a variant per app or campaign takes minutes more.

The same speed generalizes. Product, marketing, and sales can turn a written request into a clickable prototype of an internal tool or a campaign microsite in an afternoon, which gives stakeholders something concrete to react to instead of a document everyone reads differently.

The honest operating model is augmentation, not replacement: vibe coding for rapid prototyping and internal tooling, engineers owning production hardening, security, and scale.

See the page it produced →