website-design-clonelisted
Install: claude install-skill dinglebear-ai/axon
# Axon Website Design Clone
Use this when the user wants one URL turned into a practical design system file agents can use immediately.
Default outcome: extract a practical design-system reference and format it as
`DESIGN.md`.
The skill should feel like a thin workflow around Axon page tools: gather brand identity, page content, structure, metadata, links, and visual evidence, then synthesize those findings into a clean design-system markdown file.
## Onboarding Interview
Infer the source URL, target stack, and whether implementation is requested from context. If the user gives a URL and asks for a design system, proceed immediately.
Ask at most 1-3 concise questions only if blocked, such as the website URL, whether to output only `DESIGN.md` or also implement, or a required target stack.
Use the host agent's normal prompt or modal UI. Do not name a harness-specific question function.
## Axon Collection Plan
Use Axon through the CLI or equivalent tool surface. Start with brand extraction,
page content, and a screenshot of the supplied URL:
1. `brand` for structured colors, fonts, logos, favicon, and voice/tone clues.
2. `scrape` for headings, copy hierarchy, links, metadata, and page structure.
3. `screenshot` for visual layout, density, imagery, and responsive evidence.
Example:
```bash
mkdir -p .axon
URL="https://example.com"
slug="example"
axon brand "$URL" --json > ".axon/${slug}-brand.json"
axon scrape "$URL" --json --skip-embed > ".axon/${slug}-scrape.json"