design-context-extract
Design Context Extract analyzes existing applications to capture their visual foundation—colors, fonts, spacing, and component structure—and 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.
Design Context Extract pulls color palettes, typography, spacing, and component patterns from screenshots, URLs, or videos into structured design tokens.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-28
Design Context Extract pulls color palettes, typography, spacing, and component patterns from screenshots, URLs, or videos into structured design tokens. Design Context Extract analyzes existing applications to capture their visual foundation—colors, fonts, spacing, and component structure—and 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.
Use it when
- Yes.
- Design Context Extract can capture motion specs and animation behavior from screen recordings and videos.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
yonatangross/orchestkit/design-context-extract · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What can design-context-extract do with a screenshot?
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.
Can I extract design tokens from a live URL?
Yes. Design Context Extract can analyze live URLs to create a design system from the running application. It captures the full visual identity—colors, typography, spacing, and component structure—and generates exportable design tokens or Tailwind config directly from the live site.
How does design-context-extract handle animations?
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.
What output formats does design-context-extract support?
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.
Can design-context-extract audit UI consistency?
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.
What sources can design-context-extract analyze?
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—whether it's a competitor's site, a design mockup, or your own running application.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
name: design-context-extract license: MIT compatibility: "Claude Code 2.1.220+. Optional: stitch (official Google Stitch) MCP server." description: "Extract design DNA from existing app screenshots, live URLs, or screen recordings using Google Stitch. Produces color palettes, typography specs, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user provides, uploads, links, or points to a screenshot, URL, or video and asks to extract the design, analyze the animations or scroll behavior, audit an existing design, create a design system from a live app, or ensure new pages match an established visual identity." argument-hint: "[screenshot-path | video-path | url | 'current project']" tags: [design-context, design-tokens, stitch, extraction, colors, typography, audit, visual-identity] context: fork version: 1.0.1 author: OrchestKit user-invocable: true complexity: medium persuasion-type: collaborative model: sonnet agent: design-context-extractor allowed-tools: - Read - Write - Glob - Grep - Bash - WebFetch - AskUserQuestion - TaskCreate - TaskUpdate - TaskList skills: - design-system-tokens -
(truncated - see the full file via the links below)
File tree — 2 files
src/skills/design-context-extract/SKILL.md
src/skills/design-context-extract/test-cases.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Extract design tokens and color palettes from screenshots, URLs, or videos”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill streamlines the design-to-code workflow by connecting directly to Figma, extracting design tokens and component patterns, then auditing your codebase for alignment. It generates phased implementation plans with task breakdowns and acceptance criteria, cutting handoff time from hours to minutes.
This skill systematically reviews custom components and layouts to ensure they align with shadcn design patterns, visual style conventions, and modern composition practices. It catches common drift issues like hardcoded colors, inconsistent spacing, missing data-slot attributes, and anti-patterns that generation-time linting misses. Use it after writing or modifying components, or when you need to verify a layout follows shadcn idioms.
This skill bridges design and development by automating the Figma-to-code pipeline. It covers extracting design tokens from Figma Variables, mapping Auto Layout to CSS Flexbox/Grid, documenting component specifications, and validating production UI against Figma designs using visual regression.
design-md lets you create and validate DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens plus human-readable rationale. The included CLI lints structure, checks WCAG color contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON formats.
Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines.
Design System converts visual references into two synchronized outputs: a YAML token spec in Google's design.md format for coding agents, and a self-contained HTML style guide for human review. Reads imagery, derives tokens for color, typography, spacing, and components, then generates both files as a single source of truth that never drifts.
More skills Design Spec Extraction (unlicensed) · Figma (unlicensed) · design-tokens (Apache-2.0) · Qt Figma Token Extraction (NOASSERTION)