AI-First Front-End Engineer

Role Mission

Own the technical direction and implementation of Mermaid's AI-augmented front-end web development. Enabling anyone at Mermaid to prototype and deliver product experiences that are high-quality and on-brand. Ensure Mermaid’s design system (“Coral”) is a scalable, reliable, and elegant system that enables every user-facing EPD team to deliver consistent, high-quality user experiences efficiently. Partner closely with brand design to ship marketing and community websites that are comparable in quality to the best SaaS companies.

Outcomes

1. Enable better faster prototyping: With Coral components connected to modern prototyping tools, designers, engineers, and product managers are empowered to build prototypes and user-facing interfaces, without waiting for designs. Enabling Product Design to focus on the highest leverage product experiences that are a differentiator and competitive advantage for Mermaid.

2. Use the latest advancements in web technologies to elevate Mermaid’s product experience:

   Leverage modern web technologies to elevate the product experience: Through technical leadership and hands-on implementation, apply the latest advancements in web technologies to improve diagram viewing, interaction, and editing. supporting Mermaid’s evolution from static artifacts to living diagrams.

3. Rapidly deliver and maintain a scalable design system:

   Coral is a robust, well-documented, and extensible system used by all user-facing EPD teams, minimizing duplication, improving development velocity, while ensuring visual and interaction consistency across product areas. Do not wait for mockups, but refer to existing designs, and build upon frameworks such as Shadcn to quickly deliver initial versions of commonly used components.

4. Deliver and maintain class-leading marketing websites:

   Including Mermaid’s core marketing site, landing pages, community template site, and blog. Ensuring they are performant, accessible, reliable, and aesthetically competitive with the highest-quality SaaS product websites.

5. Deliver and maintain high-quality open source web surfaces:

   Raise the quality bar of the open source web surfaces for Mermaid.js and product documentation. Making them effortless to navigate and a pleasure to read, while always being in line with Mermaid’s brand values.

Competencies

1. Design system architecture:

   Builds and evolves scalable component libraries, design tokens, theming systems, and documentation that serve both product and marketing needs across teams.

2. Front-end engineering excellence:

   Deep expertise in modern front-end frameworks, performance optimization, accessibility standards, and maintainable architecture.

3. Cross-functional collaboration:

   Works closely with Brand Design, Product Design, and Engineering to align on standards, reduce friction, and ship cohesive experiences.

4. Platform stewardship:

   Proactively identifies technical debt, scaling risks, and architectural weaknesses within Coral and public web surfaces, addressing them before they slow velocity or compromise quality.

5. Knowledge of latest design and prototyping tools:

   Knowledge of modern design and prototyping tools: Acts as a bridge between Design and Engineering. Comfortable navigating Figma and modern prototyping workflows to move work forward independently, reducing dependency on detailed design specifications.

6. AI-augmented development:

   Incorporates AI coding assistants and generative tools into daily workflows to accelerate delivery and raise quality. Actively follows how AI is changing front-end development and brings new approaches to the team.

7. Craft and taste:

   Holds an exceptional quality bar. Recognizes when something feels inconsistent or “off” and corrects it before it ships. Consistency is non-negotiable. Demonstrates strong design sensitivity and does not constantly rely on design direction to deliver work that meets the expectations of users and the brand. Skillset should not be limited to visual appearance but also transitions and other lightweight animations.

Cultural Fit

1. Kind, direct, and low ego:

   Operates with integrity and builds strong cross-functional trust.

2. Ambitious:

   Cares about outcomes, not credit; raises the standard for the team.

3. Comfortable with autonomy:

   Thrives in a global, async, fast-moving environment.

4. Passionate about the work:

   Takes pride in building something valuable and lasting.

5. Ruthlessly prioritizes:

   Eliminates distractions and focuses on what drives lasting impact.

6. Creatively grounded:

   Playful, original thinker who solves problems from first principles, draws inspiration from unexpected places, and builds with intention and authenticity — attuned to what makes Mermaid and its community unique.

Location

Mermaid is global organization and the role is remote. EU, UK, Eastern US timezones only.