← ClaudeAtlas

website-design-clonelisted

Use when the user wants an agent-ready DESIGN.md derived from a site's observable visual language using Axon brand, scrape, and screenshot evidence.
dinglebear-ai/axon · ★ 4 · AI & Automation · score 67
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"