К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

impeccable-design-polish — скилл для Claude Code: обзор и установка

Доводит готовую веб-страницу до чистого вида: убирает визуальные штампы нейросетей, правит контрастность и чинит мобильную вёрстку.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill impeccable-design-polish -a claude-code
Открыть на GitHub

Что делает impeccable-design-polish

Скилл работает как финальный этап полировки свёрстанного макета или HTML-страницы. Он не генерирует проект с нуля. Сначала агент инспектирует код и находит проблемы в типографике и отступах.

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

Запускать скилл на пустом проекте бессмысленно: ему строго нужен готовый HTML-артефакт. Для сложной анимации автор рекомендует сочетать его с emilkowalski-motion или библиотекой GSAP.

Какие задачи решает

  • убрать шаблонные сине-фиолетовые градиенты и раздутые скругления карточек
  • починить переполнение контейнеров и обрезку текста на смартфонах
  • проверить контрастность текста и расставить состояния фокуса
  • добавить сдержанные анимации для интерактивных элементов

Примеры запросов агенту

  • Используй impeccable-design-polish для текущего HTML-файла: проверь иерархию и убери штампы нейросетей
  • Запусти impeccable-design-polish в режиме harden, чтобы исправить проблемы с вёрсткой на мобильных экранах
  • Сделай live review для свёрстанной страницы через impeccable-design-polish

Как установить impeccable-design-polish

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill impeccable-design-polish -a claude-code

2Вручную: положить файлы

~/.claude/skills/impeccable-design-polish/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/impeccable-design-polish/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

argent-lens software-mansion Скилл для выбора визуальных вариантов интерфейса в нативном окне Argent Lens. Помогает сравнить несколько дизайнов кнопки или экрана на симуляторе. Claude Code CX Codex Cursor +1 22 400установок magic-ui magicuidesign Скилл magic-ui учит Claude Code работать с компонентами Magic UI в React и Next.js: выбирать анимации, ставить через shadcn-реестр и проверять доступность. Claude Code CX Codex Cursor +1 1 200установок pptx-generator MiniMax-AI Скилл для чтения, редактирования и сборки презентаций PowerPoint с нуля через PptxGenJS и XML. Пригодится, когда нужно сгенерировать слайды из кода или разобрать готовый файл. Claude Code CX Codex Cursor +1 6 000установок material-ui-theming mui Скилл для создания и управления темами Material UI: палитры, цветовые схемы, CSS-переменные, переключение light/dark и TypeScript-расширения. Пригодится, если вы строите дизайн-систему или меняете визуальную идентичность приложения. Claude Code CX Codex Cursor +1 604установок ip-as-logo s1dashu Скилл создаёт простых квадратных персонажей для логотипов и других изображений. Нужен, когда важны узнаваемый силуэт и несколько вариантов на выбор. Claude Code CX Codex Cursor +1 3 400установок diagram-generator zhaoxuya520 Генерирует, проверяет и рендерит диаграммы из текста, кода, схем и таблиц. Пригодится для архитектур, процессов и UML-моделей. Claude Code CX Codex Cursor +1 1 300установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок

Вопросы о impeccable-design-polish

Как установить impeccable-design-polish в Claude Code?

Выполните команду npx skills add nexu-io/open-design --skill impeccable-design-polish -a claude-code. Также файл скилла можно сохранить вручную по пути ~/.claude/skills/impeccable-design-polish/SKILL.md.

Что делает скилл impeccable-design-polish?

Он инспектирует готовый HTML-код, находит визуальные огрехи и редактирует страницу. Скилл убирает типичные для ИИ элементы оформления, выравнивает отступы и устраняет ошибки доступности.

С какими инструментами автор рекомендует сочетать этот скилл?

Для глубокой переработки визуального стиля подходят скиллы design-taste-frontend или gpt-taste. Если странице нужны сложные движения, автор советует добавить emilkowalski-motion или навыки для GSAP.

Исходный текст

SKILL.md · Apache-2.0
---
name: impeccable-design-polish
description: |
  Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
triggers:
  - "impeccable"
  - "design polish"
  - "polish page"
  - "anti ai polish"
  - "critique design"
  - "animate page"
  - "harden ui"
  - "live review"
  - "反 AI 味"
od:
  mode: prototype
  surface: web
  platform: desktop
  category: creative-direction
  upstream: "https://github.com/pbakaus/impeccable"
  preview:
    type: html
  design_system:
    requires: true
  craft:
    requires:
      - typography
      - color
      - anti-ai-slop
      - animation-discipline
      - accessibility-baseline
  example_prompt: |
    Use impeccable-design-polish on the current HTML artifact: audit visual hierarchy, remove AI tells, tighten copy, add restrained motion, and harden responsive/accessibility issues.
---

# Impeccable Design Polish

Use this skill as the post-generation pass for an existing design. It should not restart the project from scratch; it should make the current artifact sharper, more usable, and closer to something a designer would ship.

## Follow-Up Modes

- **Audit**: identify the highest-impact issues in hierarchy, spacing, color, type, interaction states, responsiveness, and accessibility.
- **Critique**: explain what feels generic, overdesigned, underdesigned, or inconsistent.
- **Polish**: directly edit the artifact to improve the top issues while preserving the user's intent.
- **Animate**: add restrained, useful motion only where it improves feedback or storytelling.
- **Harden**: repair mobile overflow, text clipping, contrast problems, missing states, broken links, and fragile layout assumptions.
- **Live**: prepare the artifact for presentation or sharing, including final visual QA and clear next actions.

## Operating Rules

1. Inspect the current HTML/page before editing. Do not guess from the prompt alone.
2. Keep the existing content, brand, and scenario unless the user explicitly asks to change them.
3. Prefer a few decisive fixes over broad cosmetic churn.
4. Remove common AI tells:
   - purple-blue glow gradients with no product reason
   - generic 3-card feature rows
   - oversized rounded cards everywhere
   - empty marketing adjectives
   - inconsistent spacing and type scale
   - decorative effects that do not support comprehension
5. Preserve accessibility: focus states, contrast, semantic controls, readable text, and reduced-motion fallbacks.
6. Finish with the artifact in a better runnable state, not just a critique list.

## Best Pairings

- Pair with `design-taste-frontend` or `gpt-taste` for stronger anti-slop redesign work.
- Pair with `emilkowalski-motion` or GSAP skills for motion-specific polish.
- Pair with image/video skills when the artifact needs real visual assets rather than CSS-only decoration.

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой