Skip to content
BranchesTags

Repository files navigation

EFsys

Editor de Especificações Funcionais — 100% no navegador, sem backend, sem Node.js.

Acesse online: https://dpsanz.github.io/ef-sys/

EFsys é uma aplicação web para autoria de Especificações Funcionais (EF) em HTML padronizado. Cria, edita e versiona documentos de requisitos com blocos de conteúdo estruturados, exportando um HTML autocontido pronto para enviar por e-mail ou anexar ao Confluence.

Índice

Como rodar localmente

Não precisa de Node.js. O iniciar.bat usa o PowerShell (nativo no Windows) para subir um servidor estático na porta 8080.

1. Duplo clique em iniciar.bat
2. Navegador abre em http://localhost:8080/
3. Pronto.

Para encerrar: na janela preta, Ctrl+C.

Por que não abrir o index.html direto? Navegadores bloqueiam módulos ES6 (import/export) em file://. O servidor mínimo existe só para contornar isso — não é um "backend".

Alternativa: extensão Live Server (VS Code / Cursor) → abrir index.html por ela.

Como compartilhar na rede

Enquanto o iniciar.bat estiver rodando, colegas na mesma rede acessam via:

http://SEU-IP:8080/

Para descobrir seu IP: ipconfig no terminal → "Endereço IPv4".

Cada navegador tem seu próprio IndexedDB. Para sincronizar projetos entre máquinas, use Exportar dados (JSON) no menu lateral e envie o arquivo para o colega importar. Ou simplesmente entregue os HTMLs exportados — esse é o fluxo natural.

Funcionalidades

Projetos

  • Criação com código, nome, título, subtítulo, autor, time, revisor, status e próxima revisão
  • Picker de status colorido por fase: Rascunho · Em Revisão · Em Desenvolvimento · Em Validação · Concluído · Arquivado
  • Filtro por status e busca por nome/código na tela inicial
  • Cards animados na home com datas de criação e atualização

Editor

  • Seções com título, ícone (emoji ou Material Symbol), numeração automática (1, 1.1, 2…) e flag "marcar como nova"
  • Blocos dentro de seções — reordenáveis por drag-and-drop com animação FLIP
  • Reordenação de seções pelo menu lateral
  • Edição rápida de título inline (clique no heading da seção)
  • Barra de ferramentas com picker de status, pré-visualização, download e salvar versão

Versionamento

  • "Salvar como nova versão" cria snapshot imutável (V1 → V2 → …)
  • Histórico de versões com diff visual
  • Restauração de versões antigas

Export / Import

  • Download HTML: arquivo EF_Tipo_Nome_Vn.html autocontido (CSS inline) — sem dependências externas
  • Importação: lê HTMLs no formato EFsys e reconstrói seções + blocos
  • Backup JSON: exporta/importa toda a base IndexedDB

Interface

  • Dark mode completo com paleta azul-marinho coesa (sidebar, cards, modais, toolbar)
  • Animações em todos os modais (entrada com spring, saída suave)
  • Transições em todos os botões e elementos interativos
  • Dropdowns de status coloridos por fase em todo o sistema
  • selects nativos estilizados com contraste correto em dark mode

Assistente IA

O EFsys v1.4 inclui um assistente de IA com function calling nativo — o modelo executa ações reais no sistema, não apenas descreve o que fazer.

Configuração

Clique no botão de chat (canto inferior direito) → ícone ⚙ → selecione o provedor e insira a API key:

Provedor Modelo padrão Plano gratuito
Google Gemini gemini-2.5-flash Sim (via aistudio.google.com)
Anthropic Claude claude-sonnet-4-6 Não (via console.anthropic.com)
OpenAI gpt-4o Não (via platform.openai.com)

As chaves são armazenadas apenas no localStorage do navegador — nunca trafegam para o servidor.

O que a IA consegue fazer

Navegar pelo sistema (de qualquer página):

  • "me leva para os templates" → navega para #/templates
  • "abre o projeto X" → localiza pelo nome/código e abre o editor
  • "volta para a home" → volta para a lista de projetos

Criar uma EF do zero (orquestrado):

Quando você pede "crie uma EF para um sistema de aprovação de crédito", a IA assume o papel de orquestrador e conduz em fases:

  1. Levantamento — entrevista em blocos temáticos (identidade → escopo → requisitos → não-funcionais → aceite), aguardando a resposta de cada bloco
  2. Gate de aprovação — apresenta o briefing e pede confirmação antes de criar
  3. Criação — chama criar_projeto (modelo padrao com 15 seções) e preenche todas as seções relevantes com parágrafos, listas, tabelas e RFs via ações encadeadas
  4. Entrega — informa o que ficou como [A CONFIRMAR]

Editar uma EF aberta:

  • Remover/criar seções e blocos
  • Preencher parágrafos, listas, checklists, callouts, tabelas, RFs
  • Editar células de tabela, renomear seções, limpar conteúdo
  • Editar metadados do projeto (código, autor, status…)

Arquivos da IA

Arquivo Responsabilidade
assets/js/ai-config.js Configuração de provedores, modelos e API keys (localStorage)
assets/js/ai-client.js Cliente provider-agnostic com streaming SSE; suporte a function calling Gemini
assets/js/ai-orchestrator.js Guia de criação de EF do zero + catálogo completo de ações (adaptado de cursor/spec)
assets/js/ui-ai-chat.js Painel de chat flutuante, execução de ações, sync com o editor

Skills de referência (pasta cursor/)

A metodologia do orquestrador é adaptada das skills em cursor/spec/:

cursor/
├── spec/
│   ├── commands/spec.md            # Orquestrador principal (fases + gates)
│   └── skills/
│       ├── researcher.md           # Guia de levantamento (blocos A–F)
│       ├── writer.md               # Template canônico EF (Markdown + HTML)
│       └── reviewer.md             # Checklist de revisão e critérios
├── spec2/                          # Variante do fluxo spec
└── pop/                            # Fluxo alternativo POP
    ├── commands/pop.md
    └── skills/pop-orchestrator/
        ├── researcher.md
        ├── writer.md
        └── reviewer.md

Blocos de conteúdo disponíveis

Bloco Descrição
Parágrafo Texto livre com **negrito**, `código` e imagens coladas
Imagem Upload de arquivo, URL ou base64 com alt text e legenda
Lista Lista com marcadores ou numerada
Callout Caixa de destaque (info / aviso / erro / sucesso)
Tabela Colunas e linhas livres — editor visual inline
Tabela de Regras de Negócio Regras com badge ID (RG01, RC04…) e cor por severidade
Tabela Produtos no Escopo Produtos × In scope / Out of scope / Parcial
Endpoint Card Método HTTP + path + descrição de endpoint
Contract Box Bloco request / response / error com destaque de código
Diagrama de Fluxo Fluxograma Mermaid com numeração, tipos e setas
Cadeia de Resolução Árvore de passos de resolução com suporte a variantes
Header HTTP Cabeçalhos HTTP com badge Obrigatório / Opcional
Requisito Funcional (RF) ID + título + prioridade + descrição + critérios de aceite
Checklist Lista de tarefas marcável, com suporte a templates reutilizáveis
Decisão em Aberto Registro de decisão pendente com responsável e prazo
Tabela de Logs Eventos com nível INFO / WARN / ERROR / CRITICAL
Tabela de Alertas Alertas com condição, ação e nível de severidade
Tabela de Pontos em Aberto Issues com responsável, status e data
Glossário Dicionário termo → definição
Comparativo Antes × Agora Tabela de mudança de comportamento
Tabela de Envolvidos Participantes com papel e responsabilidade
Título h3 Subtítulo dentro de uma seção
Matriz Canal × Funcionalidade Grid Canal (linhas) × Funcionalidade (colunas) com status por célula
HTML livre Escape hatch para HTML arbitrário

Fluxo: Matriz Canal × Funcionalidade

A matriz cruza canais (linhas) com funcionalidades (colunas). Cada célula tem um de cinco estados: ✓ Disponível · ⚙ Em desenvolvimento · ✗ Não disponível · — Não se aplica · (vazio).

Preparação:

  1. Catálogo de Canais (menu lateral): cadastre canais com subsistemas e perfis de cliente.

    Canal: App Móvel
  Subsistema: iOS
    Perfil: Cliente PF
    Perfil: Cliente PJ
  Subsistema: Android
Canal: Internet Banking

  2. Catálogo de Funcionalidades (menu lateral): cadastre as funcionalidades do domínio — viram colunas da matriz.

Usando no editor:

  1. Dentro de uma seção → + Adicionar bloco → Tabelas → Matriz Canal × Funcionalidade
  2. No formulário:
    • + Adicionar linha do catálogo → picker hierárquico Canal → Subsistema → Perfil
    • + Adicionar linha avulsa → para linhas fora do catálogo
    • Idem para colunas
    • Clique em cada célula para ciclar o status
  3. Salvar. A matriz renderiza com rowspan automático agrupando canal e subsistema.

Estrutura de pastas

ef-sys/
├── index.html                      # Entry point (autenticação + SPA)
├── iniciar.bat                     # Sobe servidor PowerShell na porta 8080
├── sw.js                           # Service Worker (network-only)
├── VERSION                         # Tag de versão atual (1.4.0)
├── pitch-deck.html                 # Apresentação standalone do produto
├── cursor/                         # Skills de referência para o Orquestrador IA
│   ├── spec/
│   │   ├── commands/spec.md        # Fluxo principal: Researcher → Writer → Reviewer
│   │   └── skills/
│   │       ├── researcher.md       # Guia de levantamento em blocos temáticos
│   │       ├── writer.md           # Templates canônicos (.md + .html) com CSS MD3
│   │       └── reviewer.md         # Checklist de revisão + critérios de aprovação
│   ├── spec2/                      # Variante do fluxo spec
│   └── pop/                        # Fluxo alternativo POP
│       ├── commands/pop.md
│       └── skills/pop-orchestrator/
├── scripts/
│   ├── servir.ps1                  # Servidor HTTP estático (PowerShell, sem Node)
│   ├── sync-ef-css.mjs             # Sincroniza ef.css → ef-css.js (Node)
│   └── sync-ef-css.ps1             # Sincroniza ef.css → ef-css.js (PowerShell)
├── refs/                           # Exemplos de EF para testar importação
├── assets/
│   ├── styles/
│   │   ├── ef.css                  # Visual final do EF exportado
│   │   └── editor.css              # Interface do editor + painel IA
│   └── js/
│       ├── main.js                 # Roteamento SPA (hash-based)
│       ├── db.js                   # IndexedDB (projetos, versões, seções, blocos…)
│       ├── state.js                # Operações de domínio sobre o DB
│       ├── util.js                 # Helpers: markdown leve, escape, datas, slugs
│       │
│       ├── ── IA ──
│       ├── ai-config.js            # Provedores, modelos e API keys (localStorage)
│       ├── ai-client.js            # Cliente SSE provider-agnostic (Claude/OpenAI/Gemini)
│       ├── ai-orchestrator.js      # Catálogo de ações + guia de criação de EF do zero
│       ├── ui-ai-chat.js           # Painel de chat flutuante + execução de ações
│       │
│       ├── ── Blocos ──
│       ├── blocks-registry.js      # Registry compartilhado de tipos de bloco
│       ├── blocks.js               # 20+ tipos de bloco clássicos
│       ├── blocks-matriz.js        # Bloco Matriz Canal × Funcionalidade
│       │
│       ├── ── Geração / Export ──
│       ├── ef-css.js               # CSS embutido nos HTMLs exportados (gerado)
│       ├── ef-renderer.js          # Gerador do HTML final autocontido
│       ├── ef-spec-chrome.js       # Header, footer e histórico do EF
│       ├── parser.js               # Importador de EFs existentes
│       ├── document-import.js      # Importador de Markdown / texto numerado
│       │
│       ├── ── Estruturas padrão ──
│       ├── seed-estrutura-padrao.js         # 15 seções do modelo "padrão"
│       ├── seed-estrutura-ef-simplificada.js # 8 seções do modelo "simplificado"
│       ├── seed-estrutura-ef-cartoes.js      # Modelo "cartões"
│       │
│       ├── ── UI ──
│       ├── ui-home.js              # Tela inicial (lista de projetos)
│       ├── ui-editor.js            # Editor principal
│       ├── ui-versoes.js           # Histórico de versões
│       ├── ui-templates.js         # Templates de checklist
│       ├── ui-canais.js            # Catálogo de canais
│       ├── ui-funcionalidades.js   # Catálogo de funcionalidades
│       ├── ui-sugestoes.js         # Sugestões de autocomplete
│       ├── ui-modal.js             # Sistema de modais + listas dinâmicas
│       ├── ui-sidebar.js           # Sidebar reutilizável
│       │
│       ├── ── Utilitários ──
│       ├── autocomplete.js         # Autocomplete de campos de texto
│       ├── app-brand.js            # Nome e identidade do app
│       ├── build-info.js           # Versão do build (window.__APP_BUILD__)
│       ├── numeracao-secoes.js     # Numeração automática de seções
│       ├── secao-icons.js          # Mapa grupo → ícone + sanitização de emoji
│       ├── projeto-status.js       # Status com cores + picker customizado
│       ├── dnd-sortable.js         # Drag-and-drop com animação FLIP
│       ├── mermaid-editor.js       # Renderização de diagramas Mermaid
│       ├── theme.js                # Toggle dark/light, persiste em localStorage
│       ├── scroll-trap.js          # Evita scroll do fundo em modais
│       └── view-transition.js      # Transições de rota (View Transitions API)

Arquitetura

EFsys é uma SPA vanilla — sem framework, sem bundler, sem Node em runtime.

Camada Tecnologia
Módulos ES6 import/export nativos
Persistência IndexedDB (via idb-like wrappers em db.js)
Estilo CSS custom properties + dark mode via [data-theme="dark"]
Animações @keyframes CSS + FLIP para drag-and-drop
Roteamento Hash-based (#/projetos/123, #/templates…)
Build Nenhum — arquivos servidos diretamente
IA Gemini function calling / Claude / OpenAI via SSE streaming

Por que sem framework? O modelo de dados do EFsys — blocos que geram HTML como string — mapeia naturalmente para funções JS puras. A adição de Angular ou React traria reescrita quase total sem ganho proporcional para um app de escopo fixo.

Sincronizar ef.css com ef-css.js

O CSS visual existe em dois lugares:

  • assets/styles/ef.css — usado no editor enquanto você escreve
  • assets/js/ef-css.js — embutido nos HTMLs exportados (autocontidos)

Após editar o ef.css, regenere o ef-css.js:

# PowerShell (sem Node)
powershell -File scripts/sync-ef-css.ps1

# Node.js (se disponível)
node scripts/sync-ef-css.mjs

Sincronização automática (recomendado)

Há um hook de pre-commit versionado que regenera o ef-css.js sempre que o ef.css entra num commit. Ative-o uma vez por clone (precisa de Node no PATH):

git config core.hooksPath scripts/hooks

A partir daí os dois arquivos nunca mais divergem — não é preciso lembrar de rodar o sync manualmente.

Backup e dados

Todos os dados ficam no IndexedDB do navegador (por perfil/usuário). Não há sincronização automática entre máquinas.

Recomendado:

  • Exporte backups JSON regularmente (menu lateral → Exportar dados)
  • Salve em rede / OneDrive / pendrive
  • Para migrar para outro PC: importe o JSON no navegador destino

Stores do IndexedDB:

Store Conteúdo
projetos Metadados do projeto (código, autor, status…)
versoes Snapshots de versão (número, data, changelog)
secoes Seções (título, ícone, ordem, flag subsection)
blocos Blocos (tipo, dados, ordem)
templates_checklist Checklists reutilizáveis
canais Catálogo de canais com subsistemas e perfis
funcionalidades Catálogo de funcionalidades (colunas da matriz)
sugestoes Valores de autocomplete por campo

Solução de problemas

iniciar.bat abre janela preta e fecha imediatamente

  • PowerShell está bloqueado por política de execução. Tente: 
    Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
  • Alternativa: use Live Server no VS Code.

Colegas não conseguem acessar pelo IP

  • Verifique o firewall do Windows (pode pedir permissão na primeira execução)
  • Confirme que estão na mesma rede
  • Se necessário: netsh http add urlacl url=http://+:8080/ user=SEU_USUARIO

Perdi os dados ao limpar o navegador

  • IndexedDB é apagado junto com os dados do site. Faça backups regulares.

Módulos ES6 não carregam (file://)

  • Não abra o index.html direto pelo explorador de arquivos — use sempre o servidor (iniciar.bat ou Live Server).

A IA diz "Feito" mas nada muda

  • Abra o projeto no editor antes de pedir edições (a IA precisa do contexto das seções).
  • Verifique se a API key está configurada e o provedor está acessível.
  • Gemini free tier pode ter quota zero em algumas regiões — tente trocar o modelo para gemini-2.5-flash.

EFsys v1.4.0 · Banco Daycoval

About

[2026] EFsys é uma ferramenta interna para criação e gestão de Especificações Funcionais. Monte documentos com blocos padronizados, controle versões com histórico de alterações, anote comentários diretamente nos blocos e exporte para Word ou HTML com a identidade visual Daycoval.

dpsanz.github.io/ef-sys/

Topics

functional-specifications

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages