Habilidades ui-design
📦

ui-design

Seguro

Упрощение изменений стиля UI с помощью структурированных рабочих процессов

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

Suporta: Claude Codex Code(CC)
📊 71 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "ui-design". Секция заголовка кажется тесной. Заголовок и строка поиска слишком близко друг к другу.

Resultado esperado:

  • Понял, заголовок кажется тесным. Давайте сначала подтвердим текущий макет:
  • ┌─────────────────────────────────────────────┐
  • │ 📊 Dashboard [Search...] │
  • │ Subtitle text here │
  • └─────────────────────────────────────────────┘
  • Это точно? Заголовок и поиск находятся в одной строке с минимальным отступом. Какой отступ был бы для вас более комфортным?

A utilizar "ui-design". Да, это именно так. Я бы хотел больше пространства между элементами.

Resultado esperado:

  • Вот два варианта для большего пространства:
  • Вариант A: Увеличить вертикальное расположение
  • ┌─────────────────────────────────────────────┐
  • │ 📊 Dashboard │
  • │ Subtitle text here │
  • │ [Search..................................] │
  • └─────────────────────────────────────────────┘
  • Вариант B: Расширить горизонтальное пространство
  • ┌─────────────────────────────────────────────┐
  • │ 📊 Dashboard [Search......] │
  • │ Subtitle text here │
  • └─────────────────────────────────────────────┘
  • Какой макет лучше соответствует вашему видению?

Auditoria de Segurança

Seguro
v1 • 3/20/2026

All static analysis findings are false positives. The detected 'external_commands' are ASCII art box-drawing characters used for layout diagrams. The 'weak cryptographic algorithm' detection was triggered by YAML frontmatter keys. The skill is a documentation file describing a UI design workflow with no executable code or security risks.

1
Arquivos analisados
110
Linhas analisadas
1
achados
1
Total de auditorias
Problemas de Baixo Risco (1)
SKILL.md:24-31SKILL.md:41-53
False Positive: External Commands Pattern
Static analyzer detected 'external_commands' pattern but these are ASCII art box-drawing characters (┌─┐│├┤└┘) used for layout visualization diagrams, not shell commands.
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
35
Comunidade
100
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

Фронтенд-разработчик уточняет макет компонента

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

Передача стилевых изменений от дизайнера к разработчику

Дизайнеры могут сообщать о визуальных изменениях с помощью скриншотов, в то время как ИИ переводит обратную связь в точные CSS-модификации через структурированный процесс.

Инди-разработчик полирует UI приложения

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

Tente Estes Prompts

Базовый: Сообщение о проблеме UI 
Я хочу скорректировать UI на этой странице. Вот скриншот, показывающий текущее состояние. Проблема в [опишите визуальную проблему]. Пожалуйста, помогите мне определить, что не так, и предложите решения.
Продвинутый: Сравнение вариантов макета 
Я работаю над [название компонента]. Текущий макет имеет [опишите проблему]. Можете ли вы показать мне 2-3 альтернативных макета с помощью ASCII-диаграмм? Я хочу сравнить варианты перед принятием решения.
Экспертный: Итеративная доработка 
Предыдущее изменение близко к нужному, но требует корректировки. [отступ/цвет/выравнивание] всё ещё кажется неправильным. Конкретно, [опишите конкретную необходимую микро-настройку]. Давайте уточним это.
Экспертный: Консистентность мульти-компонентов 
Мне нужна консистентная стилизация across [список компонентов]. Вот скриншоты каждого. Пожалуйста, проанализируйте текущее состояние, определите несоответствия и предложите унифицированный подход к дизайн-системе с визуальными диаграммами.

Melhores Práticas

  • Всегда предоставляйте скриншот с отмеченной точной областью, требующей корректировки, до любых изменений кода
  • Выбирайте одну визуальную схему перед реализацией, а не просите ИИ угадывать предпочтения
  • Запрашивайте конкретные микро-настройки, называя точное свойство (margin, padding, color), а не размытую обратную связь

Evitar

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

Perguntas Frequentes

Зачем мне предоставлять скриншоты? Разве вы не можете просто прочитать мой код?
Код показывает структуру, но не рендеринговый вид. Скриншот выявляет фактические визуальные проблемы, которые CSS сам по себе не может показать, например, как элементы фактически рендерятся со всеми применёнными стилями.
Зачем использовать ASCII-диаграммы вместо простого описания изменений?
Текстовые описания неоднозначны. «Больше пространства» может означать 4px или 40px. ASCII-диаграммы делают пространственные отношения явными и обеспечивают общую ментальную модель перед кодированием.
Могу ли я пропустить выбор схемы и перейти сразу к коду?
Можете, но это часто приводит к нескольким циклам ревизий. Шаг выбора предотвращает потраченные впустую итерации, сначала подтверждая визуальное направление.
Что если моя UI-проблема слишком сложна для ASCII-диаграмм?
ASCII работает для макета и пространства. Для сложных анимаций или интеракций опишите желаемое поведение и сошлитесь на существующие UI-паттерны или предоставьте видео-референсы.
Сколько итераций должно занимать типичное изменение UI?
С этим рабочим процессом большинство изменений завершается за 2-3 итерации: одна для выбора схемы, одна для кода и одна для микро-настройки при необходимости.
Работает ли этот рабочий процесс для проблем адаптивного дизайна?
Да. Предоставьте скриншоты на разных breakpoint и укажите, на каком viewport проблема. ASCII-диаграмма отметит специфичное для breakpoint поведение.

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/yunshu0909/yunshu_skillshub/tree/master/ui-design

Referência

master

Estrutura de arquivos

📄 SKILL.md