MMCPMarkets
WC

wilwaldon/claude-code-frontend-design-toolkit

Browser automation

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

1,3 тыс. stars 136 forks Качество 55 Тренд 30
Repository Install

wilwaldon/claude-code-frontend-design-toolkit — это кандидат на MCP-сервер, импортированный из https://github.com/wilwaldon/claude-code-frontend-design-toolkit.

Обзор

wilwaldon/claude-code-frontend-design-toolkit — это кандидат на MCP-сервер, импортированный из https://github.com/wilwaldon/claude-code-frontend-design-toolkit.

Обзор (машинный перевод)

Всё, что я нашёл, действительно позволяет Claude Code выводить более красивые фронтенды. Навыки, плагины, MCP-серверы CLAUDE.md трюки, организованные по тому, что вы хотите сделать.

April 2026 · 70+ tools · 10 sections

Если это полезно, поставьте звезду, чтобы другие могли найти её. TPR приветствуются — см. Вклад.

Содержание

  • Навыки дизайна — Убить ИИ грязь
  • Тематика по всему сайту — Сделать всё совпадающим
  • Анимация и движение — GSAP, Framer Motion, эффекты прокрутки
  • UI/UX интеллект — паттерны, a11y, исследования
  • Проектирование в код — конвейер Figma
  • Тестирование и автоматизация браузера — Дайте Клоду глаза
  • Документы и контекст — Прекратите галлюцинации API
  • Навыки фреймворка — React, Tailwind, Three.js, D3
  • Развертывание и предварительный просмотр — отправка
  • Рекомендуемые стеки — что устанавливать вместе
  • Краткая справка
  • Дополнительная литература
  • Вклад

Навыки дизайна

Стандартный вывод Claude похож на все остальные страницы, сгенерированные ИИ. Те же шрифты, тот же фиолетовый градиент, та же структура карт. Они это исправляют.

Дизайн фронтенда (официальный)

Тот, который устанавливаешь первым.

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

README

Показан фрагмент оригинального README. Открыть оригинал.

Claude Code Frontend Design Toolkit

Everything I’ve found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks, organized by what you’re trying to do.

April 2026 · 70+ tools · 10 sections

If this is useful, star it so others can find it. PRs welcome — see Contributing.

Table of Contents

Design Skills

The default Claude output looks like every other AI-generated page. Same fonts, same purple gradient, same card layout. These fix that.

Frontend Design (Official)

The one you install first. Anthropic’s own skill that tells Claude to pick an actual aesthetic direction before writing code instead of defaulting to Inter + purple gradient + rounded cards.
Author Anthropic
Install claude plugin add anthropic/frontend-design
Type Skill (auto-activates)
Source anthropics/claude-code/…/frontend-design

What changes:

  • Claude picks a direction before coding (brutalist, editorial, retro-futuristic, etc.)
  • Requires real typography pairing, not just whatever sans-serif
  • Blocks generic component patterns and cookie-cutter layouts
  • Enforces CSS variables and cohesive color systems

Install this first. Everything else on this list assumes you have it.

UI/UX Pro Max — 62.6k stars

240+ styles, 127 font pairings, 99 UX guidelines. Tell it “fintech dashboard” and it picks a design system that makes sense for fintech. The v2.0 reasoning engine does the style matching automatically.
Author nextlevelbuilder
Install claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
Type Skill + CLI (uipro-cli)
Source nextlevelbuilder/ui-ux-pro-max-skill

Also works with Cursor, Windsurf, Codex, and a dozen other agents if you’re not locked into Claude Code.

Taste Skill

Открыть полный README на GitHub

Установка

npx ui-skills add baseline-ui
Новичок в MCP? Начните с руководства на mcpskill.org →