👋 Hey, this is Ben with a 🔒 subscriber-only issue🔒 of Ben’s Bites Pro. A weekly newsletter covering AI trends, ideas, business breakdowns and how companies are using it internally.
Subscribe to PRO 52I’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 Mercury138, Josh Payne - CEO of Coframe111, Arnaud & Helen - Co-Founders of Galileo567, Roy Herman - CEO of supercreator.ai57† and Alex - CEO of Magic Patterns189 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.
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.
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.
Here are a few AI tools that have impacted front-end engineering:
v0.dev1,540: 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/coffee249: 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 TLDRaw128: 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-code127: This tool takes screenshots of a reference web page and builds single-page apps with Tailwind, HTML, and JS to replicate the screenshot.
Galileo AI567: 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)
MagicPatterns189: 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.
Enabling founders to do more in less time.
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 CSS587 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 default way to work with AI is through a chat interface, which may not be the right form factor for design-first work.
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.
It’s worth noting that Figma AI1,196 is coming soon to generate UI, design components, recommend designs, add mock data, and generate code.
Similarities across different roles:
Become a paying subscriber of Premium to get access to this post and other subscriber-only content.
Upgrade52 Translation missing: en.app.shared.conjuction.or Sign In15
Ben's Bites PRO: AI’s impact on jobs: A look at front-end engineering
And how these lessons apply to other roles
54 readers clicked at least once. 17 links, 17 with clicks. Heat is relative to the most clicked link in this issue.
Beehiiv · other