Communitygithub.com

oalanicolas/open-design

Habilidade de agente do repositório oalanicolas/open-design.

O que é open-design?

O `oalanicolas/open-design` é uma habilidade para agentes de IA, como Claude Code, Cursor e Codex, que permite gerar e modificar designs de interface do usuário. Ele se baseia em prompts de design descritivos para criar HTML e CSS responsivos, permitindo que desenvolvedores e designers iterem rapidamente sobre layouts, componentes e estilos. A habilidade é útil porque acelera o processo de prototipação visual, integrando-se ao fluxo de trabalho de desenvolvimento e reduzindo a necessidade de ferramentas de design externas. Ela funciona processando instruções em linguagem natural e gerando código front-end pronto para uso, diretamente no ambiente do agente.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add oalanicolas/open-design
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que open-design faz?

Habilidade de agente do repositório oalanicolas/open-design.

Esta habilidade permite que agentes de IA gerem e modifiquem designs de interface do usuário a partir de descrições textuais. Ao receber um prompt de design, o agente produz código HTML e CSS correspondente, facilitando a prototipação rápida e a iteração de layouts, componentes e estilos.

Como usar

Forneça uma descrição detalhada do design desejado. O agente retornará o código HTML e CSS completo e responsivo.

Exemplo de prompt

Crie um cartão de perfil com foto, nome, biografia e botões de ação. Use um esquema de cores azul escuro e branco.

Funcionalidades

  • Geração de HTML/CSS responsivo
  • Suporte a temas e paletas de cores
  • Integração com fluxos de desenvolvimento

Plataformas suportadas

  • Claude Code
  • Cursor
  • Codex

Licença

Consulte o repositório original para detalhes de licenciamento.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community