Редизайн готового сайта

Проверяет готовый сайт или приложение на шаблонность и точечно поднимает дизайн до премиум-уровня, не ломая работу продукта.

Скиллсообщество: LeonxlnxClaudeMITНужен терминалПроверено на безопасность

Скачать на русскомОригинал на английском (архив)Источник ↗

Что делает: Проверяет готовый сайт или приложение на шаблонность и точечно поднимает дизайн до премиум-уровня, не ломая работу продукта.
Когда брать: Когда у вас уже есть сайт или приложение, оно выглядит типово, «как у ИИ», и его нужно улучшить, не переписывая с нуля.
Когда не брать: Если нужно создать новый интерфейс с нуля или поменять технологии проекта.
Пример запроса: Посмотри мой лендинг студии йоги и найди, что в нём выглядит шаблонно: шрифты, цвета, карточки, кнопки. Исправь по приоритету.
Нужно подключить: проект сайта или приложения с кодом, кодовый агент (Claude Code, Codex, Cursor)

Как включить

Скачайте архив и распакуйте его.
Положите папку redesign-existing-projects в ~/.claude/skills/.
Откройте Claude Code и опишите задачу своими словами: Claude подхватит скилл по описанию.

Текст

---
name: redesign-existing-projects
description: Поднимает существующие сайты и приложения до премиум-уровня. Проводит аудит текущего дизайна, находит типовые «ИИ-шаблоны» и применяет высокие дизайнерские стандарты, не ломая работу продукта. Работает с любым CSS-фреймворком и с чистым CSS.
---

Скилл редизайна

Как это работает

Применяя скилл к существующему проекту, действуй по порядку:

Изучи. Прочитай кодовую базу. Определи фреймворк, способ стилизации (Tailwind, чистый CSS, styled-components и т. д.) и текущие дизайнерские приёмы.
Поставь диагноз. Пройди по аудиту ниже. Составь список всех типовых шаблонов, слабых мест и отсутствующих состояний, которые найдёшь.
Исправь. Внеси точечные улучшения, оставаясь в рамках существующего стека. Не переписывай с нуля. Улучшай то, что есть.

Аудит дизайна

Типографика

Проверь эти проблемы и исправь их:

Шрифты браузера по умолчанию или Inter везде. Замени на шрифт с характером. Хорошие варианты: Geist, Outfit, Cabinet Grotesk, Satoshi. Для редакционных и творческих проектов сочетай шрифт с засечками в заголовках с рубленым в основном тексте.
Заголовкам не хватает присутствия. Увеличь размер крупного текста, сделай трекинг (межбуквенный интервал) теснее, уменьши межстрочный интервал. Заголовки должны выглядеть весомо и осмысленно.
Основной текст слишком широкий. Ограничь ширину абзаца примерно 65 знаками. Увеличь межстрочный интервал для удобства чтения.
Используются только начертания Regular (400) и Bold (700). Добавь Medium (500) и SemiBold (600) для более тонкой иерархии.
Цифры набраны пропорциональным шрифтом. В интерфейсах с большим количеством данных используй моноширинный шрифт или включи табличные цифры (font-variant-numeric: tabular-nums).
Нет настройки трекинга. Для крупных заголовков используй отрицательный трекинг, для капителей и подписей — положительный.
Подзаголовки везде капсом. Попробуй вместо этого курсив строчными, обычный регистр предложения или капитель.
Висячие слова. Одно слово остаётся в одиночестве на последней строке. Исправь с помощью text-wrap: balance или text-wrap: pretty.

Цвет и поверхности

**Чисто чёрный фон #000000.** Замени на не совсем чёрный, тёмно-угольный или тёмный с оттенком (#0a0a0a, #121212 или тёмно-синий).
Слишком насыщенные акцентные цвета. Держи насыщенность ниже 80 %. Приглуши акценты, чтобы они сочетались с нейтральными цветами, а не кричали.
Больше одного акцентного цвета. Выбери один. Остальные убери. Единообразие важнее разнообразия.
Смесь тёплых и холодных серых. Придерживайся одного семейства серых. Подкрась все серые одним и тем же оттенком (тёплым или холодным, но не обоими).
Фиолетово-синяя «ИИ-градиентная» эстетика. Это самая частая примета дизайна, сделанного ИИ. Замени на нейтральную основу и один обдуманный акцент.
**Типовая box-shadow.** Подкрась тени под оттенок фона. Используй цветные тени (например, тёмно-синюю тень на синем фоне) вместо чисто чёрной с низкой непрозрачностью.
Плоский дизайн без всякой текстуры. Добавь на фоны тонкий шум, зерно или микроузоры. Чисто плоская векторная графика кажется стерильной.
Идеально ровные градиенты. Нарушь однородность радиальными градиентами, наложением шума или сетчатыми градиентами (mesh) вместо стандартных линейных переходов под 45 градусов.
Непоследовательное направление света. Проверь все тени: они должны указывать на один и тот же источник света.
Случайные тёмные блоки на светлой странице (или наоборот). Один тёмный блок посреди светлой страницы выглядит как случайный копипаст. Либо переходи на полноценную тёмную тему, либо держи единый тон фона по всей странице. Если нужен контраст, возьми чуть более тёмный оттенок той же палитры, а не резкий скачок к #111 посреди кремовой страницы.
Пустые плоские блоки без визуальной глубины. Блоки, где только текст на гладком фоне, выглядят незаконченными. Добавь качественные фоновые изображения (размытые, с наложением или маской), тонкие узоры или фоновые градиенты. Если настоящих материалов нет, бери надёжные источники-заглушки вроде https://picsum.photos/seed/{name}/1920/1080. Поэкспериментируй с фоновыми картинками под главным экраном (hero), блоками возможностей и призывами к действию: даже едва заметная фотография на всю ширину с низкой непрозрачностью добавляет присутствия.

Вёрстка

Всё по центру и симметрично. Нарушь симметрию смещёнными отступами, разными пропорциями или заголовками по левому краю над центрированным содержимым.
Три одинаковые колонки-карточки в ряду возможностей. Это самая типовая «ИИ-вёрстка». Замени на двухколоночный зигзаг, асимметричную сетку, горизонтальную прокрутку или masonry (кирпичную раскладку).
**height: 100vh для блоков на весь экран.** Замени на min-height: 100dvh, чтобы вёрстка не прыгала в мобильных браузерах (ошибка области просмотра в iOS Safari).
Сложные расчёты процентов во flexbox. Замени на CSS Grid для надёжных многоколоночных структур.
Нет контейнера с максимальной шириной. Добавь ограничение контейнера (около 1200–1440 px) с автоматическими отступами по бокам, чтобы содержимое не растягивалось от края до края на широких экранах.
Карточки одинаковой высоты, навязанной flexbox. Допусти разную высоту или используй masonry, когда длина содержимого различается.
Одинаковый радиус скругления у всего. Меняй радиус: у вложенных элементов меньше, у контейнеров мягче.
Нет наложений и глубины. Элементы лежат плоско рядом друг с другом. Используй отрицательные внешние отступы, чтобы создать слои и визуальную глубину.
Симметричные вертикальные отступы. Верхний и нижний отступы всегда одинаковы. Подстрой их на глаз: нижний часто должен быть чуть больше.
В дашборде всегда левая боковая панель. Попробуй вместо неё верхнюю навигацию, плавающее командное меню или сворачиваемую панель.
Не хватает пустого пространства. Удвой отступы. Дай дизайну дышать. Плотная вёрстка годится для дашбордов с данными, но не для маркетинговых страниц.
Кнопки в группах карточек не прижаты к низу. Когда у карточек разный объём содержимого, кнопки призыва к действию оказываются на случайной высоте. Прижми кнопки к низу каждой карточки, чтобы они выстроились в ровную горизонтальную линию независимо от того, что выше.
Списки возможностей начинаются на разной высоте. В тарифных таблицах и сравнительных карточках список возможностей должен начинаться на одной и той же высоте во всех колонках. Сделай одинаковый отступ над списком или задай блокам заголовка и цены фиксированную высоту.
Нет единого вертикального ритма у соседних элементов. Когда карточки, колонки или панели стоят рядом, выровняй общие элементы (заголовки, описания, цены, кнопки) во всех. Сбитые базовые линии делают вёрстку похожей на сломанную.
Математическое выравнивание, которое на глаз выглядит неверно. Центрирование по расчёту не всегда кажется центрированным. Значки рядом с текстом, кнопки воспроизведения в кружках и текст в кнопках часто требуют оптической поправки в 1–2 px, чтобы выглядеть правильно.

Интерактивность и состояния

Нет состояния наведения (hover) у кнопок. Добавь смену фона, лёгкое увеличение или сдвиг при наведении.
Нет отклика при нажатии. Добавь едва заметное scale(0.98) или translateY(1px) при нажатии, чтобы имитировать физический щелчок.
Мгновенные переходы нулевой длительности. Добавь всем интерактивным элементам плавные переходы (200–300 мс).
Нет кольца фокуса. Убедись, что для навигации с клавиатуры есть видимые индикаторы фокуса. Это требование доступности, а не прихоть.
Нет состояний загрузки. Замени типовые круговые индикаторы заглушками-скелетами (skeleton), повторяющими форму макета.
Нет пустых состояний. Пустой дашборд, где ничего не показано, — упущенная возможность. Продумай аккуратный экран «с чего начать».
Нет состояний ошибки. Добавь в формы понятные сообщения об ошибках прямо у поля. Не используй window.alert().
Мёртвые ссылки. Кнопки, ведущие на #. Либо направь их на реальные адреса, либо сделай их визуально неактивными.
В навигации не видно текущей страницы. Оформи активную ссылку меню иначе, чтобы пользователь понимал, где он находится.
Прыжки при прокрутке. Переходы по якорям срабатывают мгновенно. Добавь scroll-behavior: smooth.
**Анимации через top, left, width, height.** Перейди на transform и opacity — анимация будет плавной и пойдёт на графическом ускорении.

Содержание

Типовые имена вроде «Иван Иванов» или «John Doe». Используй разнообразные, правдоподобно звучащие имена.
**Выдуманные круглые числа вроде 99,99 %, 50 %, 100,00 $.** Используй «живые», неровные данные: 47,2 %, 99,00 $, +1 (312) 847-1928.
Названия компаний-заглушек вроде «Acme Corp», «Nexus», «SmartFlow». Придумывай уместные, правдоподобные названия брендов.
Штампы ИИ-копирайтинга. Никогда не пиши «Elevate», «Seamless», «Unleash», «Next-Gen», «Game-changer», «Delve», «Tapestry» и «In the world of...» (и их русские кальки вроде «раскройте потенциал», «бесшовный», «революционное решение», «в мире, где…»). Пиши простым, конкретным языком.
Восклицательные знаки в сообщениях об успехе. Убери их. Будь уверенным, а не громким.
Сообщения об ошибках в духе «Упс!» Говори прямо: «Не удалось подключиться. Попробуйте ещё раз».
Пассивный залог. Используй активный: «Мы не смогли сохранить ваши изменения» вместо «Были допущены ошибки».
У всех записей блога одинаковые даты. Разбрось даты, чтобы выглядело по-настоящему.
Один и тот же аватар у нескольких пользователей. Используй уникальные изображения для каждого человека.
Lorem Ipsum. Никогда не используй латинский текст-заглушку. Пиши настоящий черновой текст.
Каждое Слово В Заголовке С Заглавной. Вместо этого пиши заголовки обычным регистром предложения.

Типовые компоненты

Типовая карточка (рамка + тень + белый фон). Убери рамку, оставь только цвет фона или только отступы. Карточки нужны лишь там, где возвышение показывает иерархию.
Всегда одна залитая кнопка и одна «призрачная». Добавь текстовые ссылки или третичные стили, чтобы снизить визуальный шум.
Бейджи «New» и «Beta» в виде «таблеток». Попробуй квадратные бейджи, флажки или просто текстовые метки.
Раскрывающиеся блоки FAQ (аккордеон). Используй список в два столбца, поиск по справке или поэтапное раскрытие прямо в тексте.
Отзывы в карусели из трёх карточек с точками. Замени на стену отзывов в раскладке masonry, встроенные посты из соцсетей или одну сменяющуюся цитату.
Тарифная таблица из трёх «башен». Выдели рекомендуемый тариф цветом и акцентом, а не только лишней высотой.
Модальные окна для всего. Для простых действий используй редактирование на месте, боковые панели или раскрывающиеся блоки вместо всплывающих окон.
Только круглые аватары. Попробуй сквиркл или скруглённые квадраты — выглядит менее шаблонно.
Переключатель светлой и тёмной темы — всегда «солнце/луна». Используй выпадающий список, определение системной настройки или встрой переключатель в настройки.
Подвал с «фермой ссылок» в четыре колонки. Упрости. Оставь главные пути навигации и юридически обязательные ссылки.

Иконки

Только значки Lucide или Feather. Это «выбор по умолчанию» для ИИ. Возьми Phosphor, Heroicons или собственный набор, чтобы отличаться.
Ракета для «Запуска», щит для «Безопасности». Замени шаблонные метафоры менее очевидными значками (молния, отпечаток пальца, искра, хранилище).
Разная толщина линий у значков. Проверь все значки и приведи к одной толщине линии.
Нет фавикона. Всегда добавляй фирменный фавикон.
Стоковые фото «разнообразной команды». Используй настоящие фото команды, живые кадры или единый стиль иллюстраций вместо неестественных стоковых снимков.

Качество кода

«Суп из div». Используй семантическую разметку HTML: <nav>, <main>, <article>, <aside>, <section>.
Встроенные стили вперемешку с CSS-классами. Перенеси все стили в систему стилизации проекта.
Жёстко заданная ширина в пикселях. Используй относительные единицы (%, rem, em, max-width) для гибкой вёрстки.
Нет альтернативного текста у изображений. Опиши содержимое изображений для программ экранного чтения. Никогда не оставляй alt="" или alt="image" у значимых изображений.
**Произвольные значения z-index вроде 9999.** Заведи в теме или переменных аккуратную шкалу z-index.
Закомментированный мёртвый код. Убери все отладочные следы перед выпуском.
Выдуманные импорты. Проверь, что каждый импорт действительно есть в package.json или среди зависимостей проекта.
Нет метатегов. Добавь корректные <title>, description, og:image и метатеги для публикации в соцсетях.

Стратегические упущения (что ИИ обычно забывает)

Нет юридических ссылок. Добавь в подвал ссылки на политику конфиденциальности и условия использования.
Нет навигации «назад». Тупики в пользовательских сценариях. На каждой странице должен быть путь назад.
Нет собственной страницы 404. Продумай полезную фирменную страницу «страница не найдена».
Нет проверки форм. Добавь проверку на стороне клиента для адресов почты, обязательных полей и форматов.
Нет ссылки «перейти к содержимому». Это необходимо для тех, кто работает с клавиатуры. Добавь скрытую ссылку-пропуск.
Нет согласия на cookie. Если этого требует законодательство, добавь баннер согласия, соответствующий требованиям.

Приёмы улучшения

Улучшая проект, берись за эти высокоэффективные приёмы, чтобы заменить типовые шаблоны:

Улучшения типографики

Анимация вариативного шрифта. Плавно меняй насыщенность или ширину при прокрутке или наведении — текст будет казаться живым.
Переходы от контура к заливке. Текст сначала показан контуром и заливается цветом, когда появляется при прокрутке или при взаимодействии.
Раскрытие через текстовую маску. Крупная надпись работает как окно, за которым видно видео или анимированное изображение.

Улучшения вёрстки

Нарушенная сетка и асимметрия. Элементы, которые намеренно игнорируют колоночную структуру: накладываются друг на друга, выходят за край экрана или смещены с рассчитанной случайностью.
Максимум пустого пространства. Смелое использование свободного места, чтобы заставить смотреть на один элемент.
Параллакс-стопки карточек. Блоки, которые «прилипают» и физически накладываются друг на друга при прокрутке.
Разделённый экран при прокрутке. Две половины экрана двигаются в противоположных направлениях.

Улучшения анимации

Плавная прокрутка с инерцией. Отвяжи прокрутку от поведения браузера по умолчанию — ощущение станет тяжелее и кинематографичнее.
Поочерёдное появление. Элементы выезжают каскадом с небольшой задержкой, сочетая сдвиг по оси Y с плавным проявлением. Никогда не показывай всё сразу.
Пружинная физика. Замени линейную плавность пружинной анимацией (spring), чтобы все интерактивные элементы двигались естественно и ощущались весомыми.
Появление, привязанное к прокрутке. Содержимое входит через расширяющиеся маски, шторки или рисуемые линии SVG, связанные с ходом прокрутки.

Улучшения поверхностей

Настоящий глассморфизм (стекло). Не ограничивайся backdrop-filter: blur. Добавь внутреннюю рамку в 1 px и тонкую внутреннюю тень, чтобы имитировать преломление на краю.
Рамки-прожекторы. Рамки карточек, которые подсвечиваются под курсором.
Слои зерна и шума. Закреплённый слой с pointer-events: none и тонким шумом, который нарушает цифровую гладкость.
Цветные тени с оттенком. Тени, которые несут оттенок фона, а не типовой чёрный.

Порядок исправлений

Вноси изменения в таком порядке — так получится максимальный визуальный эффект при минимальном риске:

Замена шрифта — самое большое мгновенное улучшение при самом низком риске
Очистка цветовой палитры — убери конфликтующие и слишком насыщенные цвета
Состояния наведения и нажатия — интерфейс начинает ощущаться живым
Вёрстка и отступы — нормальная сетка, максимальная ширина, единые внутренние отступы
Замена типовых компонентов — смени шаблонные приёмы на современные альтернативы
Добавление состояний загрузки, пустоты и ошибки — создаёт ощущение законченности
Доводка шкалы типографики и отступов — последний премиальный штрих

Правила

Работай с существующим технологическим стеком. Не переходи на другие фреймворки или библиотеки стилей.
Не ломай существующую функциональность. Проверяй после каждого изменения.
Прежде чем подключать любую новую библиотеку, сначала загляни в файл зависимостей проекта.
Если проект использует Tailwind, проверь версию (v3 или v4), прежде чем менять конфигурацию.
Если в проекте нет фреймворка, используй чистый CSS.
Делай изменения такими, чтобы их было легко проверить, и сосредоточенными. Лучше небольшие точечные улучшения, чем крупные переписывания.

Перевод: iiuniversitet. Оригинал: https://github.com/leonxlnx/taste-skill/tree/main/skills/redesign-skill, лицензия MIT. Изменения: перевод на русский язык.

Оригинал на английском

---
name: redesign-existing-projects
description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
---

# Redesign Skill

## How This Works

When applied to an existing project, follow this sequence:

1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find.
3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.

## Design Audit

### Typography

Check for these problems and fix them:

- **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial/creative projects, pair a serif header with a sans-serif body.
- **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
- **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability.
- **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
- **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.
- **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels.
- **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead.
- **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.

### Color and Surfaces

- **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).
- **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
- **More than one accent color.** Pick one. Remove the rest. Consistency beats variety.
- **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
- **Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
- **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
- **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
- **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
- **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source.
- **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page.
- **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https://picsum.photos/seed/{name}/1920/1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.

### Layout

- **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
- **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
- **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
- **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures.
- **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
- **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length.
- **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers.
- **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth.
- **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
- **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead.
- **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
- **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
- **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks.
- **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.
- **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.

### Interactivity and States

- **No hover states on buttons.** Add background shift, slight scale, or translate on hover.
- **No active/pressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click.
- **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements.
- **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
- **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape.
- **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
- **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`.
- **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them.
- **No indication of current page in navigation.** Style the active nav link differently so users know where they are.
- **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`.
- **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation.

### Content

- **Generic names like "John Doe" or "Jane Smith".** Use diverse, realistic-sounding names.
- **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`.
- **Placeholder company names like "Acme Corp", "Nexus", "SmartFlow".** Invent contextual, believable brand names.
- **AI copywriting cliches.** Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
- **Exclamation marks in success messages.** Remove them. Be confident, not loud.
- **"Oops!" error messages.** Be direct: "Connection failed. Please try again."
- **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
- **All blog post dates identical.** Randomize dates to appear real.
- **Same avatar image for multiple users.** Use unique assets for every distinct person.
- **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy.
- **Title Case On Every Header.** Use sentence case instead.

### Component Patterns

- **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.
- **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise.
- **Pill-shaped "New" and "Beta" badges.** Try square badges, flags, or plain text labels.
- **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure.
- **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote.
- **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height.
- **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
- **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look.
- **Light/dark toggle always a sun/moon switch.** Use a dropdown, system preference detection, or integrate it into settings.
- **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links.

### Iconography

- **Lucide or Feather icons exclusively.** These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.
- **Rocketship for "Launch", shield for "Security".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
- **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight.
- **Missing favicon.** Always include a branded favicon.
- **Stock "diverse team" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.

### Code Quality

- **Div soup.** Use semantic HTML: `<nav>`, `<main>`, `<article>`, `<aside>`, `<section>`.
- **Inline styles mixed with CSS classes.** Move all styling to the project's styling system.
- **Hardcoded pixel widths.** Use relative units (`%`, `rem`, `em`, `max-width`) for flexible layouts.
- **Missing alt text on images.** Describe image content for screen readers. Never leave `alt=""` or `alt="image"` on meaningful images.
- **Arbitrary z-index values like `9999`.** Establish a clean z-index scale in the theme/variables.
- **Commented-out dead code.** Remove all debug artifacts before shipping.
- **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.
- **Missing meta tags.** Add proper `<title>`, `description`, `og:image`, and social sharing meta tags.

### Strategic Omissions (What AI Typically Forgets)

- **No legal links.** Add privacy policy and terms of service links in the footer.
- **No "back" navigation.** Dead ends in user flows. Every page needs a way back.
- **No custom 404 page.** Design a helpful, branded "page not found" experience.
- **No form validation.** Add client-side validation for emails, required fields, and format checks.
- **No "skip to content" link.** Essential for keyboard users. Add a hidden skip-link.
- **No cookie consent.** If required by jurisdiction, add a compliant consent banner.

## Upgrade Techniques

When upgrading a project, pull from these high-impact techniques to replace generic patterns:

### Typography Upgrades
- **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive.
- **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction.
- **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it.

### Layout Upgrades
- **Broken grid / asymmetry.** Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
- **Whitespace maximization.** Aggressive use of negative space to force focus on a single element.
- **Parallax card stacks.** Sections that stick and physically stack over each other during scroll.
- **Split-screen scroll.** Two halves of the screen sliding in opposite directions.

### Motion Upgrades
- **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel.
- **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
- **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
- **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.

### Surface Upgrades
- **True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
- **Spotlight borders.** Card borders that illuminate dynamically under the cursor.
- **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
- **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black.

## Fix Priority

Apply changes in this order for maximum visual impact with minimum risk:

1. **Font swap** — biggest instant improvement, lowest risk
2. **Color palette cleanup** — remove clashing or oversaturated colors
3. **Hover and active states** — makes the interface feel alive
4. **Layout and spacing** — proper grid, max-width, consistent padding
5. **Replace generic components** — swap cliche patterns for modern alternatives
6. **Add loading, empty, and error states** — makes it feel finished
7. **Polish typography scale and spacing** — the premium final touch

## Rules

- Work with the existing tech stack. Do not migrate frameworks or styling libraries.
- Do not break existing functionality. Test after every change.
- Before importing any new library, check the project's dependency file first.
- If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
- If the project has no framework, use vanilla CSS.
- Keep changes reviewable and focused. Small, targeted improvements over big rewrites.

Источник: taste-skill / redesign-existing-projects ↗. Ссылка проверена 2026-10-11.

---
name: redesign-existing-projects
description: Поднимает существующие сайты и приложения до премиум-уровня. Проводит аудит текущего дизайна, находит типовые «ИИ-шаблоны» и применяет высокие дизайнерские стандарты, не ломая работу продукта. Работает с любым CSS-фреймворком и с чистым CSS.
---

# Скилл редизайна

## Как это работает

Применяя скилл к существующему проекту, действуй по порядку:

1. **Изучи.** Прочитай кодовую базу. Определи фреймворк, способ стилизации (Tailwind, чистый CSS, styled-components и т. д.) и текущие дизайнерские приёмы.
2. **Поставь диагноз.** Пройди по аудиту ниже. Составь список всех типовых шаблонов, слабых мест и отсутствующих состояний, которые найдёшь.
3. **Исправь.** Внеси точечные улучшения, оставаясь в рамках существующего стека. Не переписывай с нуля. Улучшай то, что есть.

## Аудит дизайна

### Типографика

Проверь эти проблемы и исправь их:

- **Шрифты браузера по умолчанию или Inter везде.** Замени на шрифт с характером. Хорошие варианты: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. Для редакционных и творческих проектов сочетай шрифт с засечками в заголовках с рубленым в основном тексте.
- **Заголовкам не хватает присутствия.** Увеличь размер крупного текста, сделай трекинг (межбуквенный интервал) теснее, уменьши межстрочный интервал. Заголовки должны выглядеть весомо и осмысленно.
- **Основной текст слишком широкий.** Ограничь ширину абзаца примерно 65 знаками. Увеличь межстрочный интервал для удобства чтения.
- **Используются только начертания Regular (400) и Bold (700).** Добавь Medium (500) и SemiBold (600) для более тонкой иерархии.
- **Цифры набраны пропорциональным шрифтом.** В интерфейсах с большим количеством данных используй моноширинный шрифт или включи табличные цифры (`font-variant-numeric: tabular-nums`).
- **Нет настройки трекинга.** Для крупных заголовков используй отрицательный трекинг, для капителей и подписей — положительный.
- **Подзаголовки везде капсом.** Попробуй вместо этого курсив строчными, обычный регистр предложения или капитель.
- **Висячие слова.** Одно слово остаётся в одиночестве на последней строке. Исправь с помощью `text-wrap: balance` или `text-wrap: pretty`.

### Цвет и поверхности

- **Чисто чёрный фон `#000000`.** Замени на не совсем чёрный, тёмно-угольный или тёмный с оттенком (`#0a0a0a`, `#121212` или тёмно-синий).
- **Слишком насыщенные акцентные цвета.** Держи насыщенность ниже 80 %. Приглуши акценты, чтобы они сочетались с нейтральными цветами, а не кричали.
- **Больше одного акцентного цвета.** Выбери один. Остальные убери. Единообразие важнее разнообразия.
- **Смесь тёплых и холодных серых.** Придерживайся одного семейства серых. Подкрась все серые одним и тем же оттенком (тёплым или холодным, но не обоими).
- **Фиолетово-синяя «ИИ-градиентная» эстетика.** Это самая частая примета дизайна, сделанного ИИ. Замени на нейтральную основу и один обдуманный акцент.
- **Типовая `box-shadow`.** Подкрась тени под оттенок фона. Используй цветные тени (например, тёмно-синюю тень на синем фоне) вместо чисто чёрной с низкой непрозрачностью.
- **Плоский дизайн без всякой текстуры.** Добавь на фоны тонкий шум, зерно или микроузоры. Чисто плоская векторная графика кажется стерильной.
- **Идеально ровные градиенты.** Нарушь однородность радиальными градиентами, наложением шума или сетчатыми градиентами (mesh) вместо стандартных линейных переходов под 45 градусов.
- **Непоследовательное направление света.** Проверь все тени: они должны указывать на один и тот же источник света.
- **Случайные тёмные блоки на светлой странице (или наоборот).** Один тёмный блок посреди светлой страницы выглядит как случайный копипаст. Либо переходи на полноценную тёмную тему, либо держи единый тон фона по всей странице. Если нужен контраст, возьми чуть более тёмный оттенок той же палитры, а не резкий скачок к `#111` посреди кремовой страницы.
- **Пустые плоские блоки без визуальной глубины.** Блоки, где только текст на гладком фоне, выглядят незаконченными. Добавь качественные фоновые изображения (размытые, с наложением или маской), тонкие узоры или фоновые градиенты. Если настоящих материалов нет, бери надёжные источники-заглушки вроде `https://picsum.photos/seed/{name}/1920/1080`. Поэкспериментируй с фоновыми картинками под главным экраном (hero), блоками возможностей и призывами к действию: даже едва заметная фотография на всю ширину с низкой непрозрачностью добавляет присутствия.

### Вёрстка

- **Всё по центру и симметрично.** Нарушь симметрию смещёнными отступами, разными пропорциями или заголовками по левому краю над центрированным содержимым.
- **Три одинаковые колонки-карточки в ряду возможностей.** Это самая типовая «ИИ-вёрстка». Замени на двухколоночный зигзаг, асимметричную сетку, горизонтальную прокрутку или masonry (кирпичную раскладку).
- **`height: 100vh` для блоков на весь экран.** Замени на `min-height: 100dvh`, чтобы вёрстка не прыгала в мобильных браузерах (ошибка области просмотра в iOS Safari).
- **Сложные расчёты процентов во flexbox.** Замени на CSS Grid для надёжных многоколоночных структур.
- **Нет контейнера с максимальной шириной.** Добавь ограничение контейнера (около 1200–1440 px) с автоматическими отступами по бокам, чтобы содержимое не растягивалось от края до края на широких экранах.
- **Карточки одинаковой высоты, навязанной flexbox.** Допусти разную высоту или используй masonry, когда длина содержимого различается.
- **Одинаковый радиус скругления у всего.** Меняй радиус: у вложенных элементов меньше, у контейнеров мягче.
- **Нет наложений и глубины.** Элементы лежат плоско рядом друг с другом. Используй отрицательные внешние отступы, чтобы создать слои и визуальную глубину.
- **Симметричные вертикальные отступы.** Верхний и нижний отступы всегда одинаковы. Подстрой их на глаз: нижний часто должен быть чуть больше.
- **В дашборде всегда левая боковая панель.** Попробуй вместо неё верхнюю навигацию, плавающее командное меню или сворачиваемую панель.
- **Не хватает пустого пространства.** Удвой отступы. Дай дизайну дышать. Плотная вёрстка годится для дашбордов с данными, но не для маркетинговых страниц.
- **Кнопки в группах карточек не прижаты к низу.** Когда у карточек разный объём содержимого, кнопки призыва к действию оказываются на случайной высоте. Прижми кнопки к низу каждой карточки, чтобы они выстроились в ровную горизонтальную линию независимо от того, что выше.
- **Списки возможностей начинаются на разной высоте.** В тарифных таблицах и сравнительных карточках список возможностей должен начинаться на одной и той же высоте во всех колонках. Сделай одинаковый отступ над списком или задай блокам заголовка и цены фиксированную высоту.
- **Нет единого вертикального ритма у соседних элементов.** Когда карточки, колонки или панели стоят рядом, выровняй общие элементы (заголовки, описания, цены, кнопки) во всех. Сбитые базовые линии делают вёрстку похожей на сломанную.
- **Математическое выравнивание, которое на глаз выглядит неверно.** Центрирование по расчёту не всегда кажется центрированным. Значки рядом с текстом, кнопки воспроизведения в кружках и текст в кнопках часто требуют оптической поправки в 1–2 px, чтобы выглядеть правильно.

### Интерактивность и состояния

- **Нет состояния наведения (hover) у кнопок.** Добавь смену фона, лёгкое увеличение или сдвиг при наведении.
- **Нет отклика при нажатии.** Добавь едва заметное `scale(0.98)` или `translateY(1px)` при нажатии, чтобы имитировать физический щелчок.
- **Мгновенные переходы нулевой длительности.** Добавь всем интерактивным элементам плавные переходы (200–300 мс).
- **Нет кольца фокуса.** Убедись, что для навигации с клавиатуры есть видимые индикаторы фокуса. Это требование доступности, а не прихоть.
- **Нет состояний загрузки.** Замени типовые круговые индикаторы заглушками-скелетами (skeleton), повторяющими форму макета.
- **Нет пустых состояний.** Пустой дашборд, где ничего не показано, — упущенная возможность. Продумай аккуратный экран «с чего начать».
- **Нет состояний ошибки.** Добавь в формы понятные сообщения об ошибках прямо у поля. Не используй `window.alert()`.
- **Мёртвые ссылки.** Кнопки, ведущие на `#`. Либо направь их на реальные адреса, либо сделай их визуально неактивными.
- **В навигации не видно текущей страницы.** Оформи активную ссылку меню иначе, чтобы пользователь понимал, где он находится.
- **Прыжки при прокрутке.** Переходы по якорям срабатывают мгновенно. Добавь `scroll-behavior: smooth`.
- **Анимации через `top`, `left`, `width`, `height`.** Перейди на `transform` и `opacity` — анимация будет плавной и пойдёт на графическом ускорении.

### Содержание

- **Типовые имена вроде «Иван Иванов» или «John Doe».** Используй разнообразные, правдоподобно звучащие имена.
- **Выдуманные круглые числа вроде `99,99 %`, `50 %`, `100,00 $`.** Используй «живые», неровные данные: `47,2 %`, `99,00 $`, `+1 (312) 847-1928`.
- **Названия компаний-заглушек вроде «Acme Corp», «Nexus», «SmartFlow».** Придумывай уместные, правдоподобные названия брендов.
- **Штампы ИИ-копирайтинга.** Никогда не пиши «Elevate», «Seamless», «Unleash», «Next-Gen», «Game-changer», «Delve», «Tapestry» и «In the world of...» (и их русские кальки вроде «раскройте потенциал», «бесшовный», «революционное решение», «в мире, где…»). Пиши простым, конкретным языком.
- **Восклицательные знаки в сообщениях об успехе.** Убери их. Будь уверенным, а не громким.
- **Сообщения об ошибках в духе «Упс!»** Говори прямо: «Не удалось подключиться. Попробуйте ещё раз».
- **Пассивный залог.** Используй активный: «Мы не смогли сохранить ваши изменения» вместо «Были допущены ошибки».
- **У всех записей блога одинаковые даты.** Разбрось даты, чтобы выглядело по-настоящему.
- **Один и тот же аватар у нескольких пользователей.** Используй уникальные изображения для каждого человека.
- **Lorem Ipsum.** Никогда не используй латинский текст-заглушку. Пиши настоящий черновой текст.
- **Каждое Слово В Заголовке С Заглавной.** Вместо этого пиши заголовки обычным регистром предложения.

### Типовые компоненты

- **Типовая карточка (рамка + тень + белый фон).** Убери рамку, оставь только цвет фона или только отступы. Карточки нужны лишь там, где возвышение показывает иерархию.
- **Всегда одна залитая кнопка и одна «призрачная».** Добавь текстовые ссылки или третичные стили, чтобы снизить визуальный шум.
- **Бейджи «New» и «Beta» в виде «таблеток».** Попробуй квадратные бейджи, флажки или просто текстовые метки.
- **Раскрывающиеся блоки FAQ (аккордеон).** Используй список в два столбца, поиск по справке или поэтапное раскрытие прямо в тексте.
- **Отзывы в карусели из трёх карточек с точками.** Замени на стену отзывов в раскладке masonry, встроенные посты из соцсетей или одну сменяющуюся цитату.
- **Тарифная таблица из трёх «башен».** Выдели рекомендуемый тариф цветом и акцентом, а не только лишней высотой.
- **Модальные окна для всего.** Для простых действий используй редактирование на месте, боковые панели или раскрывающиеся блоки вместо всплывающих окон.
- **Только круглые аватары.** Попробуй сквиркл или скруглённые квадраты — выглядит менее шаблонно.
- **Переключатель светлой и тёмной темы — всегда «солнце/луна».** Используй выпадающий список, определение системной настройки или встрой переключатель в настройки.
- **Подвал с «фермой ссылок» в четыре колонки.** Упрости. Оставь главные пути навигации и юридически обязательные ссылки.

### Иконки

- **Только значки Lucide или Feather.** Это «выбор по умолчанию» для ИИ. Возьми Phosphor, Heroicons или собственный набор, чтобы отличаться.
- **Ракета для «Запуска», щит для «Безопасности».** Замени шаблонные метафоры менее очевидными значками (молния, отпечаток пальца, искра, хранилище).
- **Разная толщина линий у значков.** Проверь все значки и приведи к одной толщине линии.
- **Нет фавикона.** Всегда добавляй фирменный фавикон.
- **Стоковые фото «разнообразной команды».** Используй настоящие фото команды, живые кадры или единый стиль иллюстраций вместо неестественных стоковых снимков.

### Качество кода

- **«Суп из div».** Используй семантическую разметку HTML: `<nav>`, `<main>`, `<article>`, `<aside>`, `<section>`.
- **Встроенные стили вперемешку с CSS-классами.** Перенеси все стили в систему стилизации проекта.
- **Жёстко заданная ширина в пикселях.** Используй относительные единицы (`%`, `rem`, `em`, `max-width`) для гибкой вёрстки.
- **Нет альтернативного текста у изображений.** Опиши содержимое изображений для программ экранного чтения. Никогда не оставляй `alt=""` или `alt="image"` у значимых изображений.
- **Произвольные значения z-index вроде `9999`.** Заведи в теме или переменных аккуратную шкалу z-index.
- **Закомментированный мёртвый код.** Убери все отладочные следы перед выпуском.
- **Выдуманные импорты.** Проверь, что каждый импорт действительно есть в `package.json` или среди зависимостей проекта.
- **Нет метатегов.** Добавь корректные `<title>`, `description`, `og:image` и метатеги для публикации в соцсетях.

### Стратегические упущения (что ИИ обычно забывает)

- **Нет юридических ссылок.** Добавь в подвал ссылки на политику конфиденциальности и условия использования.
- **Нет навигации «назад».** Тупики в пользовательских сценариях. На каждой странице должен быть путь назад.
- **Нет собственной страницы 404.** Продумай полезную фирменную страницу «страница не найдена».
- **Нет проверки форм.** Добавь проверку на стороне клиента для адресов почты, обязательных полей и форматов.
- **Нет ссылки «перейти к содержимому».** Это необходимо для тех, кто работает с клавиатуры. Добавь скрытую ссылку-пропуск.
- **Нет согласия на cookie.** Если этого требует законодательство, добавь баннер согласия, соответствующий требованиям.

## Приёмы улучшения

Улучшая проект, берись за эти высокоэффективные приёмы, чтобы заменить типовые шаблоны:

### Улучшения типографики
- **Анимация вариативного шрифта.** Плавно меняй насыщенность или ширину при прокрутке или наведении — текст будет казаться живым.
- **Переходы от контура к заливке.** Текст сначала показан контуром и заливается цветом, когда появляется при прокрутке или при взаимодействии.
- **Раскрытие через текстовую маску.** Крупная надпись работает как окно, за которым видно видео или анимированное изображение.

### Улучшения вёрстки
- **Нарушенная сетка и асимметрия.** Элементы, которые намеренно игнорируют колоночную структуру: накладываются друг на друга, выходят за край экрана или смещены с рассчитанной случайностью.
- **Максимум пустого пространства.** Смелое использование свободного места, чтобы заставить смотреть на один элемент.
- **Параллакс-стопки карточек.** Блоки, которые «прилипают» и физически накладываются друг на друга при прокрутке.
- **Разделённый экран при прокрутке.** Две половины экрана двигаются в противоположных направлениях.

### Улучшения анимации
- **Плавная прокрутка с инерцией.** Отвяжи прокрутку от поведения браузера по умолчанию — ощущение станет тяжелее и кинематографичнее.
- **Поочерёдное появление.** Элементы выезжают каскадом с небольшой задержкой, сочетая сдвиг по оси Y с плавным проявлением. Никогда не показывай всё сразу.
- **Пружинная физика.** Замени линейную плавность пружинной анимацией (spring), чтобы все интерактивные элементы двигались естественно и ощущались весомыми.
- **Появление, привязанное к прокрутке.** Содержимое входит через расширяющиеся маски, шторки или рисуемые линии SVG, связанные с ходом прокрутки.

### Улучшения поверхностей
- **Настоящий глассморфизм (стекло).** Не ограничивайся `backdrop-filter: blur`. Добавь внутреннюю рамку в 1 px и тонкую внутреннюю тень, чтобы имитировать преломление на краю.
- **Рамки-прожекторы.** Рамки карточек, которые подсвечиваются под курсором.
- **Слои зерна и шума.** Закреплённый слой с `pointer-events: none` и тонким шумом, который нарушает цифровую гладкость.
- **Цветные тени с оттенком.** Тени, которые несут оттенок фона, а не типовой чёрный.

## Порядок исправлений

Вноси изменения в таком порядке — так получится максимальный визуальный эффект при минимальном риске:

1. **Замена шрифта** — самое большое мгновенное улучшение при самом низком риске
2. **Очистка цветовой палитры** — убери конфликтующие и слишком насыщенные цвета
3. **Состояния наведения и нажатия** — интерфейс начинает ощущаться живым
4. **Вёрстка и отступы** — нормальная сетка, максимальная ширина, единые внутренние отступы
5. **Замена типовых компонентов** — смени шаблонные приёмы на современные альтернативы
6. **Добавление состояний загрузки, пустоты и ошибки** — создаёт ощущение законченности
7. **Доводка шкалы типографики и отступов** — последний премиальный штрих

## Правила

- Работай с существующим технологическим стеком. Не переходи на другие фреймворки или библиотеки стилей.
- Не ломай существующую функциональность. Проверяй после каждого изменения.
- Прежде чем подключать любую новую библиотеку, сначала загляни в файл зависимостей проекта.
- Если проект использует Tailwind, проверь версию (v3 или v4), прежде чем менять конфигурацию.
- Если в проекте нет фреймворка, используй чистый CSS.
- Делай изменения такими, чтобы их было легко проверить, и сосредоточенными. Лучше небольшие точечные улучшения, чем крупные переписывания.

Перевод: iiuniversitet. Оригинал: https://github.com/leonxlnx/taste-skill/tree/main/skills/redesign-skill, лицензия MIT. Изменения: перевод на русский язык.