03 / 10

Дизайн-инструменты · AI-Powered · 2024

UIXCOLORS uixcolors.com

Восемь AI-инструментов для UI-дизайнеров в одном месте: доступные палитры, генератор градиентов, экстрактор style-guide прямо со страниц сайтов, проверка контраста WCAG, color picker с авто-гармонией, экспорт в CSS, Tailwind, SCSS и Figma. Всё бесплатно, без регистрации, прямо в браузере.

Открыть сайт →

Тип

Дизайн-тулкит

Роль

Соло · Full-stack

Стек

JS · WebGL · APIs

Год

2024

8k Палитр в библиотеке Кураторские + AI-сгенерированные
1.4сек AI-генерация палитры GPT-4 + custom prompts
WCAG2.1 Проверка контраста AA / AAA на лету
CSS+JS Экспорт форматов Tokens · Variables · Tailwind
Обзор

Инструменты, которые
реально доходят в прод.

UIXCOLORS — это набор утилит для одного-двух движений, которые дизайнер делает каждый день. Найти хороший градиент. Проверить контраст. Вытащить токены с сайта-конкурента. Скопировать палитру в Tailwind-конфиг. Каждый инструмент решает одну задачу и решает её быстро.

Под капотом — современная цветовая математика на OKLCH (не sRGB-приближения), AI-подсказки для гармоний и движок live-preview, который показывает палитру на реальном UI до экспорта. Style-guide extractor — отдельная фишка: вставь URL, и он распарсит computed-styles страницы и достанет цвета, шрифты, тени и радиусы.

Архитектура — pure-browser: WebGL для превью, Web Workers для парсинга, нулевой серверный round-trip в ядре. Никакой регистрации, никакого paywall, никакой телеметрии — только инструмент, который работает быстро. Открыт и для дизайнеров, и для разработчиков, которым нужно хорошо подобрать цвета и не думать об этом.

8 инструментовAIWCAG из коробкиБесплатноБез регистрацииCSS · Tailwind · Figma
uixcolors.com
uixcolors.com — toolkit
uixcolors.com — palette playground
Ключевые возможности

01

Палитра-плейграунд

Генерируй, гармонизируй и фиксируй цвета с AI-подсказками.

02

Генератор градиентов

Линейные, радиальные, mesh — со стопами и CSS-экспортом.

03

Style-guide экстрактор

Вставь URL — получи токены сайта: цвета, шрифты, отступы.

04

Проверка контраста

WCAG 2.2 на каждую пару, с предложениями фикса.

05

Экспорт токенов

CSS-переменные, Tailwind, SCSS, JSON, Figma-токены — в один клик.

06

Живой превью

Смотри палитру на реальном UI до экспорта.

07

Keyboard-first

⌘K, j/k, c для копирования — быстро как код.

08

Бесплатно навсегда

Без paywall, без регистрации, без телеметрии — всё в браузере.

Под капотом

Цвет

OKLCH-математика, не sRGB-приближения — гармонии и контраст работают правильно.

AI

Подсказки по гармониям обучены на лучших палитрах из дизайн-сообщества.

Парсер

Style-guide extractor читает computed-styles страниц и достаёт реальные токены.

Превью

WebGL рисует палитру на реальном UI-шаблоне в реальном времени.

Экспорт

Один клик — CSS-vars, Tailwind, SCSS, JSON, Figma-токены с единым неймингом.

Скорость

Web Workers для парсинга, ⌘K для команд, j/k для навигации — keyboard-first.

Процесс

01

Теория цвета

Изучил модели гармонии, цветовое пространство OKLCH и accessibility-математику — каждый инструмент построен на продакшен-правилах, а не «на глаз».

02

Движок в браузере

Всё работает локально — WebGL для превью, Web Workers для парсинга, без серверных round-trip'ов в ядре тулкита.

03

Экспортный пайплайн

Одна палитра — много форматов. Конвертер выдаёт CSS, Tailwind, SCSS, JSON и Figma-токены с единым неймингом.

Следующий проект

VPNRUSCLIENT