Unlocking Seamless Collaboration: Design-First APIs for Components
summary
Argues that treating UI components like APIs and authoring a custom elements manifest first yields concrete benefits: two-way generation between a JSON manifest and a skeleton component (built with Lit in the demo), automatic IDE autocompletion and linting, Storybook story generation, and an interactive playground that emits real events. Demonstrates a minimal component that dispatches test events and uses CSS variables, shows a manifest analyzer that successfully generates docs and code, and proves the approach works end to end.
AI-written summary · about
chapters (12)
- 0:00Introduction and speaker intro
- 1:47Why design-first APIs matter
- 5:00Design-first for UI components
- 8:12Framework-agnostic web components
- 10:21Custom elements basics
- 11:48Custom Elements Manifest explained
- 13:12Generating components from manifests
- 15:22Skeleton component walkthrough
- 18:36Automation and tooling benefits
- 21:53Documentation and testing tools
- 23:39Resources and links
- 25:23Wrap-up and key takeaways
related talks
39mDesigning with Components
24mFrom Sketch to Code Designing a Component Kit
28mFrom Sketch to Code Designing a Component Kit
32mUI Development Made Simple
21mShared Components Beyond the Design System
35mDesign system - From a Developer Point-of-View
24mDesigning Components for Fun, Profit and Sanity
44mIt’s all about components