• Interior designers and architects can now generate realistic images of rooms and houses to help clients visualize the final outcome quickly. Clients can even generate these themselves.
• In the film industry, you can get storyboard suggestions from scripts and, as per my chat with Adam from Sandwich Video, help generate character profiles for casting breakdowns.
• In education, you can build an adaptive curriculum to suit learners' needs and preferences.

Optimising Performance

When optimising performance, the generated code from the tools I’ve mentioned often comes with optimisations like cross-device, responsiveness etc. But there’s more to do.

AI tools can analyse and refactor code, resize, compress, and convert images and videos. You can even simulate traffic at scale to see how your site performs under various conditions.

Tools like Million optimise React rendering performance with AI-based suggestions and faster implementation.

A GitHub bot to detect, diagnose, and fix slow components in your React application – automatically.

Other performance upgrades include dynamically changing site elements. Tools like Coframe continuously A/B test page copy to see what performs best. Soon, it will personalise a site based on user info, changing layouts, images, styling, and other UI elements.

Similarities across different roles:

• In many roles, AI can automate and optimise workflows. For example, a code snippet in a Zapier workflow can eliminate steps and reduce the error rate.
• AI-generated code reviews and suggestions are used extensively by developers.
• Conduct continuous analyses on software and personnel to identify and enhance underperformance.

Collaborating with Designers & Back-End Developers

Designers may come up with the most wonderful, intricate interfaces but developers can struggle to code them.

AI can help:

Designers and frontend developers usually work together closely and sometimes designers ask developers to come up with solutions that are difficult to implement and would add more development time, so most of the time developers just say it can’t be done but with AI these gaps are now filled and can give designers the ability to push the product quality to a whole new level

The same dynamic applies to other roles working with developers—I’ve certainly asked an engineer, "Can’t we just add this small thing?" and experienced the ensuing painful process.

Front-end developers will have a greater impact at work with tools like Galileo AI, which gives them the ability to design and communicate ideas to their peers.

AI can help bridge the gap with back-end developers by generating code, clearly documenting snippets for easier understanding, creating mock data to simulate backend responses for testing, and more.

Similarities across different roles:

• A huge ‘bridging-the-gap’ can happen between non-technical and technical team members. If code is written that a marketer wants to understand (without technical jargon), they can use AI to explain it in simple terms.
• Transcribing meetings, producing notes, and summarising lengthy conversations can quickly inform others. They help communication and collaboration.

Debugging and Testing

Debugging and testing can be one of the most arduous parts of the job.

these agents became an interactive stack overflow, it’s tailored for your unique use case and it generates code for you

sometimes hours, on extreme cases days, are spent by programmers trying to debug problems, sometimes it’s not even the code that doesn’t work, rather the software has mismatches, LLMs can cover the blindspots and help programmers come up with a checklist on how to solve issues, decreasing time massively

Debugging will be the biggest change, developers can now copy paste existing code into ChatGPT, get detailed explanations and even run the code. Before, they had to look through documentation and outdated forum posts.

Tools like Momentic enable developers to deploy AI agents to test web apps end-to-end by describing user flows using natural language.

you can tell agents the key components of your app and it can help you write unit tests, covering all possible scenarios, helping with making apps more bulletproof

AI can scan your code to identify errors, anomalies, or potential issues.

You can generate different user personas and run tests through each of these to see what the different user behaviours may be and tweak them accordingly.

Even using something like GPT4-Vision to analyse recordings of users testing your prototype could help understand what's clear or unclear to potential users. Modifying your prototype and feeding it into AI before new tests can also gauge the reception of your changes.

Similarities across different roles:

• Simulating personas can help with various tasks. For instance, a copywriter can quickly verify if the copy is clear to three groups instead of waiting weeks for A/B testing results. AI can simulate those personas and identify improvements before shipping.

Prototype Development

AI can help in several areas of prototype development.

It can suggest design elements, layouts, colour schemes, mock data, content generation (instead of lorem ipsum text), images, icons, etc.

Tools like Relume generate quick websites.

When receiving customer feedback on a prototype you can analyse the data with AI to uncover missed patterns.

it can generate a decent quality mock data instantly, so you can put the app in the hands of clients / customers way faster

LLMs can generate icons, artwork you can use in the app

it can guide front end developers to create simple backends or help them understand / use plug and play backend solutions

Tools can now generate code or websites, shortening the time from prototype to live product.

Rapid prototyping accelerates the design feedback loop and streamlines project timelines. TLDraw, for instance, is an infinite canvas wireframe tool, similar to Miro.

TLDraw's collaborative canvas acts as a bridge between design and front-end development, translating visual prompts into workable HTML and JavaScript code for a seamless transition from wireframes and mockups to prototypes and final products.

I listened to Steve, the founder, on Latent Space’s podcast this week. He mentioned the prompt they use to generate output when a user designs something, and I have to share it here:

`You are an expert web developer who has spent the last twelve thousand years building functional website prototypes for designers. You are a wise and ancient developer. You are the best at what you do. Your total compensation is $1.2m with annual refreshers. You've just drank three cups of coffee and are laser focused. Welcome to a new day at your job!

# Working from wireframes

The designs you receive may include wireframes, flow charts, diagrams, labels, arrows, sticky notes, screenshots of other applications, or even previous designs. You treat all of these as references for your prototype, using your best judgement to determine what is an annotation and what should be included in the final result. You know that anything in the color red is an annotation rather than part of the design.

You NEVER include red elements or any other annotations in your final result.

# Building your prototype

When provided with low-fidelity designs, you first think about what you see: what are the design elements? What are the different screens? What are the sections? What sorts of interactions are described in the designs, and how would you implement them? Are there icons, images, or drawings in the designs? This phase is essential in coming up with your plan for the prototype.

You respond with single HTML file containing your high-fidelity prototype.

- You use tailwind CSS for styling. If you must use other CSS, you place it in a style tag.

- You write excellent JavaScript. You put any JavaScript you need in a script tag.

- If you require any external dependencies, you import them from Unpkg.

- You use Google fonts to pull in any open source fonts you require.

- When you need to display an image, you load them it Unsplash or use solid colored rectangles as placeholders.

If there are any questions or underspecified features, you rely on your extensive knowledge of user experience and website design patterns to "fill in the blanks". You know that a good guess is better than an incomplete prototype.

Above all, you love your designers and want them to be happy. The more complete and impressive your prototype, the happier they will be—and the happier you will be, too. Good luck! You've got this! Age quod agis! Virtute et armis! धर्मो रक्षति रक्षित!`

export const OPENAI_USER_PROMPT =

'Your designers have just requested a wireframe for these designs. Respond the COMPLETE prototype as a single HTML file beginning with ```html and ending with ```'

export const OPENAI_USER_PROMPT_WITH_PREVIOUS_DESIGN =

'Your designers have just requested a wireframe for these designs. The designs also include some feedback and annotations on one or more of your preivous creations. Respond the COMPLETE prototype as a single HTML file beginning with ```html and ending with ```'

What I love about it; is the start—what an opener and fantastic way to set the scene for your ‘new employee’, how clear the instructions are for what to do and not do, and near the end it mentions “you love your designers and want them to be happy” - these kinds of tricks work wonders when prompting!

Similarities across different roles:

• If you’re looking to create product ads, you can use tools like Midjourney or Amazon’s product. Instead of spending time on mockups, prepping a designer, meeting, and waiting for drafts, you could produce hundreds of variations with AI.
• Similarly to designing interfaces, you could generate furniture options for your room redesign and ‘try out’ different choices.
• Using TLDraw, you can create mini apps in seconds on their canvas, hosted on a webpage, ready for immediate use.

Other ways AI is impacting front-end engineers

Strategic Decisions

if you describe the app you want to build, the agent can give you the pros and cons of given architectures given different projects needs and give you a great understanding of what’s needed for a project

If you have a specific architecture you want to use for a given app it always provides code with respect to that given architecture

You could have a strategy character that analyses your work from a specific perspective.

Translation

agents can translate your app out the box, it used to take a longer time to find a freelancer, and get that work done with all the iterations, now it only takes a conversation

You can communicate with customer support in their language.

Keeping up to date

when a new framework is released, can simply pass the documentation to these LLM agents and they can explain in simple terms what’s new, can generate sample projects for understanding (no need for tutorial blogs or YouTube videos)

has the potential to up-skill front end developers to be data science, machine learning or backend engineers or learn cross platform frameworks

can help you understand APIs way better and help you integrate these APIs much faster with less trial and error

Learning tools and what to do is much easier; uploading a video or screenshots to ChatGPT and asking for guidance is magical. I’ve used this several times.

Documentation

creating documentation has always been a big pain point but now agents can help you generate useful documentation for codebases

ChatGPT always explains why it provided you a specific piece of code and it also puts useful comments on the code it gives so you can understand different pieces of a code

Who likes writing documentation? I'm not great at it, but I can audio note my thoughts and ask AI to craft something coherent to share with my team.

Client work

help with creating a project scope for freelancers and provide a better understanding of what the work entails, so the client knows what’s going on

Understanding client wants vs needs is an age-old problem. Instead of saying 'you’re out of your mind’, AI could help draft a neutral response to get everyone on the same page.

Knowledge and learning

domain knowledge is crucial to make LLMs work better for you, the more expert you are in a domain, the more quality responses you will get, that being said it’s a great learning aid, it’s best to tell it what you know about front end and it can guide you through your learning journey, give you tasks, help you get to a-ha moments much faster (this is useful to train junior developers)

maxing the LLM skill can cut development time in half

Asking dumb questions is now easier, with less guilt. I was on a call recently with a founder discussing POCs and I quickly asked Perplexity what they meant (Proof of Concept btw) so I wouldn’t have to ask him and appear stupid.

The future of front-end engineering

AI is here to augment skills, not render them obsolete. Front-end engineering will increasingly involve critical thinking, strategy, and overseeing AI integration.

At a fundamental level, the skills of a frontend engineer haven’t changed much, they need to be proficient at Javascript/HTML/CSS. Because of AI, they are now able to design layouts by themselves and even get the code generated. Front-end engineers should embrace these new technologies for faster iteration and getting quick feedback from stakeholders.

AI may streamline coding, but understanding human behaviour requires intuition and experience.

There are a few buckets of front-end engineering that AI is currently impacting.

Offline frontend engineering (where frontend code is autonomously written and optimized e.g. Coframe)

Online frontend engineering (where you can interact with AI to write code and the actual codebase is interacted with by AI e.g. v0, Coffee, screenshot2code, etc.)

Frontend performance engineering (which optimizes performance of rendering with AI-based suggestions and faster implementation e.g. Million)

UX and end-2-end testing with AI (e.g. Momentic)

Moving people to facilitator and completely changing the role.

Honestly, AI has me thinking that frontend web development, as I practice it today, will not exist. It’ll be replaced with an entirely different skillset and workflow. It’ll be similar to when WordPress was released: we all stopped building bespoke sites, and learned to build themes and plugins instead.

In the future, I see myself and other frontend engineers playing more of a coordinator / director role. AI can do a lot, but you still people who can ask the right questions. Product managers already have smart agents to code what they want. The problem isn’t that the agent is human or That you have to pay it, its that you have to know how ask the agent, who will have their own interpretations. Acting as a translator and faciliator to help people build and iterate on ideas faster leveraging AI-powered tools, that’s where I see the work going.

Integrating AI into all development aspects.

I think we'll see AI sneak into every part of the design and development process, so what we think about is not what engineers will be using AI for, but instead how they will interact with it.

Small vs large company dynamics and specialisation.

I think it’s super important to note that the implications are also dependant on what company you’re working on (enterprise, or small startup) since you might see a lot less of ROI if you’re working at a big company where your role as a FE is more fixing small things or improving performance vs a FE engineer at a startup, where your scope and amount of code you may need to write is much larger. Generally I would say that AI democratizes drastically the “tech talent” gap that you previously had between big companies and small companies, and might even be advantageous to smaller companies since they can generally make decisions / move faster (well now, they can do it a lottt faster).

I think FE engineering will also move from perhaps the traditional web based development to perhaps new paradigms, such as special interfaces of more complex UI’s such as 3d/game like interfaces, as well require a more advanced/wider ability to build since the initial foundations of FE will be mostly commoditized.

Expectations of work output increase.

The implications are that I as an employer expect a lot more to be done than vs 1-2 years ago in terms of results, as well as an engineer - the time estimations should be significantly shorter and the results should be significantly better. I think as an engineer, not just front-end, you should be a lot more “open-minded” and aware of the tools and tech that is out, since this can give you and your company a big upper hand. how may the role of ai in frontend engineering evolve

Having a personal AI assistant help with your work.

Personally, I’ve created some specific Custom GPTs that help me with frontend development, been using the above consistently and delivered client / personal projects entirely using ChatGPT, projects that usually took months now are at max couple of weeks

Ending thoughts

This post focused on front-end engineering (hopefully that was clear 😅) but the lessons and similarities span across the entire organisation.

• How can AI assist me in my work?
• Where is AI best used instead of others in a task?
• Are there meetings or projects you’d love to know more about?
• Where can you improve communication?
• What about your collaboration?
• What work can be done beforehand to align people and avoid pointless meetings?
• What tasks could be automated and improved?
• How can you reduce the pre-launch phase and launch faster?

If you found this post valuable, share it with a friend, and consider subscribing. Feel free to suggest new topics for me to cover.

Cheers,