awesome-design-md-jp — скилл для Claude Code: обзор и установка
Скилл добавляет спецификации DESIGN.md для японских веб-интерфейсов. Помогает настроить типографику CJK, перенос знаков и шрифты при кодинге с ИИ.
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-codeЧто делает awesome-design-md-jp
Файл DESIGN.md задаёт правила внешнего вида, которые нейросеть считывает при генерации интерфейсов. Этот скилл дополняет стандартный формат Google Stitch правилами японской вёрстки: шрифтовыми цепочками для CJK, увеличенным интерлиньяжем от 1.5 до 2.0 и трекингом от 0.04em до 0.1em. Включена поддержка параметров OpenType palt и kern для пропорциональных глифов.
В репозитории собраны 24 готовых примера стилей реальных сервисов, включая MUJI, SmartHR, Mercari и LINE. В спецификациях прописаны правила смешанного набора латиницы и японских знаков, а также запреты переноса строк kinsoku shori со свойством line-break: strict. Если не объявить эти CSS-свойства заранее, ИИ сверстает японский текст по западным меркам с чересчур плотными строками и разорванной пунктуацией.
Какие задачи решает
- задать CSS-правила kinsoku shori для корректных переносов
- составить шрифт-стек для смешивания японских глифов и латиницы
- оформить файл DESIGN.md на основе дизайн-системы MUJI или SmartHR
- скорректировать межстрочные интервалы под иероглифический текст
Примеры запросов агенту
- Создай файл DESIGN.md для сайта на японском языке с правилами kinsoku shori
- Сгенерируй спецификацию дизайна в стиле MUJI с пропорциональными знаками препинания
- Добавь в проект правила смешанной типографики для японского текста и латиницы
Как установить awesome-design-md-jp
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-code2Вручную: положить файлы
~/.claude/skills/awesome-design-md-jp/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/awesome-design-md-jp/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a codex2Вручную: положить файлы
.agents/skills/awesome-design-md-jp/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a cursor2Вручную: положить файлы
.cursor/skills/awesome-design-md-jp/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills awesome-design-md-jp2Вручную: положить файлы
.github/skills/awesome-design-md-jp/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/awesome-design-md-jpВручную: положить файлы
.devin/skills/awesome-design-md-jp/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о awesome-design-md-jp
Как установить awesome-design-md-jp в Claude Code?
Выполните команду npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-code. Файл спецификации сохранится по пути ~/.claude/skills/awesome-design-md-jp/SKILL.md.
Для чего нужен этот скилл?
Он предоставляет готовые шаблоны и 24 примера спецификаций DESIGN.md для японских веб-приложений. Это позволяет ИИ-агентам учитывать специфику CJK-типографики и не ломать вёрстку при генерации UI.
Какие параметры вёрстки настраивает шаблон?
Шаблон задаёт увеличенный интерлиньяж от 1.5 до 2.0, трекинг до 0.1em, правила запрета переноса знаков пунктуации kinsoku shori и OpenType-свойства palt и kern.
