XanthanL

Website Style Router — Design skill for Claude Code

Design community

An Agent Skill that turns content you already have into a buildable site plan — stack, style, IA, page granularity, and real tokens.

How to install Website Style Router

This entry records only its repository, not the path inside it, so there is no exact command to give. Open XanthanL/website-style-router and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Website Style Router does

An Agent Skill that turns content you already have into a buildable site plan — stack, style, IA, page granularity, and real tokens. It narrows the style space by constraints instead of offering a menu, because menus converge on the average.

Alternatives in Design

Slack GIF Creator — Create animated GIFs optimized for Slack's size constraints 94.1k ★
Remix — Restyle a site in another design vocabulary — brutalist, swiss, art-deco, cyberpunk, soft-ui, or editorial 3.6k ★
Xilinx Skill — Xilinx/AMD FPGA & MPSoC Vivado design skill for Claude — covers block design, IP config, XDC constraints, synt 394 ★

README

Website Style Router

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![Python 3.10+](https://img.shields.io/badge/python-3.10%2B-blue.svg)](https://www.python.org/downloads/) [![Scripts: zero dependency](https://img.shields.io/badge/scripts-zero%20dependency-brightgreen.svg)](scripts/) [![Version](https://img.shields.io/badge/version-0.9.2-informational.svg)](CHANGELOG.md)

**English** · [简体中文](README.zh-CN.md)

A portable [Agent Skill](https://agentskills.io/specification) that turns content you already have — a PDF, a folder of photos, a spreadsheet, a video, an existing site, or one sentence — into a website that actually builds.

It does not answer "what should it look like". It answers **in what order** the decisions must be made: fix the source first, then the delivery shape, then cut the option space, and only then talk about style. Almost every styling tool on the market (TypeUI, Curio, uipro) does only that last step.

The problem

Hand content to an AI and ask for a site. The most common failure is not "it looks bad" — it is that ten different requests come back as ten copies of the same site.

Failure	What this skill does instead
Picking one style from a menu → output converges on the average = instant "AI look"	No menu selection. Constraint elimination + two-stage narrowing (40 anchors → 11 families → 1 anchor)
Swapping colors while the layout stays the same template	Every anchor declares `layout` and `axis`; style must drive layout, not only color
Every request gets the same skeleton (Astro + `src/pages/…`)	Phase 1.5 tech-stack selection: eliminate and rank by requirements (page count, interaction, maintainer, data source, host, i18n, rendering, perf) → `tech-stack.md` with 3 falsifiable conditions
All 40 anchors ship `Inter, -apple-system…`	Font-pairing registry (`styles/fonts.json`): one named display × body pair per anchor, **display unique across