Communitygithub.com

suryxnshsingh/design-engineer

Orquestrador para trabalho de frontend e engenharia de design. Leia isto primeiro sempre que uma tarefa envolver design de UI, sistemas de design, polimento visual ou revisão de AI-slop, diagramas, vídeos ou promos, 3D (Three.js ou Blender), ou arquivos Penpot/Figma. Ele roteia para o skill especialista correto (impeccable, ui-ux-pro-max, diagram-design, hyperframes, remotion, video-shotcraft, lemo-opuscar, img2threejs, blender-mcp, penpot), encadeia-os para trabalhos de múltiplas etapas e mantém cada um na sua versão upstream mais recente.

O que é design-engineer?

O design-engineer é um skill roteador central para o ecossistema de design de frontend. Ele age como um ponto de entrada único que analisa a necessidade do usuário (design de UI, diagramas, vídeos, 3D, arquivos de design) e delega para o skill especialista mais adequado, como impeccable para revisão e polimento de UI, ui-ux-pro-max para sistemas de design completos, diagram-design para diagramas arquiteturais, ou blender-mcp para modelagem 3D real. Sua força está em eliminar a ambigüidade: se o usuário diz "preciso de um diagrama", ele distingue se é um diagrama de sistema (vai para diagram-design) ou um gráfico de dados dentro de um app (vai para dataviz + impeccable). Para tarefas de múltiplas etapas, ele sugere cadeias completas, como de ui-ux-pro-max para gerar tokens de design, depois construir o site e por fim aplicar video-shotcraft para o vídeo promocional. O skill gerencia versões através de um script upstream.sh que clona ou atualiza shallow clones de cada skill em ~/.cache/design-skills/, garantindo que o agente sempre use a versão mais recente sem poluir o repositório do projeto. Ele também lida com skills baseados em MCP (como blender-mcp e penpot), verificando se o host está rodando e instruindo o usuário a configurá-los se necessário. Por fim, ele promove reuso ao buscar arquivos existentes como DESIGN.md ou tokens, evitando trabalho duplicado.

Funciona com✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/design-engineer
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

design-engineer: qual skill de design para qual trabalho

Todos os skills especialistas em ~/.claude/skills/ são ponteiros leves para repositórios upstream ativos. Nenhum contém uma cópia. Cada um informa como buscar a versão mais recente antes de agir. O buscador compartilhado é:

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <nome>   # clona ou atualiza, imprime PATH=<dir>

Nomes: impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design. Adicione --no-update quando estiver offline.

Tabela de roteamento

Usuário querSkillPor que este
Direção de estilo, paleta, fontes, sistema de design completo para um novo produto ou páginaui-ux-pro-maxPesquisa 79 estilos / 192 tipos de produto e emite um sistema
Melhorar, revisar, polir, des-slopificar, tornar mais ousado/suave uma UI existenteimpeccable24 comandos de direção/revisão/finalização + detector de 62 regras
Capturar AI-slop antes de enviar qualquer mudança de UIimpeccable detectDeterminístico, sem LLM
Arquitetura, fluxo, sequência, ER, Gantt, organograma, qualquer diagramadiagram-designUm único arquivo HTML+SVG com marca, 45 tipos
Gráficos dentro de uma UI de produto (não um diagrama independente)dataviz (integrado) depois impeccabledataviz para o sistema de gráficos, impeccable para a UI ao redor
Vídeo promocional de um site ou aplicativo realvideo-shotcraftCaptura páginas reais, cartões de cena, renderização Remotion
Vídeo a partir de HTML/CSS, tokens de marca do Figma, reverter um vídeo existente, apresentação de slideshyperframesHTML para MP4, 450 blocos, sub-skill /figma
Vídeo em React, ou um repositório Remotion existenteremotionSkills oficiais do Remotion
Curta-metragem narrado / explicativo em estilo pictórico ou documental, sem filmagemlemo-opuscar60+ estilos de filme apenas em código com trilha sonora + TTS
Imagem de referência para modelo Three.js apenas em códigoimg2threejsProcessual, pronto para animação
Modelagem 3D real, cenas, materiais, renderizações, importação de ativosblender-mcpControla o Blender ao vivo via MCP
Ler ou editar um arquivo de design do PenpotpenpotMCP oficial do Penpot
Ler um arquivo Figma para trabalho de UI (tokens, frames, componentes)MCP oficial do Figma (claude mcp add figma -t http https://mcp.figma.com/mcp)Não coberto por este conjunto; o sub-skill figma do HyperFrames é apenas para vídeo
Puxar ativos de marca do Figma para um vídeosub-skill figma do hyperframesLê Figma apenas para construir movimento do HyperFrames

Regras de decisão

  1. UI existente vs nova UI. Existente: comece com impeccable critique em um alvo específico. Nova sem sistema de design: ui-ux-pro-max primeiro, persista em DESIGN.md, construa, depois impeccable para revisar. Nunca pule a etapa de revisão em UI já publicada.
  2. Vídeo: escolha pelo material de origem.
    • Páginas de produto reais → video-shotcraft.
    • Skills de HTML/CSS, ativos de marca, ou Figma → hyperframes.
    • Time programa em React / repositório já usa Remotion → remotion.
    • História ou filme temático, desenhado em código → lemo-opuscar. Não misture dois frameworks de vídeo em um projeto, a menos que esteja portando (HyperFrames tem remotion-to-hyperframes).
  3. 3D: código ou DCC. A saída deve ser um ativo web construído em código → img2threejs. Qualquer coisa que precise de uma ferramenta de modelagem real, renderizações ou ativos baixados → blender-mcp. Ambos precisam que o usuário confirme a configuração do host (instalador ou addon do Blender); diga o que eles devem fazer.
  4. Diagramas não são gráficos. Um diagrama de um sistema → diagram-design. Um gráfico de dados em um app → dataviz. Um gráfico em um vídeo → o bloco de gráficos do skill de vídeo.
  5. Arquivos de design. Penpot → penpot. Figma para UI → MCP oficial do Figma; Figma para um vídeo → sub-skill figma do hyperframes. Puxe os tokens uma vez e escreva-os em DESIGN.md para que todos os outros skills os reutilizem.
  6. Skills baseados em MCP (blender-mcp, penpot) precisam de um aplicativo host em execução. Verifique claude mcp list primeiro; se estiver ausente, dê ao usuário as etapas de instalação e conexão e pare até que ele confirme.

Cadeias comuns

  • Nova landing page: ui-ux-pro-max (sistema) → construir → impeccable detect + critique → polish.
  • Kit de lançamento: tokens ui-ux-pro-max → site → video-shotcraft promo → diagram-design arquitetura para docs, todos com os mesmos tokens.
  • Entrega de design: tokens/frames penpot → DESIGN.md → construir → impeccable audit.
  • Filme explicativo com diagramas: imagens estáticas diagram-design → hyperframes ou lemo-opuscar para movimento.
  • Objeto 3D herói: img2threejs a partir de uma foto do produto → incorporar → impeccable overdrive para interação.

Antes de começar qualquer tarefa de design

  1. Escolha o skill da tabela. Se dois se aplicarem, siga as regras de decisão; se ainda não estiver claro, faça uma pergunta.
  2. Obtenha a versão mais recente com upstream.sh <nome> e leia o arquivo de entrada que o skill nomeia. Leia apenas o que a etapa atual precisa.
  3. Procure por DESIGN.md, PRODUCT.md, .diagram-design ou um arquivo de tokens existentes no projeto e reutilize-os.
  4. Diga qual skill você escolheu e por que em uma linha, depois faça o trabalho.

Manutenção

  • upstream.sh mantém um clone raso por skill em ~/.cache/design-skills/. Exclua essa pasta para redefinir.
  • Para adicionar um skill: adicione um caso a scripts/upstream.sh, escreva um ponteiro SKILL.md e adicione uma linha acima.
  • Quando o upstream fornecer um plugin ou caminho npx skills add, prefira isso dentro de projetos reais; o skill ponteiro é a alternativa sempre disponível.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

suryxnshsingh/hyperframes

Write HTML/CSS and render deterministic MP4 with HeyGen's HyperFrames; ~450 ready blocks (transitions, kinetic type, captions, charts, maps, 3D), a /figma sub-skill that pulls brand tokens and frames into video, reverse-any-video, slideshow/present mode, and Remotion-to-HyperFrames porting. Use for launch films, explainers, social clips, title cards, or when the user wants video from HTML rather than React.

suryxnshsingh/video-shotcraft

Make cinematic product promo videos of a real web app in Remotion: captures the real pages, picks from ~124-150 shot recipe cards, offers the Ink Press template, beat sync and Freesound sound design. Use for "make a promo/launch video of my site/app", single shot-card effects, or finding/aligning SFX for an existing product video. Always fetches latest.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community