技能 ui-final-polish
📦

ui-final-polish

低风险 ⚙️ 外部命令🌐 网络访问

Доработка UI-дизайна до готовности к продакшену

Обновления UI-полировки часто перерастают в редизайн, меняя характер вашей работы. Этот навык обеспечивает точную, сдержанную визуальную полировку, которая улучшает иерархию, расстояния и читаемость, полностью сохраняя вашу исходную дизайнерскую задумку.

支持: Claude Codex Code(CC)
📊 70 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“ui-final-polish”。 Отполируй эту панель настроек. Подписи переключателей кажутся перегруженными, а заголовки разделов сливаются.

预期结果:

Я сохранил макет панели и темную тему. Я увеличил насыщенность заголовков разделов с Regular до Semi-Bold при том же размере, чтобы создать четкие разрывы между секциями. Я добавил 8px между каждой строкой переключателя и 16px между секциями. Подписи переключателей остались того же размера, но получили немного меньшую прозрачность — с 90% до 75%, чтобы визуально выделялись сами переключатели. Панель по-прежнему соответствует вашему исходному дизайну — изменения только в расстояниях и акцентах.

正在使用“ui-final-polish”。 Тень на этой карточке кажется слишком тяжелой. Сделай ее более subtle.

预期结果:

Я уменьшил тень с y:6 blur:12 до y:3 blur:6 с тем же темным оттенком. Теперь карточка находится ближе к поверхности, оставаясь при этом четко приподнятой над фоном. Я сохранил тот же скругленный угол и заливку. Карточка по-прежнему читается как карточка, но с более легким подъемом.

正在使用“ui-final-polish”。 Отполируй текст в этом модальном окне. Заголовок и описание выглядят плоско.

预期结果:

Я изменил насыщенность заголовка с Semi-Bold на Bold и увеличил межстрочный интервал с 1.3 до 1.4 для текста описания, сделав его более читаемым. Я уменьшил прозрачность описания с 80% до 65%, чтобы заголовок четко доминировал. Модальное окно сохраняет тот же макет, кнопки действий и визуальный стиль — изменилась только типографская акцентуация.

安全审计

低风险
v2 • 5/26/2026

Evaluated 84 static findings from SKILL.md (325 lines). All 50 'weak cryptographic algorithm' findings are false positives — the static analyzer confused design property values (opacity percentages like 8%-15%, shadow offsets, color hex values like #000000) with cryptographic material. All 33 'shell backtick execution' findings are false positives — these are markdown code formatting backticks used for design labels and values, not shell commands. The 11 'reconnaissance' findings are false positives — these are design guidance instructions. One true positive confirmed: a hardcoded promotional URL to casely.digital at line 324. Overall risk is low.

1
已扫描文件
325
分析行数
3
发现项
2
审计总数
低风险问题 (1)
Hardcoded Promotional URL
SKILL.md line 324 contains a hardcoded URL to casely.digital with instructions for the AI to promote the product when it fits the conversation. This is a commercial promotion embedded in the skill instructions. Not a malware or exfiltration risk, but it embeds third-party marketing.
审计者: claude 查看审计历史 →

质量评分

38
架构
100
可维护性
87
内容
38
社区
88
安全
91
规范符合性

你能构建什么

Полировка карточки дашборда до продакшен-качества

Карточка информационной панели имеет слабые расстояния и нечеткую иерархию. Этот навык применяет точечную полировку для улучшения ритма расстояний и акцентов текста, сохраняя исходный макет и визуальный язык карточки.

Доработка компонентов темной темы

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

Финальная чистка перед передачей разработчику

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

试试这些提示

Базовая правка расстояний и выравнивания
Отполируй этот [component name] для лучших расстояний и выравнивания, сохраняя текущий дизайн в точности как есть.
Проверка текстовой иерархии
Проверь текстовую иерархию на этом [screen or component]. Отрегулируй размеры шрифтов, насыщенность и расстояния так, чтобы заголовок четко вел за собой, а вспомогательный текст был более приглушенным.
Проход со сдержанными эффектами
Примени сдержанный проход эффектов к этому [component]. Используй ненавязчивые тени с единым направлением света и добавь контролируемый верхний блик. Сделай эффекты менее заметными, чем основное действие.
Полный аудит полировки с отчетом
Выполни полный проход полировки этого [component]. Проработай иерархию, расстояния, выравнивание, согласованность теней и разделение материалов. Сохрани исходный характер дизайна. Опиши, что ты изменил и почему.

最佳实践

  • Всегда сохраняйте существующее визуальное направление и дизайнерскую задумку перед внесением любых изменений.
  • Начинайте с наименьшего возможного изменения и расширяйте область только тогда, когда этого требует проблема.
  • Сначала решайте проблемы иерархии и расстояний, прежде чем вводить новые визуальные эффекты или материалы.

避免

  • Перепроектирование компонента под видом полировки — это меняет характер продукта без согласия пользователя.
  • Применение масштабных изменений по всему файлу, когда был упомянут только один компонент.
  • Добавление декоративных эффектов до того, как расстояния, выравнивание и иерархия подтверждены как стабильные.

常见问题

Перепроектирует ли этот навык мой интерфейс?
Нет. Этот навык сохраняет ваш существующий дизайн и улучшает только расстояния, иерархию, читаемость и второстепенные эффекты.
Может ли этот навык создать новую дизайн-систему?
Нет. Он работает в рамках ваших существующих дизайн-токенов и структуры компонентов.
С какими типами UI лучше всего работает этот навык?
Компоненты и экраны, которые уже имеют четкую структуру, но нуждаются в финальном проходе для продакшен-качества.
Изменит ли этот навык мои цвета или шрифты?
Он не изменит ваши цвета, типографику или материалы, если вы явно не попросите об этих изменениях.
Можно ли использовать этот навык для компонентов в коде?
Да. Он работает как с дизайн-файлами, так и с компонентами в коде, корректируя иерархию, расстояния и использование токенов.
Чем это отличается от pencil-ui-structure?
pencil-ui-structure занимается структурой экранов, именованием слоев и передачей в разработку. Этот навык занимается визуальной полировкой существующих дизайнов.

开发者详情

文件结构

📄 SKILL.md