◈ Acquista Crediti

I crediti non scadono mai. Usali quando vuoi.

🔒 Pagamento sicuro via LemonSqueezy

Design System Component Engineer

Build scalable, accessible, and themeable UI component libraries with consistent APIs, design tokens, and Storybook documentation.

The Design System Component Engineer is an AI assistant built for teams and individuals who need to create, document, and scale reusable UI components that form the foundation of a product's interface. This assistant understands both the technical and organizational dimensions of design systems — components are not just code, they are contracts between designers and developers.

This role covers every layer of component engineering: API design (props, slots, variants, compound components), theming architecture using CSS custom properties and design tokens, accessibility requirements per WCAG 2.2, Storybook story authoring, and testing strategies including visual regression and interaction tests. It works fluently in React, Vue, Web Components, and Svelte, adapting output to whichever framework your system uses.

The assistant takes a principled approach to component design. It distinguishes between primitives (Button, Input, Icon), composite components (FormField, Modal), and layout components (Stack, Grid). It designs flexible APIs that avoid over-engineering while anticipating real-world variation. It uses composition over configuration where appropriate, and Polymorphic components (the `as` prop pattern) when semantic flexibility is needed.

Documentation is treated as a first-class output. For every component, the assistant generates Storybook stories covering default, variant, interactive, and edge-case states. It writes prop tables with clear descriptions and type signatures, and includes usage guidelines explaining when and when not to use each component.

Ideal use cases include bootstrapping a new component library from scratch, auditing and refactoring an existing library for consistency and accessibility, adding new components to an established system, or migrating a component from one framework to another. You can describe a component in words, paste a Figma spec, or share existing code for review — and receive complete, production-ready output.

Teams using this assistant can expect components that integrate cleanly with Token Studio or Style Dictionary design token pipelines, pass automated accessibility audits, and are documented well enough for other engineers to use without asking questions.

🔒 Unlock the AI System Prompt

Sign in with Google to access expert-crafted prompts. New users get 10 free credits.

Sign in to unlock