Can Replit recreate an advanced UI design?

Old habits die hard. As someone who spent 6 years working as a software engineer (in the era before vibe coding) my default is to code things from scratch. Even now, as I explore vibe coding, I find myself viewing it simply as a tool to generate a basic template. I see a small issue like alignment or hover behavior and think, okay, I’ll have to tweak that later.

The challenge

Goal: create a personal website with a geometrical landing view using Replit.

The initial design:

The initial prompt:

Create a personal website for me, basing the UI design on the attached image. The "portfolio" and "contact" CTAs cause the page to scroll to the respective sections. In the "portfolio" section, please include the following:

1. A simple react app for beginner web programmers: https://github.com/marley/loop101

2. Javascript data structures problems for beginner web programmers: https://github.com/marley/javascript-practice-problems Explainer videos: a. https://www.loom.com/share/3eda5f096c63428cbbee45ef38a3b126?sid=7123094f-1497-4774-97a1-968c76149a10 b. https://www.loom.com/share/f09a9dd878234983a7879ba2f896bea2?sid=7928ee57-1b3b-497b-9a2a-403c2687ef44 c. https://www.loom.com/share/331e9d3e38a3441b96800db462cac7fb?sid=47bd12e9-c073-47f2-a777-e23d16b829dc

The "CV" and "more" CTAs are external links. "CV" should link to "https://www.linkedin.com/in/marleyalford/" and "more" should link to "human-algorithm.hashnode.dev".

The color scheme of the website should be oranges and earth tones, think terracotta.

And then, I challenged myself to use my words and really communicate my needs with Replit. If there was a detail that I didn’t like in the proposed design, I asked again in a different way.

The outcome

TL;DR

• I wanted to create a site with a UI design containing geometrical shapes

• First I tried attaching a reference image. Replit extracted the text and general left-right positioning, but failed to execute the design

• I then tried describing the design with words. Replit was able to recreate the design almost exactly

Learnings

• Replit is capable of more complex designs when described in writing

• While the initial design may not be that interactive aside from scrolling, once you accept the design, the actual implementation will be interactive

• My computer battery gets depleted very quickly while vibe coding!

Question of the day: when working with Replit, do you perfect the design first or do you let it start implementation with the basic design and tweak later?