AI’s impact on jobs: A look at front-end engineering

I’m writing a series exploring AI’s impact on specific jobs. Today I’m breaking down what AI is changing for front-end engineers and how these lessons apply to other roles.

I spoke with several front-end engineers and designers to get their opinions.

Thank you, Ben Ormos, Telman - Senior Product Designer @ Microsoft, Glenn - Senior Frontend Developer at Mercury, Josh Payne - CEO of Coframe, Arnaud & Helen - Co-Founders of Galileo, Roy Herman - CEO of supercreator.ai and Alex - CEO of Magic Patterns for your thoughts.

Here’s what stood out to me from this post:

  • AI’s impact on job roles is blurring the lines
  • How AI aids various aspects of front-end engineering
  • Tooling bridges the gap between different roles
  • The secondary benefits of using AI in your job
  • What the future of front-end engineering looks like
  • Designing interfaces to make them real
  • Anyone can start building products
  • Ever-improving websites and dynamic interfaces
  • Similarities across the entire organisation

AI is rapidly changing many job landscapes, shifting people to facilitator roles.

I’m already using AI in my day-to-day work. I think my manager would be shocked if they knew how much code in my Pull Requests were written by ChatGPT.  But I still have to be there to ask the right questions, fix bugs, and shepherd code into our larger codebase, following our conventions.

AI is blurring the lines between designer and front-end engineer, as its capabilities allow it to perform tasks traditionally divided between the roles.

Designers typically focus on the visual aspect and user experience, creating the layout, colour schemes, and graphics.

Front-end engineers typically bring designs to life with code. They develop the functional and interactive aspects of a website (or app).

Now, you can potentially merge these roles with AI tools.

That may be seen negatively, but with AI, its function allows the simplest work and increases demand for top 1% expertise.

This is true across all job roles.

The traditional role of a front-end engineer

There are many elements to this job, namely:

  • Develop User Interfaces (UI): Build and implement visually appealing, responsive, and user-friendly web interfaces using HTML, CSS, and JavaScript.
  • Implement Web Design: Translate visual and interaction designs from UI/UX designers into functional web pages, ensuring cross-browser and device compatibility, responsiveness, and accessibility.
  • Optimise Performance: Ensure web applications are optimised for speed and scalability by optimising code, graphics, and other elements for quick loading and smooth running.
  • Collaborate with Designers & Back-End Developers: Work with designers to implement designs and back-end developers to integrate APIs and services, ensuring seamless data exchange and functionality within the application.
  • Debugging and Testing: Identifying and fixing bugs in code, and implementing testing frameworks to ensure the web application's stability and reliability.
  • Prototype Development: Building functional prototypes for new features or products helps gather feedback and iterate on the design before final implementation.

Developing User Interfaces & Implementing

Here are a few AI tools that have impacted front-end engineering:

  • v0.dev: a generative user interface system developed by Vercel. It uses AI to generate copy-and-paste friendly React code based on shadcn/ui and Tailwind CSS. The tool lets developers describe the interface they want to build, and v0 produces the code using open-source tools.
  • Coframe/coffee: a tool developed by the Coframe team that helps build and iterate on UI 10x faster with AI, right from your IDE. (I’m an investor)
  • MakeReal by TLDRaw: a tool that lets users sketch an interface, press a button, and get a working website. It uses the GPT-4 API from OpenAI to transform vector drawings into functional software code, using Tailwind CSS and JavaScript.
  • abi/screenshot-to-code: This tool takes screenshots of a reference web page and builds single-page apps with Tailwind, HTML, and JS to replicate the screenshot.
  • Galileo AI: a text-to-UI tool that quickly produces high-fidelity designs from natural language prompts, trained on thousands of top user experience designs. (I’m an investor)
  • MagicPatterns: an AI-powered platform that helps with front-end development, enabling designers and engineers to rapidly build UIs by generating them from a text prompt. Users can create patterns from any design system, including their own, and export the outcome to code or Figma.

There are many more!

Many of these tools generate UI elements and provide optimized code for easy implementation, significantly easing this part of the job.

Blurring the lines between designer and front-end engineer.

I’ve only played around with AI tools, but ultimately still end up fully making or customizing things myself (with no code). I am biased as a designer, I usually have a specific idea in mind. But for more standard components such as an FAQ, Help me, etc. I’d definitely just use AI.

In the future, I can 100% see these tools becoming better than most designers.
AI allows peoples to explore design solutions faster. They can generate dozens of variants of the same page in a few minutes with tools like Galileo AI. It allows them to try a lot of ideas before getting into the implementation stage. Not all front-end developers know how to design and AI can give them design superpowers.

Enabling founders to do more in less time.

Drastically helping me write code faster, as well as implementing more technically complex features/functionality that I might have not been able to do before, or would have taken me a lot more time (or would have needed to delegate to someone else). It started with chat-gpt, then we got GitHub’s CoPilot, and now I use Cursor which gives me the benefits of all worlds as well as learning/indexing my codebase to give me even more ROI as im building. This is first and second degree implications, but then you also have things like Vercel’s v0 or no-code platforms that wrap these new AI capabilities and allow you to potentially skip even more steps / save more time during the process.

As with most creative work, AI can’t generate new UI that’s never seen before but a lot of front-end requires using standard elements; testimonials, hero sections, FAQs, and product feature lists.

This is why Tailwind CSS has taken off over the last few years. It’s a CSS framework for building user interfaces—it simplifies implementing good design in apps.

I expect Tailwind to release an AI product soon, but others have built their own versions for now.

But some external libraries can be tricky to work with.

The biggest issue with external libraries is that they are not frequently updated, sometimes suit only some of your needs—you add these large libraries when you only need a portion of them, adding extra complexity to the app.

you can ask agents to develop more complex interactions natively, so you can maintain these much better

The default way to work with AI is through a chat interface, which may not be the right form factor for design-first work.

A lot of the AI products we’ve seen to date are largely chat or text-based because of it being the easiest way to integrate with a LLM. But I think with time, the greatest products will hone in on the best way for users to interact with their AI products. Spoiler: it’s not a chat interface more often than you’d think!

For example, at Magic Patterns we help customers 1) integrate with Figma, 2) connect their component library via Storybook and Github, and then 3) generate UI based off of Figma mockups using their custom components.

There’s likely a balance, as if, for example, you don’t have your own component library, you may first want to generate one using the tools mentioned. Many companies, especially large ones, already have their own libraries.

AI is amazing at generating boilerplate code for components and we can extrapolate that it will be able to do even more in the future. Still, mature frontend codebases have a lot of interdependencies and might be too complex for AI today. In the future, prompting within a frontend codebase could be the leading use case.

It’s worth noting that Figma AI is coming soon to generate UI, design components, recommend designs, add mock data, and generate code.

Similarities across different roles:

  • 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,

Get full access

✔️ All 100+ courses & tutorials in our catalog
✔️ New content added weekly
✔️ Private community access
✔️ No subscription, $250 paid once
✔️ Expense it using this template. Or get a team account.
✔️ 30-day refund policy. No questions asked
Join 5,163 learners from companies like Microsoft, Coca Cola, NBA, Adobe & Google

If you scrolled this far, you must be a little interested...

Start learning ->

Join 5,163 professionals already learning