Design lookup
Extract design systems from any website — colors, typography, spacing, components, layout.
@elyracode/design-lookup lets the agent learn from real websites. Point it at a URL and it produces a structured markdown reference the agent can apply when building UI.
Install
elyra install npm:@elyracode/design-lookup
Requirements
Puppeteer must be installed globally:
npm install -g puppeteer
Tools
| Tool | Description |
|---|---|
lookup_design |
Extract a website's design system and write a structured .elyra/LOOKUPDESIGN.md |
Commands
| Command | Description |
|---|---|
/lookup-design <url> |
Extract design system from a URL and save it locally |
Examples
/lookup-design https://stripe.com
Or let the agent call it automatically when you reference a site:
> Build a landing page that matches the design of stripe.com
> Make our checkout look like shopify.com
> Use the same color palette as linear.app
What it extracts
- Colors — primary, secondary, background, text, accent, and all CSS custom properties
- Typography — font families, weights, sizes, line heights
- Spacing — spacing scale derived from actual element measurements
- Components — button styles, card patterns, input styles, navigation
- Layout — max widths, grid systems, breakpoints
Output
Results are saved to .elyra/LOOKUPDESIGN.md in a structured format the agent can parse and apply. The file is overwritten on each lookup.
Pin it for persistent reference across the session:
/pin .elyra/LOOKUPDESIGN.md