> Markdown version of [/jobs/ext/3024246-design-engineer-ui-frontend](https://www.wearedevelopers.com/jobs/ext/3024246-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 Electroverse - **Location:** Valencia, Spain - **Salary:** €30,000.0 - €35,000.0 - **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, Octopus Deploy, Next.js, Web Content Accessibility Guidelines, Web Applications, Website Wireframe, ReactJS, Documentation System, Material UI, Playwright, Figma, Front End Software Development - **Published:** September 22, 2026 - **Apply:** https://www.adzuna.es/contact-us.html ## 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. Nice to have 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). ## Description You'll join the Front-end team as a hybrid practitioner working at the intersection of visual craft, UI polish, and front-end code. Your primary focus will be on Octopus Fleet our B2B platform powering business electrification. Building high-impact marketing experiences, web apps, and application UI. Because Fleet shares a component library with our consumer-facing Electroverse B2C platform, you'll also contribute to consumer touch-points to drive design consistency across both ecosystems. Sitting directly between design and engineering, you'll take early Figma concepts, quick prototypes, or loose wireframes and turn them into polished, accessible, production-ready software. What you'll do Concept, prototype, and build web experiences across public-facing marketing pages, landing pages, and core app UI for Octopus Fleet and Electroverse. Help evolve our shared component library into a true design system by building robust components, setting missing conventions, and bridging the UI gap across products. Refine micro-interactions, motion, and visual polish within our web apps to ensure craft isn't traded away when timelines tighten. Take unfinished inputs, from rough Figma sketches to early prototypes and translate them into clean, accessible code. Work directly alongside designers, product managers, and engineers as the bridge between design intent and shipped code. ## Related Videos - [Bridging the Gap](https://www.wearedevelopers.com/videos/794-bridging-the-gap) - [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) - [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) - [GraphQL + Apollo + Next.js: A Lovely Trio](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) - [Designing high quality software with AI](https://www.wearedevelopers.com/videos/100136-designing-high-quality-software-with-ai) - [Breaking Down Silos Between Design and Development ](https://www.wearedevelopers.com/videos/194-breaking-down-silos-between-design-and-development) ## 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)