skills.rest
r1cA18
r1cA18COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/r1cA18/dotfiles --skill design-capture
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
hathbangerhathbanger

agent-browser

Automate web navigation and interaction via a headless browser CLI.

Community
Intermediate
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
zm2231zm2231

style-guide-generator

Generate markdown style guides with token documentation and component catalogs.

Community
Advanced
paolomozpaolomoz
3

design-system-extractor

Extract design tokens and component styles from live websites using Puppeteer.

Community
Advanced