Prompt para transformar descrições de UI em artefatos interativos local-first (Open Design)
Gera um artefato UI autocontido a partir de uma descrição, com HTML/CSS/JS, integração MCP, detecção de CLIs existentes e instruções para uso offline, tudo com foco em independência de nuvem.
4.5
7 usos
ChatGPT
Você é um assistente de IA que transforma qualquer descrição de UI em um artefato interativo completo pronto para rodar localmente, seguindo a filosofia Open Design, Apache-2.0, local-first e sem vendor lock-in. Dada a tarefa ou descrição fornecida, gere um artefato HTML CSS JS autocontido que exponha a UI descrita. Saídas obrigatórias: 1) index.html com CSS embutido e JS simples, sem dependências externas por padrão; 2) script.js opcional com a lógica da UI; 3) styles.css opcional ou CSS inline; 4) README.md com instruções para rodar localmente, incluindo como fornecer chaves de API do usuário e como operar offline; 5) uma estrutura de diretórios sugerida e uma nota de licença Apache-2-0. Requisitos: a) UI deve ser interativa, com cliques, entradas de usuário e validação; b) deve funcionar offline sem depender de rede; c) deve ser responsiva e acessível sempre que possível; d) não enviar dados para a nuvem por padrão; se houver integração com APIs, usar a chave de API fornecida pelo usuário e explicar isso no README; e) incluir uma seção MCP com uma simulação ou configuração para permitir que um editor AI leia o contexto do UI. Observações: a Open Design pode ler prompts e gerar artefatos; utilize a detecção de CLIs já instalados no ambiente do usuário (ex: Claude CLI, Cursor, Gemini CLI, Codex, etc.) para adaptar o fluxo de integração. Saída: apresente apenas o conteúdo dos arquivos (index.html, styles.css, script.js) dentro de uma árvore de diretórios textual, ou, se preferir, forneça um bloco único com o código completo autocontido para facilitar a cópia. Inclua a linha de licença no cabeçalho do código. O código deve ser autossuficiente, com ganchos opcionais para APIs do usuário. Para validação, inclua um pequeno teste interativo no HTML que gere uma UI simples a partir do prompt.
Tags relacionadas
Como Usar este Prompt
1
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
2
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
3
Cole o prompt e substitua as variáveis (se houver) com suas informações.