huashu-designpor alchaincyf

Huashu Design Skill.

Uma skill para Claude Code e Codex voltada a design de UI: protótipos HTML de alta fidelidade, slides, animação e visualizações; começa a partir de três rascunhos.

Web & UI
HTML

Baixar OpenDesign Ver guia de uso

alchaincyf/huashu-design · SKILL.mdSKILL.md

--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由：一张表定入口 ## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程） ## 核心哲学（优先级从高到低） ## 设计方向顾问（Fallback 模式）

Cabeçalhos de metadados e seção lidos do arquivo upstream em 2026-09-14 · 33.602 caracteres no total

01 O que faz

O que o Skill huashu-design 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

O Huashu-Design transforma um agente em um estúdio de design baseado em HTML para prototipagem de alta fidelidade, apresentações de slides, demos de movimento e visualizações. Antes de qualquer novo trabalho visual, ele exige três rascunhos de direção diferenciados (mesmo quando um estilo ou marca é especificado), para que o usuário escolha entre opções realmente renderizadas em vez de uma única resposta decidida pela IA.

Ele executa um protocolo de ativos de marca (logos, fotos de produto, valores de cor reais) em vez de adivinhar, verifica afirmações factuais sobre produtos via WebSearch antes de projetar, e aplica regras explícitas anti-AI-slop para cor, ícones, cards e imagens. Não é indicado para aplicativos web de produção ou sistemas orientados por backend.

O que ele produz

Arquivos de design HTML com nomes descritivos, versionados quando revisados intensamente
Deck HTML de múltiplas páginas com um mural de visão geral, exportado automaticamente para PDF e, opcionalmente, para PPTX editável
Exportações de animação em MP4 com BGM e SFX por padrão
Arquivos de controle como brand-spec.md e direction-approved.md que documentam os ativos e a direção escolhida pelo usuário

Veja o exemplo de prompt ↗

Como funciona

01
Verifique os Fatos Primeiro
Antes de projetar qualquer coisa relacionada a um produto, tecnologia ou evento real, o agente deve pesquisar via WebSearch sua existência, status de lançamento, versão e especificações, em vez de depender da memória de treinamento.
02
Direcione a Tarefa
Uma tabela de sinais mapeia indícios da tarefa (nome da marca, slide/PPT, animação/exportação, protótipo de app/iOS, crítica) para o ponto de entrada e o arquivo de referência corretos antes de iniciar o trabalho.
03
Execute o Fallback de Três Direções
Qualquer tarefa que produza novos visuais passa pelas Fases 1-6: esclarecer necessidades, reformular o briefing, fixar uma especificação de design, buscar imagens reais, gerar três lógicas de design em paralelo e então aguardar a escolha do usuário.
04
Responda às Cinco Perguntas de Forma
Para cada página ou cena, o agente deve responder sobre papel narrativo, distância de visualização, temperatura visual, capacidade de conteúdo e motivo visual antes de construir o sistema de design.
05
Exporte com Verificação
As animações são renderizadas em MP4 com BGM e SFX por padrão e verificadas com ffprobe para confirmar a presença de uma trilha de áudio; os decks são exportados automaticamente para PDF e, opcionalmente, para PPTX editável.

02 Encontre o ideal para você

Quando Usar a Skill huashu-design

Use a skill huashu-design no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são extraídos do arquivo da própria skill.

Boa Combinação

Mockups interativos de produto em alta fidelidade que o usuário pode clicar e sentir o fluxo
Apresentações em slides HTML 1920x1080 pensadas para funcionar como um PPT
Motion design guiado por timeline usado como material de vídeo ou demos conceituais
Infográficos com qualidade de impressão e visualizações orientadas por dados
Comparar múltiplas direções de design lado a lado ou ajustar com Tweaks

Conheça os Limites

Aplicativos web ou sistemas de produção que precisam de um backend estão fora do escopo
Sites de SEO e sistemas dinâmicos baseados em backend não passam por este skill

O Que Fornecer

Checklist de assets de marcaLogo, imagens de produto, capturas de tela de UI, paleta de cores, fontes e zonas proibidas, solicitados em um único lote antes de buscar nos canais oficiais.
Referência de estilo ou marcaUma URL de site apreciado, captura de tela ou um produto cuja sensação deva ser reproduzida; se não houver nenhum, o agente segue com uma suposição declarada.
Design system ou codebase existenteO agente primeiro verifica se já existe um design system, kit de UI, codebase ou Figma antes de fazer qualquer design hi-fi do zero.

03 Dentro da skill

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

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

O portão de três direções é 100% obrigatório
Qualquer tarefa que produza novos visuais deve mostrar três rascunhos de direção diferenciados antes da execução, mesmo quando o usuário especifica um estilo ou marca; apenas três isenções restritas se aplicam.
O logo é um asset obrigatório
Se um design mostra um produto ou nome de marca reconhecível, buscar o logo oficial é obrigatório, não opcional, e tantos logos quantos produtos aparecerem.
Placeholder em vez de execução ruim
Ícones ausentes recebem um bloco cinza mais um rótulo de texto em vez de um SVG mal desenhado; dados ausentes recebem um comentário honesto, nunca números fabricados.
Sem conteúdo de enchimento
Todo elemento precisa justificar sua presença; espaço vazio é resolvido com composição, não inventando estatísticas, ícones em todo título ou gradientes por toda parte.
Evite padrões nomeados de AI-slop
Gradientes roxos, ícones de emoji, cards arredondados com um destaque de borda colorida à esquerda e pessoas/rostos em SVG desenhados por IA são sinalizados como padrões visuais padrão de IA a evitar, a menos que a própria marca os utilize.
Restrições de escopo do React
Nunca nomeie um objeto de estilo const styles = {...} porque múltiplos componentes vão colidir; componentes devem ser exportados entre tags de script via Object.assign(window, {...}).
Exportações de animação usam áudio por padrão
Por padrão, a Animation HTML é entregue como um MP4 com BGM e SFX; uma versão silenciosa é tratada como um entregável incompleto, a menos que o usuário peça explicitamente sem áudio.
Decks têm como padrão múltiplos arquivos com Overview Wall
Por padrão, os decks de slides usam vários arquivos HTML mais assets/deck_index.html como visão geral; a arquitetura em arquivo único é apenas para pitches mínimos de até 5 páginas que explicitamente não precisam de uma visão geral.

04 Coloque em prática

Instalar huashu-design no Claude Code ou Codex

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

Adicionar huashu-design 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/alchaincyf/huashu-design --skill huashu-design

Formato genérico da CLI skills para SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt

做个咖啡主题的 PPT

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

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

Faça uma captura de tela com o Playwright e verifique erros de console antes da entrega
Veja pessoalmente o resultado em um navegador antes da entrega, já que código escrito por IA costuma ter bugs de interação
Execute três testes de clique com Playwright em prototipagens de app (visualização de detalhe, hotspot-chave, troca de aba) com zero pageerror
Verifique o piso de legibilidade: texto do corpo com pelo menos 14px, rótulos com pelo menos 12px, contraste de pelo menos 4.5:1

No OpenDesign importe huashu-design a partir do link do 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: alchaincyf
Repository: github.com/alchaincyf/huashu-design Branch master
Arquivo da skill: SKILL.md Checksum de conteúdo registrado na verificação; commit a790f70
License: MIT De LICENSE.
Estrelas do repositório: 24.121 Snapshot do GitHub tirado em 14/09/2026 para o repositório completo alchaincyf/huashu-design. Não é uma classificação ou contagem de uso para huashu-design.
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

你是谁Enquadra o agente como um estúdio desempenhando seis papéis: diretor de arte, pesquisador de marca, designer visual/motion, engenheiro, redator.
Pré-requisitosInforma quais tipos de saída a skill cobre e que aplicações web de produção estão excluídas.
任务路由：一张表定入口Tabela que relaciona sinais de tarefa ao ponto de entrada e arquivo de referência corretos.
核心原则 #0 · 事实验证先于假设Exige verificação via WebSearch dos fatos do produto antes de qualquer trabalho de design começar.
核心哲学（优先级从高到低）Seis princípios ordenados: usar o contexto existente, alinhar antes de construir, oferecer variações, preferir placeholders, evitar preenchimento, evitar AI slop.
设计方向顾问（Fallback 模式）Define o processo obrigatório de sete fases que produz três direções de design paralelas antes da execução.
App / iOS 原型专属守则（速查版）Regras específicas e prevalecentes para prototipagens de apps mobile, cobrindo arquitetura, imagens, molduras de dispositivo e testes de clique.
工作流程Fluxo de trabalho padrão numerado com pontos de verificação, protocolo de arquivo-portão e modelos de perguntas.
异常处理Ações de fallback predefinidas para solicitações vagas, perguntas recusadas, contexto conflitante e prazos apertados.
技术红线（必读 references/react-setup.md）Restrições de implementação não negociáveis de React/Babel e Stage/Sprite.
Starter Components（assets/下）Lista componentes pré-fabricados (deck_index.html, animations.jsx, ios_frame.jsx etc.) e quando usar cada um.
产出要求Convenções de nomenclatura, versionamento, localização de arquivos e requisitos finais de verificação em navegador/Playwright.

A Descrição da Própria Skill

"Huashu Design — crie protótipos de alta fidelidade, slides, animações, visualizações e revisões especializadas com HTML. Qualquer novo design começa 100% com três versões preliminares para o usuário escolher (mesmo com estilo/marca especificados, sem exceções); só após a escolha o trabalho é executado. Palavras-chave: fazer protótipo, PPT, slides, animação, estilo de design, revisão, fazer uma página HTML, UI mockup, exportar MP4/GIF, fazer algo bonito. Não se aplica a Web Apps de produção/sistemas que exigem backend."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 33.602 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill huashu-design

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

Essa skill funciona apenas no Claude Code?

Não, a skill é descrita como agnóstica em relação ao agente e funciona no Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent ou qualquer agente de skill baseado em markdown, com um modo degradado documentado para runtimes mais fracos sem geração de subagentes.

Huashu Design

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

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

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

O que o Skill huashu-design Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill huashu-design

Boa Combinação

Conheça os Limites

O Que Fornecer

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

O portão de três direções é 100% obrigatório

O logo é um asset obrigatório

Placeholder em vez de execução ruim

Sem conteúdo de enchimento

Evite padrões nomeados de AI-slop

Restrições de escopo do React

Exportações de animação usam áudio por padrão

Decks têm como padrão múltiplos arquivos com Overview Wall