> Markdown version of [/videos/1210-unlocking-seamless-collaboration-design-first-apis-for-ui-components?t=250](https://www.wearedevelopers.com/videos/1210-unlocking-seamless-collaboration-design-first-apis-for-ui-components?t=250). 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).

---

# Unlocking Seamless Collaboration: Design-First APIs for UI Components

Treat your UI elements like backend services with design-first APIs. Defining clear contracts before coding unlocks seamless team collaboration, framework-agnostic longevity, and fully automated documentation.

- **Speakers:** Lucien Immink
- **Event:** WeAreDevelopers LIVE
- **Published:** September 18, 2024
- **Duration:** 28:35
- **URL:** https://www.wearedevelopers.com/videos/1210-unlocking-seamless-collaboration-design-first-apis-for-ui-components
- **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/602e0de7f4eddab547c697effb3640ed/thumbnails/thumbnail.jpg?time=252835ms

## Access

Playback and chapters for this video are available with a Free account.

## Related Moments

- [Building a framework-agnostic design system with web components](https://www.wearedevelopers.com/videos/648-accessibility-with-web-components) (from "Accessibility with Web Components")
  - **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/94ac1b763a59a26dc68a0ca9efca7ed5/thumbnails/thumbnail.jpg?time=265545ms
- [Building framework-less architectures with native custom web components](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
  - **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/f5f0edbbe8f4a7d591e67f409cd7e5c5/thumbnails/thumbnail.jpg?time=13900ms
- [Building and documenting UI components in isolation](https://www.wearedevelopers.com/videos/975-leveraging-storybook-for-component-driven-development-outside-of-your-classic-component-library) (from "Leveraging Storybook for Component Driven Development outside of your classic Component Library.")
  - **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/e95a88635a9405d8cd695a52fca7c556/thumbnails/thumbnail.jpg?time=365905ms
- [Building isolated UI elements using standard web components](https://www.wearedevelopers.com/videos/774-why-lit-is-fire) (from "Why LIT is Fire")
  - **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/342ef75427635287784c6e5e1c0c20c2/thumbnails/thumbnail.jpg?time=229410ms
- [The main promise of UI component libraries](https://www.wearedevelopers.com/videos/650-building-a-component-library-for-modern-challenges) (from "Building a component library for modern challenges")
  - **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/98e806a33e7aa1ba9db936c3b3dbd5a7/thumbnails/thumbnail.jpg?time=249965ms
- [Designing flexible and reusable component APIs](https://www.wearedevelopers.com/videos/975-leveraging-storybook-for-component-driven-development-outside-of-your-classic-component-library) (from "Leveraging Storybook for Component Driven Development outside of your classic Component Library.")
  - **Thumbnail URL:** https://customer-goifxnzhrq3d0d54.cloudflarestream.com/e95a88635a9405d8cd695a52fca7c556/thumbnails/thumbnail.jpg?time=365905ms

## Related Articles

- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)

## Related Jobs

- [Staff Frontend Design Engineer - AI & Systems Leader](https://www.wearedevelopers.com/jobs/ext/4629402-staff-frontend-design-engineer-ai-systems-leader) at **GitHub**
- [Senior Web Software Architect, AI Experiences](https://www.wearedevelopers.com/jobs/ext/4523834-senior-web-software-architect-ai-experiences) at **TeamViewer Germany GmbH**
- [Staff Engineer - Web Platform](https://www.wearedevelopers.com/jobs/ext/3243034-staff-engineer-web-platform) at **Intercom, Inc.**
- [Product Designer, Web3 Fintech & AI Prototyping](https://www.wearedevelopers.com/jobs/ext/3903006-product-designer-web3-fintech-ai-prototyping) at **Bitpanda**
- [Senior Product Engineer](https://www.wearedevelopers.com/jobs/48544-senior-product-engineer) at **Blacksmith Software**
- [Staff Frontend Design Engineer - AI & Systems Leader](https://www.wearedevelopers.com/jobs/ext/4622186-staff-frontend-design-engineer-ai-systems-leader) at **GitHub**