{"uid":"cap_hXqbRUTFDckOXQrnplyr_","slug":"context-dev-styleguide-extractor-49c0de3d","name":"Context.dev Styleguide Extractor","description":"Extract a comprehensive design system from a website including colors, typography, spacing, shadows, and UI components.","url":"https://mpp.orthogonal.com/context-dev/web/styleguide?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":null,"responseSchema":null,"example":null,"exampleRequest":null,"tags":["scraping","brand","context","extraction","web","data"],"displayCostAmount":"0.03","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"registry","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.03/call","primary":{"kind":"static","protocol":"mpp","network":"tempo","amountUsd":"0.03","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"mpp","network":"tempo","amountUsd":"0.03","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_ILop-989iSEGJ4y9y27dD","protocol":"mpp","methodType":"crypto","chain":"tempo","mode":"charge","costAmount":"0.03","costPer":"request","priority":0,"asset":"0x20c0000000000000000000006a37DA5C996874BE","unit":"request","depositMicros":null,"planRef":null}],"brandName":"Context.dev","brandSlug":"context-dev-mpp","brandBaseUrl":"https://www.context.dev","brandDocsUrl":"https://www.context.dev","whatItDoes":"Extracts a comprehensive design system from any website, including colors, typography, spacing, shadows, and UI components.","exampleAgentPrompt":"Can you pull the full design system from stripe.com — I need the color palette, typography, spacing, shadows, and any UI component styles they use?","exampleUseCases":[{"title":"Matching a client's brand design","prompt":"Extract the complete design system from acmecorp.com — I need their exact colors, fonts, spacing scale, and shadow styles so I can match their brand in a new component library."},{"title":"Competitive design benchmarking","prompt":"Pull the styleguide from linear.app so I can compare their design tokens — colors, typography, and UI components — against our own product's visual language."},{"title":"Onboarding to a new codebase","prompt":"Grab the design system from our company site at designco.io — I need to understand what colors, fonts, and spacing they're using before I start building new pages."}],"resultDescription":"Returns a structured design system object containing: extracted color palettes (primary, secondary, accent, neutral), typography details (font families, sizes, weights, line heights), spacing scale, box shadow definitions, and identified UI components with their visual properties. All values are typically expressed as CSS-compatible tokens.","failureModes":["Website blocks scraping bots (returns empty or partial results)","Dynamic/SPA websites where styles are loaded via JavaScript may not be fully captured","Private or login-gated websites that cannot be accessed without authentication","Invalid or unreachable URL returns an error","Websites using inline styles or CSS-in-JS may yield incomplete design token extraction"],"whenToPreferThis":"Choose this endpoint when you need a comprehensive, structured snapshot of a website's visual design system — colors, fonts, spacing, and components — in a single call. It is ideal for design replication, brand analysis, competitive benchmarking, or onboarding to an existing design language. Prefer it over manually inspecting CSS or using a generic scraper when design-specific structured output is needed.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-12T00:40:38.285Z","isFirstParty":false,"canonicalSlug":"context-dev-styleguide-extractor-0a95c607"}