A routing and review process for web interfaces. It directs a request to the appropriate design review and checks visual structure, layout, accessibility, and responsive behaviour; responsive behaviour means working across screen sizes.

Use it to review or route requests about web layouts, accessibility, screen-size adaptation, visual clutter, and design rules for a site or app.

It keeps visual critique, technical interface checks, design documentation, and implementation responsibilities separate. This avoids treating a design review as if it were product code work.

web-design — Skill for Claude Code by VKirill/claude-lane-stack

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add VKirill/claude-lane-stack --skill web-design

Clone the repo

git clone --depth 1 https://github.com/VKirill/claude-lane-stack

Made for: Claude Code.

Or install lane-stack, the plugin that ships this one along with the rest of its 62 skills, 4 commands, 24 agents, 1 MCP server.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/vkirill/claude-lane-stack/web-design/github.svg)](https://agentmods.dev/skills/vkirill/claude-lane-stack/web-design)

Your own site

<a href="https://agentmods.dev/skills/vkirill/claude-lane-stack/web-design"><img src="https://agentmods.dev/badge/skills/vkirill/claude-lane-stack/web-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/vkirill/claude-lane-stack/web-design"><img src="https://agentmods.dev/badge/skills/vkirill/claude-lane-stack/web-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 126 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,223 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00126	$0.01223
Opus 5.5	$0.00050	$0.00489
Sonnet 5.5	$0.00025	$0.00245
Haiku 4.5	$0.00013	$0.00122

Measured 1mo ago against content hash 1da4977538e5, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

web-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/lane-stack/skills/web-design/SKILL.md · 90 lines

How it starts

The opening of the file, as written. The whole thing — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Web design

Router. Role: web designer. Does not ship product UI.

Canon on disk is still docs/DESIGN.md + apps/<app>/docs/DESIGN.md. This skill decides which design skill to load and who may write.

Info (print and stop)

If $ARGUMENTS is info, or the user says info / справка / как запускать this skill: print the block below verbatim (Russian), then stop. Do not spawn. Do not edit Vue.

web-design — веб-дизайнер lane-stack. Роутер, не верстальщик.

Что делает
- Ревью экрана на визуальный слоп (taste) и структуру (impeccable).
- Инструкции по вёрстке для writer (references/layout.md).
- Don'ts в DESIGN.md. Серый прототип — page-prototype, цветной макет — MODE=mockup.

Кто пишет
- Аудит / канон: design-lead (MODE=audit|extract|seed). Продуктовый код не трогает.
- Прототип / цветной макет: design-lead (MODE=prototype|mockup), .agents/prototypes/.
- Живой сайт/кабинет: UI-ран, writer. read_first: DESIGN.md + этот скилл.
- Ты говоришь оркестратору. Оркестратор сам не верстает.

Маршрут
1) Живой UI без DESIGN.md     → project-design (design-lead extract/seed)
2) Слоп / «проверь дизайн»    → design-taste + impeccable-ui critique
                                 design-lead MODE=audit
3) a11y / адаптив / состояния → impeccable-ui audit (отчёт)
                                 чинить — ран
4) Серая структура / клики    → design-lead MODE=prototype + page-prototype
   Цветной HTML-макет        → design-lead MODE=mockup, отдельная visual/
5) Токены / бренд / баннер    → project-design + ui-ux-pro-max
6) Тексты кнопок / ошибки     → copy-lead (impeccable clarify)

Нельзя
- Продуктовый Vue/CSS из design-lead или оркестратора
- npx impeccable install, хуки, PRODUCT.md
- 23 слэш-команды impeccable в ~/.claude
- менять палитру в обход DESIGN.md

Шпаргалка: /lane-stack:web-design info
Каталог: /lane-stack:info

Work (not info)

Apply only the skills needed for the selected mode. Do not load every reference. As design-lead, execute the assigned mode yourself; never spawn yourself or browser-qa. The spawning steps below are for the parent orchestrator.
Before product implementation, missing DESIGN.md → project-design. A gray prototype does not need a brand pack. For an isolated mockup without one, document a provisional direction; do not silently establish canonical tokens.
Review: spawn design-lead MODE=audit APP=<surface>. Live click / viewports: spawn browser-qa. Output (audit): Don'ts in that app's DESIGN.md + .agents/session-log/DESIGN-AUDIT-YYYY-MM-DD.md. Output (QA): .agents/qa/<slug>/REPORT.md.
After the human says «делай»: open a run. Writer read_first:
- docs/DESIGN.md
- apps/<app>/docs/DESIGN.md
- this skill
- design-taste
- impeccable-ui
- references/layout.md next to this file
Prototype/mockup: assign design-lead MODE=prototype|mockup with brief, slug/surface and references. Follow designer-workflow; gray kit rules apply only to prototype. Browser evidence comes from the parent through browser-qa. Live product edits still require a writer run.
Copy / SEO / tokens-only extract: other skills. See SKIP in the description.

Read the full file on GitHub · 90 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

1mo ago Changed · +18 lines · +7 tokens per session 1da4977538e5
1mo ago Changed 2a96609f1e8a
1mo ago First seen · 72 lines · 119 tokens per session scan A 3120f703a0da

Subscribe to this mod's changes

web-design is a skill published in the GitHub repository VKirill/claude-lane-stack (125 stars, last pushed 5d ago), licensed MIT. It adds 126 tokens to every session and 1,223 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-11.

Claude Code Design and UX agentic-coding ai-agents ai-coding automation claude

brand-tokens

A reference library of visual design rules for well-known brands, including colors, fonts, corner shapes, and explanations of each brand's visual style. Design tokens are reusable values that keep an interface's appearance consistent.

tianemon/EasyMint · 62 tokens

ui-aesthetic

A set of visual design rules for making web pages and components look consistent and readable. It covers icons, colors, typography, spacing, text, accessibility contrast, layout, and restrained animation.

tianemon/EasyMint · 97 tokens

creation-flow-prototype

A workflow for creating an interactive prototype before building a medium-sized or larger project with a user interface. It uses the prototype to confirm what the product should look and do like.

tianemon/EasyMint · 34 tokens

web-stylebook-design

Improve existing frontend UIs using researched design judgment, actual edits, verification, and before/after reporting. Also supports explicitly requested reviews and new visual directions.

seungdori/web-stylebook-mcp · 36 tokens

amby-design

Design the UI — wireframes, component specs, and design tokens — with a sign-off gate.

ambystechcom/AmbyKit · 24 tokens

republic-design

Republic-style UX design reviewer and scorer for pitch decks, landing pages, and investor-facing materials. Applies Republic.com's design DNA (financial-grade trust, data-forward, restrained elegance) to score and improve any visual artifact. Use when user says "republic", "republic style", "score design", "polish…

floomhq/moto · 86 tokens