Backend Dev’s Guide to "Prompt-Crafting" a Frontend • Let's Do Tech

I am not saying that AI is going to replace anyone, but it certainly helps move things 10x faster while you retain full control over your architecture. If anything, AI has only empowered solopreneurs and bootstrappers.

As a developer, it does not matter what you are developing - backend or frontend. But once you choose your path, it gets quite difficult to dive deep into the other. The reason why we see this distinction in the industry today is that both backend and frontend engineering require different perspectives and skills. Depending on the depth of your involvement, the context switching can get quite expensive on the cognitive level for most of the developers.

It had been my goal for a long time to build my website with my own hands. I did not want to depend on managed solutions for various reasons, the funniest of them all being - the appeal of a handcrafted website. Being a backend guy, I thought I could learn and build professional frontends but the time just flew by on the terminal screen.

I had given up on that path and blogged on platforms like Wordpress and Ghost. But today, with AI, things are different. I can dream again. Although it would not be “handcrafted”, but prompt-crafted. This is still enough as far as I am having full control of the website. Full control and the ability to fix issues - AI helps on both the ends and also saves my time to move faster.

In this blog post, I will focus on frontend build with AI, and discuss:

Why frontend development is difficult for backend developers
Why AI is a convenient way to build frontends
What is the knowledge required to build frontends with AI
How to build frontends using AI - Step by step

Why frontend is difficult for backend developers

Backend developers fundamentally lack design and aesthetics thinking - these are just not in their nature. Their thinking process is designed to cut through the fluff to get to the bottom of any logical problem presented to them. If you hand them an umbrella, their natural focus goes to the spokes and the spring mechanism which helps open the clothing. They don’t care about how much the users would enjoy using their product, but they have an eye for details as far as robust functionality, security, and reliability is concerned.

Frontend developers on the other hand, approach the product from a user experience perspective. They want their users to use and flaunt their umbrellas. The shape and color, the way it feels to hold the umbrella when it is in open or closed state, effort required to open or close the umbrella - these are the priorities of a front-end developer.

Due to this difference in approach, the backend and frontend developers can never carry each other’s responsibilities in a satisfactory manner. Sometimes I really wonder what a “full-stack” developer means. Knowing the depth on both sides, someone who can deliver great user experience while building various backend architectures, I can only think of an unicorn. I think it is a bit too rich to be a full stack developer unless you are a prodigy.

Of course there are overlapping concerns and shared responsibilities between the two kinds. For example, frontend developers are not discounted for security and performance of the web app. These concerns are common and are to be addressed on both ends differently.

Why AI is a convenient way to build frontends

Backend engineers who are looking to build and deliver their apps to the public, have always had to rely on external developers to build great frontends. With AI, this is not the case anymore, as far as getting out there in the market is concerned. By simply weaponizing your language, you can command AI agents to build a presentable (if not great) way to build frontends for you.

If your imagination falls short, you can always take inspiration from existing UIs you like or component libraries and ask AI agents to imitate the same for you. These sleek UI features might be a mystery for you, but they are just a prompt away from you with AI.

AI agents already know everything, given the amount of free and authentic information available out there, you can safely offload the learning curve to these AI agents and presume that they have learnt it before you ask them. The good news is that you can claim and command this superpower to do things for you.

Your UI will be as good as your prompt.

What is the knowledge required to build frontends with AI

Having said that, do not underestimate the need for you to know how things actually fit together. You may not have experience or knowledge at the code level, but you still need to have your fundamentals in place. Without this baseline knowledge, your prompts are low quality and will result in low quality output. With good knowledge, you can ask the right questions, and thus deliver a fool proof product or UI.

While building frontends with AI, you need to know these concepts:

Web components: A more than general understanding of how the web, the internet works. What is the role of browsers? What are static and dynamic pages? How TCP/IP, TLS, HTTP work? How are mobile apps different from web apps? And similar other questions.
Framework being used and its basics: There are a ton of frontend frameworks out there. Do a quick research on LLM tools and identify what works best for you. Once chosen, dive a little deeper into its underlying functional offerings. Example frameworks: React, Vue.js, Angular, Svelte, etc.
Architecture you want to implement: Similarly, perform a T shaped research, especially if you are completely new to frontend architectures. Example architectures: MVC, MVVM, Micro frontends, Component based, etc.
Rendering approaches: Understand the content structure and composition to be delivered on your UI. Identify which information is static or dynamic, how frequently the information changes at the source to make sure fresh data is always served, and so on. Depending on these aspects, understand and select the rendering approach you would want to use for your application. Examples: CSR (client side rendering), SSR (server side rendering), SSG (static site generation), etc.
Security measures: Understand how security is handled on frontends with respect to communicating sensitive information, displaying secure content to authorized users, encrypted data transfers, etc.
Authentication and authorization mechanism: Various auth mechanisms are available, and it may also depend on which auth provider you are implementing in your backend. It is important to know how the sessions and tokens are handled on the browsers with respect to their lifespan and refreshes.
Routing of public and private pages: Understand how the frontend intercept a request to private routes and forces authentication (login) before any user can access that page. For the public routes, consider the volume of traffic your website gets since this will impact backend scaling and optimization efforts.
API calls to build dynamic pages: This ties back to the rendering approaches, however, you may want to (re)design your APIs to serve the data more efficiently to reduce latency.
Optimization for performance: Frontends employ various optimization techniques to improve performance and user experience. It is important to know which techniques are applicable to your frontend architecture. Examples: image optimization, lazy loading, minification of assets, etc.
Styling and animations: IMO, this is the first element of a great user experience and it drives the rest of the requirements. Remember that UX is first designed as a wireframe, and the final ones are then “coded”. Know various ways these tasks are achieved and their cost in terms of performance, so that you can decide on tradeoffs.

Knowing these things are essential, even if you don't know how exactly to scaffold a repository from scratch. Of course this is not an exhaustive list. The more you explore, the deeper you will go, and the better and richer your prompts will be, and thus better output.

Building frontend with AI Step-by-step

By the time you explored the above topics, you would have a fair idea of where to begin building the web app with the help of AI. There are multiple starting points and paths, but I follow below steps for the reasons mentioned inline.

Start with the static landing page: Use this page to set the branding guidelines for the rest of the pages. Try to modularize the styles so that you can readily change things like color themes from a config file. If your design has dynamic elements, leave them for now.
Build other public pages: The public pages are easy to build as there is no auth involved. Use a similar approach to that of a landing page to build these. The best part is, you can customize the layout of each page, while asking the AI agent to keep the consistent styling.
Build login/signup pages: Build a test private page, which can only be accessed after the user logs in. Make sure the login/signup logic works very well. Take this opportunity to also implement social signup buttons. There is no need to worry about time required to do it as AI is quite efficient and “used to” implementing these mechanisms quickly.
Build the private pages: Build privately accessible pages. Make sure to test each of them by accessing them directly via a private browser, to see if the frontend app intercepts this and asks the user to login before proceeding.
Enhance private pages: Private pages often require more functionality which is more tightly coupled with the backend owing to the freshness of the data. These are not SEO pages, so don’t worry about that. But make sure you provide a good user experience in terms of information displayed.
Build: Ask AI to fix any build errors and also develop a CI pipeline to generate the build for deployment. This is a crucial phase as you may face multiple build errors in spite of AI. In my experience, this is where I faced many circular errors.
Deploy: Depending on the architecture implemented, framework used, and the choice of host, ask AI to develop a CD pipeline for deployment. Supplying correct credentials and secrets to the respective platform should be done manually.

Needless to say, at every step, go through the generated code and make sense of what is being built. Do this for every prompt to retain cognitive control over it. This helps you write highly specific prompts. For example, while developing this website I faced a few challenges with the environment variables being accessed. Instead of accessing the environment variables with prefix, the platform on which the UI is hosted preferred to use non-prefixed env vars. The AI agent in this case was not aware of this.

Conclusion

Before closing the IDE, when satisfied with the output, as the same AI agent to summarize what has been done till now and store the summary in a markdown file in such a way that next time when you revisit to further develop this project, you can simply supply this markdown file to the agent to get the context.

I was able to build this website in just a week’s time, and I am very happy with it. Yes, I know professional UI developers and UX designers would have give a much better asset, but functionality I like what I have.