← ClaudeAtlas

claude-design-exportlisted

Export a folder of Claude Design Components (*.dc.html) into AI-readable Markdown specs and PNG screenshots — pages, header/footer chrome, and logo/icon lockups. Use when the user points at a Claude Design folder, asks to export mockups for AI, or needs deterministic MD+PNG pairs from .dc.html.
singleton-sd/ai-plattform-skills · ★ 0 · AI & Automation · score 68
Install: claude install-skill singleton-sd/ai-plattform-skills
# Claude Design export Turn a Claude Design / Omelette folder into **one Markdown spec + one PNG per discovered screen**, plus logo/icon lockup crops when present. Do not screenshot by improvising a one-off Chrome command. Run the published CLI. ## When to use - User points at a Claude Design folder of `*.dc.html` files - User wants deterministic Markdown + PNG pairs for AI implementation - Header/footer chrome or logo lockup crops are needed alongside pages ## Required inputs | Input | Rule | | --- | --- | | `design_dir` | Folder that contains `*.dc.html` (and usually `support.js`, `_ds/`) | | `out_dir` | Destination; default `<design_dir>/ai-export` | Ask only if the folder is missing. ## Prerequisites - Node.js 20.19+ - Google Chrome (or Chromium) for PNG capture — on WSL2 the CLI can drive **Windows Chrome** over CDP - Install [`@singleton-sd/ai-plattform-tools-claude-design-export`](https://gitlab.com/singleton-sd/ai-plattform/tools/claude-design-export/-/packages) (once per machine or project) ### Install from GitLab npm registry (recommended) The package is **public** — no GitLab token required. Point the `@singleton-sd` scope at the project registry (once per machine or project), in `.npmrc`: ```ini @singleton-sd:registry=https://gitlab.com/api/v4/projects/singleton-sd%2Fai-plattform%2Ftools%2Fclaude-design-export/packages/npm/ ``` Then install: ```bash npm install @singleton-sd/ai-plattform-tools-claude-design-export@0.2.1 ``` **One-off run** (no insta