get_component_styles Architecture
Per-component CSS styles linked to shared page elements — font, color, spacing, and layout properties
Overview
Part of the Architecture Toolkit (Phase 4). After design systems are extracted, this tool returns per-component CSS styles that map directly to shared page elements from Phase 1. Each component style record includes typography, colors, spacing, borders, and layout properties identified from the site's CSS.
How It Works
- During design system extraction, shared page elements (headers, footers, navs, sidebars, widgets) are matched against the CSS for each design system group.
- An LLM analyzes the CSS to identify which styles apply to each element based on element type, label, description, and code pattern.
- Extracted properties include font_family, font_size, font_weight, line_height, color, background_color, padding, margin, border, border_radius, box_shadow, max_width, display, position, and additional_properties.
- Each component style is linked to both its design system and its shared page element, providing full traceability.
Input Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
job_id |
string |
required | The clone job ID returned by discover_all_pages |
design_system_id |
string |
optional | Optional: filter to a specific design system |
What You Get Back
- Element type and label (e.g. 'header — Main Site Header')
- Font properties (family, size, weight, line-height)
- Color properties (text color, background color)
- Spacing properties (padding, margin)
- Border and decoration properties (border, radius, box-shadow)
- Layout properties (display, position, max-width)
- Additional CSS properties specific to the element
- LLM model used for extraction
Example Use Case
An agent calls get_component_styles to learn that the site header uses Inter font at 16px/400 weight, #333 text on #fff background, 16px 24px padding, and flex display. It uses these exact CSS values to style the cloned header component.
Tips
Use design_system_id to filter styles when a site has multiple design systems.
Null values mean the property could not be confidently determined from CSS — the agent should inspect the source page.
additional_properties captures CSS beyond the standard set (e.g. backdrop-filter, clip-path).
Combine with get_shared_page_elements for element structure and get_design_systems for global CSS tokens.