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

styleseed — скилл для Claude Code: UI по правилам проекта

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

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

Что делает styleseed

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

Первый шаг выбирается по запросу: сборка или редизайн экрана, первичная настройка, разбор скриншота или Figma-экспорта, аудит UX, ревью реализации против правил проекта, оценка, проверка отрендеренного вывода в пикселях, смена плотности, токены, анимация, доступность, микрокопирайт, состояния загрузки и ошибок. Для статуса есть отдельный read-only скрипт scripts/styleseed-doctor.mjs — обновлять или перекомпилировать ничего не нужно.

Если в проекте есть .styleseed/project.json и .styleseed/artifacts/index.json, артефакт резолвится по реестру, и частичный или битый реестр считается ошибкой: откат к глобальному legacy-бандлу не предусмотрен. Старые проекты могут использовать .styleseed/effective-rules.md, но только когда реестра нет. Запросы на аудит, оценку и статус не дают права на правки. Обучение — отдельная установка ss-learn, в ядро она не входит, и скилл не ставит её сам.

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

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

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

  • styleseed, собери страницу настроек в стиле текущего интерфейса
  • прогони аудит этого экрана и скажи, что не так с UX
  • проверь отрендеренный вывод и отступы в пикселях

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

1Через Skills CLI (Vercel)

npx skills add bitjaru/styleseed --skill styleseed -a claude-code

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

~/.claude/skills/styleseed/SKILL.md

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

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

Похожие

uncodixfy cyxzdev Учит агента не генерировать типичный «кодексовый» интерфейс: без градиентов, плавающих панелей и декоративных заголовков. Пригодится, когда фронтенд от ИИ выглядит слишком шаблонно. CX Codex +1 5 600установок skeumorphism typeui.sh Скилл задаёт правила для интерфейсов в стиле скевоморфизма: текстуры, 3D-эффекты и знакомые физические метафоры. Нужен для проектирования UI. CX Codex +1 2 300установок vibrant typeui.sh Задаёт агенту правила яркого интерфейса: палитра, шрифты, отступы и требования доступности. Пригодится, когда нужен живой визуальный стиль, а не серый дефолт. CX Codex +1 2 300установок 21st-ui-build 21st-dev Скилл для реализации страниц и компонентов в существующем веб-проекте: сначала читает дизайн-контекст и токены, потом ищет готовое в 21st. CX Codex +1 1 400установок 21st-ui-explore 21st-dev Скилл предлагает несколько разных направлений интерфейса, опираясь на дизайн-систему проекта и подборку референсов из 21st. Пригодится, когда неясно, как должна выглядеть новая страница. CX Codex +1 1 400установок design-better BuilderOS Скилл для ИИ-агентов, который добавляет к генерации и ревью интерфейса правила UX/UI: иерархия, состояния, доступность, анимация. Пригодится, когда код уже работает, но выглядит сыро. CX Codex +1 1 100установок

Рядом в теме «Фронтенд и UI»

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

Вопросы о styleseed

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

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

Что делает styleseed?

Ведёт работу с UI через один вход: сборка, редизайн, токены, аудит, ревью, проверка рендера и обновления. Внутри 22 воркфлоу, и агент читает только выбранный.

Что нужно, чтобы скилл заработал в проекте?

При наличии .styleseed/project.json и .styleseed/artifacts/index.json артефакт берётся из реестра. Частичный или невалидный реестр — ошибка, к legacy-бандлу скилл не откатывается.

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

SKILL.md · MIT
---
name: styleseed
description: Build, improve, or inspect UI with StyleSeed. Preserves project design choices and routes setup, layout, tokens, review, rendered verification, and updates through one entry point.
---

# StyleSeed

Use the user's goal to choose one first workflow below. This is the only registered core
skill; the 22 workflows and their executable dependencies ship inside this directory.
Read only the selected workflow, then references needed for that task.

## Registry-first artifact boundary

When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested
artifact first. Read its `.styleseed/bundles/<artifact-id>.md` and manifest. A partial or invalid
registry is an error; never fall back to the global legacy bundle. Legacy projects may use
`.styleseed/effective-rules.md` only when no registry exists.

Before the first workflow in a project/task session, follow the
[update preflight](workflows/ss-update/references/update-preflight.md).

## Working contract

- Preserve approved project design choices. Support expert judgment; a score is not human acceptance.
- Resolve the current artifact first. For multiple plausible artifacts, ask one bounded clarification question.
- Never fan out to run every workflow. Choose exactly one first workflow; it may call the required gates.
- Honor the user's authorized scope. Audit, score, verify, and status requests do not authorize edits.
  Workflow metadata records the intended tool/scope boundary even though it is not host registration metadata.
- Paths in workflow files are relative to those files. Resolve installed scripts from this skill's
  actual directory, never assume a particular agent folder or download a missing sibling skill.
- In older instructions, `/ss-build`, `$ss-build`, and other `ss-*` names mean the corresponding
  internal workflow. Read `workflows/<name>/WORKFLOW.md`; do not invoke an unregistered skill.
  Users may say `StyleSeed build`, `$styleseed build`, or the old workflow name in natural language.
- Learning is an optional extension, not part of the core install. Only for explicit learning capture,
  use separately installed `ss-learn`; if absent, report that dependency and never auto-install it.

## Choose exactly one first workflow

| Request | Read |
|---|---|
| Build or redesign a screen, page, or component | [build](workflows/ss-build/WORKFLOW.md) |
| First setup or missing design lock | [setup](workflows/ss-setup/WORKFLOW.md) |
| Explore creative directions; direction not yet selected | [studio](workflows/ss-studio/WORKFLOW.md) |
| Use screenshot, URL, Figma export, or existing UI as a reference | [reference](workflows/ss-reference/WORKFLOW.md) |
| What is wrong with this screen; UX critique | [audit](workflows/ss-audit/WORKFLOW.md) |
| Review implementation against project design rules | [review](workflows/ss-review/WORKFLOW.md) |
| Score implementation or run code/evidence gates | [score](workflows/ss-score/WORKFLOW.md) |
| Inspect rendered output, screenshot, or spacing in pixels | [verify](workflows/ss-verify/WORKFLOW.md) |
| Change spacing/density or another single design axis | [dial](workflows/ss-dial/WORKFLOW.md) |
| Apply an aesthetic profile | [restyle](workflows/ss-restyle/WORKFLOW.md) |
| Brand color, semantic palette, or design tokens | [tokens](workflows/ss-tokens/WORKFLOW.md) |
| Named animation or motion treatment | [motion](workflows/ss-motion/WORKFLOW.md) |
| Specifically scaffold a page | [page](workflows/ss-page/WORKFLOW.md) |
| Specifically generate a reusable component | [component](workflows/ss-component/WORKFLOW.md) |
| Compose existing primitives into a UI pattern | [pattern](workflows/ss-pattern/WORKFLOW.md) |
| Accessibility audit and requested fixes | [a11y](workflows/ss-a11y/WORKFLOW.md) |
| Quick design lint | [lint](workflows/ss-lint/WORKFLOW.md) |
| Navigation and user flows | [flow](workflows/ss-flow/WORKFLOW.md) |
| UX microcopy | [copy](workflows/ss-copy/WORKFLOW.md) |
| Loading, empty, success, or error states | [feedback](workflows/ss-feedback/WORKFLOW.md) |
| Update installation or consolidate old skill entries | [update](workflows/ss-update/WORKFLOW.md) |
| Compile rules, inspect local install/bundle/evidence health | [resolve](workflows/ss-resolve/WORKFLOW.md) |

For status-only requests use resolve's read-only `scripts/styleseed-doctor.mjs`; do not update,
recompile, or visually inspect instead. For vague requests infer the first step from project state
and the user's goal; ask only when an unresolved choice materially changes the work.

© bitjaru · MIT · bitjaru/styleseed

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

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

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