Open Design: versão de código aberto do Claude Design, ferramenta de design de IA para gerar protótipos móveis e da Web

O Open Design é uma ferramenta de prototipagem e design de interface orientada por IA, de código aberto e nativa, que tem como objetivo ser um Anthropic 的 Claude A solução de parcimônia de código aberto do Design. Ela elimina as restrições de vinculação de modelos e transforma modelos grandes em designers profissionais de UI/UX conectando-se às 11 inteligências de código instaladas localmente pelo usuário (por exemplo, Claude Code, Cursor, Gemini CLI etc.) ou a APIs de terceiros compatíveis com o formato OpenAI (BYOK). A plataforma tem 31 módulos de cenários de design profissional incorporados (abrangendo protótipos da Web, páginas de destino de SaaS, aplicativos móveis, painéis de dados, apresentações etc.), bem como 129 sistemas de design das principais marcas. Os usuários só precisam inserir requisitos de linguagem natural, e o sistema usará questionários de interação para confirmar a direção do design, e a IA gerará automaticamente o código e a interface com a visualização em tempo real do sandbox e oferecerá suporte à exportação com um clique para os formatos HTML, PDF, PPTX e ZIP.

Lista de funções

• Suporte a vários modelos e inteligências locaisDetecta e acessa automaticamente 11 clientes de programação de IA (incluindo Claude Code, Cursor Agent, Gemini CLI, GitHub, etc.) em variáveis de ambiente local. Copilot CLI, etc.) ou por meio do modo Bring Your Own Key (BYOK) para acessar qualquer modelo grande compatível com o formato da API da OpenAI.
• 31 Habilidades de design prontas para usoProtótipos da Web integrados, páginas de destino de SaaS, painéis de gerenciamento, aplicativos móveis, páginas dinâmicas, apresentações (PPT) e outros modelos de cenas enormes, com um clique para alternar a forma de saída da IA.
• 129 sistemas de design de marca incorporadosO sistema de design oferece um conjunto completo de especificações de sistema de design para fabricantes e produtos de renome mundial, como Apple, Stripe, Vercel, Notion, Figma, etc., que podem ser aplicados com um único clique para obter correspondência de cores, tipografia e tom de interação especializados.
• Questionário interativo sobre necessidades de precisão (formulário de descoberta)A IA será forçada a abrir um questionário de múltipla escolha para confirmar informações básicas, como público-alvo, tom visual, restrições de tamanho, etc., antes de começar a executar o código, eliminando a “adivinhação cega” da IA e evitando retrabalho repetido.
• Renderização em tempo real em sandbox com exportação em vários formatosO código da interface do usuário gerado será visualizado em tempo real, renderizado em um ambiente seguro de sandbox iframe. Suporte para exportar o projeto gerado diretamente para arquivos HTML, PDF, PPTX com suporte a layout de impressão e zip de código-fonte completo (ZIP).
• Vem com 5 gêneros de estilo visualNa ausência de uma referência clara da marca, uma biblioteca de 5 estilos predefinidos, como moderno minimalista, pragmatismo técnico, cura suave etc., com parâmetros claros para definição de cores e fontes.
• Autocorreção e revisão em cinco dimensõesModelo de IA: antes de produzir o resultado, o modelo de IA deve seguir 5 dimensões de autoavaliação objetiva (conceito de design, nível visual, execução de detalhes etc.) e enviar o resultado somente depois que a pontuação for qualificada, de modo a eliminar o “senso de IA” do mecanismo de trabalho de má qualidade.
• Exportação do histórico do Claude Design sem emendasImportação por arrastar e soltar de arquivos ZIP de protótipos diretamente do site da Anthropic para ler o ambiente histórico e continuar editando localmente.

Usando a Ajuda

I. Requisitos ambientais e preparação
O Open Design é um sistema de ferramentas criado com base em uma estrutura da Web e um daemon de back-end local, portanto, antes de usá-lo, você deve ter o ambiente de tempo de execução básico em seu computador local:

1. Node.jsVerifique se o Node.js 24 ou uma versão similarmente recente está instalado em seu sistema (as ferramentas nvm / fnm são recomendadas para a troca de versão).
2. Ferramentas de gerenciamento de pacotes pnpmDependência do pnpm: O projeto tem uma forte dependência do pnpm (versão 10.33.x series). Você pode criar uma dependência do pnpm executando o comando corepack enable e, em seguida, execute o comando corepack pnpm --version Validar o ambiente.
3. Preparação da base de IAVocê pode preparar um local personalizado vLLM Compatível com o URL de base e a chave de API padrão da OpenAI (vem com sua própria chave); também pode ser instalado globalmente com antecedência. Claude Code 或 Cursor CLI e outros agentes de programação locais.

II Processo de instalação detalhado
Abra o terminal do seu computador (Terminal ou Prompt de Comando) e digite os seguintes comandos para fazer a instalação:

1. Faça o download do código-fonte do projeto：
   Use o Git para clonar o código do projeto localmente e vá para a pasta.

   git clone https://github.com/nexu-io/open-design.git
   cd open-design
   

2. Ativação do gerenciamento de pacotes principais e instalação de dependências：

   corepack enable
   pnpm install
   

   Enquanto aguarda a conclusão da barra de progresso, o sistema extrairá automaticamente todos os pacotes de dependência, incluindo o workbench de front-end e o daemon de back-end.

3. Início dos serviços locais de design aberto：

   pnpm tools-dev run web
   

   Após a inicialização bem-sucedida, o painel do terminal imprime o endereço de acesso local do lado da Web (por exemplo http://localhost:3000). Copie o link e abra-o em seu navegador para acessar a interface. Na primeira vez que você iniciar o programa, ele gerará automaticamente um arquivo .od/ Pasta oculta para armazenar bancos de dados SQLite para salvar seu histórico de conversas e progresso.

III. diretrizes operacionais e de fluxo de trabalho para funções essenciais

Etapa 1: Configurar o mecanismo de driver de IA e as opções de fluxo de trabalho
Acesse a página inicial do site, e todas as barras de ferramentas serão exibidas no lado esquerdo. Se não tiver nenhuma CLI local compatível instalada, você verá uma janela pop-up “Welcome” (Bem-vindo). Você pode selecionar BYOK (Bring Your Own Key mode)A única coisa que você precisa fazer é adicionar o endereço da interface em um formato compatível com o OpenAI, o modelo de chamada correspondente (por exemplo gpt-4o) e a chave de API são coladas. Isso garante que você possa se conectar à IA independentemente do seu ambiente de rede.

Etapa 2: Selecione “Design Skills” (Habilidades de design) e “Design System” (Sistema de design).”
Há dois cartões de menu suspenso muito importantes acima da caixa de diálogo de entrada:

• Seleção de habilidadesFormulário de produto: Defina aqui o tipo de formulário de produto que você deseja gerar. Por exemplo, escolha saas-landing As páginas de destino podem ser geradas para selecionar mobile-app A borda do iPhone 15 Pro incluída será chamada e o componente móvel será gerado; selecione a opção guizang-ppt Em seguida, você entrará no modo de apresentação.
• Seleção do sistema de designDeterminar as características visuais básicas de sua interface de IU aqui. Os menus suspensos cobrem o stripe、vercel、linear-app Com mais de 129 especificações, você pode herdar a filosofia de design das etiquetas correspondentes com um único clique.

Etapa 3: Envio de uma descrição e preenchimento do Questionário de Descoberta
Descreva o objetivo em uma frase curta na caixa de entrada inferior, por exemplo, “Ajude-me a gerar uma página inicial de aplicativo de ferramenta social que inclua um processo de inscrição”.
A IA é “interrompida” pelo sistema quando você retorna para enviar. Um pop-up aparecerá no meio da tela com opções de público, emoção visual, paleta de cores e muito mais.Formulários dinâmicosEsse mecanismo força a IA a convergir para o domínio imaginado. Marque quantas caixas forem necessárias (geralmente leva menos de um minuto), o que força a IA a convergir para o domínio imaginado e garante que o código gerado seja direcionado de forma muito profissional.

Etapa 4: acesso em tempo real à geração de código e renderização de resultados
Depois que o questionário for enviado, a interface será alterada da seguinte forma:

• Todo Progress (cartão de controle de tarefas)O painel esquerdo da tela imprime imediatamente o comportamento da IA (por exemplo, está analisando CSS, está escrevendo uma estrutura HTML, está testando um efeito dinâmico etc.) em um pipeline de cartões.
• Prévia do SandboxedO espaço de trabalho principal à direita é um iframe que contém um isolamento seguro que carrega a GUI renderizada em tempo real à medida que o HTML e o CSS subjacentes são criados. Você pode ver sombras, interações e efeitos responsivos altamente fiéis.

Etapa 5: Modificação contínua e exportação de arquivos

• Se você precisar fazer uma alteração local na interface, não precisará sair da página atual, basta digitar a solicitação na caixa de bate-papo (por exemplo, “diminua a fonte do título grande e mude o plano de fundo para o modo escuro”) e a IA substituirá a atualização na área restrita em tempo real, de acordo com o contexto.
• Clique no canto superior direito da interfaceBotão Exportar. Se um protótipo de página for gerado, você poderá tocar no botão Export HTML 或 Export ZIP O download contém o zip de desenvolvimento para todas as dependências de estilo localizadas; se uma apresentação de slides for gerada, ela também suportará clicar no botão Export PPTX/PDF Obtenha documentos de apresentação nativos do Office para reuniões da empresa. Os dados do projeto são automaticamente mantidos e armazenados localmente, e o progresso é restaurado sem perda após o desligamento e a reinicialização.

cenário do aplicativo

1. Criação rápida de protótipos de baixo custo para gerentes de produtos e designers
   Sem a necessidade de dominar técnicas complexas de fiação do Figma, uma descrição de uma frase com um filtro de questionário pode gerar um protótipo interativo de aplicativo móvel ou da Web de alta fidelidade em minutos com um estilo visual realista e de marca (por exemplo, Apple ou Vercel), o que aumenta muito a eficiência da disseminação do documento de requisitos e da revisão interna da equipe.
2. Aumento do front-end para desenvolvedores e engenheiros full-stack
   Os desenvolvedores de back-end ou de pilha completa geralmente não têm habilidades superiores de design e layout. Eles podem inserir diretamente os requisitos funcionais a serem implementados no Open Design e, ao selecionar o módulo de habilidades de estrutura de front-end autônomo, o código-fonte HTML e CSS limpo e atualizado gerado pela IA e seguindo a especificação do sistema de design profissional pode ser exportado no formato ZIP, que pode ser usado para desenvolvimento secundário no ambiente de produção real.
3. Geração de material de marketing e comercialização
   Ao escolher entre o “modo de deck” e o “Social Carousel”, os profissionais de marketing simplesmente fornecem um esboço de sua cópia e o AI dimensiona automaticamente o texto, gera uma apresentação de slides no estilo de revista on-line ou um cartão de mídia social com várias grades, com animação e efeitos avançados, e oferece suporte à exportação direta para PDF para apresentações de negócios ou de clientes. O AI dimensiona automaticamente o texto, cria apresentações de slides no estilo de revista on-line com animação avançada ou carrosséis sociais que podem ser exportados como PDFs para uso em pitches de negócios ou apresentações para clientes.
4. Operações diárias e materiais de relatório para equipes ágeis
   Com os módulos Kanban-board, Finance-report e Meeting-notes, os membros da equipe podem transformar, de forma instantânea e econômica, textos secos em ativos funcionais de escritório, como grandes exibições de dados e belas páginas de documentos financeiros.

QA

1. Quais são as principais diferenças entre o Open Design e o Claude Design oficial da Anthropic?
   formal Claude Design O Open Design é uma ferramenta de código fechado, paga e específica para modelos na nuvem, enquanto o Open Design é uma arquitetura de sistema totalmente de código aberto e com prioridade local. Ele não apenas herda a lógica de visualização e renderização do sandbox, mas também permite que você acesse as inteligências de código de IA implantadas localmente ou alterne entre praticamente qualquer modelo de linguagem grande no mercado por meio de uma API de proxy, sem bloqueio de recursos.
2. É necessário ter conhecimento de programação para usar o Open Design?
   Não é necessário. A lógica operacional do sistema é muito próxima das ferramentas de design interativo de linguagem natural. Ele vem com interfaces gráficas, formulários de questionário interativos e menus suspensos. Mesmo que você não tenha um conhecimento básico de código, o código escrito em segundo plano é traduzido diretamente e apresentado como uma interface visual intuitiva e de alta fidelidade.
3. Os projetos de código e os materiais de design gerados estão disponíveis comercialmente?
   O Open Design em si é lançado sob o protocolo de código aberto Apache-2.0, e o resultado gerado pertence ao usuário. No entanto, deve-se observar que o sistema tem modelos incorporados de especificações de design reais de algumas marcas conhecidas (por exemplo, Stripe, Tesla etc.), portanto, se você usar essas interfaces de usuário altamente reproduzidas para realização comercial pública, precisará verificar se há algum risco legal de infringir os direitos autorais de marcas de terceiros.
4. Como faço para usar as inteligências de IA se não tiver nenhuma instalada localmente?
   Não há nenhum problema. O sistema fornece BYOK (Bring Your Own Key, traga sua própria chave). Na interface de boas-vindas, pela primeira vez, você só precisa preencher o endereço de solicitação de API compatível com OpenAI, a chave de API e o nome do modelo de plataformas como DeepSeek, OpenRouter e assim por diante, e poderá conduzir o conjunto completo de funções sem problemas.
5. Por que a IA exibe um formulário em vez de começar a desenhar diretamente depois de inserir o requisito?
   Esse é um dos principais recursos da ferramenta. Enquanto os desenhos tradicionais de IA costumam ser feitos à mão livre e produzem um trabalho de baixa qualidade, o “Smart Discovery Form” incorporado ao Open Design força a IA a definir as principais metas e restrições antes de começar a escrever. Embora o usuário leve 30 segundos para fazer várias escolhas, ele economiza dezenas de revisões ineficazes posteriormente.