IFQ Design Skills
Um prompt -> HTML pronto para entrega, com exportação opcional para MP4 / GIF / PPTX / PDF / SVG. Este arquivo raiz é um roteador curto para OpenClaw, ClawHub, skills.sh, Hermes, Codex, Claude Code, Cursor, OpenCode e outros hosts compatíveis com AgentSkills. Carregue arquivos mais profundos apenas quando a tarefa exigir.
Caminho de Carga de 30 Segundos
- Confirme que a solicitação é um entregável visual construído a partir de HTML. Se não for, saia desta skill.
- Escolha o modo em references/modes.md, e então leia assets/templates/INDEX.json.
- Faça um fork de um template listado para o workspace do usuário. Nunca comece de um arquivo HTML em branco.
- Embuta assets/ifq-brand/ifq-tokens.css e teça pelo menos 3 marcas ambientais IFQ de references/ifq-brand-spec.md.
- Verifique com
npm run verify:lite -- <file.html>, depoisnpm run preview -- <file.html>.
Promessa Humano + Agente
- Humanos recebem um caminho de artefato concluído: HTML primeiro, exportação opcional apenas quando solicitada, e nenhuma configuração oculta.
- Agentes recebem uma rota curta: modo, template, referências obrigatórias, política de tiers e comando de verificação.
- Mantenedores recebem pressão de regressão: 12 avaliações de modo, scripts limpos de scanner e verificações de metadados do marketplace.
- Marketplaces recebem um pacote legível: instalação em uma linha, zero variáveis de env necessárias, permissões explícitas e nenhuma instalação silenciosa.
Caminho de Sucesso na Primeira Execução
Após a instalação, faça a primeira interação produzir um artefato visível em uma rodada:
- Aceite uma solicitação visual em linguagem natural sem transformá-la em trabalho de configuração.
- Roteie-a para um modo e um template; nomeie ambos na evidência final.
- Escreva o arquivo HTML no workspace do usuário com premissas rotuladas para fatos não resolvidos.
- Execute
npm run verify:lite -- <file.html>quando o shell estiver disponível, então pré-visualize ou tire um screenshot com as ferramentas do navegador host quando disponíveis. - Informe o caminho do arquivo, rota, template, resultado da verificação e apenas ressalvas que afetem o uso.
Não peça login de conta, instalação global, dependências de exportação ou mudanças amplas no ambiente durante o caminho da primeira execução.
Limite de Saída
- A saída principal é HTML local verificado, mais SVG/companheiros estáticos ou estrutura de fonte pronta para exportação quando a tarefa precisar.
- Os helpers para MP4/GIF/PDF/PPTX são automação opcional do repositório completo. Prepare a fonte HTML primeiro; instale ou execute ferramentas de exportação apenas após intenção explícita do usuário.
- Nunca afirme que um arquivo de exportação, screenshot, status de marketplace ou resultado de segurança existe até que o comando relevante ou verificação ao vivo tenha realmente passado.
Use Quando
- Protótipo interativo, mockup de alta fidelidade, fluxo de aplicativo clicável, dashboard, landing page, whitepaper, relatório, infográfico, apresentação de slides, changelog, cartão, convite, capa de rede social ou sistema de marca.
- Demonstração de movimento ou animação de lançamento, especialmente quando o usuário também quiser saída MP4/GIF.
- Crítica de design, diagnóstico de marca ou 3 direções de estilo diferenciadas antes da implementação.
- O usuário pedir exportação PDF/PPTX/SVG a partir de uma fonte HTML.
Não Use Quando
- A tarefa real é engenharia frontend de produção, trabalho backend, implementação de site crítico para SEO ou um bug CSS dentro de um aplicativo existente.
- O usuário quer apenas edição de copys sem artefato visual.
- O entregável precisa ir e voltar pelo Word, Google Docs ou um template corporativo bloqueado.
Política de Tiers
| Tier | Padrão? | Requisitos | Use para |
|---|---|---|---|
| Tier 0 | sim | Node >= 18.17 | HTML, preview, verificação leve, testes smoke |
| Tier 1 | opt-in | Python + Playwright + Chromium | screenshots headless, captura de console, verificações multi-viewport |
| Tier 2 | opt-in | npm run install:export; MP4/GIF também precisam de ffmpeg | MP4, GIF, PDF, PPTX editável |
Não instale dependências opcionais a menos que o usuário precise explicitamente de screenshots ou formatos de exportação.
Árvore de Decisão de Roteamento
Solicitação do usuário chega
│
├─ É um entregável de design visual? ─── Não → Saia da skill, devolva ao agente padrão
│
├─ Pode corresponder a um gatilho de modo? ─── Sim (confiança >70%) → faça fork do template → entregue → verifique
│ (uma rodada: nomeie premissas, sem perguntas)
│
├─ Pode corresponder a um gatilho de modo? ─── Sim (confiança ≤70%) → design-direction-advisor.md leve
│ (3 direções apenas texto, sem demonstrações, aguarde escolha do usuário)
│
├─ Menciona um produto/tecnologia/evento concreto? ─── Sim → fact-and-asset-protocol.md + verificação web
│
├─ É um protótipo de aplicativo móvel? ─── Sim → app-prototype-rules.md + ios_frame.jsx / android_frame.jsx
│
└─ É movimento/vídeo? ─── Sim → animation-pitfalls.md + animations.md + video-export.md
Leia references/modes.md para o protocolo completo de modos. A tabela de Referência Rápida acima é a camada de velocidade.
Referência Rápida (Tabela de Velocidade do Agente)
| Modo | Palavras-chave de gatilho | Template | Referências principais |
|---|---|---|---|
| M-01 | launch film, 发布会, vídeo de produto | T-launch-film | animations.md, video-export.md |
| M-02 | portfólio, 个人站, sobre mim | T-hero-landing | design-direction-advisor.md |
| M-03 | whitepaper, 白皮书, relatório anual | T-infographic-vertical | fact-and-asset-protocol.md |
| M-04 | dashboard, 看板, KPI, central de comando | T-dashboard | app-prototype-rules.md |
| M-05 | A vs B, 横评, benchmark | T-compare-vs | fact-and-asset-protocol.md |
| M-06 | onboarding, 新手引导, demonstração de fluxo | T-onboarding-flow | app-prototype-rules.md |
| M-07 | changelog, notas de versão, 发布日记 | T-changelog | content-guidelines.md |
| M-08 | keynote, PPT, 演讲, apresentação de slides | T-slide-title | slide-decks.md, editable-pptx.md |
| M-09 | 社媒物料, capa social, 小红书 | T-social-x | content-guidelines.md |
| M-10 | 名片, cartão de visita, 邀请函 | T-business-card | ifq-brand-spec.md |
| M-11 | 品牌诊断, auditoria de marca, 品牌体检 | T-brand-diagnosis | critique-guide.md |
| M-12 | marca do zero, 从零建立品牌 | T-brand-system | design-direction-advisor.md |
Todos os templates: npm run verify:lite -- <file> + npm run preview -- <file> (Tier 0, zero-instalação).
Camada Ambiental IFQ
- A marca do usuário é o assunto. IFQ é a camada de autoria: ritmo de layout, papel morno, ledger enferrujado, notas de campo mono, faísca de sinal, URL silenciosa e contraste editorial.
- Cada entregável usa pelo menos 3 marcas IFQ. Nunca cole um logotipo ou marca d'água genérico barulhento, a menos que a tarefa seja de propriedade da IFQ ou seja uma exportação de animação que peça pelo carimbo promocional.
- Templates embutidos usam fontes locais para renderização segura na China. Google Fonts ou runtimes CDN são opt-in apenas; veja references/font-loading.md.
- Evite rótulos internos de taxonomia visíveis, como
Signal SparkouRust Ledger, em designs voltados para o usuário. Escreva conteúdo real.
Padrões de Conversa
Padrão A — Solicitação específica (mais comum, uma rodada): Usuário: "Fazer uma comparação A vs B, nós vs Stripe" → Agente: verifique fatos de ambos os produtos → roteie M-05 → faça fork de T-compare-vs → preencha com dados verificados → entregue → verifique.
Padrão B — Padrão confiante (uma rodada): Usuário: "Me faça uma landing page" → Agente: corresponda M-02 com confiança >70% → faça fork de T-hero-landing → escolha estilo Editorial Serif → preencha com padrões → entregue → verifique → nomeie premissas nas ressalvas.
Padrão C — Consultor leve (duas rodadas): Usuário: "Me ajude a fazer algo bonito" → Agente: nenhuma correspondência de modo com >70% → leia design-direction-advisor.md → proponha 3 direções apenas em texto → usuário escolhe → roteie → entregue.
Padrão D — Refinamento iterativo:
Usuário: "Deixe o esquema de cores daquele deck mais quente" → Agente: localize artefato anterior → edite no local → re-execute verify:lite → reporte o que mudou.
Regra: nunca faça mais de 1 pergunta por rodada. Use padrões para todo o resto. Se o usuário não especificou um estilo, escolha um e nomeie-o no entregável — eles podem iterar.
Recuperação de Erros
| Falha | Recuperação |
|---|---|
| Nenhum template corresponde à solicitação | Use T-hero-landing como arcabouço genérico, anote a lacuna no entregável |
verify:lite relata placeholders | Corrija os placeholders, re-verifique, reporte a correção |
verify:lite relata vazamentos de rótulo IFQ | Remova rótulos internos de taxonomia (Signal Spark, Rust Ledger etc.) do texto voltado para o usuário |
| Comando de exportação falha | Reporte o erro exato, sugira npm run install:export se faltarem dependências, nunca afirme que a exportação existe |
| Usuário diz "isso parece gerado por IA" | Leia anti-ai-slop.md, aplique a lista de verificação de 7 pontos, reescreva com mais variação de ritmo |
| Agente não pode verificar fatos (sem acesso web) | Nomeie afirmações não verificadas como "não verificadas" no entregável, não invente especificações |
| Renderização do template falha ou parece quebrada | Volte para um template mais simples (T-hero-landing), reporte o motivo da degradação |
| Solicitação está fora do escopo da skill | Declare o limite honestamente, sugira alternativas (ex.: "isso é mais adequado a um framework React") |
Contrato de Segurança
- Instruções raiz permanecem com escopo limitado à entrega visual HTML. Não peça por segredos não relacionados, configuração de host, agentes persistentes ou serviços em segundo plano.
- Scripts são locais por primeiro: sem eval dinâmico, sem chamadas de rede em tempo de execução, sem instalações ocultas e sem gravações fora do workspace do usuário.
- Variáveis de ambiente necessárias estão intencionalmente vazias. Ferramentas de exportação opcionais são documentadas e invocadas apenas após intenção do usuário.
- Metadados do OpenClaw/ClawHub vivem no campo JSON de linha única
metadatapara que parsers possam controlarmetadata.openclaw.requires.binsemetadata.openclaw.requires.env.
Verificação Antes da Entrega
- Execute
npm run verify:lite -- <file.html>para vazamentos de placeholder e rótulo IFQ. - Execute
npm run preview -- <file.html>e inspecione a saída do navegador. - Para protótipos de aplicativos, clique em pelo menos um caminho principal, uma troca de aba/tela e uma ação de detalhe/anotação.
- Para decks, verifique a contagem de slides e os requisitos de formato antes da exportação PDF/PPTX.
- Para exportações de animação, verifique o timing, a política de áudio e a presença do arquivo final.
- Após edições no repositório, execute
npm run validateenpm run verify:publish.
Mapa de Referências
Regra de Conclusão
Entregue o menor artefato verificado que satisfaça a solicitação. Reporte o arquivo de saída, os comandos de verificação executados e quaisquer ressalvas. Não afirme exportação, screenshots ou segurança de marketplace a menos que a verificação relevante realmente tenha passado.