skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

designmd-supply-generator

Generate a DESIGN.md design system document from a website domain.

3|Updated May 16, 2026
Search Tags:#design system#brand identity#design tokens#generate#DESIGN.md#website extraction#context.dev
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill designmd-supply-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designmd-supply-generator
Source: https://github.com/Aradotso/design-skills/tree/main/skills/designmd-supply-generator
Command: npx skills add https://github.com/Aradotso/design-skills --skill designmd-supply-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It saves time by automatically generating a comprehensive DESIGN.md design system document from a live website, instead of manually researching brand and UI patterns.

Core Features & Use Cases

  • Website-to-DESIGN.md generation: Produces structured design system documentation (colors, typography, layout/spacing, components, and brand guidance) for a given domain.
  • Context-aware data sourcing: Orchestrates multiple Context.dev APIs (styleguide tokens, brand data, screenshots, and markdown extraction) to ground the output in real site signals.
  • Caching for faster repeat runs: Uses Turso/libSQL caching so subsequent requests for the same domain can reuse previously fetched data and generated documents.

Use case example: Generate a DESIGN.md for stripe.com to kickstart internal documentation for design tokens, components, and brand rules.

Quick Start

Generate the DESIGN.md for a domain by asking your assistant to call the endpoint POST /api/design-md with the JSON body { "domain": "stripe.com" } and return the generated markdown.

Frequently Asked Questions about designmd-supply-generator

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

FAQPage Schema
How do I generate a design system from a live website?▼

To generate design system documentation from a website, provide a domain to extract brand signals, styleguide tokens, and markdown content, then use LLM-based structuring to output a complete DESIGN.md file. It orchestrates Context.dev APIs to ground the output in real site signals.

What is a DESIGN.md file used for in UI documentation?▼

A DESIGN.md file is used to document design systems, capturing colors, typography, layout spacing, components, and brand guidance. It provides consistent UI documentation from live sites across teams and projects.

Does generating design tokens from a website require manual extraction?▼

Generating design tokens from a website does not require manual extraction. The process combines Context.dev APIs for styleguide tokens and brand data with Vercel AI Gateway to produce structured markdown output automatically.

Can I cache website extraction results for faster repeat design system generation?▼

You can cache website extraction results for faster repeat design system generation using Turso or libSQL caching. This allows subsequent requests for the same domain to reuse previously fetched data and generated documents.

What's the best way to document brand identity rules from an existing site?▼

The best way to document brand identity rules from an existing site is to orchestrate Context.dev APIs to extract brand data and screenshots, then use LLM-based structuring to generate comprehensive brand guidance within a DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
caio-overmind-venturescaio-overmind-ventures
31

designkit

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

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
vercel-labsvercel-labs
246

vercel-storage

Guide storage provider selection and configuration for Vercel projects.

Official
Intermediate
canvascodingcanvascoding
10

youtube-transcript

Fetch YouTube video transcripts from a video ID or URL.

Community
Intermediate