jay439055-creator/stripe-system-practice

O que stripe-system-practice faz?

Sistema de geração de UI no estilo Stripe, impulsionado por IA, usando DESIGN.md, Skills, Prompts e Cline

---

Visão Geral

Este skill permite que um agente de IA (como Claude Code, Cursor ou Codex) crie interfaces de usuário consistentes com o design system do Stripe. Ele utiliza um arquivo DESIGN.md como fonte única de verdade para tokens de design, componentes e padrões de interação.

Como Funciona

1. Arquivo de Design (DESIGN.md) – Contém toda a especificação visual: paleta de cores, tipografia, espaçamentos, sombras e regras de animação.
2. Skills – Conjunto de instruções de codificação reutilizáveis que o agente segue para gerar componentes no estilo Stripe.
3. Prompts – Instruções detalhadas que orientam o agente sobre como interpretar o design e produzir o código.
4. Cline – Ferramenta utilizada para executar a geração de código e aplicar os componentes no projeto alvo.

Plataformas Suportadas

• Claude Code
• Cursor
• Codex

Requisitos

• Node.js 18+
• React 18+
• Tailwind CSS 3+

Exemplo de Uso

# Inicializar o sistema (via Cline)
cline init stripe-system

# Carregar o arquivo de design
cline load-design ./DESIGN.md

# Gerar um componente de botão no estilo Stripe
cline generate button --variant primary

Estrutura do Projeto

stripe-system-practice/
├── DESIGN.md          # Tokens e especificações de design
├── skills/            # Habilidades de codificação reutilizáveis
│   └── ui-gen.md      # Habilidade para geração de UI
├── prompts/           # Prompts para o agente de IA
│   └── stripe-ui.md   # Prompt específico para UI do Stripe
└── output/            # Componentes gerados
    └── Button.tsx

Personalização

Para adaptar o sistema à sua marca, edite o arquivo DESIGN.md com seus próprios tokens. O agente respeitará essas especificações ao gerar todos os componentes.

Licença

MIT