DESIGNSKILL AGENT
LAUNCH AGENT
04 // EXPORT PACKAGE SCHEMA

ZIP OUTPUT FORMAT

Directory anatomy, design tokens JSON schemas, and backward-compatibility rules.

1. Package Directory Tree

When you request an extraction, the output is returned as a zipped package. Its internal structure isolates core design declarations:

design-skill-export/ ├── metadata.json # Job specifications, timestamp, and target URL details ├── design-system.json # Structured design system tokens (colors, typography, spacing) ├── styles.css # Ready-to-use CSS Variables mapped to :root ├── tailwind.config.js # Custom theme configuration snippet for TailwindCSS └── components/ └── component-recipe.md # AI-generated modular HTML structure and CSS guidelines

2. Token Schema (`design-system.json`)

The `design-system.json` file contains semantic token values grouped by styling categories. It includes a version block for parser safety: 

{
  "version": "1.0.0",
  "metadata": {
    "url": "https://example.com",
    "scraped_at": "2026-07-12T01:30:00Z"
  },
  "colors": {
    "primary": "#d13b02",
    "background": "#000000",
    "text": "#e2d9d0",
    "palette": ["#000000", "#0c0c0e", "#e2d9d0", "#d13b02"]
  },
  "typography": {
    "font_families": {
      "display": "Geist, sans-serif",
      "body": "Inter, sans-serif"
    },
    "font_weights": ["400", "500", "600", "700"]
  },
  "spacing": {
    "base": "8px",
    "scale": [0, 4, 8, 12, 16, 24, 32, 48, 64]
  }
}

3. Schema Versioning Policy

Our export schemas adhere strictly to Semantic Versioning (SemVer) guidelines: