Рендеринг кодов ДНК в кадры Pencil .pen. Делает ОДНУ вещь хорошо. Ввод: код ДНК + тип компонента (герой, карта, форма и т.д.) Вывод: идентификатор кадра .pen + скриншот. Используйте, когда: исследование дизайна или другие оркестраторы должны выполнить рендеринг. визуальные предложения с использованием бэкэнда Pencil MCP.
Быстро установите AI-навык pencil-renderer в вашу среду разработки через командную строку
Источник: phrazzld/claude-config.
Translate aesthetic DNA codes into Pencil .pen frames via MCP.
DNA axis → Pencil property mapping is deterministic. Example: centered layout → alignItems: "center", symmetric padding
| hero | Container + headline + subhead + CTA buttons | | card | Container + image area + content + actions | | form | Container + labels + inputs + submit | | nav | Container + logo + links + actions | | footer | Container + columns + links + legal | | section | Container + heading + content grid | | button | Frame + text + icon slot |
Рендеринг кодов ДНК в кадры Pencil .pen. Делает ОДНУ вещь хорошо. Ввод: код ДНК + тип компонента (герой, карта, форма и т.д.) Вывод: идентификатор кадра .pen + скриншот. Используйте, когда: исследование дизайна или другие оркестраторы должны выполнить рендеринг. визуальные предложения с использованием бэкэнда Pencil MCP. Источник: phrazzld/claude-config.
Стабильные поля и команды для ссылок в AI/поиске.
npx skills add https://github.com/phrazzld/claude-config --skill pencil-rendererРендеринг кодов ДНК в кадры Pencil .pen. Делает ОДНУ вещь хорошо. Ввод: код ДНК + тип компонента (герой, карта, форма и т.д.) Вывод: идентификатор кадра .pen + скриншот. Используйте, когда: исследование дизайна или другие оркестраторы должны выполнить рендеринг. визуальные предложения с использованием бэкэнда Pencil MCP. Источник: phrazzld/claude-config.
Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw
https://github.com/phrazzld/claude-config