Ambient coding. A new border for UX engineers | By Chad Adams | March 2025
With the ambient coding, we start with an prompt to tell the LLM to update and change things in our code base if necessary. Here is an example of a structured prompt for an initial user interface construction.
Note how we put the list in order of importance, This is not just a list of bulletsThis is the most important in the list, so the code optimizations are minors in relation to the creation of a src For the root of the repertoire for example.
Create a modern React application that follows best practices for scalability, maintainability, and performance. The application should:1. Be structured with a `src` folder that includes `components`, `hooks`, `services`, and `utils` directories.
2. Use React functional components with hooks for managing state and side effects.
3. Implement a responsive layout with CSS-in-JS using styled-components or another preferred library.
4. Include routing using React Router, with routes for Home, About, and Contact pages.
5. Make API calls to fetch data and display it on the Home page. Use Axios for API requests and implement error handling.
6. Use Context API for managing global state (e.g., user authentication status).
7. Follow a consistent code style using ESLint and Prettier.
8. Include a basic testing setup with Jest and React Testing Library for unit tests.
9. Ensure accessibility with semantic HTML and ARIA roles where necessary.
10. Optimize performance by using lazy loading for components and code splitting.
Generate the initial boilerplate code with placeholder components, and include comments explaining each major section and best practices.
Put it into practice
Here, I use co -pilot changes in Visual Studio Code to add the prompt.
Note: Here, I specify the root folder in which I want the invitation to execute.
Once I executed the invite, I will see an LLM status build the solution.
Results
So how did we do it? Well, we have had a work application, but it should be noted that you will want an LLM model that supports Long responses In these screens for example, we used Claude 3.7 Sonnet Which is an excellent LLM for the code, but it has a maximum generation limit for coding the atmosphere and stopped halfway, but we were able to produce the start of a well-scaffolded web application.
While AI continues to evolve, the mood coding is about to become the cornerstone of UX engineering. By adopting this innovative approach, UX engineers can redefine their roles, focusing on the creativity and empathy of users while taking advantage of AI to manage technical work.
In conclusion, the ambient coding is not only a tool – it is a transformer change that allows UX engineers to create better software experiences. While we sail in this new era, the balance between technological innovation and human expertise will be essential to unlock its full potential.
