Repolode
Enviar
elayadesign

elayadesign/ai-design-skills

Coleção de arquivos de habilidades de design independentes para ferramentas de programação com IA, como Claude Code, Cursor e Codex, começando com uma habilidade para landing pages.

Ver no GitHub
Estrelas
14,827
Forks
1,123
Issues abertas
1
Último commit
há 6 dias

O que é?

AI Design Skills é um conjunto de habilidades de design em Markdown que ferramentas de programação com IA podem seguir ao criar interfaces. Cada habilidade fica em uma pasta independente com um arquivo SKILL.md, então você instala apenas as que precisa no diretório de regras ou habilidades do seu projeto.

A habilidade atual, landing-page-design, orienta um assistente na criação de uma landing page do zero. Ela abrange perguntas iniciais, estrutura da página, textos voltados à conversão e um sistema visual que define tipografia, espaçamento, raio e movimento. Outro repositório cuida da atualização de um site existente.

A instalação funciona com Claude Code (copiado para .claude/skills), Cursor (como arquivo em .cursor/rules) e ferramentas como Codex, Windsurf e Cline, usando os respectivos arquivos de regras. Usuários do Claude.ai podem enviar o arquivo para um Project ou anexá-lo a uma conversa. Valores de design, como fontes, cores e espaçamento, ficam reunidos em uma seção perto do fim de cada arquivo para facilitar a personalização.

Recursos principais

  • 01Oferece a habilidade landing-page-design, que abrange estrutura, textos e sistema visual
  • 02Cada habilidade fica em uma pasta independente e pode ser instalada separadamente
  • 03Funciona com Claude Code, Cursor, Codex, Windsurf, Cline e prompts de sistema genéricos
  • 04Tokens de design, como fontes, cores e espaçamento, ficam agrupados em uma seção editável
  • 05Publicado sob a licença MIT

Casos de uso

  • Criar uma landing page para o lançamento de um produto com um assistente de programação com IA
  • Fornecer regras de design consistentes a uma ferramenta de IA para que as interfaces geradas sigam um sistema visual definido
  • Personalizar fontes, cores e espaçamento para a identidade visual de uma equipe, fazendo um fork do repositório

Início rápido

  1. 1

    Crie a pasta skills no seu projeto

    mkdir -p .claude/skills
  2. 2

    Clone o repositório para uma pasta temporária

    git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
  3. 3

    Copie para o seu projeto a pasta do skill que você quer (substitua <skill-name>; por exemplo, landing-page-design)

    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
  4. 4

    No Claude Code, pergunte em linguagem natural o que o skill abrange

Em coleções

Skills de design de interface para agentes de programaçãoFerramentas, skills e plugins para Claude CodeAssistentes e agentes de programação com IA

Tópicos

#ai-coding#design-system#landing-page#claude-code#cursor#prompt-engineering#ui-design

Perguntas frequentes

O que é ai-design-skills?
Coleção de arquivos de habilidades de design independentes para ferramentas de programação com IA, como Claude Code, Cursor e Codex, começando com uma habilidade para landing pages. AI Design Skills é um conjunto de habilidades de design em Markdown que ferramentas de programação com IA podem seguir ao criar interfaces. Cada habilidade fica em uma pasta independente com um arquivo SKILL.md, então você instala apenas as que precisa no diretório de regras ou habilidades do seu projeto.
ai-design-skills é gratuito? Qual é a licença?
ai-design-skills é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
ai-design-skills ainda é mantido?
Manutenção ativa. O último commit de ai-design-skills foi em 1 de nov. de 2026.
Para que posso usar ai-design-skills?
Criar uma landing page para o lançamento de um produto com um assistente de programação com IA Fornecer regras de design consistentes a uma ferramenta de IA para que as interfaces geradas sigam um sistema visual definido Personalizar fontes, cores e espaçamento para a identidade visual de uma equipe, fazendo um fork do repositório
Como instalar ai-design-skills?
Crie a pasta skills no seu projeto: mkdir -p .claude/skills Clone o repositório para uma pasta temporária: git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills Copie para o seu projeto a pasta do skill que você quer (substitua <skill-name>; por exemplo, landing-page-design): cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/ No Claude Code, pergunte em linguagem natural o que o skill abrange
Onde consigo ai-design-skills?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/elayadesign/ai-design-skills

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados