Communitygithub.com

lawrencewzen/design-extract

🎨 Habilidade de agente universal: um seletor interativo que transforma preferências visuais dispersas em um sistema de design de marca pessoal (design.md + theme.css + preview.html) · Claude Code / Codex / opencode / pi

O que é design-extract?

Esta skill de agente universal, chamada design-extract, permite que desenvolvedores e designers capturem e organizem preferências visuais dispersas em um sistema de design de marca pessoal coeso. Ela utiliza um fluxo interativo de seleção (picker) para guiar o usuário na definição de cores, tipografia, espaçamento e outros elementos de design, gerando automaticamente três artefatos: um arquivo de documentação do sistema de design (design.md), um tema CSS correspondente (theme.css) e uma prévia HTML interativa (preview.html). A skill é compatível com múltiplos agentes de IA, incluindo Claude Code, Codex, opencode e pi, facilitando a integração em diferentes fluxos de trabalho de desenvolvimento. Ela é particularmente útil para padronizar a identidade visual de projetos, acelerar a prototipagem e garantir consistência de design em toda a base de código.

Funciona com✓Claude Code✓Codex CLI~Cursor✓OpenCode
npx skills add lawrencewzen/design-extract

Perguntar na sua IA favorita

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

Documentação

O que design-extract faz?

🎨 Habilidade de agente universal: um seletor interativo que transforma preferências visuais dispersas em um sistema de design de marca pessoal (design.md + theme.css + preview.html) · Claude Code / Codex / opencode / pi

Habilidades Relacionadas