design-capture

Capture full-page screenshots and extract design tokens from URLs.

4|Updated Nov 22, 2025

Search Tags:#design #ai #reference #design tokens #web design #screenshot #capture

Ready to run

npx skills add https://github.com/r1cA18/dotfiles --skill design-capture

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-capture
Source: https://github.com/r1cA18/dotfiles/tree/main/skills/design-capture
Command: npx skills add https://github.com/r1cA18/dotfiles --skill design-capture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of capturing web designs, extracting key design tokens, and storing them in a structured format that AI can use for coding.

Core Features & Use Cases

Automated Design Capture: Takes a URL, visits the site, captures a full-page screenshot, and extracts design tokens (colors, fonts, spacing, animations).
Structured Knowledge Notes: Saves the captured information into a Markdown note with predefined sections for easy AI reference.
Use Case: When a user shares a URL and says "I like this design" or "save this site," this Skill will create a detailed reference note that an AI can use to replicate or understand the design.

Quick Start

Use the design capture skill to capture the design from the provided URL.

Frequently Asked Questions about design-capture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract design tokens from a website for AI reference?▼

Extracting design tokens from a website is done by visiting the URL, taking a full-page screenshot, and pulling structured colors, typography, layout, and animations into a Markdown knowledge note for AI-assisted design replication.

What is the best way to capture web designs for AI to replicate?▼

The best way to capture web designs for AI is using an automated tool that takes full-page screenshots and extracts structured design tokens like colors and fonts into a predefined Markdown note format that an AI can easily read.

How do I save a full-page screenshot and design tokens from a URL?▼

You can save a full-page screenshot and design tokens by providing a URL to this Skill, which automatically navigates the site, captures the visual layout, and stores the extracted tokens in a structured knowledge note.

Do I need agent-browser to capture web designs and extract tokens?▼

Yes, you need agent-browser for navigation and evaluation when using this Skill to capture web designs, as it requires specific JavaScript to visit the target URL and extract the structured design tokens.

What design tokens are extracted when capturing a web design?▼

When capturing a web design, the extracted design tokens include colors, typography, layout spacing, and animations, all structured within a Markdown note for AI-assisted coding and design analysis.

Can I use extracted web design tokens for AI-assisted coding?▼

Yes, you can use extracted web design tokens for AI-assisted coding because the Skill saves colors, typography, and layout details into a structured Markdown format designed specifically for AI to reference during design replication.