# Nebo Design UX

> DESIGN-UX SuperSkill

- Skill: `lifenewjob/nebo-design-ux` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lifenewjob/nebo-design-ux`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lifenewjob/nebo-design-ux/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lifenewjob (https://skillmd.com/u/lifenewjob)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lifenewjob/nebo-design-ux

---


# DESIGN-UX SuperSkill
> Заменяет: brand-guidelines, excalidraw-diagram, theme-factory, accessibility-wcag, canvas-design (5 скилов)
> Триггеры: "дизайн", "UI/UX", "цветовая схема", "тема", "диаграмма", "WCAG", "брендинг", "Excalidraw", "постер"
> Атомов: 62

## КОГДА ПРИМЕНЯТЬ
- Создание визуальных артефактов (постеры, PDF, PNG)
- Excalidraw диаграммы (архитектура, workflows, concepts)
- Применение брендинга и тем к артефактам
- WCAG 2.2 accessibility аудит и исправления
- Дизайн-системы: цвета, типографика, компоненты
- UI/UX review: contrast, touch targets, keyboard navigation

## КЛЮЧЕВЫЕ ПРИНЦИПЫ

1. **Диаграммы должны АРГУМЕНТИРОВАТЬ, не ОТОБРАЖАТЬ**: если убрать текст, структура сама передаёт смысл (Isomorphism Test)
2. **Canvas: Philosophy → Expression**: сначала создать визуальную философию (.md), потом выразить визуально (PDF/PNG)
3. **Craftsmanship повторять**: "meticulously crafted", "master-level execution", "painstaking attention" — фреймить работу как экспертную
4. **Themes: 10 пресетов + custom**: Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden, Midnight Galaxy
5. **WCAG AA минимум**: contrast 4.5:1 для текста, 3:1 для крупного, touch targets ≥ 44px, focus visible на всех интерактивных элементах
6. **Semantic HTML first**: `<nav>`, `<main>`, `<article>`, `<section>` вместо `<div>`. Screen readers используют landmarks
7. **Anthropic brand**: Dark #141413, Light #faf9f5, Orange #d97757, Blue #6a9bcc, Green #788c5d, Headings: Poppins, Body: Lora

## ПАТТЕРНЫ И ТЕХНИКИ

### Canvas Design (PDF/PNG)
1. **Name the movement**: "Brutalist Joy" / "Chromatic Silence" / "Metabolist Dreams"
2. **Articulate philosophy** (4-6 paragraphs): space/form, color/material, scale/rhythm, composition/balance
3. **Express visually**: 90% визуальный дизайн, 10% текст как акцент
4. **Избегать**: redundancy в описаниях, generic AI aesthetics

Philosophy examples:
- **Concrete Poetry**: монументальные формы, bold geometry, Polish poster energy
- **Chromatic Language**: цвет как информационная система, Josef Albers meets data viz
- **Analog Meditation**: текстуры, negative space, Japanese photobook aesthetic

### Excalidraw Diagrams
```json
{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {
      "type": "rectangle",
      "x": 100, "y": 100,
      "width": 200, "height": 80,
      "backgroundColor": "#a5d8ff",
      "strokeColor": "#1971c2"
    }
  ]
}
```
- **Evidence artifacts**: код snippets (dark bg + syntax color), JSON examples, event sequences
- **Depth assessment**: Simple/conceptual → abstract shapes; Technical → concrete examples с real specs
- **Research mandate**: для технических диаграмм — изучить реальные спецификации, API endpoints, event names

### Theme Application
1. Показать `theme-showcase.pdf` пользователю
2. Подождать выбор темы
3. Прочитать спецификацию из `themes/` директории
4. Применить цвета и шрифты консистентно
5. Custom theme: сгенерировать по описанию, показать для review

### WCAG 2.2 Accessibility

**Semantic HTML:**
```html
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/" aria-current="page">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <section aria-labelledby="specs-heading">
      <h2 id="specs-heading">Specs</h2>
    </section>
  </article>
</main>
```

**ARIA Patterns:**
- Modal: `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, Escape to close
- Tabs: `role="tablist"`, `role="tab"`, `aria-selected`, `aria-controls`, arrow key navigation
- Accordion: `aria-expanded`, `aria-controls`, Enter/Space to toggle
- Live regions: `aria-live="polite"` для updates, `"assertive"` для alerts

**Keyboard:**
- Tab: перемещение между focusable элементами
- Arrow keys: навигация внутри компонента (tabs, menus, radio groups)
- Escape: закрыть modal/dropdown
- Enter/Space: активация
- Focus trap в modals: Tab cycle внутри, restore focus on close

**Color & Contrast:**
- Text: ≥ 4.5:1 (AA), ≥ 7:1 (AAA)
- Large text (≥18pt / 14pt bold): ≥ 3:1
- Non-text elements: ≥ 3:1
- Никогда цвет как единственный индикатор (добавить icon/text)

## ЧЕКЛИСТ
- [ ] Все интерактивные элементы доступны с клавиатуры
- [ ] Focus visible на всех focusable элементах
- [ ] Alt text на всех информативных изображениях
- [ ] Heading hierarchy без пропусков (H1 → H2 → H3)
- [ ] Color contrast проверен (axe-core / Lighthouse)
- [ ] ARIA roles корректны (не дублируют семантический HTML)
- [ ] Touch targets ≥ 44x44px
- [ ] Диаграммы: education test пройден (можно чему-то научиться)
- [ ] Темы: consistent цвета и шрифты по всему артефакту

## ПРИМЕРЫ

### Excalidraw architecture diagram
```
Задача: "нарисуй архитектуру микросервисов"
1. Research: реальные названия сервисов, event types, API endpoints
2. Layout: left-to-right flow, service boxes с real names
3. Evidence: JSON event examples в dark rectangles
4. Connections: arrows с event type labels
5. Color: service groups по цвету, consistent palette
```