Frontend & UI
Hallmark
Fluxo de design anti-genérico com 58 portões e variedade estrutural obrigatória.
O que é
Uma skill de design para assistentes de código de IA, com um fluxo de construção padrão e três verbos: audit, redesign e study. Ela força a variedade estrutural para que duas construções não compartilhem o mesmo ritmo de página.
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark
Por que isso importa para design
- As regras de diversificação forçam macroestruturas, navs e rodapés diferentes entre construções consecutivas.
- Os tokens travados proíbem valores hex ou font-family inline que driblem o bloco de tokens.
- Toda saída é verificada nas larguras de 320, 375, 414 e 768 pixels.
O que cobre
- How to use this skill
- Disciplines that hold across every verb
- When the brief is a component, not a page
- Design flow (default)
- Hallmark study
- Output contract and scope
Como instalar
Hallmark
-
Clone o repositório.
git clone https://github.com/Nutlope/hallmark -
Aponte o Codex para o arquivo da skill.
skills/hallmark/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Deixe a varredura de pré-voo ler primeiro as fontes, a paleta e as bibliotecas de movimento existentes.
-
Responda ao portão de público, caso de uso e tom, ou diga para seguir em frente.
-
Rode o hallmark audit numa página para uma lista priorizada de ajustes, sem edições.
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.