> Markdown version of [/jobs/ext/2972907-design-engineer-ui-frontend](https://www.wearedevelopers.com/jobs/ext/2972907-design-engineer-ui-frontend). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Design Engineer (UI, Frontend) - **Company:** Octopus Energy Ltd - **Location:** London, UK - **Experience:** Experienced - **Contract:** Permanent contract - **Skills:** Adobe Analytics, Clean Code Principles, JavaScript (Programming Language), Computer Animation, Artificial Intelligence, Cursor (Graphical User Interface Elements), Design of User Interfaces, Monitoring of Systems, Next.js, Web Content Accessibility Guidelines, ReactJS, Documentation System, Playwright, Front End Software Development - **Published:** September 18, 2026 - **Apply:** https://jobs.lever.co/octoenergy/0fdb0472-525f-43aa-baa4-cd3229bece54/apply ## About the Role * Experience: 2+ years in front-end development, design engineering, or creative tech. Whether you started in design or engineering, you care about the output: shipped, accessible, on-brand code. * AI-Native Workflow: Comfort routinely using AI-assisted development tools (Cursor, Claude, Copilot, or equivalent) to move fast in exploration and delivery. * Production React Fluency: Strong fundamentals in React and Next.js, with experience contributing clean code to shared repositories. * Design System Experience: Excitement to do the foundational work required to elevate an active component library into a mature design system. * Portfolio: A portfolio demonstrating visual craft, motion/animation, interactive web projects, or design system work. * UI Design Fundamentals: Solid grounding in composition, spatial layout, visual hierarchy, typography, and easing curves. * Accessibility Standards: Working knowledge of accessibility practices up to WCAG 2.1 AA standards., * Experience with Storybook (or equivalent component documentation tools) for design system architecture. * Familiarity with automated testing frameworks (we use Playwright and Jest) or a willingness to learn. * Exposure to web observability, monitoring tools, or A/B testing setups. * Experience running automated accessibility tests (e.g., axe-core). ## Related Videos - [But, you're not Facebook](https://www.wearedevelopers.com/videos/378-but-you-re-not-facebook) - [Boost Productivity with AI: Figma & Playwright MCP Workflows - Aris Markogiannakis](https://www.wearedevelopers.com/videos/1768-boost-productivity-with-ai-figma-playwright-mcp-workflows-aris-markogiannakis) - [Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS](https://www.wearedevelopers.com/videos/282-watch-tests-go-brrrr-getting-started-with-cypress-in-reactjs) - [GraphQL + Apollo + Next.js: A Lovely Trio](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) - [Are Classical Automation Frameworks Dead? How AI Agents Are Transforming QA](https://www.wearedevelopers.com/videos/100243-are-classical-automation-frameworks-dead-how-ai-agents-are-transforming-qa) - [From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners](https://www.wearedevelopers.com/videos/766-from-zero-to-hero-nextjs-13-and-tailwind-css-for-beginners) ## Related Articles - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025) - [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers) - [Dev Digest 121 - AI goes offline](https://www.wearedevelopers.com/magazine/456-dev-digest-121-ai-goes-offline) - [Dev Digest 113 - Debugging above the cloud](https://www.wearedevelopers.com/magazine/422-dev-digest-113-debugging-above-the-cloud) - [Dev Digest 129 - Now that's what I call private data!](https://www.wearedevelopers.com/magazine/468-dev-digest-129-now-that-s-what-i-call-private-data)