From Design System
Provides ready-made CSS themes for slide decks using deck-stage. Choose minimal, editorial, dark, data, or brutalist as a starting point instead of an empty template.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-system:deck-themesWhen to use
Когда нужен дек, и пользователь не дал бренд. Выбери тему, дальше работай с ней.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Готовые CSS-темы для `<deck-stage>`. Каждая — один CSS-файл, который подключается рядом с `deck-stage.js`. Конкретный набор шрифтов, цветов, размеров.
Готовые CSS-темы для <deck-stage>. Каждая — один CSS-файл, который подключается рядом с deck-stage.js. Конкретный набор шрифтов, цветов, размеров.
templates/theme-minimal.css — спокойный, для B2B и продуктовых ревью.templates/theme-editorial.css — антиква + воздух, для лонгридов и питчей.templates/theme-dark.css — тёмный фон, для конференций и кинематографичности.templates/theme-data.css — для отчётов с цифрами и таблицами.templates/theme-brutalist.css — моноширинная утилитарность, для девелопер-брендов.<link rel="stylesheet" href="theme-editorial.css" />
<script src="deck-stage.js"></script>
<deck-stage width="1920" height="1080">
<section>
<h1>Заголовок</h1>
<p>Текст</p>
</section>
</deck-stage>
Темы не используют !important — переопределяй конкретные слайды inline-стилями.
Каждая тема задаёт:
--bg, --fg, --muted, --accent--font-display, --font-body, --font-monoh1, h2, h3, p, .eyebrow.statement, .two-col, .title-stack, .dark (инвертированный режим).placeholderСлайды переносимы между темами — поменяй <link>, и тот же HTML выглядит иначе.
| Тема | Подходит | Не подходит |
|---|---|---|
| minimal | внутренние ревью, продукт | креатив-агентства |
| editorial | питчи, манифесты, бренды | data-репорты |
| dark | конференции, AI/tech | финансы, образование |
| data | отчёты, KPI, аналитика | креатив, маркетинг |
| brutalist | dev-tools, опен-сорс | продажи b2c |
Builds a throwaway prototype to answer a design question about UI appearance or state/logic behavior. Guides you through two branches: interactive terminal app for logic validation, or multiple UI variations for visual exploration.
npx claudepluginhub jhamidun/claude-code-config-pack --plugin design-system