get_design_systems Architecture
Extract design systems from crawled CSS — grid layout, breakpoints, spacing scale, and CSS custom properties
Overview
Part of the Architecture Toolkit (Phase 4). After CSS is collected during page discovery, DoneDone.Run groups stylesheets by their co-occurrence across pages and uses LLM analysis to extract structural CSS properties: grid system configuration, responsive breakpoints, spacing scales, and CSS custom properties (variables). Pages sharing the same stylesheet set are grouped into one design system.
How It Works
- During page discovery, external stylesheets (<link rel='stylesheet'>) and inline <style> blocks are collected and stored for each page.
- After shared element deduplication completes, CSS is grouped by stylesheet URL sets — pages sharing the same CSS files form one design system group.
- An LLM analyzes the combined CSS for each group to extract grid system rules, responsive breakpoints, spacing scale tokens, and CSS custom properties.
- A second LLM pass links per-component styles to shared page elements (headers, footers, navs, sidebars, widgets) discovered in Phase 1.
- Results are stored in the database with model provenance and linked to their source stylesheets.
Input Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
job_id |
string |
required | The clone job ID returned by discover_all_pages |
What You Get Back
- Design system label (auto-generated from CSS analysis)
- Grid system configuration (columns, gaps, max-width)
- Responsive breakpoints (names and pixel values)
- Spacing scale (token names and values)
- CSS custom properties (variable names and default values)
- Source stylesheet URLs for each design system
- Component style count (linked per-element styles)
- LLM model used for extraction
Example Use Case
An agent calls get_design_systems after discovery to learn that airbornesensor.com uses a 12-column grid with 24px gaps, 5 breakpoints (xs: 480px through xl: 1280px), a spacing scale from 4px to 64px, and 23 CSS custom properties. The agent uses this to configure Tailwind or write matching CSS for the cloned site.