К основному содержанию
скилл CX Codex

bolder · educlopez — скилл для Claude Code: смелее в UI без шаблонности

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

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

Что делает bolder

bolder — один из скиллов набора ui-craft. Он берёт готовый интерфейс и усиливает его: поднимает DESIGN_VARIANCE на 1–2 пункта (потолок 10), MOTION_INTENSITY на 1, если она ниже 8. Для продуктовых экранов это асимметричный сдвиг, более сильная иерархия метрик или выразительный момент в оболочке; для маркетинговых — плотнее герой-блок и слом ритма секций.

Типографика идёт следом: вес или размер дисплейного шрифта на шаг выше, плотнее трекинг в заголовках, числа остаются tabular-nums. Акцент усиливается в пределах бюджета 3–5 вьюпортов, второй цвет не добавляется. Если у интерфейса нет подписи-приёма, скилл её вводит или дорабатывает.

Есть предохранитель: при variance ≥9 или MOTION ≥9 скилл не давит дальше, а работает над подписью и шрифтом. Он прямо запрещает фиолетово-голубые градиенты, bounce-анимации, стопки glassmorphism, эмодзи, заголовки капсом и сетки из трёх одинаковых иконок. Если установлен сам ui-craft, сначала читается его SKILL.md с Discovery, Anti-Slop и Craft Test, потому что bolder — только одна линза этого набора.

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

  • вытащить интерфейс из шаблонного вида, когда он уже работает
  • добавить движение на фокусный элемент, не ломая prefers-reduced-motion
  • усилить иерархию метрик на продуктовом экране
  • поднять вес и плотность заголовков без второго акцентного цвета
  • ввести один запоминающийся приём вместо россыпи украшений

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

  • сделай этот экран смелее: $ARGUMENTS — путь к компоненту дашборда
  • bolder для лендинга — нужен характер, но без слопа
  • добавь больше личности в UI, сейчас выглядит как шаблон

Как установить bolder

1Через Skills CLI (Vercel)

npx skills add educlopez/ui-craft --skill bolder -a claude-code

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

~/.claude/skills/bolder/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о bolder

Как установить bolder в Claude?

Выполните npx skills add educlopez/ui-craft --skill bolder -a claude-code. После этого файл скилла лежит в ~/.claude/skills/bolder/SKILL.md.

Что делает bolder?

Повышает разброс раскладки и интенсивность движения, усиливает типографику и один подписной приём. Правит код напрямую и печатает таблицу Review Format.

Что bolder не станет добавлять?

Фиолетово-голубые градиенты, bounce-анимации, стопки glassmorphism, эмодзи, заголовки капсом, сетки из трёх равных иконок и конфетти. При variance ≥9 или MOTION ≥9 он не поднимает значения дальше, а дорабатывает подпись и шрифт.

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

SKILL.md · MIT
---
name: bolder
description: "Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or \"template-y\", or when the user says \"bolder\", \"more personality\", \"more creative\", or \"make it pop\" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work."
---

<!-- HARNESS MIRROR — do not edit here. Canonical source: commands/bolder.md. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Make the UI at `$ARGUMENTS` bolder. Load the `ui-craft` skill and read `references/craft-intent.md`.

**This is amplitude, not decoration.** Increase editorial confidence while staying anti-slop clean.

**Apply in order (edit code directly):**

1. **Declare an updated Craft Read** — one line: what changed (variance, motion, signature).
2. **Raise DESIGN_VARIANCE** by +1–2 (cap 10). Product surfaces: asymmetric offset, stronger metric hierarchy, or display moment in shell. Marketing: stronger hero composition, section rhythm break, or typographic scale — per `references/craft-intent.md` variance table.
3. **Raise MOTION_INTENSITY** by +1 (cap 10) if below 8 — add one purposeful entrance or hover choreography on the focal element only. Honor `prefers-reduced-motion`.
4. **Typography** — increase display weight or size one step; tighten tracking on headlines; ensure numbers stay `tabular-nums`.
5. **Accent** — strengthen focal accent placement (within 3–5 viewport budget); tint primary card or CTA — never add a second accent hue.
6. **Signature** — add or strengthen the one signature bet if missing or weak (see craft-intent §3).

**Never add:** purple-cyan gradients, bounce easing, glassmorphism stacks, emoji, ALL CAPS headings, three equal icon-card grids, confetti.

**Knob gating:** if already at variance ≥9 or MOTION ≥9, strengthen signature and typography instead of pushing further.

**Output:** edit code. Print Review Format table. End with the updated Craft Read line.

**Next step:** `/critique` — confirm the added personality did not cost hierarchy or become slop (rung 1).

© educlopez · MIT · educlopez/ui-craft

Похожие скиллы

Всё по теме «Фронтенд и UI» →

Сначала — bolder от других авторов.

bolder aladicf Скилл для тех случаев, когда интерфейс выглядит слишком безопасно и безлико. Разбирает, что именно делает дизайн скучным, и усиливает его. CX Codex +1 535установок impeccable pbakaus Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. Пригодится, когда вёрстку пора привести в порядок по правилам дизайна. CX Codex +1 361 300установок hallmark Nutlope Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. Пригодится, когда просишь агента собрать новую страницу или сайт. CX Codex +1 70 800установок mies deeflect Скилл для ИИ-кодинга, который заставляет агента убирать лишнее в интерфейсах и доводить детали до аккуратности. Пригодится, когда верстаете UI, дашборд или онбординг. CX Codex +1 9 600установок frontend-design cline Скилл задаёт агенту смелое визуальное направление и заставляет доводить код до продакшн-уровня. Пригодится, когда интерфейс не должен выглядеть как типовой вывод нейросети. CX Codex +1 7 300установок antislop-ui miqdadbadjuber Скилл задаёт правила для цвета, компоновки, компонентов и анимации интерфейсов. Нужен при создании или правке сайта, веб-приложения или другой UI. CX Codex +1 6 400установок design-brief julianoczkowski Проводит интервью о задаче, смотрит существующий код и сохраняет дизайн-бриф в markdown. Пригодится перед стартом новой страницы или фичи. CX Codex +1 5 300установок

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

colorize Скилл добавляет один акцент в 3–5 местах интерфейса или убирает лишний цвет, возвращая экран к нейтральной основе. CX Codex +1 888установок heuristic Прогоняет интерфейс по 10 эвристикам Нильсена и 6 законам дизайна, выдаёт таблицу находок и балл UsabilityScore от 0 до 100. CX Codex +1 879установок shape Скилл прогоняет экран через вайрфрейм-проход: ASCII-раскладка, список состояний, инвентарь контента и открытые вопросы — до первой строки кода. CX Codex +1 865установок tokens Проверяет, как в проекте устроены дизайн-токены, и помогает собрать трёхслойную систему с нуля. Пригодится, когда цвета и отступы расползлись по файлам. CX Codex +1 853установок finalize Прогоняет интерфейс через детектор, токены и 10 проходов планки качества, а потом выдаёт вердикт: READY, NOT READY или BLOCKED. CX Codex +1 850установок brief Создаёт или обновляет дизайн-бриф проекта в файле .ui-craft/brief.md. Помогает зафиксировать назначение интерфейса, принципы и границы продукта перед генерацией UI. CX Codex +1 849установок redesign Обновляет интерфейс сайта или приложения без потери структуры, SEO и конверсионных форм. Помогает освежить визуал, когда код и контент уже работают. CX Codex +1 463установок quieter Скилл для ИИ-кодинга, который снижает визуальный шум в интерфейсе: меньше движения, проще сетка, спокойнее цвет. Пригодится, когда UI выглядит перегруженным. CX Codex +1 449установок

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

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