On using ai to mockup components or pages

AI is a wonderful tool to augment the human creative aspects. And the fun part is, it operates a lot like humans do. Just like humans, a narrow context and clear boundary sparks creativity.

By setting a tight boundary and a narrow context you’ll get repeatable results from an AI. It will give you the results you are looking for on the first try!

One of the ways you can use AI is to mock up your frontend components. Good ideas are fleeting, so you will need to capture ideas quick

Quickly Capture an Idea

Ideas hit you when you least expect it, for example:

• During a walk.
• During lunch.
• At the coffee machine.

In any such cases, you can just tell ChatGPT what you want, and it will build out the idea. In addition, it will also fill in some extra context for you, so when you revisit it you may get even better ideas or know better what you were thinking about.

With pen and paper, it is often slow to write out details and some of the nuances get lost. By just prompting to build the idea out, you’ll retain a lot of this context. Never again, you’ll read back your notes and completely miss out on the genius you had at the moment.

Prototype fast

I’d like to prototype the frontend first and then go to the stakeholders. This way I can check if the general idea is on point before building everything out.

A prototype is an invaluable tool too convince people how something works. It speaks to the imagination and sells a product which is not build yet.

Especially as a software engineer, you should learn to sell your idea. A “deal” is only good when it also sounds good! A prototype is the ideal tool to do this

Ai has been tremendously useful to generate a prototype very, very fast. And keep in mind, a prototype doesn’t have to work either! I’ve seen prototypes made in Adobe XD which get the message across in just the same way.

A prototype just needs to have some basic components

• Routing and interaction People need to be able to click, drag and drop or otherwise interact with the page,
• Mock data. Mock data should also spark the imagination. You can ask AI to generate this based on the user stories that will use your application.
• Docker container or deployment. You are not going to ship your own laptop to the customer.

You can generate these basic components with ChatGPT or ClaudeAi but you can also generate the whole structure.

An example prompt for the latter could be:

• I am building a quasar app (I already have the scaffolding) . I need a few pages which demonstrate a user onboarding wizard. Make vue pages for me in this app. Give me the vue routing object as well. The main component is ”BaseLayout which contains the routing view, the child components are contained therein/
• Add onboarding questions to each step which a user new to a company might need to answer.

Coding when you can’t code

Working on your laptop in the train or on the airplane can be very uncomfortable. But if you select the right tasks and things to build out, you can get a lot done by just instructing ai to do this.

First it will be mostly limited to grunt work, like setting up these ui/ux interface of frontend components, but once you get the hang of it and give better instruction it can handle much more complex tasks effectively.

For example, I am building a application which helps users to master the most important of Life’s Principles: the Life Tech App. I use the ChatGPT to generate lots of micronaut controllers and mongodb data interfaces for me. It saves a ton of work.

Some other tasks I have done:

• Generate records from Json API results lacking documentation
• Writing compelling release notes for non-technical users.

So how do you get better at this? Use the right model and make sure that you’re ‘memory’ is up-to-date according to the latest standard of how you want things. This way you can use small prompts with high first hit successes.

Leverage Memory

I’ve mentioned it a few times, but it deserves another mention: memory!

Tell ChatGPT specifically to update it’s prompt with all the bounds and context you want to give it. This keeps your prompts small and concise. What also helps is ‘if then’s’. This way memory gets only triggered in specific situations.

An additional tip, keep you ChatGPT memory in your own notes as wel! It will try it best to expand its knowledge about you and what you use. This has a downside, when much of this is transient and replaced by new insights.

When you keep a separate list of ChatGPT memory in a notepad, you can always reset everything and start fresh from the memories you like to keep around.

Just reset it from the interface and then tell it to “Update my memory with this list”.