Getting meta with it

Go back to projects

Screenshot of the index page hero section, Magic Unleashes
Screenshot of the index page hero section, Magic Unleashes

Stephen Chiang

2023

Summary

In my time as a developer I've made many, many personal portfolio sites. They were all coded and used as a testing ground for new frameworks and APIs, which meant it was always in some state of construction. I have torn down my site so many times now, I have lost count and prefer not to know. ๐Ÿ˜…

Methods

Technology

A project post about my project, created with AI

This time, I have decided to give AI a go. Using Framer and its OpenAI API to setup the overall theme and layout, I had the opportunity to go through an exponentially larger number of iterations in a short a mount of time just by tweaking the prompt. This allowed me to add and take away sections, make design choices faster, and focus on crafting content and iterating improvements. This is a great example of how AI is meant to supplement and compliment human creativity.

Font selection button showing Glook and Work Sans next to color swatch for them, showing peach, light yellow, light green, turqoise, and light gray

With more time available, I am then able to also allocate more resources towards auditing the output for responsiveness, accessibility (crafting useful and descriptive alt texts), and minor fun animations.

Screenshot of this blog post with desktop, tablet, phone, and ultrawide resolution sizes

I believe where design enters and controls this process begins of course during the research and analysis process that shapes how I craft the prompt, and then guides my visual choices and assessment of the quality of the output. The drawback, but perhaps an advantage as well, is that a design system and component library would have to be derived and built from the output. In some ways this could save time, but requires discipline to make the effort to go back and do this even though the solution is nearly complete.


Results & Reflections

I hope to see more integrations at the micro level in Framer where I can use prompt engineering to shape and build smaller components, CMS content, etc.

Lastly, this amazing tool has allowed me the time to insert some custom code here and there (see if you can find it!), which makes me feel good because a programmer can't just build something with a mouseโ€ฆright?! โœŒ๏ธ

UPDATE: My wish was granted! Framer now provides AI assisted localisation of all my copy, even alt texts. Mind blown.

ยฉ 2023 Stephen Chiang