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
Install
yonatangross/orchestkit/design-context-extract · repository language: TypeScript
git clone https://github.com/yonatangross/orchestkit
cp -r orchestkit/src/skills/design-context-extract ~/.claude/skills/design-context-extractnpx skillfed install yonatangross/orchestkit/design-context-extractFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
src/skills/design-context-extract/SKILL.md
src/skills/design-context-extract/test-cases.json