Distinctive Frontend Design Builder
irahardianto/awesome-agv
Commits to one bold aesthetic direction, sets up a CSS token system for it, then builds the interface in Vue or plain HTML using those tokens.
Lane-stack web-designer router. An agent skill from VKirill/claude-lane-stack.
Install Web Design
$ npx skills add VKirill/claude-lane-stack --skill web-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install VKirill/claude-lane-stack web-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/lane-stack/skills/web-design .claude/skills/web-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "web-design" agent skill from https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-design into .claude/skills/web-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add VKirill/claude-lane-stack --skill web-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install VKirill/claude-lane-stack web-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/lane-stack/skills/web-design .agents/skills/web-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-design" agent skill from https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-design into .agents/skills/web-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add VKirill/claude-lane-stack --skill web-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install VKirill/claude-lane-stack web-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/lane-stack/skills/web-design .cursor/skills/web-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-design" agent skill from https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-design into .cursor/skills/web-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/VKirill/claude-lane-stack.git --path plugins/lane-stack/skills/web-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add VKirill/claude-lane-stack --skill web-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install VKirill/claude-lane-stack web-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/lane-stack/skills/web-design .gemini/skills/web-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-design" agent skill from https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-design into .gemini/skills/web-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install VKirill/claude-lane-stack web-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add VKirill/claude-lane-stack --skill web-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/lane-stack/skills/web-design .github/skills/web-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-design" agent skill from https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-design into .github/skills/web-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add VKirill/claude-lane-stack --skill web-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install VKirill/claude-lane-stack web-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VKirill/claude-lane-stack.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/lane-stack/skills/web-design .opencode/skills/web-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-design" agent skill from https://github.com/VKirill/claude-lane-stack/tree/main/plugins/lane-stack/skills/web-design into .opencode/skills/web-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-design- GitHub stars
- 122
- Token cost
- ~1.1k tokens
- SKILL.md length
- 286 words
- Files
- 4 (incl. references)
- Skills in repo
- 49
- Repo updated
- First seen
- Licence
- MIT
At a glance
Lane-stack web-designer router. An agent skill from VKirill/claude-lane-stack.
- Works in 6 steps: Apply only the skills needed for the… → Before product implementation, missing… → Review: spawn design-lead MODE=audit… → …
- Нейрослоп дизайн
- SKILL.md covers Info (print and stop), Work (not info), NEVER and API Reference
- Calls npx
What it does
Web Design is an agent skill from VKirill/claude-lane-stack. Lane-stack web-designer router. Taste/slop review, layout rules, impeccable structure checks. Routes audits, clickable wireframes and branded mockups to design-lead. Use when: веб-дизайнер, UI слоп, нейрослоп дизайн, ревью экрана, прототип, цветной макет, верстка, иерархия, отступы, critique, audit UI, taste-skill, impeccable. SKIP: tokens-only DESIGN.md extract (project-design); live Vue/CSS (writer run); UX copy (copy-lead); SEO (seo-specialist).
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/designer-workflow.md`, `references/layout.md` and `references/specialist-checks.md`).
It sits in Frontend & Design, covering Design tokens and UI design. It works with Vue.js. The repository describes itself as: Multi-agent AI coding factory for one person — Claude Code PM + Codex/Qwen/Grok/Kimi/AGY writers, durable conveyor, auto-merge to main. The licence is MIT.
When your agent uses it
- Нейрослоп дизайн
- Tasks that involve Design tokens
- Tasks that involve UI design
Example prompts
- “/web-design”
Requirements
- Node.js
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Apply only the skills needed for the selected mode. Do not load every reference.
- Before product implementation, missing DESIGN.md → project-design.
- Review: spawn design-lead MODE=audit APP=. Live click / viewports: spawn browser-qa. Output (audit): Don'ts in that app's DESIGN.md +…
- After the human says «делай»: open a run. Writer read_first
- Prototype/mockup: assign design-lead MODE=prototype|mockup with brief,
- Copy / SEO / tokens-only extract: other skills. See SKIP in the description.
What it can do on your machine
Read from SKILL.md and the folder at commit ad5d501. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Web Design loads about 1.1k tokens when it runs, and up to ~4.8k if it reads all its reference files. Until then it costs about 116 tokens; SKILL.md has 286 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from VKirill/claude-lane-stack at commit ad5d501, republished under its MIT licence (© VKirill). 286 words, ~1,099 tokens.
Download SKILL.mdSave it as
.claude/skills/web-design/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- web-design
- description
- Lane-stack web-designer router. Taste/slop review, layout rules, impeccable structure checks. Routes audits, clickable wireframes and branded mockups to design-lead. Use when: веб-дизайнер, UI слоп, нейрослоп дизайн, ревью экрана, прототип, цветной макет, верстка, иерархия, отступы, critique, audit UI, taste-skill, impeccable. SKIP: tokens-only DESIGN.md extract (project-design); live Vue/CSS (writer run); UX copy (copy-lead); SEO (seo-specialist).
- argument-hint
- [info]
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:infoWork (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=auditAPP=<surface>. Live click / viewports: spawn browser-qa. Output (audit): Don'ts in that app'sDESIGN.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.mdapps/<app>/docs/DESIGN.md- this skill
design-tasteimpeccable-uireferences/layout.mdnext to this file
- Prototype/mockup: assign design-lead
MODE=prototype|mockupwith 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.
NEVER
- Product Vue / TS / CSS from this skill or from
design-lead. PRODUCT.md, Impeccable edit-hooks,npx impeccable install.- Invent hex when
DESIGN.mdalready has tokens. - Treat Russian text slop as this skill (
ru-check/copy-lead).
API Reference
| Need | Read |
|---|---|
| Brief, prototype/mockup scope, handoff and checks | Designer workflow |
| Motion/gestures, shadows, a11y/adaptation; selection of ten upstream skills | Specialist checks |
| Product writer layout guidance | Layout rules |
© VKirill, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files (references) in plugins/lane-stack/skills/web-design of VKirill/claude-lane-stack.
- SKILL.md
- references/designer-workflow.md
- references/layout.md
- references/specialist-checks.md
Open the folder on GitHubat commit ad5d501
Compare with similar skills
Web Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Design this skillVKirill/claude-lane-stack | 122 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Distinctive Frontend Design Builderirahardianto/awesome-agv | 157 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend Design Extractorsundial-org/awesome-openclaw-skills | 663 | — | ~2k | Automated safety check: Pass | None | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Design Guidepaperclipai/paperclip | 99k | 1 repos | ~3.1k | Automated safety check: Pass | MIT |
Similar skills
Frontend Design Extractor
sundial-org/awesome-openclaw-skills
Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Design Guide
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
More from VKirill/claude-lane-stack
All 49 skills in this repoUI UX Pro Max
VKirill/claude-lane-stack
Lane-stack design + brand intelligence (vendored ui-ux-pro-max).
App Architect
VKirill/claude-lane-stack
Owner-facing architect for a new app or service. An agent skill from VKirill/claude-lane-stack.
Browser QA
VKirill/claude-lane-stack
Live browser QA + Playwright-compatible replay. An agent skill from VKirill/claude-lane-stack.
Copy Project Life
VKirill/claude-lane-stack
Карта файлов копирайта в .agents/copy/: шаблоны, статусы, цепочка audience→headlines→ux.
Copy Research
VKirill/claude-lane-stack
Dispatch copy-lead helpers: Tavily, Codex luna/terra, grok/X, OpenCode DeepSeek, Cursor Grok 4.6 medium-fast.
Docs Maintain
VKirill/claude-lane-stack
Keep living docs/ honest after code changes. An agent skill from VKirill/claude-lane-stack.
Related
Works with
Categories
Questions about Web Design
What does Web Design do?
Lane-stack web-designer router. An agent skill from VKirill/claude-lane-stack. Web Design is an agent skill from VKirill/claude-lane-stack. Lane-stack web-designer router.
When should I use Web Design?
Web Design fits situations like: Нейрослоп дизайн; tasks that involve Design tokens; tasks that involve UI design.
How do I install Web Design in Claude Code?
Run `npx skills add VKirill/claude-lane-stack --skill web-design -a claude-code`. Or copy the skill folder (plugins/lane-stack/skills/web-design in VKirill/claude-lane-stack) into .claude/skills/web-design in your project. Claude Code loads it when a task matches its description.
How do I install Web Design in Codex?
Run `npx skills add VKirill/claude-lane-stack --skill web-design -a codex`. Or copy the skill folder (plugins/lane-stack/skills/web-design in VKirill/claude-lane-stack) into .agents/skills/web-design in your project. Codex loads it when a task matches its description.
Can I use Web Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add VKirill/claude-lane-stack --skill web-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-design, .gemini/skills/web-design, .github/skills/web-design and .opencode/skills/web-design in your project.
What does Web Design need to run?
Going by SKILL.md and its folder, Web Design needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Web Design access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Web Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Web Design use?
Web Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Design use?
About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.7k tokens, read only when the agent opens those files.
What are the alternatives to Web Design?
Skills that share tags, products or a category with Web Design: Distinctive Frontend Design Builder (irahardianto/awesome-agv, 157 stars), Frontend Design Extractor (sundial-org/awesome-openclaw-skills, 663 stars), Design Dna (zanwei/design-dna, 1.9k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Design?
VKirill (a GitHub user) maintains it in VKirill/claude-lane-stack, which has 122 GitHub stars. The repository holds 49 skills in this directory. The repository was last updated on October 6, 2026.
Source: VKirill/claude-lane-stack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.