smyw — скилл
Перед кодом агент рисует в HTML-файле, что изменится в интерфейсе и API: цветные рамки, до и после, правки на схеме
- 166 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл читает код проекта и записывает спецификации и HTML в каталог `.smyw/`
- Сборка запускает локальный скрипт Node без доступа к сети
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/smywОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл читает код проекта и записывает спецификации и HTML в каталог `.smyw/`
- Сборка запускает локальный скрипт Node без доступа к сети
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
smyw (show me you want) — скилл для кодовых агентов, который перед реализацией показывает, что изменится. Агент читает код, пишет структурированную спецификацию и собирает из нее единственный HTML-файл с прототипом изменения: проволочные макеты каждого экрана с модулями, названия которых совпадают с компонентами кода, на масштабируемом холсте. Измененные места пронумерованы и обведены рамкой: желтая значит изменение, зеленая добавление, красная удаление. По клику на номер открывается состояние до и после, список полей, шаги взаимодействия и связанные функции и интерфейсы API. Всплывающие окна и выпадающие меню рисуются отдельными панелями, соединенными линией с кнопкой, которая их вызывает, а кнопка «Демо» проигрывает экраны как прототип в Figma. Есть дорожки процессов и сравнение серверных модулей до и после. Пользователь может перетаскивать компоненты, превращать встроенную карточку во всплывающее окно, менять текст и тип компонента, писать пометки и пожелания по стилю, затем скопировать структурированный отзыв и вставить в чат. Агент применяет его скриптом `apply-feedback.mjs`, пересобирает макет, и только после кнопки «Подтвердить план» начинает писать код. Сборке нужен Node 18 или новее, зависимостей и сервера нет, файл открывается без сети.
Для кого. Разработчикам и продуктовым командам, которые работают с кодовым агентом над функциями, меняющими экраны и интерфейсы API, и хотят согласовать изменения до написания кода.
Подходит, если
- Новая функция добавляет экран и меняет API, и вы хотите увидеть изменения на схеме, без чтения длинного diff
- Нужно согласовать, как работает всплывающее окно и какая кнопка его вызывает, до реализации
- Команде надо обсудить прототип с заметками и правками прямо на схеме
- После реализации стоит показать заказчику, что поменялось, в наглядном виде
Не подходит, если
- Нужен готовый визуальный дизайн: линии показывают модули и порядок, а оформление определяют правила проекта
- Нужна работа без Node.js: сборка HTML требует Node 18 или новее
- Правка прошла бы быстрее прямо в коде: для мелких изменений прототип избыточен
Пример запроса к агенту
Сначала покажи прототип: добавь в карточку задачи теги, нарисуй, что поменяется в списке, форме и API, я отредактирую на схемеОграничения
Макеты передают только состав модулей, расположение и способ вызова, это не визуальные дизайны: окончательный вид определяется правилами проекта. Точность схем зависит от того, насколько хорошо агент прочитал код, поэтому названия компонентов и интерфейсов стоит сверить.
Скилл не заменяет согласование с командой и не пишет код до подтверждения плана. Тесты в репозитории проверяют сборку и сценарии, но качество спецификации на реальных проектах определяется моделью агента. Для сборки нужен Node.js 18 или новее.
Как отключить. Удалите ссылку или папку `smyw` из `~/.claude/skills` или `~/.agents/skills`. Созданные спецификации и макеты лежат в каталоге `.smyw/` проекта, их можно удалить вручную.
Частые вопросы
Как установить smyw?
Клонируйте репозиторий и свяжите `skills/smyw` с `~/.claude/skills/smyw` командой `ln -s`. Для общего каталога навыков используйте `~/.agents/skills/smyw`.
Нужен ли сервер?
Нет, прототип состоит из одного HTML-файла и открывается в браузере без сети. Сборка требует только Node 18 или новее.
Что означают цвета рамок?
Желтая рамка обозначает изменение, зеленая новый модуль, красная удаление. Номер рядом открывает состояние до и после.
Как вернуть правки агенту?
На странице «Отзыв» нажмите «Скопировать отзыв» и вставьте текст в чат. Агент применит его скриптом `apply-feedback.mjs` и соберет новую версию.
Где посмотреть примеры?
В `skills/smyw/examples/` лежат два готовых файла: экран клиентского помощника с подсказками ИИ и многостраничный пример с тегами задач.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыFigma To Code MCP — макет Figma в код
Figma To Code MCP
Figma в код через MCP: сервер отдает агенту макет в виде компактного YAML с именами свойств как в CSS, раскрытыми переменными и вынесенными в файл SVG
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Агентная команда дизайна: строит токены и компоненты в Figma и коде, затем рисует экраны на них или на готовой библиотеке.
Скилл для дизайн-систем Figma: чтение, аудит с проверкой WCAG, создание компонентов и выгрузка токенов в код.
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скилл собирает компоненты Framer на Three.js, WebGL и GSAP: 3D, шейдеры и анимация по прокрутке в одном TSX-файле.
Коротко о README
Скилл описывает путь от запроса к спецификации и интерактивному HTML-прототипу, который пользователь правит и возвращает агенту. Автор приводит рабочий процесс, примеры и команды сборки, в репозитории есть тесты и скрипты для снимков страниц.
Бейдж для README
Исходный SKILL.md
--- name: smyw description: smyw（show me you want）。在做会改动页面、交互流程或前后端接口的功能时，生成一个单文件 HTML「变更预览」：按真实界面画出每一整屏的线框（模块名和代码组件对得上），放在可拖动缩放的画布上，最外层改动的模块按编号画框（黄=修改，绿=新增，红=删除）；点编号查看这一处的改动前后、相关交互步骤和函数/接口。另有流程泳道和后端模块的前后对比。用户可以直接在 HTML 里拖动组件、把内联卡片改成按钮触发的弹窗/下拉菜单、改文字和组件类型、写批注和整体风格意见，然后复制结构化反馈粘贴回对话。纯前端单文件，不需要服务端。默认用于写代码之前的原型阶段，也可用于实现后回顾。 whenToUse: 用户提出新功能、改版或重构，且会新增/删除/修改页面、改变交互流程、或改动前后端接口时；用户说「出个原型」「先给我看看要改什么」「画个前后对比」「展示这次的变化」时；实现完成后需要向用户展示改了什么时。 --- # smyw（show me you want）：变更预览 + 原型反馈 一次功能变化 → 一份 JSON spec → 一个可交互的 HTML。用户在 HTML 上看懂"改哪里、加什么、怎么触发"，直接动手改方案或写批注，再把反馈交回给你。 本 skill 目录（下文称 `$SKILL`）里有： - `scripts/build.mjs`：校验 spec，生成单文件 `preview.html`（纯前端、无外部依赖、离线可开） - `scripts/apply-feedback.mjs`：从用户粘贴回来的反馈里取出修改后的方案，生成下一版 spec - `references/spec-format.md`：spec 完整字段说明，**第一次写 spec 前先读一遍** - `examples/task-tags/spec.json`：完整示例（新增页、删除页、内联卡片、表格列变化、流程、后端） 构建只需要 Node ≥ 18；生成的 HTML 是纯前端的，**不需要也不要启动任何服务**。**不要手写 HTML**：永远写 spec 再 build。 ## 什么时候用 - **默认**：功能会动到页面、交互或接口时，在写代码**之前**先出原型（`stage: "prototype"`），给用户看，等反馈或确认后再实现。 - 很小的改动（改一处文案、加一个字段）先问用户要不要预览；用户说"直接做"就跳过。 - 实现之后：把同一份 spec 改成 `stage: "done"`，按**实际实现**修正，并在 note 里标出和原型的偏差，重新 build 给用户回顾。 ## 工作流 ### 1. 摸清现状：按真实界面画，不按功能点画 读路由、布局、页面组件、接口、模型代码，先弄清**用户实际看到的一整屏长什么样**： - **一个 page = 用户看到的一整屏**，而不是一个组件或一个功能点。比如「左侧侧栏 + 右侧主面板」是同一屏，要画在同一个 page 里（`root.layout: "row"`，侧栏 `w: "1/4"`），不要拆成「侧栏」「详情」两个 page。不同路由或不同模式下的界面才算不同的 page。 - **模块要和代码对得上**：每个区域（侧栏、头部、主面板、列表、对话框……）用它在界面上的名字做 `label`，用 `component` 写代码里的组件或文件（如 `"<TicketQueue> TicketQueue.vue"`）。 - **没改的模块也要画出来**，写 label 和 component，**不展开 children** 就行（预览里会显示「内容不变，未展开」）。不要用「xxx（不变）」这种 placeholder 代替真实模块，build 会警告。 - 顺序、左右、上下要和真实界面一致，这样用户一眼能认出是哪里。 ### 2. 写 spec 在目标项目根目录下： ~~~ .smyw/<YYYYMMDD>-<短名>/spec.json ~~~ （产物都在这个目录：`preview.html`、每轮的 `feedback-v<N>.md`、旧版 `spec-v<N>.json`。第一次创建 `.smyw/` 时问用户是否加进 `.gitignore`。） **省 token 的写法**： - 第一版写完整 spec，用 JSON、缩进 2（不要用 YAML：缩进和引号容易出错，`on` 这类键在一些解析器里会变成布尔值）。 - 之后每一版**用编辑工具只改变动的地方**（改字段、插入/删除节点），不要整份重写，也不要为了改几处把整份 spec 重新读一遍。