skills.rest
caio-overmind-ventures
caio-overmind-venturesCOMMUNITY
Explore all skills by this author →
GitHub

designkit

Extract design tokens and component specs from authenticated web apps into a Next.js styleguide.

31|4|Updated Mar 12, 2026
Search Tags:#automation#design-system#styleguide#design-tokens#token-extraction#ui-tokens#designkit
One-click install
npx skills add https://github.com/caio-overmind-ventures/designkit --skill designkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designkit
Source: https://github.com/caio-overmind-ventures/designkit/tree/main/skill
Command: npx skills add https://github.com/caio-overmind-ventures/designkit --skill designkit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manual design-token extraction and styleguide generation are slow and error-prone; DesignKit automates the end-to-end process from authenticated apps.

Core Features & Use Cases

  • App-first extraction inside the authenticated UI to capture real tokens and component specs.
  • Generate a dedicated Next.js + shadcn styleguide project that visually matches the app.
  • Produce portable tokens (tokens.css, tokens.json) and a components.json with component-level specs; optionally deliver a ready-to-deploy styleguide.

Quick Start

Provide the target app URL and run the skill to extract tokens and generate the styleguide.

Frequently Asked Questions about designkit

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

FAQPage Schema
How do I extract design tokens from an authenticated web app?▼

You can automate design token extraction from an authenticated web app by running the skill with the target URL. It uses browser automation to operate inside the app UI, collecting real tokens and component specs across multiple pages into portable files.

Can I generate a Next.js styleguide automatically from existing UI components?▼

Yes, an automated styleguide can be generated from existing UI components. The skill produces a ready-to-deploy Next.js + shadcn styleguide project that visually matches your authenticated app, alongside portable tokens.css and tokens.json files.

What formats are produced when automating design token extraction?▼

Automating design token extraction produces portable tokens.css, tokens.json, and a components.json file containing component-level specs. These artifacts are generated alongside a ready-to-deploy styleguide for seamless integration.

Does design token extraction work with shadcn UI components?▼

Yes, the extraction works with shadcn UI by generating a Next.js + shadcn styleguide project. It captures real component specs from your authenticated app and formats them into portable artifacts for shadcn deployment.

What is the best way to automate styleguide generation for a design system?▼

The best way to automate styleguide generation is using app-first extraction to capture real tokens and component specs directly from the authenticated UI. This produces a visually matching Next.js styleguide and portable token files without manual inspection.

Related Skills

Explore More Design & Creative Skills→
NITISH-gitbitNITISH-gitbit

dogfood

Guide exploratory QA testing of web applications through a structured workflow.

Community
Advanced
joi-fairsharejoi-fairshare
1

design-implement-web

Generate token-compliant React and Next.js components from approved HTML mockups or PNG baselines.

Community
Advanced
allieraysallierays
38

Styleguide Generator

Generates a /styleguide route with React components and CSS variables from user-defined preferences.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced