Към съдържанието
PN Scripts

Дизайн ресурси

Paneform by PN Scripts

UI кит, изграден от дизайн токени: светла и тъмна тема, 12 SVG листа на тема с всички състояния на компонентите, едно платно за Figma, Penpot или Inkscape и съответстващ CSS.

  • Design Tokens (W3C draft JSON)
  • Tokens Studio file layout
  • SVG
  • CSS custom properties
  • HTML
  • Очаквайте скоро

Очаквайте скоро

Още не е публикуван в магазина, затова няма връзка за покупка или изтегляне. PN Scripts не приема плащане за него тук.

Дизайн ресурси
Листовете с бутони и карти на кита в светла и тъмна тема

Какъв проблем решава

Празнината

Повечето UI китове живеят в един дизайн инструмент, разминават се с кода, който ги реализира, а тъмната тема е добавена накрая, така че дизайнерите и разработчиците поддържат две версии на едни и същи решения.

Какво представлява

Paneform пази един източник, файловете с токени, и от него създава дизайн листовете, CSS и примерните страници в светла и тъмна тема, като проверява контраста при всяко изграждане.

Как се използва

Сменяте един токен и за секунди получавате съответстващи дизайн листове, CSS и документация в двете теми, а проверките за достъпност минават отново вместо вас.

За малки продуктови екипи и самостоятелни разработчици, които искат чист и достъпен набор от компоненти без абонамент за дизайн инструмент, Paneform е кит, изграден от токени, който работи като SVG във всеки редактор и като CSS във всеки уеб проект.

За кого е

Използвайте го когато

  • Начало на интерфейса на SaaS табло или вътрешен инструмент
  • Общ набор от токени и компоненти за дизайнер и разработчик
  • Собствен кит с вашите цветове чрез смяна на скалите и ново изграждане

Направено за

  • Самостоятелни разработчици и малки продуктови екипи
  • Дизайнери, които работят във Figma, Penpot или Inkscape и предават на разработчици

Какво има вътре

Първо токените

Основни стойности (шест цветови скали, текст, отстояния, радиуси, размери, продължителности) и два файла за темите, които свързват семантични имена като text.secondary или accent.hover с тях. Файловете следват синтаксиса на W3C Design Tokens (чернова) и подредбата на Tokens Studio със светла и тъмна тема.

Всяко състояние е нарисувано

Бутони в четири варианта, пет състояния и три размера; полета със задържане, фокус, грешка и забрана; отворен падащ списък; отметки, радио бутони и превключватели; табове; три вида карти; диалози върху затъмнен фон; известия в четири тона; таблица; навигация и страниране. Всеки екземпляр е именувана SVG група.

Дизайнът и кодът съвпадат

Едно и също изграждане от токените създава SVG листовете, голямото платно и paneform.css. HTML примерът показва всеки компонент с естествени елементи, фокус от клавиатурата и превключване на темата, а таблицата с токените изброява всяка стойност с нейната CSS променлива.

Проверено, не предположено

Тестовете проверяват всеки токен и препратка, изчисляват контраста на 24 двойки текст и фон и 6 граници на компоненти в двете теми, разчитат всичките 25 SVG файла, потвърждават, че всеки цвят в листовете е токен и че всеки очакван слой съществува, и проверяват CSS променливите и връзките в HTML.

Спецификации

Наличност
Очаквайте скоро
Разработчик
PN Scripts
Вид
Ресурс
Ценообразуване
Еднократно плащане Цената ще бъде обявена.
Лиценз
Лиценз за шаблони на PN Scripts 1.0
Внедряване
Изтегляне (ZIP с токени, SVG листове, CSS, HTML пример и генератора)
Зрялост
v1.0.0

Съвместимост

Платформа или среда Поддържани версии Тествано до
Python (to rebuild) 3.10 или по-нова 3.12
Google Chrome (HTML reference) 120 или по-нова current stable, headless

Стек

  • Design Tokens (W3C draft JSON)
  • Tokens Studio file layout
  • SVG
  • CSS custom properties
  • HTML
  • Python 3 (generator)

Paneform предстои

Продуктът е завършен и тестван. Още не се продава; тази страница ще посочи откъде да го вземете, когато започне.

Очаквайте скоро

Още не е публикуван в магазина, затова няма връзка за покупка или изтегляне. PN Scripts не приема плащане за него тук.

Въпроси

UI кит от дизайн токени, SVG листове на 11 компонента в светла и тъмна тема, платно за дизайн инструменти, CSS файл със съответните класове и HTML пример, всички създадени от токените с включен скрипт.

Дизайн инструмент, който отваря SVG, за листовете, съвременен браузър за CSS и HTML и безплатния шрифт Noto Sans за еднакъв текст. За да изградите кита наново след промяна на токените, ви трябва Python 3.10 или по-нов; тестван е с Python 3.12.

Няма .fig файл и няма компоненти или варианти във Figma: SVG се внася като именувани векторни и текстови слоеве. Figma, Penpot, Inkscape и приставката Tokens Studio не са отваряни при тестовете. Няма компоненти за JavaScript рамки и няма набор от икони освен няколкото, които компонентите използват.

Токените, генераторът, компонентите, CSS и HTML са написани за този кит, а 18 автоматични теста се пускат при всяко изграждане. Създадено с помощта на AI; токените, контрастът, SVG файловете, CSS и HTML са проверени от PN Scripts с автоматични тестове и изображения на всеки лист в двете теми от Google Chrome без интерфейс.

Още не се продава. Когато започне, тази страница ще води към магазина; PN Scripts не приема плащания на този сайт.