Design Systems
Stitch Design Taste
Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico.
O que é
Gera um arquivo DESIGN.md otimizado para a geração de telas do Google Stitch. Ele codifica atmosfera, cor, tipografia, componentes, layout, movimento e uma lista explícita de padrões proibidos.
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
Por que isso importa para design
- As telas do Stitch herdam um único destaque com saturação abaixo de 80%, em vez de gradientes roxo neon.
- Heros centralizados e três fileiras iguais de cards são proibidos acima de um limite de variação definido.
- Estados de carregamento e vazios ganham forma esquelética e composta, em vez de spinners genéricos.
O que cobre
- Overview
- Prerequisites
- Analysis and synthesis instructions
- Output format
- Best practices
- Common pitfalls to avoid
Como instalar
Stitch Design Taste
-
Clone o repositório.
git clone https://github.com/Leonxlnx/taste-skill -
Aponte o Codex para o arquivo da skill.
skills/stitch-skill/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Descreva o clima do projeto; a skill define os índices de densidade, variação e movimento.
-
Ela gera um DESIGN.md de sete seções com códigos hex e papéis funcionais para cada cor.
-
Alimente esse arquivo direto no Stitch, ou pelo servidor MCP do Stitch.
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. 
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. 
Frontend & UI O que ele faz imagegen-frontend-web Gera uma imagem de referência horizontal para cada seção da landing page. 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.