Webgraft — the web is your component library

Field notes

Webgraft organizes references into a searchable index and breaks each site into implementation-oriented material: fonts, colour palettes, design tokens, and CSS variables. Its clipping workflow is described as element-level capture through a hover interface, followed by AI-generated editable React. The public index shows 167 sites in 19 categories, while the shared Component Universe names reusable examples such as PricingCard and StatusBadge. Free accounts receive three AI clips monthly; paid tiers add exports, private clips, team libraries, and API access.