resolvui

Pixel no lugar.

Encaixe espaçamentos na grade e salve direto no código.

No navegador, a extensão abre uma dock na sua página e se conecta à CLI rodando no seu projeto: é ela que grava cada ajuste no código. No terminal, a CLI sozinha acha e corrige o que saiu da grade, também no CI.

  1. Simples de usar.

    Ajustes de design e UI sem dor de cabeça: tudo numa camada sobre o seu app, sem trocar de ferramenta.

  2. SRHA

    A dock na sua página

    Select, Régua, Heatmap, Audit e Code numa barra só, por cima do app que você está construindo.

  3. H

    Heatmap

    Pinta a página inteira: laranja onde o espaçamento saiu da grade, verde onde está no ponto.

  4. R

    Régua

    Guias e distâncias reais entre elementos, em passos de 4px. Alt + hover mede até o vizinho.

  5. G

    Precisão

    Padding, margem, gap e raio em sliders que encaixam na escala do projeto, Web, iOS ou Android.

  6. A

    Audit + Fix all

    Cada valor fora da grade vira uma linha 9 → 8px. Corrija um por um ou a página inteira de uma vez.

  7. Ctrl↵

    Save to code

    Revise o diff e grave na regra CSS, SCSS ou classe Tailwind de origem. Ou copie para a IA.

Faça você mesmo

Teste a extensão aqui.

Clique num evento do Agendaí, mexa no painel e salve. Mesmo painel, mesmos valores fora da grade, sem instalar nada.

localhost:5173/agenda

Seg 3

Ter 4

Qua 5

div.event.violetsrc/App.tsx
Magnetic Grid Snap

Padding

Border radius

Code 0

    Precisão sem adivinhação

    Do detalhe que escapa ao ajuste que fica.

    O ResolvUI acha o valor fora da grade e grava a correção na regra que já existe, no formato do seu código.

    1. CSSpadding: 13px;12pxsrc/Card.css
    2. Tailwindgap-[19px]gap-4src/App.tsx
    3. Tailwindrounded-[5px]roundedsrc/Button.tsx
    4. SCSS$gutter: 7px;8pxstyles/_vars.scss
    5. CSSborder-radius: 10px;12pxsrc/Event.css

    100% na sua máquina: a CLI roda no seu projeto e seus arquivos não saem do seu computador. Privacidade

    No seu fluxo de desenvolvimento

    Da página ao código.

    1. 01

      Conecte

      npx resolvui serve

      a extensão do Chrome se conecta sozinha à CLI no seu projeto

    2. 02

      Ajuste

      SRHA

      na página que você está construindo

    3. 03

      Salve

      Save to code → src/Card.css

      a CLI grava no arquivo; e resolvui lint no CI

    Bagunça de IA não passa no PR.

    ~/seu-projeto

    $

    varrendo 38 arquivos…

    ✖ 14 valores fora da grade · p-[7px] gap-[19px] rounded-[5px]

    $ npx resolvui lint --fix

    ✔ exit 0 · tudo no grid de 4px

    lintscoreconsistencyrules

    Grátis. Um comando.E o PR passa.

    $ npx resolvui init

    Extensão em breve na Chrome Web StoreGuia de instalação