14 · Claude Design workflow для дизайн-системы холдинга¶

⚠️ Дисклеймер о точности информации¶

Этот playbook — стратегический ориентир, а не техническая истина в последней инстанции.

Часть фактов о конкретных URL, pricing и feature names требует самостоятельной проверки на anthropic.com / claude.com перед использованием в production-решениях команды. Скил-исследователь предоставил информацию с возможными неточностями (риск галлюцинаций LLM).

В playbook явно помечены разделы требующие валидации: ⚠️ ПРОВЕРИТЬ АКТУАЛЬНОСТЬ. Артём (Maintainer goldjaxe-skills) валидирует их на anthropic.com/news до 15.05.2026 и обновляет этот файл.

1 · Зачем этот playbook¶

Холдинг GOLDJAXE строит 8 продуктовых сред: - 3 лендинга: .ai (AI-сервисы) · .com (корпоративный) · .org (NGO/комьюнити) - LMS: academy.goldjaxe.ai - Соцпространство: syndicate.goldjaxe.ai - Админка: gate.goldjaxe.ai - Link-in-bio: linkstack.goldjaxe.ai - Persistent identity: vault.goldjaxe.ai

Дизайн-система централизована в design.goldjaxe.ai (master CSS eco-components.css v4.12.0+ · 13 canonical playbooks · единый manifest.json).

Старый workflow: Designer → eco-components.css edits → Frontend Next.js портирование. Время от brief до live: 3-7 дней на 1 экран.

Новая возможность: AI-инструменты Claude (Artifacts / Code / Skills / MCP / Computer Use) могут сократить time-to-screen в 3-5× при правильной интеграции. Этот playbook фиксирует: 1. Что реально доступно сейчас (мае 2026) — с указанием статуса каждого факта 2. Workflow для каждого инструмента (конкретные шаги, не общие фразы) 3. Когда AI применять, когда — нет 4. Фазированный rollout для команды холдинга (Виктория · Артём · Свят)

Цель Ф6: этот playbook = актив холдинга, основа для урока Academy «AI-assisted design для команды».

2 · Что доступно в экосистеме Anthropic (январь-май 2026)¶

Инструмент	Что делает	Применимо для дизайн-системы	Статус факта
Claude Artifacts (в Claude.ai web и Desktop)	Генерирует HTML / React / SVG в боковой панели чата с live preview	✅ MVP-mockups, быстрые прототипы, итерации с CEO	✅ Проверено (stable feature)
Claude Code (CLI + IDE плагины)	AI-агент в терминале, читает файлы, делает edits, запускает команды	✅ Frontend конвертация HTML → React, repo-aware изменения	✅ Проверено (используется в этом repo)
Claude Skills (`~/.claude/skills/`)	Custom skill packages подключаются автоматически	✅ skill `goldjaxe-design-system` для команды	✅ Проверено (17 скилов холдинга уже работают)
Claude Desktop App (Mac/Windows)	Полноценный desktop клиент с Artifacts, файлами, MCP	✅ Альтернатива веб-Claude для Виктории/Свята	✅ Проверено
MCP servers (Figma / filesystem / GitHub)	Подключение внешних инструментов через Model Context Protocol	⚠️ Figma MCP — beta, требует проверки имени пакета и API	⚠️ ПРОВЕРИТЬ АКТУАЛЬНОСТЬ
Computer Use	Claude управляет Mac автономно (мышь, клавиатура, скриншоты)	⚠️ Автоматизация Figma export, batch-перенос макетов	⚠️ ПРОВЕРИТЬ АКТУАЛЬНОСТЬ (beta)
Claude in Chrome (browser extension)	Claude в браузере для веб-задач	✅ QA макетов в реальном браузере	✅ Проверено (research preview)
Claude Design	Возможно отдельный design-инструмент Anthropic Labs (CEO упомянул 12.05)	❓ Нет уверенности что продукт существует под этим названием	❓ НЕ ПОДТВЕРЖДЕНО, проверить на anthropic.com/news
Claude Apps / Imagine	Возможно новый продукт для AI-сгенерированных приложений	❓ Если CEO имел в виду эту фичу — изучить отдельно	❓ НЕ ПОДТВЕРЖДЕНО

Действие Артёма (Maintainer): проверить реальный статус Claude Design / Claude Apps / Imagine на anthropic.com/news + claude.com/blog до 15.05.2026. Обновить таблицу выше с реальными именами фич и ссылками.

3 · Что у нас сейчас (baseline)¶

Текущий workflow холдинга (snapshot 2026-05-12):

Designer открывает Figma / Sketch / HTML напрямую в редакторе
Создаёт макет с canonical patterns (10 базовых playbook + eco-components.css v4.12.0+)
Apruv CEO (визуальный self-check + screenshot)
Frontend (Next.js + master CSS submodule) конвертирует в React/TSX
QA verify (Lighthouse / Playwright / WCAG AA через axe-core)
Deploy через git push origin master → CI ~30 сек → live на design.goldjaxe.ai
Production sync через git submodule в academy/syndicate/landings

Метрика: ~3-7 дней от brief до live для 1 экрана.

Узкие места: ручная конвертация HTML→TSX, итерации макета с CEO через скриншоты Figma (медленная синхронизация), повторяющиеся однотипные секции (cards / tier badges / forms).

4 · Workflow A · Claude Artifacts (стабильный, можно делать сегодня)¶

Сценарий «Дизайнер создаёт первичный mockup нового экрана академии».

Шаги:

1. Designer открывает claude.ai в Desktop App (или браузер).
2. Создаёт новый чат.
3. Прикрепляет файлы через скрепку (drag-and-drop):
   - design.goldjaxe.ai/ui-kit/eco-components.css (master CSS, ~2068 строк)
   - design.goldjaxe.ai/tokens/design-tokens.css (canonical токены)
   - design.goldjaxe.ai/tokens/fonts.css (Inter / Space Grotesk / Space Mono / JBM)
   - design.goldjaxe.ai/ecosystem-prototype/_ceo-version-2026-05-09/academy/dashboard.html (эталон)
   - design.goldjaxe.ai/ui-kit/playbook/12-academy-premium-body.md (canonical pattern)
4. Промпт (пример):
   «Используя canonical eco-components.css и playbook 12 как эталон,
   создай новый экран academy/profile.html с разделами:
   - аватар + tier badge L0/L1/L2/L3 (compact chip pattern)
   - прогресс по курсам (gradient body + warm-gamma blocks)
   - сертификаты (cert-canonical pattern)
   - Light/dark theme через [data-theme] переключатель
   - RU/EN i18n через data-i18n атрибуты
   - Responsive ≤ 920px (media query как в playbook 12)
   Верни один self-contained HTML файл.»
5. Claude генерирует HTML в Artifact (правая панель).
6. Designer проверяет визуально, кликает «edit in chat» — Claude вносит правки inline.
7. Скачивает HTML → копирует в:
   design.goldjaxe.ai/ecosystem-prototype/_ceo-version-2026-05-09/academy/profile.html
8. Verify в браузере (Chrome MCP + screenshot обеих тем + обоих языков).
9. Apruv CEO визуально → Frontend конвертирует в Next.js component.

Время: ~30-60 минут от brief до утверждённого HTML mockup (vs 3-7 дней раньше).

Best practices промпта: - Всегда прикладывай 5 файлов: master CSS + tokens + fonts + эталон + playbook - Указывай i18n явно («все строки оборачивай в data-i18n="namespace.key"») - Указывай WCAG AA контраст («все text-on-bg ≥4.5:1») - Запрещай hardcoded цвета («не используй #FFFFFF — только var(--bg-tertiary) и подобное») - Указывай viewport target: «fit 1440×900 без скролла»

5 · Workflow B · Claude Code (CLI + локальный repo)¶

Сценарий «Frontend создаёт новый экран syndicate репо-aware способом».

Шаги:

1. Frontend запускает Claude Code в design.goldjaxe.ai repo:
   cd /Users/a/Documents/GOLDJAXE/claude/design.goldjaxe.ai
   claude

2. Команда:
   «Создай новый экран syndicate/topic-pinned.html используя
    playbook 03-canonical-header + 06-anti-patterns + существующий
    syndicate/topic.html как структурный эталон.
    Light/dark theme. RU/EN. Bump query ?v=YYYY-MM-DD на все CSS imports.»

3. Claude Code:
   - Читает существующие файлы syndicate/*
   - Понимает структуру repo (eco-components.css, manifest.json, playbooks)
   - Создаёт новый HTML с canonical классами
   - Обновляет manifest.json автоматически (add screen entry)
   - Bump VERSION (Type B: patch или minor)
   - Добавляет CHANGELOG entry

4. Frontend верифицирует через preview tools:
   - Chrome MCP открывает локальный URL
   - Screenshot light + dark
   - Computed styles check для key tokens

5. git add -A && git commit -m "vX.Y.Z: add syndicate/topic-pinned"
6. git pull --rebase origin master && git push origin master
7. CI auto-deploy ~30 сек → live preview на design.goldjaxe.ai

Преимущество vs Artifacts: - Claude Code знает весь repo (canonical classes, ADR-history, существующие паттерны) - Поддерживает консистентность с существующими файлами - Автоматически обновляет manifest.json (single source of truth) - Может сам прогнать verify через preview tools - Знает CLAUDE.md rules → bump VERSION + CHANGELOG обязательно

Используется в этом repo: прямо сейчас, для большинства правок дизайн-системы.

6 · Workflow C · MCP Figma (если команда работает в Figma)¶

⚠️ ПРОВЕРИТЬ АКТУАЛЬНОСТЬ — Figma MCP server может быть в beta, имя пакета может измениться.

Шаги (требуют валидации):

1. Установить figma-mcp-server:
   npm install -g <актуальное имя пакета — проверить на github.com/anthropic/mcp-servers>

2. Получить Figma personal access token:
   Figma → Settings → Account → Personal access tokens → Create new token

3. Добавить в Claude Desktop config (~/.config/claude/config.json или равноценно):
   {
     "mcpServers": {
       "figma": {
         "command": "figma-mcp-server",
         "env": { "FIGMA_TOKEN": "fig_pat_xxx..." }
       }
     }
   }

4. Перезапустить Claude Desktop.

5. В Claude Desktop промпт:
   «Открой Figma frame `https://figma.com/file/XXX/Academy?node-id=123:456`
    и преобразуй в HTML с eco-components.css классами.
    Light/dark theme. RU/EN i18n.»

6. Claude через MCP читает Figma → генерирует HTML → можно commit в repo вручную.

Когда применять: если у команды есть библиотека готовых Figma макетов от внешнего дизайнера (например, аутсорс).

Когда НЕ применять: если работа идёт прямо в HTML/CSS (как у нас сейчас) — Figma слой избыточен.

7 · Workflow D · Computer Use (автоматизация Figma → HTML batch)¶

⚠️ ПРОВЕРИТЬ АКТУАЛЬНОСТЬ — Computer Use в beta, requires API access и может быть платным.

Шаги (требуют валидации):

1. Включить Claude Desktop с Computer Use feature (если доступно в plan).
2. Промпт:
   «Открой Figma в браузере, перейди в проект GOLDJAXE → frame "Academy Dashboard",
    экспортируй как HTML через File → Export → HTML/CSS.
    Сохрани файл в /tmp/figma-export-{frame-name}.html.»
3. Claude управляет курсором → File → Export → HTML/CSS → выбор настроек → save.
4. Повторить для всех нужных frame.
5. Frontend Agent (Claude Code) подхватывает /tmp/figma-export-*.html и
   нормализует под eco-components.css canonical classes.

Применение: batch-перенос 10-20 макетов из Figma за одну ночь автоматически (например, после нанятого внешнего дизайнера).

Риски: Computer Use может ошибаться на сложных UI Figma (auto-layout, components с overrides). Требует supervision первых раз.

8 · Workflow E · Custom Skill `goldjaxe-design-system`¶

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

Структура skill (создаётся в goldjaxe-skills repo):

skills/goldjaxe-design-system/
├── SKILL.md                ← когда активировать, какие правила
├── references/
│   ├── tokens.md           ← canonical tokens (--accent-amber, --neon-*, --bg-*)
│   ├── patterns.md         ← summary всех 13 playbook + ссылки
│   ├── anti-patterns.md    ← Tailwind / shadcn / hardcoded colors / inline styles
│   ├── master-css.md       ← структура eco-components.css + namespace правила
│   └── verify-checklist.md ← как проверить себя перед commit
├── playbooks/
│   ├── new-screen.md       ← step-by-step «создать новый экран»
│   ├── theme-fix.md        ← как править light/dark issues
│   ├── i18n-screen.md      ← как добавить RU/EN на готовый экран
│   └── audit-existing.md   ← как провести аудит существующего экрана
└── CHANGELOG.md

Триггеры активации: - «делай как design-system» - «работа с экраном academy/syndicate/.ai» - «правка eco-components.css» - любое упоминание canonical patterns / playbook

После создания и push в goldjaxe-skills: - Bump goldjaxe-skills v0.9.x → v0.10.0 - Symlink в ~/.claude/skills/goldjaxe-design-system (Виктория / Артём / Свят / CEO) - Любой член команды запускает Claude → автоматически подключается skill → Claude знает правила без напоминания

Преимущество vs ручное prompt-привязывание: не нужно каждый раз прикладывать 5 файлов. Skill знает их и подгружает по необходимости.

9 · Лимиты и quirks (обязательно учитывать)¶

Claude Artifacts размер ответа: ~150KB HTML. Для больших экранов разбивать на части или генерировать секции отдельно.
Claude Code стоимость: $0.003-0.015 / 1K tokens (Sonnet vs Opus). Claude Code subscription с фиксированной ставкой может включать (см. claude.com/pricing).
MCP Figma glitches: на сложных компонентах с auto-layout / variants требует cleanup после генерации.
Hardcoded colors: Claude иногда генерирует #FFFFFF вместо var(--bg-tertiary). Решение: skill с anti-patterns + post-process script для grep #[0-9A-F]{6} в новых файлах.
i18n атрибуты: Claude может забыть data-i18n на статичных строках. Решение: явно указывать в промпте + verify через grep -c 'data-i18n' file.html.
Fonts loading: Claude может не подключить tokens/fonts.css. Решение: всегда прикладывать как файл + промпт указывает «обязательно <link rel="stylesheet" href="../../../tokens/fonts.css">».
WCAG AA контраст: Claude не всегда соблюдает. Решение: после генерации прогнать через axe-core / Lighthouse / самопроверку через computed styles в Chrome MCP.
Версии Claude: генерация может отличаться между Sonnet и Opus. Для дизайн-задач Opus предпочтительнее (лучше держит canonical правила в контексте).
Бамп VERSION: Claude Artifacts не знает про VERSION и manifest.json. Designer обязан сам bump после копирования файла в repo (или передать Frontend через Claude Code).

10 · Стоимость и подписки¶

⚠️ ПРОВЕРИТЬ АКТУАЛЬНОСТЬ на anthropic.com/pricing — данные могут устареть.

Текущая интерпретация (требует валидации):

План	Цена (≈)	Что включено
Claude Free	$0	ограниченный доступ, Artifacts включены
Claude Pro	~$20/мес	Artifacts, Projects, MCP, ограниченный Computer Use
Claude Max	~$100-200/мес	все features, увеличенные лимиты
Claude Team	~$25-30/user/мес	team collaboration, shared Projects
Claude Code (CLI)	subscription или API tokens	работа в терминале/IDE
API tokens	$0.003-0.015 / 1K (Sonnet/Opus)	pay-as-you-go

Рекомендация холдингу (PROVISIONAL):

Team plan для CEO + Артём + Виктория + Свят ≈ $120/мес.

Замещает: - Figma Pro subscription (~$15-36/user/мес × 3 = $45-108/мес) - Возможно частично заменяет внешнего дизайнера-аутсорсера (если был) - Дает 4 AI-агентов для дизайна / разработки / QA

Net cost +$12/мес при значительном выигрыше в скорости.

Действие CEO: утвердить бюджет и Team plan до 20.05.2026.

11 · Интеграция с design.goldjaxe.ai (рекомендуемая архитектура)¶

┌─────────────────────────────────────────────────────────────┐
│ Designer (Claude Artifacts в Claude Desktop)                │
│  └─→ MVP-mockup HTML (academy/profile.html · ~30-60 мин)   │
│       │                                                      │
│       │ apruv CEO (визуально через screenshot)              │
│       ↓                                                      │
│ Frontend Agent (Claude Code в design.goldjaxe.ai)           │
│  └─→ React + eco-components.css классы (Next.js submodule)  │
│       │                                                      │
│       │ commit + push                                        │
│       ↓                                                      │
│ QA Agent (Claude in Chrome + axe-core)                      │
│  └─→ Lighthouse + WCAG AA verify + screenshot обеих тем     │
│       │                                                      │
│       │ verify passed                                        │
│       ↓                                                      │
│ Deploy (git push origin master)                              │
│  └─→ CI ~30 сек → live на design.goldjaxe.ai                │
│       │                                                      │
│       │ git submodule sync                                   │
│       ↓                                                      │
│ Production sites (academy / syndicate / .ai / .com / .org)  │
└─────────────────────────────────────────────────────────────┘

Каждый этап — отдельный Claude session (или multi-agent одновременно через Claude Code Agent tool / Task tool).

Параллелизация: Designer и Frontend могут работать одновременно на разных экранах. QA Agent запускается batch вечером по всем новым commits.

12 · Когда НЕ использовать AI-design tools¶

Чёткие границы, чтобы не пересечь красные линии:

❌ Финальный production rendering — использовать canonical Next.js + eco-components.css (не AI-generated HTML напрямую в production)
❌ Сложные state interactions — Claude не понимает app state без явного контекста (Redux / Zustand / context API)
❌ Accessibility audit финальный — всегда final verify через axe-core, не доверять «Claude сказал WCAG AA»
❌ Юридический content — Privacy / Terms / Cookie → только goldjaxe-document-writer skill + goldjaxe-clo ревью
❌ Брендинг и identity — Designer + CEO final apruv визуально, не AI
❌ Master CSS edits — правки eco-components.css критичны (production-used), требуют человеческого review даже после Claude Code generation
❌ Бамп major VERSION — breaking changes требуют CEO apruv до push (см. CLAUDE.md Type D)
❌ Тонкая типографика — Inter / Space Grotesk / Space Mono настроены с конкретными font-feature-settings, letter-spacing, font-variation-settings (variable fonts). Claude может «забыть» эти настройки.

13 · Phased rollout для холдинга (рекомендация Mission Control)¶

Фаза	Сроки	Что делаем	Owner
0 · Pilot	13-20.05.2026	Артём + Виктория тестируют Claude Artifacts на 1-2 экранах academy. Один CEO-апрув в день. Замер метрики time-to-screen.	Виктория
1 · Skill	20-27.05.2026	Создание `goldjaxe-design-system` skill в goldjaxe-skills repo. Bump v0.9.x → v0.10.0. Symlinks для core team.	Артём
2 · Team adoption	27.05-10.06.2026	Виктория + Свят + Артём используют для всех новых экранов. Замер time-to-screen. Сравнение с baseline 3-7 дней.	CEO ревью еженедельно
3 · Validation Claude Design	до 15.05.2026	Артём валидирует реальное наличие фичи «Claude Design» / «Claude Apps» на anthropic.com. Обновляет playbook (раздел 2).	Артём
4 · Figma MCP	июль 2026	Если команда привлечёт внешнего дизайнера через Figma — настройка MCP server.	Артём + Виктория
5 · Computer Use auto	август 2026	Batch-экспорт макетов через Computer Use для Cash Cow финиш и масштабирования lendings.	Артём

KPI Фазы 2: time-to-screen ≤ 1 день для нового academy экрана (vs 3-7 дней baseline). Замеряет COO Виктория.

14 · Definition of Done playbook (sign-off критерии)¶

[ ] Designer / Frontend / Свят понимают как открыть Claude Desktop и работать с Artifacts (workflow A раздел 4)
[ ] В ~/.claude/skills/ подключён goldjaxe-design-system после Фазы 1
[ ] Замер метрики: один новый экран academy от brief до production занимает ≤ 1 день (vs 3-7 дней раньше)
[ ] CEO видит +3-5× ускорение на первых 5 экранах
[ ] Артём валидировал реальные имена Claude Design / Claude Apps на anthropic.com (15.05)
[ ] Playbook обновлён после валидации (раздел 2, статус фактов)

15 · Связанные документы¶

[[playbook/01-mental-models]] — ментальная модель eco-* namespace
[[playbook/02-tokens-canonical]] — canonical tokens (применять в Claude prompt)
[[playbook/03-light-theme]] — light v2 theme fixes
[[playbook/04-components]] — компонентный inventory
[[playbook/06-anti-patterns]] — что Claude НЕ должен генерировать
[[playbook/07-workflow]] — общий workflow дизайн-системы
[[playbook/09-audit-checklist]] — verify checklist (применять после Claude generation)
[[playbook/11-failure-modes]] — типичные failure modes Claude generation
[[playbook/12-academy-premium-body]] — academy эталон (prompt reference)
[[playbook/13-academy-lesson-style]] — lesson-style эталон (prompt reference)
[[CLAUDE.md]] — design-system push workflow (Type A/B/C/D)
[[/claude/goldjaxe-wiki/wiki/command/decisions/2026-05-10-content-factory-roadmap]] — Стандарт GOLDJAXE 8 фаз
ADR-006 — почему skills вынесены в отдельный repo goldjaxe-skills
ADR-004 — design-system как код-артефакт, отдельный repo

16 · Призма Ф1-Ф6¶

Ф1 (юр-чистота) — нет нарушений. Anthropic privacy policy совместим с UAE PDPL + РФ 152-ФЗ. Code generation не передаёт PII (только canonical HTML/CSS).
Ф2 (выручка) — ускорение time-to-screen в 3-5× → быстрее Cash Cow финиш → ближе к П2 deadline 30.06.2026. Конкретный финансовый эффект: 16 экранов CEO version за 5-7 дней vs ~6-8 недель → запуск Cash Cow раньше → $10K/мес чистой раньше.
Ф3 (скорость) — главная польза playbook, основной измеряемый KPI.
Ф4 (репутация) — холдинг работает на передовой AI-tooling. Конкурентное преимущество vs инфобиз-сегмент (Бурмистров etc.) которые используют ручной дизайн.
Ф5 (масштаб) — 8 продуктовых сред × 50+ экранов = 400+ экранов в долгосроке. AI-assisted design = единственный способ масштабировать без раздувания команды.
Ф6 (knowledge capture) — playbook 14 = актив холдинга. Превращается в:
Урок Academy «AI-assisted design для команды» (модуль COO Stack или Designer Stack)
Skill goldjaxe-design-system (reusable артефакт)
Кейс для Syndicate «как мы ускорили дизайн в 5×»
Возможный лендинг для .ai (если результаты впечатляющие)

▸ Призма: Ф3 (скорость) + Ф6 (knowledge capture) — главные драйверы ▸ Ф6 (knowledge capture): этот playbook → урок Academy + skill + кейс Syndicate — Виктория делает после Фазы 2 (после 10.06.2026)