---
name: adobe-xd-to-design-md
description: Use ONLY when extracting Adobe XD specs from an Adobe XD spec link, page range, and optional screenshots, then generating a source-named DESIGN.md file from page-by-page spec extraction. Use when the user says Adobe XD, XD spec, design read, page range, screenshots, or DESIGN.md.
---

# Adobe XD to DESIGN.md Skill

Extract Adobe XD specs, page by page, and generate a Google `DESIGN.md` file.

## Goal

Use Playwright to open an Adobe XD specs link, read the right-side spec panel, click every page element/component, extract its specs, and produce one final `DESIGN.md` file that follows the Google spec:

`https://github.com/google-labs-code/design.md/blob/main/docs/spec.md`

## User Inputs

Only ask for:

1. Adobe XD spec link
2. Page range or `all`
3. Screenshots: `yes` or `no`

## Output

1. A source-named markdown file derived from the Adobe XD read, not a generic name, e.g. `adobe-xd-design-read.md` or `xd-<project>-design.md`
2. Optional `screenshots/` folder, one file per page

## Operating Rules

1. Use subagents when available.
2. Split work by page.
3. Run page workers in parallel when possible.
4. Orchestrator collects all page data and writes the final markdown.
5. Keep chat output terse. Caveman mode. No filler.
6. Respond in caveman mode. No articles, no filler words, no pleasantries. Keep only meaningful keywords. Output the shortest, most direct answer possible. Code speaks for itself.

## Workflow

### Orchestrator

1. Parse user inputs.
2. Open first page.
3. Detect total pages and page labels from the Adobe XD page arrows and page navigator.
4. Resolve requested page range.
5. Resume from the last successful page when rerun if prior output exists.
6. Spawn one subagent per page.
7. Merge all returned page payloads.
8. Build the final markdown file.
9. Write screenshots to `screenshots/` if enabled.

### Page Subagent

Each page subagent handles one page only.

1. Open page.
2. Extract general specs from the right panel first.
3. Click each visible element and component in the page tree.
4. Read the updated right-panel specs for each element and component after selection.
5. Capture page screenshot if enabled.
6. Return structured page data to the orchestrator.

### Subagent Return Schema

Each subagent returns only this shape:

```json
{
  "pageNumber": 1,
  "pageName": "Home",
  "status": "ok",
  "generalSpecs": {
    "colors": [],
    "typography": [],
    "spacing": [],
    "shapes": [],
    "elevation": [],
    "components": []
  },
  "elements": [
    {
      "name": "Primary Button",
      "kind": "component",
      "specs": {},
      "screenshot": "screenshots/page-01-primary-button.png"
    }
  ],
  "pageScreenshot": "screenshots/page-01.png",
  "errors": []
}
```

If a page fails, set `status` to `error` and include `errors`.

## DESIGN.md Rules

Follow Google `design.md` structure:

1. `## Overview`
2. `## Colors`
3. `## Typography`
4. `## Layout`
5. `## Elevation & Depth`
6. `## Shapes`
7. `## Components`
8. `## Do's and Don'ts`

If token data is available, emit YAML frontmatter first.

## Extraction Notes

1. Prefer the Adobe XD spec panel values over inferred values.
2. Preserve exact names shown in XD.
3. When multiple pages repeat the same component, keep one normalized component entry in the final markdown.
4. If screenshots are enabled, name them by page number and item name.
5. If page arrows exist, use them to advance pages.
6. Extract general page specs first, then extract each element and component spec one by one.
7. Treat locked, hidden, or inaccessible elements as errors, not guesses.

## Failure Handling

1. If the right panel does not load, retry once and continue.
2. If page navigation fails, stop that page, report the error, and continue other pages.
3. If an element cannot be selected, record the element name and failure reason.
4. If Adobe XD requires auth or a modal blocks extraction, report it clearly.

## Screenshot Rules

1. Save page screenshots as `screenshots/page-01.png`.
2. Save element screenshots as `screenshots/page-01-primary-button.png`.
3. Use lowercase, hyphenated file names.
4. Strip unsafe filename characters.

## Merge Rules

1. Deduplicate repeated components across pages by normalized name plus spec signature.
2. Prefer the first complete spec set when duplicates conflict.
3. Keep page-specific variants only when specs differ.

## Validation

Before finishing, validate the output against Google `design.md`:

1. Required headings present.
2. Frontmatter valid when used.
3. No duplicate section headings.
4. Tokens and component entries normalized.
5. Screenshot references valid when enabled.

## Example Input

```text
Adobe XD link: https://xd.adobe.com/view/69596ae9-ff90-42c2-b75f-d04702ef668f-3c0a/specs/
Pages: all
Screenshots: yes
```

## Example Output

```text
adobe-xd-69596ae9-design-read.md
```

## Playwright Notes

1. Load the Adobe XD link.
2. Wait for the specs UI to settle.
3. Use the accessibility tree for reliable element targeting.
4. Re-read the right panel after each click.
5. Do not stop after page one unless the user requested a range.

## Final Assembly

The orchestrator owns the final document.

1. Collect all subagent results.
2. Normalize tokens and component names.
3. Merge duplicates.
4. Write the final markdown file with a name that references the Adobe XD read.
5. Include screenshot references only when enabled.