case-study — скилл для Claude Code: что делает и как установить
Скилл помогает составить дизайн-кейс для портфолио с описанием процесса, метрик и результатов. Пригодится, когда нужно рассказать о проекте внешней аудитории.
npx skills add Owl-Listener/designer-skills --skill case-study -a claude-codeЧто делает case-study
Скилл задаёт структуру кейса из шести блоков: обзор проекта, проблема, процесс работы, финальное решение, измеримый результат и рефлексия. Он заставляет фиксировать не только готовые экраны, но также гипотезы и развилки решений.
В инструкции заложены чёткие правила вёрстки текста и графики. Скилл требует писать от первого лица о личном вкладе, разделять роли в команде и подкреплять выводы цифрами. Для внутренних отчётов перед стейкхолдерами он не рассчитан: автор прямо советует переключиться на presentation-deck, если готовится рабочая презентация, а не публичный кейс.
Какие задачи решает
- структурировать историю дизайн-проекта для портфолио
- показать ход мыслей и развилки через промежуточные итерации
- сформулировать личный вклад в командный результат с опорой на метрики
- оформить выводы и технические ограничения проекта
Примеры запросов агенту
- Помоги написать кейс для портфолио по редизайну мобильного чекаута
- Структурируй мои черновики по проекту B2B-панели по схеме case-study
- Сформулируй раздел с метриками и результатами для дизайн-кейса
Как установить case-study
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a claude-code2Вручную: положить файлы
~/.claude/skills/case-study/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/case-study/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a codex2Вручную: положить файлы
.agents/skills/case-study/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a cursor2Вручную: положить файлы
.cursor/skills/case-study/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills case-study2Вручную: положить файлы
.github/skills/case-study/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path designer-toolkit/skills/case-studyВручную: положить файлы
.devin/skills/case-study/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о case-study
Как установить case-study в Claude Code?
Выполните в терминале команду npx skills add Owl-Listener/designer-skills --skill case-study -a claude-code.
Что делает скилл case-study?
Он направляет генерацию описания проекта по шести секциям — от проблемы и исследований до метрик и рефлексии. В фокусе находится демонстрация хода мысли дизайнера, а не только финальный визуал.
Чем case-study отличается от presentation-deck?
Скилл case-study ориентирован на внешнюю аудиторию и публичные портфолио. Для внутренних отчётов перед стейкхолдерами в репозитории автора предусмотрен отдельный скилл presentation-deck.
Исходный текст
SKILL.md · MIT
--- name: case-study description: Craft a portfolio case study with narrative arc, process evidence, and outcomes. Use when telling a project's story to an external audience. For an internal stakeholder deck, use `presentation-deck`. --- # Case Study You are an expert in crafting compelling design case studies for portfolios and presentations. ## What You Do You structure case studies that tell the story of a design project, demonstrating process, thinking, and impact. ## Case Study Structure ### 1. Overview - Project title and one-line summary - Your role and team composition - Timeline and scope - Key outcome or metric (the hook) ### 2. Challenge - Business context and problem statement - User needs and pain points - Constraints and requirements - Why this problem mattered ### 3. Process - Research methods and key findings - Ideation and exploration (show breadth) - Key decisions and rationale (show depth) - Iteration based on feedback or testing ### 4. Solution - Final design walkthrough - Key features and interactions - How it addresses the original challenge - Design system and technical considerations ### 5. Impact - Quantitative results (metrics, data) - Qualitative results (user feedback, team response) - Business impact - What you would do differently ### 6. Reflection - Key learnings - Challenges overcome - Skills developed - How this work influenced future projects ## Visual Storytelling - Show the journey, not just the final product - Include sketches, wireframes, and iterations - Use before/after comparisons - Annotate key design decisions - Include real screenshots, not just mockups ## Writing Tips - Write in first person for your contributions - Be specific about your role vs team contributions - Quantify impact wherever possible - Keep it scannable (clear headings, short paragraphs) - Edit ruthlessly — shorter is better ## Best Practices - Lead with the most impressive outcome - Show process, but don't document every step - Highlight moments of insight or pivots - Include enough context for someone unfamiliar - Tailor depth to the audience
© Owl-Listener · MIT · Owl-Listener/designer-skills
