{"enrichment":{"faq":[{"a":"Design Context Extract analyzes screenshots to extract design tokens and color palettes, capturing the visual foundation of your UI. It identifies colors, fonts, spacing, and component patterns, then exports them as structured design tokens or Tailwind configuration so you can bootstrap or audit your design system from a visual reference.","q":"What can design-context-extract do with a screenshot?"},{"a":"Yes. Design Context Extract can analyze live URLs to create a design system from the running application. It captures the full visual identity\u2014colors, typography, spacing, and component structure\u2014and generates exportable design tokens or Tailwind config directly from the live site.","q":"Can I extract design tokens from a live URL?"},{"a":"Design Context Extract can capture motion specs and animation behavior from screen recordings and videos. It analyzes the timing, easing, and transitions in your UI, allowing you to document animation patterns alongside static design tokens for a complete design system.","q":"How does design-context-extract handle animations?"},{"a":"Design Context Extract generates Tailwind configuration and W3C design token outputs from your visual sources. Both formats are structured and ready to integrate into your design system or development workflow.","q":"What output formats does design-context-extract support?"},{"a":"Yes. Design Context Extract audits UI consistency across your application and recommends shadcn/ui style matches where applicable. This helps you identify design drift and align your components with established design patterns.","q":"Can design-context-extract audit UI consistency?"},{"a":"Design Context Extract works with screenshots, live URLs, screen recordings, videos, and your project's existing styles. This flexibility lets you extract design DNA from any visual source\u2014whether it's a competitor's site, a design mockup, or your own running application.","q":"What sources can design-context-extract analyze?"}],"shadow_tags":["design-extraction","token-generation","visual-audit","ui-analysis","motion-capture","style-detection","palette-extraction","design-reverse-engineering","system-documentation","css-inference"],"summary_rewrite":"Design Context Extract analyzes existing applications to capture their visual foundation\u2014colors, fonts, spacing, and component structure\u2014and exports the results as structured design tokens or Tailwind configuration. It works from screenshots, live URLs, screen recordings (including motion specs), or your project's existing styles, making it easy to audit designs or bootstrap a design system from a live reference."},"files":[{"bytes":13276,"path":"src/skills/design-context-extract/SKILL.md","sha256":"fa585fe682fb513d0291a57bf8aa9059689eb612197d3396b9e85b04e5ec6ead","url":"https://skillfed.io/files/yonatangross/orchestkit/design-context-extract/f1f5eda5/SKILL.md"}],"id":"yonatangross/orchestkit/design-context-extract","links":{"html":"https://skillfed.io/yonatangross/orchestkit/design-context-extract","md":"https://skillfed.io/yonatangross/orchestkit/design-context-extract.md","repo":"https://github.com/yonatangross/orchestkit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"TypeScript","last_updated":"2026-07-28","license":"MIT","name":"design-context-extract","publisher":"yonatangross","stars":208},"relations":{"similar":[{"id":"yonatangross/orchestkit/design-to-code"},{"id":"yonatangross/orchestkit/component-search"},{"id":"yonatangross/orchestkit/write-prd"},{"id":"yonatangross/orchestkit/audit-skills"},{"id":"yonatangross/orchestkit/visualize-plan"},{"id":"yonatangross/orchestkit/explore"},{"id":"yonatangross/orchestkit/demo-producer"},{"id":"yonatangross/orchestkit/release-management"},{"id":"yonatangross/orchestkit/task-dependency-patterns"},{"id":"yonatangross/orchestkit/expect"}]},"slug":{"owner":"yonatangross","repo":"orchestkit","skill":"design-context-extract"},"version":"f1f5eda5"}