Frontend & UI
Framed Grid Layout
Constrói layouts editoriais precisos com molduras finas e cantoneiras.
O que é
Um padrão de grid de doze colunas em que cada seção se alinha a colunas compartilhadas dentro de caixas emolduradas de 1px. As cantoneiras em L são desenhadas como camadas de fundo sobre uma textura diagonal de baixa opacidade.
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
Por que isso importa para design
- Toda seção compartilha uma cor de borda, um tamanho de cantoneira e uma escala de espaçamento.
- As cantoneiras não precisam de markup extra, então a estrutura fica no CSS.
- O layout ainda se lê com clareza se a camada de textura for removida.
O que cobre
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
Como instalar
Framed Grid Layout
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/framed-grid-layout/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça uma página técnica ou editorial e receba primeiro o grid pai.
-
Atribua classes de span explícitas em vez de larguras de seção improvisadas.
-
Verifique se as arestas das molduras se alinham na vertical e na horizontal nos dois breakpoints.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.