Frontend & UI
Container Lines
Desenha linhas-guia verticais discretas nas bordas do seu container de conteúdo.
O que é
Um padrão de CSS que adiciona linhas verticais de 1px nas duas bordas do container de conteúdo, mais quadradinhos de canto opcionais. As guias ficam atrás do conteúdo e ignoram eventos de ponteiro.
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small
Por que isso importa para design
- Revela a largura do container, então seções de hero soltas ganham tensão estrutural.
- As guias compartilham o max-width e o padding do container, então nunca saem do lugar.
- Os eventos de ponteiro ficam desativados, então as linhas nunca bloqueiam cliques ou seleção.
O que cobre
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
Como instalar
Container Lines
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/container-lines/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Adicione a classe container-lines à casca de layout.
-
Coloque os quadradinhos de canto só em cantos reais de container ou seção.
-
Confira que as linhas seguem sutis em fundos claros e escuros.
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.