Преобразование дизайнов Pencil во фронтенд-код
Дизайны Pencil часто теряют детали, когда разработчики переносят их на глаз. Этот навык помогает Claude, Codex и Claude Code выполнять точное извлечение, реализацию и визуальные проверки.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "pencil-to-code" from https://skillstore.io/skills/johnwayneeee-pencil-to-code.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-pencil-to-code/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «pencil-to-code». Пользователь предоставляет артборд Pencil для hero-секции продуктовой страницы и просит выполнить реализацию.
Ожидаемый результат:
Ассистент извлекает размеры, типографику, ресурсы и адаптивные правила, затем предоставляет фронтенд-компоненты с соответствующей визуальной структурой.
Использование «pencil-to-code». Пользователь говорит, что десктопная версия слишком широкая по сравнению с дизайном Pencil.
Ожидаемый результат:
Ассистент проверяет ширину артбордов, правила фиксированного переднего плана и отрендеренные скриншоты, затем рекомендует точечные изменения макета и CSS-токенов.
Использование «pencil-to-code». Пользователю нужно преобразовать повторяющиеся карточки Pencil в поддерживаемый компонент.
Ожидаемый результат:
Ассистент определяет общие свойства карточек, создает переиспользуемую структуру и сохраняет текст, иконку, интервалы и детали изображений для каждой карточки.
All seven static findings are false positives caused by Markdown text, browser API names, CSS terms, and one optional product link. I found no prompt injection, command execution intent, data exfiltration, or unsafe network behavior in the reviewed files.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-pencil-to-code/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/johnwayneeee-pencil-to-code.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>JohnWayneeee. (2026). pencil-to-code security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5@techreport{johnwayneeee-johnwayneeee-pencil-to-code-2026,
author = {JohnWayneeee},
title = {pencil-to-code security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "pencil-to-code security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-pencil-to-code:audit:5"
description: "Skillstore immutable audit report identifier"
Преобразуйте лендинг Pencil в адаптивные HTML, CSS или компоненты фреймворка, сохранив структуру артборда.
Используйте идентификаторы узлов, переменные и скриншоты, чтобы устранить различия в интервалах, типографике и кадрировании изображений во время проверки.
Пересоберите существующие экраны, созданные в Pencil, в современном фронтенд-стеке с переиспользуемыми компонентами и задокументированными визуальными отклонениями.
Use pencil-to-code to convert this Pencil artboard into responsive frontend code. Preserve layout, typography, images, and spacing.
Use pencil-to-code with these Pencil node IDs. Inspect the artboard, variables, repeated components, and assets before coding.
Use pencil-to-code to compare the current implementation with the Pencil screenshot and identify CSS changes for closer visual matching.
Use pencil-to-code to extract shared tokens and repeated units from these Pencil artboards, then implement reusable responsive components.
Автор
JohnWayneeeeЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
b8ca75d2c0a7e7102978993058777d82b8ab2610
Актуальность поддержки
18.07.2026
Использование
5 загрузок · 8 просмотров
Структура файлов
Моделирование UI-действий после достижения результата
Продуктовые команды часто перегружают состояния успеха неясными следующими шагами. Этот навык преобразует намерение пользователя в ограниченные по области и приоритизированные UI-действия после значимого результата.
Полировка существующих экранов UI
Готовым интерфейсам часто нужны небольшие визуальные корректировки перед релизом. Этот навык помогает Claude, Codex и Claude Code улучшать ясность, сохраняя дизайн.
Настройка узлов рабочих процессов React Flow
Узлы React Flow могут ломаться, когда handles, edges, изменение размера и поведение прокрутки расходятся между собой. Этот навык дает Claude, Codex и Claude Code сфокусированный чеклист для стабильных изменений узлов рабочих процессов.
Преобразование дизайнов в FSD-код на Tailwind
Передача дизайна в разработку часто нарушает архитектуру, токены и доступность. Этот навык помогает Claude, Codex и Claude Code преобразовывать выбранные экраны Figma или Pencil в многослойный код на Tailwind.
Безопасная проверка холстов React Flow
Холсты React Flow могут ломаться, когда IDs, handles, владение состоянием или поведение viewport расходятся с ожиданиями. Этот skill проводит Claude, Codex и Claude Code через практические проверки ревью @xyflow/react v12.
Аудит веб-страниц перед развертыванием
Поздно обнаруженные проблемы на веб-страницах могут блокировать запуски и вредить доступности, SEO или ключевым пользовательским сценариям. Этот навык помогает проводить проверки в браузере, интерпретировать Lighthouse и готовить структурированные отчеты перед релизом.
Build Accessible Tailwind Interfaces
от nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Проектирование выразительных фронтенд-интерфейсов
от Atman36
Типовые сгенерированные интерфейсы часто выглядят предсказуемо и слабо. Этот навык направляет Claude, Codex и Claude Code к выразительному, готовому к продакшену фронтенд-дизайну.
Проектируйте выразительные UI-прототипы
от tencentcloudbase
Типовым AI-интерфейсам часто не хватает визуального направления и деталей с учетом платформы. Этот навык помогает Claude, Codex и Claude Code определить дизайн-замысел перед созданием прототипов.
Улучшение компоновки UI и визуального ритма
от pbakaus
Перегруженные интерфейсы и однообразные сетки усложняют восприятие продуктов и снижают доверие к ним. Этот навык помогает Claude, Codex и Claude Code улучшать отступы, иерархию и адаптивную композицию.
Выделение переиспользуемых паттернов дизайн-системы
от pbakaus
Команды часто дублируют UI-компоненты, токены и паттерны компоновки в приложении. Этот навык помогает Claude, Codex или Claude Code находить переиспользуемые паттерны и консолидировать их в сопровождаемую дизайн-систему.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.