Key Responsibilities
- Design-to-Code Mastery: Translate complex Figma/Adobe XD designs into clean, modular, and reusable code.
- AI-Augmented Prototyping: Use generative UI tools (like Vercel v0 or Galileo) to rapidly iterate on layouts and component structures before committing to production code.
- Design System Architecture: Maintain and evolve our component library. Implement AI-driven Design Linting to ensure every new component automatically adheres to brand guidelines.
- Intelligent UI Components: Build and optimize UI patterns specifically for AI features, such as streaming text states, human-in-the-loop feedback loops, and prompt-input ergonomics.
- Workflow Automation: Leverage LLM-based coding assistants (Cursor, GitHub Copilot) to automate boilerplate, write unit tests for UI components, and refactor legacy CSS.
Detailed AI-Leverage Scope
To be clear, we aren't looking for someone to prompt their way out of a job. We want a Design Engineer who uses AI to amplify their taste and technical precision. This scope covers three specific pillars:
1. AI-Driven Production Efficiency
The Design Engineer is expected to utilize AI to eliminate grunt work.
- Code Generation: Using AI to scaffold complex Tailwind layouts or generate accessible ARIA-compliant boilerplate.
- Automated Documentation: Using AI agents to keep Storybook documentation and design tokens in sync across Figma and GitHub.
- Visual Regression: Implementing AI-powered testing tools that see UI regressions better than traditional snapshot testing.
2. Building AI-Native User Experiences
Our product is evolving, and the UI must keep up. You will be the lead on:
- Generative UI: Designing interfaces that adapt in real-time based on AI model outputs (e.g., dynamic dashboards that change layout based on the data being analyzed).
- Latency Management: Designing delightful skeleton states and transitions for long-running LLM inferences to keep the user engaged.
- Contextual Guardrails: Crafting UI patterns that clearly distinguish between AI-generated content and verified system data.
3. Tooling & Pipeline Innovation
You won't just use the tools; you'll help choose and tune them.
- Custom GPTs/Agents: Creating internal AI agents trained on our specific design system to help other frontend engineers build on-brand components faster.
- Asset Generation: Using AI to generate high-fidelity icons, SVGs, or placeholders, reducing the dependency on static asset handoffs.
Requirements
- Expert-level TypeScript and React (or your framework of choice) or Flutter, React Native.
- Mastery of Tailwind CSS, CSS-in-JS (Styled Components), or modern CSS (Grid/Flexbox).
- High proficiency in Figma (Auto Layout, Variables, and Prototyping).
- Experience with visual regression testing and Unit tests (Jest/Cypress).
Our Benefits
- Competitive compensation including a 13th-month wage and up to 3 months of performance-based bonus.
- Laptops and other needed devices are currently supplied to all employees.
- BE Corp budget is allocated for using services such as transportation, food, and passenger car bookings in Be application.
- Annual health checks and premium medical healthcare (PTI) after probation.
- 15 days of annual leave is applied for the entire employees.
- Company trips, team-building activities, and happy hour events are organized on a quarterly or annual basis.
