UI Designer / Frontend Developer – Design Systems (m/f/d)

📍 Job Overview

Job Title: UI Designer / Frontend Developer – Design Systems (m/f/d)

Company: Nuwacom GmbH

Location: Koblenz, Germany / Luxembourg

Job Type: Permanent employee

Category: Frontend Engineering / Design Systems

Date Posted: May 04, 2026

Experience Level: Mid-Senior Level (3-6+ years)

Remote Status: Hybrid (Remote possible)

🚀 Role Summary

• Spearhead the development and strategic anchoring of the company's design system within the engineering and product teams.

• Translate complex UX/UI concepts and Figma designs into robust, production-ready, and reusable frontend components.

• Drive UI quality and consistency across the entire product suite through meticulous component development and rigorous review processes.

• Actively contribute to shaping a novel, AI-integrated design and development workflow, leveraging tools like Cursor and Claude Code.

• Foster widespread adoption of the design system across the development team, ensuring its practical application in daily coding activities.

📝 Enhancement Note: This role is pivotal in establishing a foundational design system, bridging the gap between design vision and technical execution. The emphasis on AI integration suggests a forward-thinking approach to software development, making it crucial for candidates to demonstrate adaptability and innovation in their approach to design and coding.

📈 Primary Responsibilities

• Systematically build, expand, and maintain the company's design system, evolving current practices with Tailwind CSS and shadcn/ui into a scalable, comprehensive framework.

• Develop highly reusable UI components with well-defined APIs, comprehensive documentation, and stringent quality standards, encompassing everything from basic buttons to intricate data grids.

• Accurately transform UX concepts, Figma designs, Lovable prototypes, and Claude Code outputs into production-ready code, serving as the primary technical liaison between design and development.

• Collaborate closely with the Head of Product Design and Head of Product to ensure the design system directly supports and reflects overarching product strategy and goals.

• Champion the adoption and consistent utilization of the design system within the broader development team, mitigating the risk of the system becoming outdated or underutilized.

• Uphold and enhance UI quality across all product areas through proactive code reviews, thorough testing, and continuous consistency checks.

• Actively participate in defining and refining a new design process that natively incorporates AI tools such as Cursor, Claude, and Lovable, embracing "vibe coding" as a practical methodology.

• Integrate design system rules and standards into AI-supported workflows through custom skills, prompts, and configurations, ensuring AI-generated code adheres to established quality benchmarks.

• Optimize component performance, responsiveness, accessibility, and overall code quality, particularly when integrating AI-generated code into production environments.

📝 Enhancement Note: The responsibilities highlight a dual focus on core design system engineering and pioneering AI integration. Candidates should be prepared to articulate their experience in both areas, emphasizing how they've managed component libraries and driven adoption while also experimenting with and implementing AI in development workflows.

🎓 Skills & Qualifications

Education: Bachelor's degree in Computer Science, Design, or a related field, or equivalent practical experience.

Experience: 3-6+ years of professional frontend development experience, with a proven track record of focusing on UI quality and component-based architecture.

Required Skills:

• React: Deep understanding and practical application of React for building dynamic user interfaces.

• TypeScript: Proficiency in TypeScript for robust and scalable frontend applications.

• Tailwind CSS: Extensive experience with Tailwind CSS for efficient and utility-first styling.

• Design System Development: Demonstrated experience in building, maintaining, and scaling design systems from the ground up.

• Reusable Component Architecture: Proven ability to develop well-documented, API-driven, reusable UI components.

• Figma Proficiency: Ability to interpret, question, and precisely implement designs from Figma.

• Modern CSS: Strong command of CSS Grid, Flexbox, and Custom Properties for sophisticated layouts and styling.

• AI-Supported Development Tools: Familiarity and practical experience with AI coding assistants like Cursor, Claude Code, or Lovable, viewing AI as a collaborative tool.

• English Fluency: Excellent written and verbal communication skills in English (company language).

• UX/UI Acumen: Strong understanding of user experience principles, visual design, consistency, and a keen eye for detail.

Preferred Skills:

• Next.js or Remix: Experience with modern React frameworks for full-stack development.

• shadcn/ui / Radix UI / Headless UI: Familiarity with component libraries that facilitate design system implementation.

• Storybook: Experience using Storybook for component documentation, visualization, and potentially visual regression testing.

• Accessibility Standards: Knowledge of WCAG 2.x and BITV (German disability discrimination law) for building inclusive interfaces.

📝 Enhancement Note: The "Must-Have" and "Nice-to-Have" sections clearly delineate essential skills. Candidates should ensure their application and portfolio prominently showcase experience with React, TypeScript, Tailwind CSS, and a strong portfolio demonstrating design system contributions. The emphasis on AI tools is a differentiator that candidates should address directly.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Design System Contributions: Showcase specific examples of components, patterns, or guidelines developed for a design system, detailing the problem addressed, the solution implemented, and the impact.

• Component Development: Present code snippets or live examples of reusable components built with React, TypeScript, and Tailwind CSS, highlighting API design, documentation, and quality standards.

• Figma Handoff Implementation: Include a case study demonstrating how you translated Figma designs into functional, production-ready frontend code, emphasizing precision and adherence to design specifications.

• AI Tool Integration Examples: If possible, provide examples of how you've used AI tools (Cursor, Claude Code, etc.) to streamline component development, generate documentation, or improve code quality.

Process Documentation:

• Workflow Design & Optimization: Detail your approach to designing and refining component development workflows, including how you incorporate feedback and iterate on component APIs.

• Implementation & Automation: Illustrate how you ensure consistent implementation of design system components across projects, potentially mentioning strategies for automated checks or integration.

• Measurement & Analysis: Explain how you measure the success and adoption of a design system, including metrics related to component usage, developer satisfaction, and UI consistency.

📝 Enhancement Note: A strong portfolio is critical for this role, particularly one that demonstrates tangible contributions to design systems and component libraries. Candidates should be prepared to walk through their portfolio, explaining their design decisions, technical implementations, and the impact of their work, especially concerning AI integration and process optimization.

💵 Compensation & Benefits

Salary Range: Based on the experience level (3-6+ years), location (Germany/Luxembourg), and specialized skills (Design Systems, AI integration), a competitive salary range can be estimated. For a UI Designer / Frontend Developer with this profile in Germany or Luxembourg, the annual gross salary is likely to fall between €60,000 and €85,000. This range is an estimate and will depend on the candidate's specific qualifications, interview performance, and the company's compensation structure.

Benefits:

• AI-First Culture: Opportunity to work at the forefront of AI-driven software development and shape future design processes.

• Real Creative Freedom: Significant autonomy to build and structure the company's design system from the ground up.

• Direct Collaboration with Leadership: Close working relationships with the Head of Product Design and Head of Product, ensuring direct impact and rapid decision-making.

• Permanent Employment: Secure, full-time position with a stable contract.

• Potential for Remote Work: Flexibility to work remotely, with on-site presence required in Koblenz or Luxembourg as needed.

• Professional Development: Opportunities to learn and grow with cutting-edge AI tools and design system methodologies.

Working Hours: Standard full-time working hours are expected, likely around 40 hours per week, with flexibility offered due to the hybrid/remote work possibility.

📝 Enhancement Note: Salary estimates are based on industry benchmarks for similar roles in Germany and Luxembourg, considering the specified experience level and specialization. Benefits are directly extracted from the "Why us?" section, highlighting key selling points for potential candidates.

🎯 Team & Company Context

🏢 Company Culture

Industry: Technology / AI Software. Nuwacom GmbH is building an AI-native workspace, positioning itself at the intersection of AI development and collaborative productivity tools. This industry context implies a fast-paced, innovative, and intellectually stimulating environment.

Company Size: The description indicates a "fast-growing team," suggesting a startup or scale-up environment. This usually means a dynamic culture with opportunities for significant individual impact, flatter hierarchies, and close-knit teams.

Founded: While not explicitly stated, the "fast-growing" and "building the next evolution of work" suggests a relatively young company, likely founded within the last 5-10 years, focused on pioneering AI technologies.

Team Structure:

• The role reports directly to product leadership (Head of Product Design, Head of Product), indicating a high level of visibility and direct influence.

• Collaboration is expected with the broader development team for design system adoption and with product management for strategic alignment.

Methodology:

• AI-Native Development: A core methodology that integrates AI tools (Cursor, Claude Code) into daily workflows for design and development.

• Design System Centric: A systematic approach to building and maintaining a scalable, reusable component library to ensure UI consistency and efficiency.

• Data-Driven Decisions: Implicit in the role's focus on metrics, testing, and optimization, ensuring that design and development choices are informed by performance and user feedback.

Company Website: nuwacom.ai

📝 Enhancement Note: The company culture is heavily influenced by its "AI-First" mission and its stage as a fast-growing tech company. Candidates should be prepared for an environment that values innovation, collaboration, and direct contribution to shaping the product and its development processes.

📈 Career & Growth Analysis

Operations Career Level: This role sits at a mid-to-senior level within Frontend Engineering, specifically focusing on Design Systems. It's a critical individual contributor role that has the potential to grow into a leadership position within design systems or frontend architecture. The emphasis on "building and anchoring" the system from the ground up offers a unique opportunity for foundational impact.

Reporting Structure: The role reports directly to senior product leadership (Head of Product Design and Head of Product). This close proximity to leadership allows for direct influence on product strategy and design system evolution, offering a high level of visibility.

Operations Impact: The impact of this role is significant, directly influencing UI consistency, developer productivity, product scalability, and the overall user experience. By establishing a robust design system and integrating AI-powered workflows, this role will be instrumental in accelerating development cycles and ensuring a high-quality, cohesive product offering that supports nuwacom's mission of making AI collaborative and secure.

Growth Opportunities:

• Design System Leadership: Opportunity to become the go-to expert and lead the ongoing development and strategic direction of the design system.

• AI Integration Specialization: Deepen expertise in leveraging AI tools for design and development, potentially leading initiatives in this area.

• Frontend Architecture: Grow into a broader frontend architecture role, influencing technical decisions beyond just the design system.

• Cross-functional Influence: Develop stronger relationships with product and design leadership, gaining insights into product strategy and business goals.

• Mentorship: As the design system matures, opportunities to mentor junior developers on design system principles and best practices.

📝 Enhancement Note: The role offers substantial growth potential, particularly for individuals who can excel in both established design system practices and emerging AI-driven development methodologies. The direct reporting line to leadership is a significant advantage for career progression.

🌐 Work Environment

Office Type: The company offers a hybrid work model, with options for remote work. This suggests a modern, flexible work environment that balances in-office collaboration with remote autonomy. The presence of offices in Koblenz and Luxembourg indicates potential for in-person team gatherings, workshops, and focused work sessions.

Office Location(s):

• Koblenz, Germany: Located at Universitätsstraße Technologiezentrum, suggesting a connection to a tech hub or university environment.

• Luxembourg: Located at Rue des Peupliers, indicating a presence in a key European business center.

Workspace Context:

• Collaborative Environment: Despite the hybrid/remote options, the emphasis on direct collaboration with leadership and ensuring adoption within the development team points to a culture that values teamwork and open communication.

• AI Tools & Technology: Access to and active use of modern AI tools (Cursor, Claude Code) will be integral to the daily workspace, providing a cutting-edge technological environment.

• Design System Focus: The workspace will be geared towards efficient component development, documentation, and the implementation of design standards, likely supported by robust development tooling.

Work Schedule: A standard full-time schedule (approx. 40 hours/week) is expected, with flexibility inherent in the hybrid/remote arrangement. This allows for better work-life integration and accommodates different working styles, crucial for focused design system work and AI experimentation.

📝 Enhancement Note: The hybrid nature of the role is a key aspect of the work environment, offering flexibility. Candidates should consider how they best thrive in a hybrid setting, balancing independent work with collaborative opportunities.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A review of your application, CV, and portfolio to assess qualifications and alignment with the role's core requirements, especially design system experience and AI tool familiarity.

• Technical Interview (Design System Focus): In-depth discussion on your experience building and maintaining design systems, including architectural decisions, component development strategies, and adoption challenges. Expect to discuss specific technologies like React, TypeScript, and Tailwind CSS. You may be asked to walk through your portfolio's design system examples.

• AI Integration Discussion: A conversation focused on your understanding and practical experience with AI-supported development tools (Cursor, Claude Code). Expect questions about how you envision integrating these tools into design processes and workflows.

• Practical/Coding Challenge: A hands-on exercise, potentially involving component development, refactoring existing code to align with design system principles, or a small task demonstrating problem-solving with AI tools. Portfolio artifacts can be used as reference.

• Team/Culture Fit Interview: Meeting with the Head of Product Design, Head of Product, and potentially other team members to assess cultural alignment, communication style, and collaboration approach. Discussions may revolve around your preferred working style and how you foster adoption.

Portfolio Review Tips:

• Highlight Design System Impact: Clearly articulate the problem your design system addressed, your specific contributions, and the measurable outcomes (e.g., improved consistency, faster development, reduced bugs).

• Showcase Reusable Components: Present well-documented code examples of components you've built, emphasizing clean APIs, abstraction, and adherence to standards. Use Storybook links if available.

• Demonstrate Figma-to-Code Proficiency: Include a case study or examples showing how you accurately translated designs from Figma into high-quality code.

• Address AI Integration: If you have examples of using AI in your workflow, showcase them, explaining the benefits and challenges. Be prepared to discuss your vision for AI in design systems.

• Tailor to Nuwacom: Understand Nuwacom's AI-first mission and tailor your presentation to demonstrate how your skills align with their goals.

Challenge Preparation:

• Component Development: Practice building responsive, accessible, and well-documented components using React, TypeScript, and Tailwind CSS.

• Design System Principles: Be ready to discuss core design system concepts, such as design tokens, atomic design, and API design for components.

• AI Tool Familiarity: Refresh your knowledge of AI coding assistants and be prepared to articulate how they can be integrated into a design system workflow.

• Problem-Solving: Practice breaking down complex problems into smaller, manageable parts, and be ready to explain your thought process clearly.

📝 Enhancement Note: The interview process emphasizes both technical proficiency in frontend development and design systems, as well as a forward-thinking approach to AI integration. Candidates should prepare to demonstrate their capabilities in both areas, using their portfolio as a key tool.

🛠 Tools & Technology Stack

Primary Tools:

• React: The core JavaScript library for building user interfaces.

• TypeScript: For static typing and enhanced code quality in frontend applications.

• Tailwind CSS: A utility-first CSS framework for rapid UI development.

• shadcn/ui: A popular component library built on Radix UI and Tailwind CSS, often used for design systems.

• Next.js / Remix (Plus): Modern React frameworks for server-side rendering, static site generation, and API routes.

Analytics & Reporting:

• Figma: Primary tool for design handoff, prototyping, and design specification.

• Storybook (Preferred): For isolated component development, documentation, and visual testing.

CRM & Automation:

• Cursor (Primary AI Tool): AI-first code editor designed to integrate AI capabilities directly into the development workflow.

• Claude Code (Primary AI Tool): An AI assistant for code generation, explanation, and debugging.

• Lovable (AI Tool): Likely another AI tool used for design or development assistance.

📝 Enhancement Note: The technology stack is modern and heavily focused on the React ecosystem, with a strong emphasis on Tailwind CSS and component libraries. The explicit mention of AI tools like Cursor and Claude Code highlights the company's commitment to AI-augmented development.

👥 Team Culture & Values

Operations Values:

• AI-First Approach: A deep belief in leveraging AI to enhance human capabilities, drive efficiency, and shape the future of work. This translates to a proactive adoption of AI tools and methodologies.

• Quality & Craftsmanship: A commitment to high standards in UI/UX design and frontend development, evidenced by the focus on reusable components, clean code, and meticulous attention to detail.

• Collaboration & Transparency: A culture that encourages open communication, direct interaction with leadership, and shared ownership of product development and design system adoption.

• Innovation & Continuous Learning: A drive to explore new technologies and processes, particularly in the rapidly evolving field of AI, fostering an environment where experimentation and learning are encouraged.

• Empowerment: A philosophy where AI is seen as a tool to empower teams, not replace them, emphasizing human creativity and strategic thinking.

Collaboration Style:

• Cross-functional Integration: Close partnership between design, product management, and engineering to ensure the design system is aligned with business goals and user needs.

• Proactive Feedback Loops: Encouraging constructive feedback on components, designs, and processes to drive continuous improvement.

• Knowledge Sharing: A culture that promotes sharing best practices, learnings from AI tool usage, and design system implementation strategies across the development team.

📝 Enhancement Note: The company values are strongly tied to its mission and its innovative use of AI. Candidates should demonstrate an alignment with these values, particularly their enthusiasm for AI-driven development and their commitment to quality and collaboration.

⚡ Challenges & Growth Opportunities

Challenges:

• Establishing a Mature Design System: Building a comprehensive and well-adopted design system from a relatively nascent stage requires significant strategic planning, technical execution, and stakeholder management.

• AI Integration Best Practices: Defining and implementing effective workflows for AI-assisted code generation and design within established quality and consistency standards will be an ongoing challenge.

• Driving Adoption: Ensuring the entire development team consistently utilizes the design system requires effective communication, training, and ongoing support.

• Balancing Innovation with Stability: Integrating cutting-edge AI tools while maintaining robust, performant, and accessible frontend applications demands careful consideration and testing.

Learning & Development Opportunities:

• Deep Dive into AI-Augmented Development: Gain hands-on experience and expertise in leveraging AI tools for design and code generation, becoming a thought leader in this emerging area.

• Design System Architecture: Develop advanced skills in architecting scalable and maintainable design systems, influencing best practices within the company.

• Cross-functional Product Strategy: Work closely with product leadership, gaining insights into strategic decision-making and product roadmap development.

• Industry Conferences & Certifications: Opportunities to attend relevant industry events focused on design systems, frontend development, and AI in software engineering.

📝 Enhancement Note: The challenges presented are significant but also represent key growth areas. Candidates who are motivated by problem-solving and eager to push boundaries in AI-integrated development will find this role particularly rewarding.

💡 Interview Preparation

Strategy Questions:

• Design System Strategy: "How would you approach building and scaling a design system from scratch at Nuwacom, considering our AI-first mission and existing component library?" (Prepare to discuss methodology, phases, key stakeholders, and metrics for success.)

• AI Integration in Design: "Describe your vision for integrating AI tools like Cursor and Claude Code into our UI design and frontend development workflow. What are the potential benefits and how would you mitigate risks?" (Focus on practical application, workflow examples, and quality assurance.)

• Driving Adoption: "What strategies would you employ to ensure consistent adoption of the design system across a development team? How would you handle resistance or differing opinions?" (Emphasize communication, documentation, training, and feedback mechanisms.)

Company & Culture Questions:

• AI-First Culture Alignment: "How does your personal approach to technology and development align with our 'AI-First' philosophy? Can you share an example where you've embraced new technologies to improve processes?" (Connect your experience with AI tools and your passion for innovation.)

• Collaboration Style: "Describe your ideal collaboration with product designers and other developers. How do you ensure alignment and effective communication?" (Highlight your experience working cross-functionally and your proactive communication approach.)

• Quality Focus: "How do you define and maintain UI/UX quality in your work? Can you share an example where you've gone above and beyond to ensure a high-quality user experience?" (Emphasize your attention to detail, understanding of UX principles, and commitment to best practices.)

Portfolio Presentation Strategy:

• Structure Your Narrative: Begin with an overview of your role and the problem you solved. For design system projects, clearly delineate your specific contributions and the system's overall goals.

• Showcase Code & Implementation: Be prepared to discuss the technical aspects of your components, including API design, styling with Tailwind CSS, and the use of React/TypeScript. Provide links to live demos or repositories where possible.

• Highlight AI Integration: If you have relevant examples, present them clearly, explaining the tools used, the process, and the outcomes achieved through AI assistance.

• Quantify Impact: Whenever possible, use metrics to demonstrate the success of your work (e.g., reduction in development time, improvement in UI consistency scores, increased component usage).

• Engage and Discuss: Treat the portfolio review as a collaborative discussion. Be ready to answer questions about your design choices, technical decisions, and future aspirations.

📝 Enhancement Note: Interview preparation should focus on demonstrating a blend of strong technical skills in frontend development and design systems, coupled with a proactive and innovative mindset for integrating AI. Candidates should be ready to articulate their approach to building and scaling, as well as fostering adoption.

📌 Application Steps

To apply for this UI Designer / Frontend Developer – Design Systems position:

• Submit your application through the provided link on the Nuwacom GmbH careers page.

• Portfolio Customization: Tailor your resume and cover letter to highlight your experience with React, TypeScript, Tailwind CSS, design systems, and AI-supported development tools. Emphasize projects that showcase your ability to build reusable components and translate designs into code.

• Resume Optimization: Ensure your resume clearly outlines your 3-6+ years of professional frontend experience, specifically calling out your contributions to design systems and any experience with modern CSS frameworks and AI coding assistants. Use keywords like "Design Systems," "React," "TypeScript," "Tailwind CSS," "UI Components," and "AI Development."

• Portfolio Walkthrough Preparation: Prepare a concise presentation of your portfolio, focusing on 1-2 key design system projects. Be ready to discuss your process, technical implementation, challenges, and the impact of your work, particularly how you've integrated AI tools.

• Company Research: Familiarize yourself with Nuwacom's mission, the AI-first culture, and their product offerings. Understand how a design system and AI integration contribute to their broader goals of creating a collaborative and secure AI-native workspace.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.