Фронтенд и UI
Framed Grid Layout
Собирает точные редакционные раскладки с тонкими рамками и угловыми скобками.
Что это
Паттерн двенадцатиколоночной сетки, где каждая секция прилегает к общим колонкам внутри боксов с рамкой 1px. Г-образные угловые скобки рисуются фоновыми слоями поверх малозаметной диагональной текстуры.
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial
Почему это важно для дизайна
- Каждая секция делит один цвет рамки, один размер скобок, одну шкалу отступов.
- Угловым скобкам не нужна лишняя разметка, поэтому структура остаётся в CSS.
- Раскладка всё равно читается ясно, если убрать слой текстуры.
Что внутри
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
Как установить
Framed Grid Layout
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Запросите техническую или редакционную страницу и сначала получите родительскую сетку.
-
Назначайте явные классы span вместо произвольных ширин секций.
-
Проверьте, что края рамок выравниваются по вертикали и горизонтали на обоих брейкпойнтах.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Другие дизайн-плагины для Codex
Фронтенд и UI Что он делает gpt-taste Собирает премиальные лендинги в духе award-сайтов: GSAP-анимация скролла и плотные бенто-сетки без пустот. 
Дизайн-системы Что он делает Stitch Design Taste Пишет DESIGN.md, который уводит Google Stitch от шаблонных экранов. 
Фронтенд и UI Что он делает image-to-code Сначала генерирует изображения дизайна, разбирает их, а затем собирает соответствующий фронтенд-код. 
Фронтенд и UI Что он делает imagegen-frontend-mobile Генерирует премиальные флоу экранов мобильного приложения как изображения, а не код. Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.