design-htmlpor Garry Tan

Design HTML Skill.

Uma skill para Claude Code e Codex voltada para design de UI: produz HTML/CSS de qualidade de produção a partir de uma direção de design acordada.

Web & UI
HTML

Baixar OpenDesign Ver guia de uso

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 54.976 caracteres no total

01 O que faz

O que a Skill design-html Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Gera HTML/CSS de qualidade de produção com layout de texto Pretext-native, em que o texto realmente reflui, as alturas são calculadas dinamicamente e os layouts se adaptam ao redimensionamento. Funciona a partir de mockups aprovados (/design-shotgun), planos de CEO (/plan-ceo-review), contexto de revisão de design ou descrições do usuário. Roteia para o nível correto da API Pretext com base na complexidade do design (layouts simples usam prepare + layout; UIs de chat usam prepareWithSegments + walkLineRanges; spreads editoriais usam layoutNextLine para texto ao redor de obstáculos).

30KB de overhead, zero dependências. Produz arquivos HTML autocontidos (Pretext vendorizado embutido) ou componentes de framework (React/Svelte/Vue). Usa por padrão HTML puro com servidor de live reload para pré-visualização imediata no navegador. Nunca lorem ipsum — extrai conteúdo real dos mockups ou gera texto realista a partir dos planos.

O que ele produz

Arquivo HTML autocontido com Pretext vendorizado embutido, propriedades customizadas de CSS a partir dos tokens, HTML5 semântico, contenteditable + MutationObserver para edição em tempo real, ResizeObserver para reajuste de layout no redimensionamento, salvo em ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
Arquivo de componente de framework (React TSX/JSX, Svelte, Vue) com imports do Pretext adicionados às dependências do projeto, salvo em ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
Metadados finalized.json junto ao HTML, contendo caminho do source_mockup, caminho do source_plan, modo (approved-mockup/plan-driven/freeform/evolve), pretext_tier, escolha de framework, contagem de iterações, data, nome da tela, branch
Arquivo DESIGN.md no formato aberto DESIGN.md, caso o usuário aceite a oferta de extração, contendo propriedades customizadas de CSS, famílias de fontes, paleta de cores, escala de espaçamento, raio de borda e valores de sombra extraídos do HTML gerado

Veja o exemplo de prompt ↗

Como funciona

01
Detectar contexto de design e rotear
Verifica a existência de approved.json de /design-shotgun, planos de CEO, variantes de design ou tokens do DESIGN.md.
02
Extrair especificação de implementação
Se houver binário de design disponível, executa o comando prompt no PNG aprovado para extrair cores, tipografia e estrutura de layout via visão do GPT-4o.
03
Roteamento inteligente para a API do Pretext
Classifica o design em um nível: layouts simples usam prepare + layout para alturas sensíveis ao redimensionamento; grids de cards usam o mesmo recurso para autoajuste; UIs de chat usam prepareWithSegments + walkLineRanges para balões ajustados ao conteúdo; spreads editoriais usam layoutNextLine para texto contornando obstáculos.
04
Gerar HTML nativo do Pretext
Escreve um único arquivo com o Pretext incluído inline (ou fallback via CDN), propriedades customizadas de CSS a partir dos tokens, HTML5 semântico, contenteditable + MutationObserver para edição em tempo real, ResizeObserver para reflow no redimensionamento, e conteúdo real extraído do mockup ou do plano.
05
Verificação de slop antes da pré-visualização
Se houver um detector de design disponível, examina a página finalizada uma vez em busca de padrões de AI-slop (gradientes roxos, grids de cards idênticos, CTAs genéricos que não vêm do mockup).

02 Encontre o ideal para você

Quando usar a skill design-html

Use a skill design-html no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Adequação e limites abaixo são tirados do próprio arquivo da skill.

Boa Combinação

Criar um dashboard, página de listagem ou grid de cards em que os cards precisam se ajustar ao próprio conteúdo sem alturas fixas
Implementar uma UI de chat ou mensagens em que os balões precisam se ajustar rigidamente ao texto e calcular a largura mínima corretamente
Finalizar um design depois que existir um mockup aprovado por /design-shotgun, estratégia de produto de /plan-ceo-review ou contexto de /plan-design-review
Construir um spread editorial, layout de blog ou página com muito conteúdo em que o texto precisa fluir dinamicamente ao redor de obstáculos ou imagens

Conheça os Limites

Projetos que exigem conteúdo placeholder ou lorem ipsum — o skill sempre gera conteúdo real extraído de mockups, planos ou descrições do usuário
Execuções automatizadas sem revisão humana — a oferta de instalação do detector de design e o loop de refinamento exigem decisões do usuário via AskUserQuestion

O Que Fornecer

PNG de mockup de design aprovadoCaminho da variante aprovada de /design-shotgun salvo em approved.json, ou caminho de PNG fornecido pelo usuário.
Plano do CEO ou notas de revisão de designArquivo markdown de /plan-ceo-review ou /plan-design-review contendo visão de produto, requisitos de UI, fluxos de usuário, público-alvo, sensação visual, estrutura de conteúdo.
Tokens do DESIGN.mdArquivo de sistema de design do repositório com cores da marca, família de fontes, escala de espaçamento, raio de borda, valores de sombra.
Descrição do usuário para o modo freeformQuando não há mockup ou plano, o usuário fornece propósito/público, sensação visual (escuro/claro, lúdico/sério, denso/espaçoso), estrutura de conteúdo, sites de referência.
finalized.html anterior para o modo evolveHTML finalizado existente de uma sessão anterior.

03 Dentro da skill

Regras que o skill design-html dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Sempre usar o Pretext para layout de texto
Mesmo que o design pareça simples, o Pretext garante o cálculo correto da altura no redimensionamento. O overhead é de 30KB. Toda página se beneficia.
Conteúdo real apenas, nunca texto de preenchimento
Quando existe um mockup, extraia o texto dele. No modo orientado por plano, use o conteúdo do plano. No modo livre, gere conteúdo realista com base na descrição do usuário.
Fidelidade à fonte da verdade acima da elegância do código
Quando existe um mockup aprovado, faça a correspondência pixel a pixel. Se isso exigir width: 312px em vez de uma classe de grid CSS, isso está correto.
Edições cirúrgicas no loop de refinamento, nunca regenerar
Use a ferramenta Edit para fazer mudanças pontuais, não a ferramenta Write para regenerar o arquivo inteiro. O usuário pode ter feito edições manuais via contenteditable que precisam ser preservadas.
Uma página por invocação
Para designs de múltiplas páginas, execute /design-html uma vez por página. Cada execução produz um arquivo HTML.
Lista negra de AI-slop aplicada por padrão
Nunca inclua gradientes roxo/azul, paleta creme com serifa, texto em gradiente, grids genéricos de recursos em 3 colunas, grids de cartões idênticos, layouts com tudo centralizado, kickers acima de títulos, linhas de métricas no hero, blobs decorativos, bordas brilhantes, placeholders de fotos de banco de imagens, CTAs genéricos, cartões com cantos arredondados e sombras, decoração com emoji, depoimentos genéricos ou heróis divididos padronizados—a menos que o mockup aprovado contenha algo assim, o DESIGN.md o permita, ou o usuário peça explicitamente com a contrapartida declarada uma vez.

04 Coloque em prática

Instalar design-html no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar design-html ao Claude Code, Codex ou seu agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/garrytan/gstack --skill design-html

Forma genérica da CLI skills para design-html/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Servidor de live reload iniciado em http://localhost:PORT/finalized.html para que o usuário possa redimensionar a janela e verificar se o texto se reorganiza dinamicamente, além de clicar em qualquer texto para verificar se o layout contenteditable é recalculado instantaneamente
PNG do mockup aprovado exibido embutido para comparação visual durante o loop de refinamento, se existir; caso contrário, o feedback do usuário durante o loop é a fonte da verdade para os modos orientado por plano ou livre
Confirmação de fontes carregadas via document.fonts.ready antes da primeira chamada a prepare() para garantir que as métricas de texto estejam corretas para o cálculo de layout do Pretext
Usuário confirma 'concluído' / 'pode publicar' / 'está bom' / 'perfeito' no loop de refinamento após testar o comportamento de redimensionamento e a edição de texto ao vivo, no máximo 10 iterações antes de oferecer continuar ou encerrar

No OpenDesign importe o design-html a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Arquivo da skill: design-html/SKILL.md Checksum de conteúdo registrado na verificação; commit 71f6048
License: MIT De LICENSE.
Estrelas do repositório: 132.921 Snapshot do GitHub tirado em 2026-09-14 para todo o repositório garrytan/gstack, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para design-html.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando invocar este skillFunciona com mockups aprovados, planos do CEO, contexto de revisão de design ou descrições do usuário para HTML/CSS de produção
Preâmbulo (executar primeiro)Executa gstack-skill-start, lê as linhas de STATUS, trata o modo degradado, segue os blocos GSTACK_INSTRUCTION para onboarding/consentimento
Operações seguras em modo de planoOperações permitidas em modo de plano: codex exec/review, gravações em ~/.gstack/, arquivo de plano, abertura de artefatos
Invocação de skill durante o modo de planoAs instruções do skill são executáveis, não apenas referência; AskUserQuestion satisfaz o fim de turno; ExitPlanMode somente após a conclusão do workflow
Formato do AskUserQuestionA resolução da ferramenta se ramifica conforme SESSION_KIND; sessões geradas automaticamente escolhem a opção recomendada; o Conductor usa texto corrido; tratamento de fallback em caso de falha
Sincronização de artefatos (início do skill)Age sobre a saída do skill-start: dica do GBrain, saúde do ARTIFACTS_SYNC, gate único de consentimento de privacidade via GSTACK_INSTRUCTION
Patch comportamental específico do modelo (claude)Disciplina de lista de tarefas, pensar antes de ações pesadas, ferramentas dedicadas em vez de Bash—preferências subordinadas às instruções do skill
VozVoz do GStack: comece pelo ponto principal, com detalhes concretos, vincule escolhas a resultados do usuário, seja direto sobre qualidade, com encerramentos delimitados
Recuperação de ContextoRecupera artifacts recentes, reviews, linha do tempo, decisões, último checkpoint; sugere o próximo skill se RECENT_PATTERN indicar um
Estilo de EscritaExplica jargões selecionados na primeira ocorrência, formula perguntas em termos de resultados, frases curtas na voz ativa, pula se EXPLAIN_LEVEL: terse
Princípio da Completude — Boil the OceanA IA torna a completude barata; recomende cobertura total; Completude: X/10 quando as opções diferem em cobertura
Protocolo de ConfusãoPara ambiguidade de alto risco, PARE, nomeie-a, apresente 2-3 opções com tradeoffs, pergunte—não para codificação de rotina

A Descrição da Própria Skill

Finalização de design: gera HTML/CSS de qualidade de produção nativo do Pretext. (gstack)

Descrição inicial do SKILL.md. O arquivo completo tem cerca de 54.976 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill design-html

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Isso funciona com meu projeto React/Svelte/Vue ou só com HTML puro?

Ambos. O Passo 2.5 detecta seu framework no package.json e pergunta se você quer HTML puro (arquivo de preview autocontido, recomendado para a primeira passagem) ou um componente nativo do framework com hooks Pretext. O padrão é HTML puro se nenhum framework for detectado. Para saída em framework, você escolhe TypeScript ou JavaScript.

Design HTML

Execute design-html em uma tarefa real de design de UI.

Baixe o OpenDesign, importe design-html a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills