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

book-serif-index — скилл для Claude Code: что делает и как установить

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

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

Что делает book-serif-index

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

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

Макет дополняется буквицами, выносными цитатами, блоками маргиналий и номерами фолио. Анимация интерфейса намеренно замедлена: текстовые маски открываются плавно, а фон сдвигается без резких рывков. Этот скилл конфликтует с обычными плоскими карточками, потому что требует обязательной проработки слоёв и текстурной глубины.

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

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

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

  • Сверстай интерфейс читалки архивов по правилам book-serif-index
  • Оформи исследовательскую статью с антиквой, маргиналиями на полях и каталожным фреймом

Как установить book-serif-index

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill book-serif-index -a claude-code

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

~/.claude/skills/book-serif-index/SKILL.md

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

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

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

blue-cloudy-clean-modern Задаёт дизайн-систему с голубым небом, мягкими облаками и белой типографикой. Пригодится, когда интерфейсу нужен спокойный воздушный вид. CX Codex +1 1 400установок nested-container-frames Скилл задаёт правила вёрстки многоуровневых интерфейсов по принципу «контейнер в контейнере». Пригодится при оформлении лендингов с внешними рамками и внутренними блоками. CX Codex +1 1 400установок dither-laser-dark-mode Скилл задаёт тёмную дизайн-систему с текстурой ordered dither и тонким лазерным акцентом. Пригодится для атмосферных интерфейсов с чёткой иерархией. CX Codex +1 1 400установок light-mode-paper-technical Задаёт направление дизайн-системы: тёплые бумажные поверхности, тёмная внешняя рамка, тонкая диагональная текстура и один сдержанный акцент. CX Codex +1 1 400установок blue-laser-clean-glass-layout Задаёт дизайн-систему тёмного интерфейса: тонкий синий лазер на фоне, матовые стеклянные панели и аккуратный дашборд. CX Codex +1 1 400установок aura-asset-images Скилл ищет изображения в библиотеке Aura Assets по тегу и отдаёт прямые ссылки на 5 кандидатов для макетов и лендингов. CX Codex +1 1 400установок high-contrast-skeuomorphic-clean Задаёт правила создания тёмного скевоморфного интерфейса с высокой контрастностью, фасками и акцентными индикаторами. Пригодится при сборке промышленных дизайн-систем. CX Codex +1 1 400установок split-layout-technical Задаёт технический двухпанельный макет с тонкими рамками, моно-метаданными и акцентом на иерархию. Нужен для страниц, где контенту и визуальной части нужны разные роли. CX Codex +1 1 400установок

Похожие

taste-design официальный google-labs-code Скилл формирует файл DESIGN.md для Google Stitch, задавая строгие дизайн-правила против шаблонных интерфейсов. Помогает настроить типографику, палитру и микроанимации для генерации экранов. CX Codex +1 20 200установок premium typeui.sh Задаёт правила дизайн-системы в стиле Apple: токены, отступы, типографику и доступность. Пригодится при создании или выравнивании интерфейса. CX Codex +1 2 700установок editorial typeui.sh Скилл задаёт правила редакционного дизайна: серифная типографика, 8pt-сетка, токены цветов и проверки доступности. Пригодится, когда верстаете лонгрид или документацию. CX Codex +1 2 700установок typography-scale Owl-Listener Строит модульную типографическую шкалу: размеры, насыщенность, межстрочный интервал. Пригодится, когда верстаете дизайн-систему с нуля. CX Codex +1 2 600установок critique-typography Owl-Listener Проверяет типографику отрендеренного экрана: шкалу, читаемость, единообразие и использование токенов. Пригодится на ревью интерфейса. CX Codex +1 2 000установок industrial-brutalist-ui nexu-io Скилл задаёт жёсткие правила визуального стиля для дашбордов, портфолио и редакционных сайтов. Механика, плотные сетки, моноширинные шрифты и эффекты старого железа. CX Codex +1 1 700установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о book-serif-index

Как установить book-serif-index в Claude Code?

Выполните команду npx skills add MengTo/Skills --skill book-serif-index -a claude-code. Скилл сразу станет доступен агенту при проектировании интерфейсов.

Что делает скилл book-serif-index?

Он задаёт дизайн-систему книжного формата: разворот страниц с антиквой, моноширинные каталожные указатели и тёмную внешнюю оболочку.

Какие акцентные цвета рекомендует скилл?

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

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

SKILL.md · MIT
---
name: book-serif-index
description: "Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame."
---

# Book Serif Index Skill

## Use When
- Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

## Workflow

## Scope
- Apply this as a full design-system direction when the interface should feel like a curated archival reader, manuscript viewer, or premium literary catalog.
- Use it for editorial experiences, story-driven product pages, archives, research interfaces, lore systems, or reading-centric layouts that need bookish structure and index navigation.
- This is not generic blog styling; it should combine immersive book surfaces with a technical or catalog-like outer frame.

## Visual target
- Create a central reading surface that feels like an open book, folio spread, or archival document laid within a darker surrounding interface shell.
- Let typography lead the experience: display serif or gothic-inspired headings, readable serif body text, and mono utility labels for navigation, metadata, and indexing.
- Use aged paper tones, subtle texture, crease shadows, edge shading, and light wear so the main content surface feels tactile and collected.
- Surround the reading area with restrained index or catalog UI: sidebar sections, chapter markers, section lists, archive labels, or mono navigation rails.
- Keep the palette restrained and atmospheric: dark outer shell, warm paper interior, muted ink tones, and one selective accent color derived from the design. If no brand accent exists, a subdued oxblood, bronze, or antique gold is acceptable.

## Implementation guidance
- Prefer a two-zone composition: a darker outer interface frame plus a lighter book-like content surface centered inside it.
- Use serif body copy with generous line height for readability, then pair it with mono labels, tracking-heavy section names, and quiet metadata for contrast.
- Build the book surface with gradients, inset shadows, subtle center crease treatment, edge shadows, and light paper texture so it reads as layered material rather than a flat beige card.
- Include index-like navigation patterns such as chapter lists, section trees, archive groupings, or sidebar entries with active states and small markers.
- Add scholarly details like drop caps, marginalia boxes, block labels, annotations, citations, folio markers, or footer metadata to reinforce the editorial system.
- Motion should stay calm and literary: masked text reveals, gentle entrance motion, slow ambient background drift, and restrained hover cues.

## Recommended patterns
- Outer shell: dark full-screen container with thin frame lines, subtle vertical rails, and muted corner markers.
- Book spread: two-page or dual-panel reading region with center crease, paper gradients, soft edge shadows, and slight tonal variation between pages.
- Index navigation: mono sidebar with grouped headings, active bullets, archive sections, or chapter entries arranged like a catalog.
- Reading details: drop caps, pull quotes, annotation cards, marginal notes, image plates with thin framed borders, and bottom folio labels.
- Typography system: decorative serif display, highly readable serif body, and mono metadata used sparingly for structure.

## Tuning knobs
- Antiquity: increase or reduce the amount of paper texture, warm tint, and wear depending on how historical versus contemporary the interface should feel.
- Technical overlay: add or remove catalog rails, index labels, and metadata so the design can lean more archival or more system-like.
- Book realism: tune crease depth, page shadows, and paper contrast so the surface feels tactile without becoming skeuomorphic overload.
- Accent use: keep accent color concentrated in headings, active index states, callouts, or notes instead of spreading it across the whole spread.
- Density: choose between airy museum-like composition or denser scholarly indexing depending on the content.

## Avoid
- Flat cream cards with serif text but no convincing book or archive structure.
- Generic publishing layouts that omit index rails, metadata, and material depth.
- Bright modern SaaS color systems that break the archival tone.
- Excessive distressed effects that make the interface dirty or hard to read.
- Overly ornate fantasy styling without the disciplined catalog and editorial framework.

© MengTo · MIT · MengTo/Skills

Смотрите также

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

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