@promptui-lib/codegen 0.1.13 → 0.1.14

package/README.md

@@ -1,4 +1,4 @@
-<h1 align="center">🎨 PromptUI</h1>
+<h1 align="center">PromptUI</h1>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@promptui-lib/cli"><img src="https://img.shields.io/npm/v/@promptui-lib/cli.svg" alt="npm version" /></a>
@@ -7,119 +7,364 @@
 </p>
 
 <p align="center">
-  <strong>Transform Figma designs into production-ready code in seconds.</strong>
+  <strong>Transforme designs do Figma em código pronto para produção em segundos.</strong>
 </p>
 
 <p align="center">
-  100% deterministic. No AI. Same input = same output, always.
+  100% determinístico. Sem IA. Mesmo input = mesmo output, sempre.
 </p>
 
 ---
 
-## What is it?
+## Índice
+
+- [O que é o PromptUI?](#o-que-é-o-promptui)
+- [Início Rápido](#início-rápido)
+- [Instalação](#instalação)
+- [Frameworks Suportados](#frameworks-suportados)
+- [Comandos CLI](#comandos-cli)
+- [Configuração](#configuração)
+- [Guia para Designers](#guia-para-designers)
+- [Classificação de Componentes](#classificação-de-componentes)
+- [HTML5 Semântico](#html5-semântico)
+- [Como Funciona](#como-funciona)
+- [Integração com Claude Code](#integração-com-claude-code)
+- [Estrutura de Pacotes](#estrutura-de-pacotes)
 
-**PromptUI** is a library that automatically converts your Figma designs into clean, production-ready code.
+---
+
+## O que é o PromptUI?
+
+**PromptUI** é uma biblioteca que converte automaticamente designs do Figma em código limpo e pronto para produção. Ela lê a API do Figma, parseia a estrutura do design e gera código específico para cada framework.
 
-Supports multiple frameworks:
-- **React + SCSS** (BEM methodology)
-- **Material UI** (MUI)
-- **Tailwind CSS**
-- **Bootstrap**
-- **Flutter** (Dart StatelessWidgets)
-- **SwiftUI** (iOS/macOS Views)
+### Principais Funcionalidades
+
+- **Output Determinístico**: Mesmo design = mesmo código, sempre
+- **Múltiplos Frameworks**: React, Material UI, Tailwind, Bootstrap, Flutter, SwiftUI
+- **Design Tokens**: Extrai automaticamente cores, espaçamentos, tipografia
+- **HTML5 Semântico**: Gera tags apropriadas (`<button>`, `<nav>`, `<header>`, `<form>`)
+- **Auto Layout → Flexbox**: Converte Auto Layout do Figma para CSS Flexbox
+- **Posicionamento Absoluto**: Suporta elementos sem Auto Layout
+- **Google Fonts**: Importa automaticamente as fontes detectadas
+- **Composição de Componentes**: Componentes `#` aninhados são importados automaticamente
 
 ---
 
-## Installation
+## Início Rápido
 
 ```bash
+# 1. Instale globalmente
 npm install -g @promptui-lib/cli
+
+# 2. Configure seu projeto
+npx @promptui-lib/cli init
+
+# 3. Configure as credenciais do Figma
+export FIGMA_TOKEN=seu_token_aqui
+export FIGMA_FILE_ID=id_do_arquivo
+
+# 4. Gere todos os componentes
+npx @promptui-lib/cli generate
 ```
 
 ---
 
-## How It Works
+## Instalação
 
-### 1. Mark your components in Figma
+```bash
+npm install -g @promptui-lib/cli
+```
 
-In Figma, add `#` at the beginning of frame names you want to export:
+Ou use com npx:
 
+```bash
+npx @promptui-lib/cli generate
 ```
-#Button          → Will be exported as component
-#CardProduct     → Will be exported as component
-#HeaderNav       → Will be exported as component
-Button           → Ignored (no #)
+
+---
+
+## Frameworks Suportados
+
+| Framework        | Comando              | Output                       |
+| ---------------- | -------------------- | ---------------------------- |
+| **React + SCSS** | `generate`           | TSX + BEM SCSS               |
+| **Material UI**  | `generate mui`       | TSX + componentes MUI        |
+| **Tailwind CSS** | `generate tailwind`  | TSX + classes Tailwind       |
+| **Bootstrap**    | `generate bootstrap` | TSX + classes Bootstrap      |
+| **Ant Design**   | `generate antd`      | TSX + componentes Ant Design |
+| **Flutter**      | `generate flutter`   | Dart StatelessWidget         |
+| **SwiftUI**      | `generate swiftui`   | Swift View                   |
+
+---
+
+## Comandos CLI
+
+### Gerar Componentes
+
+```bash
+# Exporta frames marcados com #
+npx @promptui-lib/cli generate
+
+# Exporta TODOS os frames de nível superior
+npx @promptui-lib/cli generate --all
+
+# Exporta node específico por ID
+npx @promptui-lib/cli generate 3:100
+
+# Preview sem salvar arquivos
+npx @promptui-lib/cli generate --preview
+
+# Com framework específico
+npx @promptui-lib/cli generate tailwind
+npx @promptui-lib/cli generate mui
+npx @promptui-lib/cli generate bootstrap
 ```
 
-### 2. Configure the project
+### Opções
+
+| Opção           | Descrição                                 |
+| --------------- | ----------------------------------------- |
+| `--all, -a`     | Exporta todos os frames de nível superior |
+| `--force, -f`   | Sobrescreve arquivos existentes           |
+| `--output, -o`  | Diretório de saída customizado            |
+| `--preview, -p` | Preview sem salvar                        |
+| `--layer, -l`   | Força camada (atoms/molecules/organisms)  |
+| `--no-meta`     | Não gera meta.json                        |
+
+### Outros Comandos
 
 ```bash
+# Inicializa configuração
 npx @promptui-lib/cli init
+
+# Sincroniza design tokens
+npx @promptui-lib/cli sync tokens
+
+# Inicia agente MCP
+npx @promptui-lib/cli agent
 ```
 
-Set your credentials:
+---
 
-```bash
-export FIGMA_TOKEN=your_token_here
-export FIGMA_FILE_ID=file_id_here
+## Configuração
+
+Crie `promptui.config.json`:
+
+```json
+{
+  "figma": {
+    "token": "figd_...",
+    "fileId": "ABC123xyz"
+  },
+  "output": {
+    "basePath": "src/components",
+    "styleFormat": "scss"
+  }
+}
 ```
 
-### 3. Generate components
+Ou use variáveis de ambiente:
 
 ```bash
-# React + SCSS
-npx @promptui-lib/cli generate
+export FIGMA_TOKEN=figd_...
+export FIGMA_FILE_ID=ABC123xyz
+```
 
-# Bootstrap
-npx @promptui-lib/cli generate bootstrap
+### Obtendo Credenciais do Figma
 
-# Material UI
-npx @promptui-lib/cli generate mui
+**Token:**
 
-# Tailwind CSS
-npx @promptui-lib/cli generate tailwind
+1. Acesse [Configurações do Figma](https://www.figma.com/settings)
+2. "Personal Access Tokens" → Criar novo
 
-# Flutter
-npx @promptui-lib/cli generate flutter
+**File ID:**
+Da URL do Figma: `https://www.figma.com/file/ABC123xyz/MeuProjeto` → `ABC123xyz`
 
-# SwiftUI
-npx @promptui-lib/cli generate swiftui
+---
+
+## Guia para Designers
+
+### Regra Principal: Prefixo `#`
+
+Para que um componente seja exportado, o nome do frame **deve começar com `#`**:
+
+```
+✅ #Button        → Será exportado
+✅ #Card          → Será exportado
+✅ #LoginScreen   → Será exportado
+❌ Button         → Ignorado
+❌ card-design    → Ignorado
 ```
 
+### Composição de Componentes
+
+Componentes `#` aninhados são automaticamente importados:
+
+```
+#LoginScreen (organismo)
+├── #Header (organismo)  → import { Header } from '../organisms/Header'
+├── #Form (molécula)     → import { Form } from '../molecules/Form'
+│   ├── field-email      → <input type="email" placeholder="Email">
+│   ├── field-password   → <input type="password" placeholder="Password">
+│   └── #Button          → import { Button } from '../atoms/Button'
+└── #Footer (organismo)  → import { Footer } from '../organisms/Footer'
+```
+
+### Auto Layout é Essencial
+
+**Sempre use Auto Layout** nos seus frames. O PromptUI converte:
+
+| Figma Auto Layout | CSS Gerado                       |
+| ----------------- | -------------------------------- |
+| Horizontal        | `flex-direction: row`            |
+| Vertical          | `flex-direction: column`         |
+| Space between     | `justify-content: space-between` |
+| Packed (center)   | `justify-content: center`        |
+| Gap: 16           | `gap: 16px` ou `$spacing-md`     |
+| Padding           | `padding: Xpx Ypx`               |
+
+**Sem Auto Layout**: Elementos recebem `position: absolute` baseado nas constraints.
+
+### Nomenclatura de Elementos Internos
+
+Use nomes descritivos para que o PromptUI gere HTML5 semântico:
+
+| Nome no Figma        | HTML Gerado                                      |
+| -------------------- | ------------------------------------------------ |
+| `field-email`        | `<input type="email" placeholder="Email">`       |
+| `field-password`     | `<input type="password" placeholder="Password">` |
+| `field-cpf`          | `<input type="text" placeholder="Cpf">`          |
+| `field-telefone`     | `<input type="tel" placeholder="Telefone">`      |
+| `btn-enviar`         | `<button>`                                       |
+| `link-esqueci-senha` | `<a href="/esqueci-senha">`                      |
+| `nav-menu`           | `<nav>`                                          |
+| `img-avatar`         | `<img alt="Avatar">`                             |
+
 ---
 
-## Examples
+## Classificação de Componentes
+
+O PromptUI usa **HTML5 Semântico + Atomic Design + SOLID** para classificar componentes automaticamente.
 
-### Example 1: Button with React + SCSS
+### Átomos (Elementos Indivisíveis)
 
-**In Figma:** Frame named `#Button`
+Elementos simples, sem filhos complexos:
 
 ```
-#Button (Frame)
-├── Padding: 12px 24px
-├── Background: #3B82F6
-├── Border Radius: 8px
-└── label (Text: "Click me")
+button, btn, link, input, field, textfield, textarea, select,
+checkbox, radio, toggle, switch, icon, image, img, avatar,
+badge, tag, chip, label, text, spinner, loader, loading,
+skeleton, progress, divider, separator, spacer, line
 ```
 
-**Command:**
-```bash
-npx @promptui-lib/cli generate
+**Exemplos:** `#Button`, `#Input`, `#Icon`, `#Badge`, `#Avatar`
+
+### Moléculas (Combinação de Átomos)
+
+Formam unidade funcional:
+
+```
+card, tile, item, row, cell, form, fieldset, form-group,
+input-group, search-bar, nav, menu, navbar, nav-bar, nav-item,
+breadcrumb, tabs, tab, modal, dialog, popup, popover, tooltip,
+dropdown, alert, toast, notification, snackbar, banner,
+list-item, menu-item, accordion-item, figure, thumbnail
 ```
 
-**Result:**
+**Exemplos:** `#Card`, `#Form`, `#SearchBar`, `#Modal`, `#Alert`
 
-```tsx
-// src/components/atoms/Button/button.tsx
-import type { ReactNode } from 'react';
-import './button.scss';
+### Organismos (Seções Estruturais HTML5)
 
-export interface IButtonProps {
-  children?: ReactNode;
-  className?: string;
-}
+Contêm moléculas, são seções completas:
+
+```
+header, footer, main, section, article, aside, sidebar, panel,
+container, wrapper, list, grid, table, gallery, carousel,
+hero, features, testimonials, pricing, contact, wizard, stepper,
+flow, timeline, dashboard, overview, stats, screen, page, view,
+layout, template
+```
+
+**Exemplos:** `#Header`, `#Footer`, `#Sidebar`, `#LoginScreen`, `#Dashboard`
+
+### Regra de Composição
+
+**Se um componente tem filhos marcados com `#`, ele é automaticamente um ORGANISMO.**
+
+```
+#LoginScreen          → organismo (tem #Header, #Form, #Footer como filhos)
+├── #Header           → organismo (pelo nome)
+├── #Form             → molécula (pelo nome)
+│   └── #Button       → átomo (pelo nome)
+└── #Footer           → organismo (pelo nome)
+```
+
+---
+
+## HTML5 Semântico
+
+### Tags Geradas Automaticamente
+
+| Padrão no Nome              | Tag HTML         |
+| --------------------------- | ---------------- |
+| `button`, `btn`             | `<button>`       |
+| `input`, `field`, `campo`   | `<input>`        |
+| `link`, `anchor`            | `<a href="...">` |
+| `nav`, `menu`, `navegacao`  | `<nav>`          |
+| `header`, `cabecalho`       | `<header>`       |
+| `footer`, `rodape`          | `<footer>`       |
+| `section`, `secao`          | `<section>`      |
+| `article`, `artigo`         | `<article>`      |
+| `image`, `imagem`, `avatar` | `<img>`          |
+| `form`, `formulario`        | `<form>`         |
+| (padrão)                    | `<div>`          |
+
+### Tipos de Input Detectados
+
+| Nome do Campo                   | Tipo Gerado       |
+| ------------------------------- | ----------------- |
+| `field-email`, `campo-email`    | `type="email"`    |
+| `field-password`, `campo-senha` | `type="password"` |
+| `field-telefone`, `field-phone` | `type="tel"`      |
+| `field-busca`, `field-search`   | `type="search"`   |
+| `field-numero`, `field-number`  | `type="number"`   |
+| `field-data`, `field-date`      | `type="date"`     |
+| `field-url`, `field-website`    | `type="url"`      |
+| `field-arquivo`, `field-upload` | `type="file"`     |
+| (outros)                        | `type="text"`     |
+
+### Placeholders Genéricos
+
+O placeholder é gerado automaticamente a partir do nome do campo:
+
+```
+field-cpf       → placeholder="Cpf"
+field-cnpj      → placeholder="Cnpj"
+campo-nome      → placeholder="Nome"
+input-endereco  → placeholder="Endereco"
+```
+
+---
+
+## Como Funciona
+
+O PromptUI segue um pipeline de 4 etapas:
+
+```
+┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
+│   1. FETCH   │ ──► │   2. PARSE   │ ──► │  3. CODEGEN  │ ──► │   4. WRITE   │
+│  API Figma   │     │  Estrutura   │     │  Framework   │     │  Arquivos    │
+└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘
+```
+
+### Etapa 3: Geração de Código
+
+Gera código específico para cada framework:
+
+**React + SCSS (BEM):**
 
-export const Button = ({ children, className = '' }: IButtonProps) => {
+```tsx
+export const Button = ({ children, className = "" }: IButtonProps) => {
   return (
     <button className={`button ${className}`.trim()}>
       <span className="button__label">{children}</span>
@@ -129,370 +374,243 @@ export const Button = ({ children, className = '' }: IButtonProps) => {
 ```
 
 ```scss
-// src/components/atoms/Button/button.scss
 .button {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: $spacing-xs;
   padding: $spacing-sm $spacing-lg;
   background-color: $color-primary;
   border-radius: $radius-medium;
-
-  &__label {
-    color: $color-text-inverse;
-    font-weight: $font-weight-medium;
-  }
 }
 ```
 
----
-
-### Example 2: Card with Bootstrap
-
-**In Figma:** Frame named `#CardProduct`
+**Design Tokens SCSS (`_variables.scss`):**
 
-```
-#CardProduct (Frame)
-├── image (Rectangle)
-├── content (Frame)
-│   ├── title (Text: "Product Name")
-│   ├── description (Text: "Lorem ipsum...")
-│   └── price (Text: "$99.00")
-└── button (Instance of #Button)
-```
-
-**Command:**
-```bash
-npx @promptui-lib/cli generate bootstrap
+```scss
+// Cores extraídas do Figma
+$color-primary: #3b82f6;
+$color-primary-hover: #2563eb;
+$color-secondary: #64748b;
+$color-success: #22c55e;
+$color-warning: #f59e0b;
+$color-error: #ef4444;
+$color-background: #ffffff;
+$color-surface: #f8fafc;
+$color-text-primary: #1e293b;
+$color-text-secondary: #64748b;
+$color-border: #e2e8f0;
+
+// Espaçamentos (baseado no gap/padding do Figma)
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-2xl: 48px;
+
+// Border Radius
+$radius-none: 0;
+$radius-small: 4px;
+$radius-medium: 8px;
+$radius-large: 12px;
+$radius-xl: 16px;
+$radius-full: 9999px;
+
+// Tipografia
+$font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+$font-family-mono: "Fira Code", monospace;
+
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 20px;
+$font-size-2xl: 24px;
+$font-size-3xl: 30px;
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Sombras
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+// Transições
+$transition-fast: 150ms ease;
+$transition-normal: 200ms ease;
+$transition-slow: 300ms ease;
 ```
 
-**Result:**
+**Tailwind CSS:**
 
 ```tsx
-// src/components/molecules/CardProduct/card-product.tsx
-import type { ReactNode } from 'react';
-
-export interface ICardProductProps {
-  children?: ReactNode;
-  className?: string;
-}
-
-export const CardProduct = ({ children, className = '' }: ICardProductProps) => {
+export const Button = ({ children, className = "" }: IButtonProps) => {
   return (
-    <div className={`card ${className}`.trim()}>
-      <img className="card-img-top" alt="Product" />
-      <div className="card-body">
-        <h5 className="card-title fw-bold">Product Name</h5>
-        <p className="card-text text-muted">Lorem ipsum...</p>
-        <p className="h4 text-primary fw-bold">$99.00</p>
-        <button className="btn btn-primary w-100">Buy Now</button>
-      </div>
-    </div>
+    <button
+      className={`flex items-center gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors ${className}`.trim()}
+    >
+      <span>{children}</span>
+    </button>
   );
 };
 ```
 
----
-
-### Example 3: Header with Tailwind CSS
+**Material UI:**
 
-**In Figma:** Frame named `#HeaderNav`
+```tsx
+import { Button as MuiButton, Box, Typography } from "@mui/material";
 
-**Command:**
-```bash
-npx @promptui-lib/cli generate tailwind
+export const Button = ({ children, className = "" }: IButtonProps) => {
+  return (
+    <MuiButton
+      variant="contained"
+      className={className}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 3,
+        py: 1.5,
+        borderRadius: 2,
+      }}
+    >
+      <Typography>{children}</Typography>
+    </MuiButton>
+  );
+};
 ```
 
-**Result:**
+**Bootstrap:**
 
 ```tsx
-// src/components/organisms/HeaderNav/header-nav.tsx
-export const HeaderNav = ({ className = '' }: IHeaderNavProps) => {
+export const Button = ({ children, className = "" }: IButtonProps) => {
   return (
-    <header className={`flex items-center justify-between px-6 py-4 bg-white shadow-sm ${className}`.trim()}>
-      <div className="flex items-center gap-2">
-        <img src="/logo.svg" className="h-8 w-8" alt="Logo" />
-        <span className="text-xl font-bold text-gray-900">Brand</span>
-      </div>
-      <nav className="flex items-center gap-8">
-        <a className="text-gray-600 hover:text-gray-900">Home</a>
-        <a className="text-gray-600 hover:text-gray-900">Products</a>
-        <a className="text-gray-600 hover:text-gray-900">About</a>
-      </nav>
-      <button className="px-4 py-2 bg-blue-500 text-white rounded-lg">
-        Sign In
-      </button>
-    </header>
+    <button
+      className={`btn btn-primary d-flex align-items-center gap-2 ${className}`.trim()}
+    >
+      <span>{children}</span>
+    </button>
   );
 };
 ```
 
----
-
-### Example 4: Button with Flutter
+**Ant Design:**
 
-**In Figma:** Frame named `#Button`
+```tsx
+import { Button as AntButton } from "antd";
 
-**Command:**
-```bash
-npx @promptui-lib/cli generate flutter
+export const Button = ({ children, className = "" }: IButtonProps) => {
+  return (
+    <AntButton
+      type="primary"
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        height: "auto",
+        padding: "12px 24px",
+        borderRadius: 8,
+      }}
+    >
+      {children}
+    </AntButton>
+  );
+};
 ```
 
-**Result:**
+**Flutter:**
 
 ```dart
-/// Button
-/// Generated by PromptUI (Flutter)
-
-import 'package:flutter/material.dart';
-
 class Button extends StatelessWidget {
-  const Button({super.key});
+  final Widget child;
+  final VoidCallback? onPressed;
+
+  const Button({Key? key, required this.child, this.onPressed}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 24),
-      decoration: BoxDecoration(
-        color: Theme.of(context).primaryColor,
-        borderRadius: BorderRadius.circular(8),
+    return ElevatedButton(
+      onPressed: onPressed,
+      style: ElevatedButton.styleFrom(
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+        ),
       ),
-      child: Text('Click me'),
+      child: child,
     );
   }
 }
 ```
 
----
-
-### Example 5: Button with SwiftUI
-
-**In Figma:** Frame named `#Button`
-
-**Command:**
-```bash
-npx @promptui-lib/cli generate swiftui
-```
-
-**Result:**
+**SwiftUI:**
 
 ```swift
-/// Button
-/// Generated by PromptUI (SwiftUI)
-
-import SwiftUI
-
 struct Button: View {
+    let label: String
+    let action: () -> Void
+
     var body: some View {
-        Text("Click me")
-            .padding(.horizontal, 24)
-            .padding(.vertical, 8)
-            .background(.blue)
-            .foregroundColor(.white)
-            .cornerRadius(8)
+        SwiftUI.Button(action: action) {
+            Text(label)
+                .padding(.horizontal, 24)
+                .padding(.vertical, 12)
+                .background(Color.blue)
+                .foregroundColor(.white)
+                .cornerRadius(8)
+        }
     }
 }
-
-#Preview {
-    Button()
-}
 ```
 
 ---
 
-## Commands
-
-| Command | Description |
-|---------|-------------|
-| `npx @promptui-lib/cli init` | Configure the project |
-| `npx @promptui-lib/cli generate` | Generate components (React + SCSS) |
-| `npx @promptui-lib/cli generate bootstrap` | Generate with Bootstrap |
-| `npx @promptui-lib/cli generate mui` | Generate with Material UI |
-| `npx @promptui-lib/cli generate tailwind` | Generate with Tailwind CSS |
-| `npx @promptui-lib/cli generate flutter` | Generate with Flutter/Dart |
-| `npx @promptui-lib/cli generate swiftui` | Generate with SwiftUI |
-| `npx @promptui-lib/cli sync tokens` | Sync design tokens |
-
-## Options
-
-| Option | Description |
-|--------|-------------|
-| `-p, --preview` | Preview without saving |
-| `-o, --output <dir>` | Output directory |
-| `-f, --force` | Overwrite existing files |
-
----
+## Integração com Claude Code
 
-## Atomic Design
+O PromptUI inclui um Agente MCP (Model Context Protocol) para integração com IA.
 
-Components are automatically organized:
+### Configuração
 
-| Layer | Description | Examples |
-|-------|-------------|----------|
-| **atoms** | Simple components | Button, Input, Label, Icon |
-| **molecules** | Medium compositions | Card, SearchBar, FormField |
-| **organisms** | Complex compositions | Header, Footer, Sidebar |
-
----
-
-## Configuration
+```bash
+# Inicie o agente
+npx @promptui-lib/cli agent
+```
 
-Create `promptui.config.json`:
+Configure no Claude Code:
 
 ```json
 {
-  "figma": {
-    "fileId": "your-file-id"
-  },
-  "output": {
-    "basePath": "src/components"
+  "mcpServers": {
+    "promptui": {
+      "command": "npx",
+      "args": ["@promptui-lib/cli", "agent"]
+    }
   }
 }
 ```
 
----
-
-## Figma Support
-
-### What We Extract from Figma
-
-| Element | Supported | Notes |
-|---------|-----------|-------|
-| **Colors** | ✅ Yes | RGB, Hex, tokens |
-| **Spacing** | ✅ Yes | Padding, margin, gap |
-| **Typography** | ✅ Yes | Font size, weight, family |
-| **Border Radius** | ✅ Yes | All corners |
-| **Shadows** | ✅ Yes | Drop shadow, inner shadow |
-| **Layout** | ✅ Yes | Auto Layout → Flexbox |
-| **SVG/Icons** | ✅ Yes | Exported as inline SVG |
-| **Images** | ⚠️ Partial | Placeholder generated |
-| **Gradients** | ⚠️ Partial | Linear gradients |
-| **Animations** | ❌ No | Not available via Figma API |
-| **Prototype Links** | ❌ No | Prototype data only |
-
-### Bootstrap Components Mapping
-
-Name your Figma frames to auto-map to Bootstrap components:
-
-| Figma Frame Name | Bootstrap Output |
-|------------------|------------------|
-| `#Alert` | `<div class="alert">` |
-| `#Badge` | `<span class="badge">` |
-| `#Breadcrumb` | `<nav class="breadcrumb">` |
-| `#Button` | `<button class="btn">` |
-| `#ButtonGroup` | `<div class="btn-group">` |
-| `#Card` | `<div class="card">` |
-| `#Carousel` | `<div class="carousel">` |
-| `#Collapse` | `<div class="collapse">` |
-| `#Dropdown` | `<div class="dropdown">` |
-| `#ListGroup` | `<ul class="list-group">` |
-| `#Modal` | `<div class="modal">` |
-| `#Navbar` | `<nav class="navbar">` |
-| `#Nav` or `#Tabs` | `<ul class="nav">` |
-| `#Offcanvas` | `<div class="offcanvas">` |
-| `#Pagination` | `<nav class="pagination">` |
-| `#Progress` | `<div class="progress">` |
-| `#Spinner` | `<div class="spinner">` |
-| `#Toast` | `<div class="toast">` |
-| `#Tooltip` | `data-bs-toggle="tooltip"` |
-
-### Material UI Components Mapping
-
-| Figma Frame Name | MUI Output |
-|------------------|------------|
-| `#Alert` | `<Alert>` |
-| `#Avatar` | `<Avatar>` |
-| `#Badge` | `<Badge>` |
-| `#Breadcrumb` | `<Breadcrumbs>` |
-| `#Button` | `<Button>` |
-| `#Card` | `<Card>` |
-| `#Checkbox` | `<Checkbox>` |
-| `#Chip` | `<Chip>` |
-| `#Dialog` or `#Modal` | `<Dialog>` |
-| `#Drawer` | `<Drawer>` |
-| `#Input` or `#TextField` | `<TextField>` |
-| `#List` | `<List>` |
-| `#Menu` | `<Menu>` |
-| `#Pagination` | `<Pagination>` |
-| `#Progress` | `<LinearProgress>` |
-| `#Radio` | `<Radio>` |
-| `#Select` | `<Select>` |
-| `#Slider` | `<Slider>` |
-| `#Snackbar` | `<Snackbar>` |
-| `#Switch` | `<Switch>` |
-| `#Table` | `<Table>` |
-| `#Tabs` | `<Tabs>` |
-| `#Tooltip` | `<Tooltip>` |
-
-### Form Components
-
-| Figma Frame Name | React + SCSS | Bootstrap | MUI |
-|------------------|--------------|-----------|-----|
-| `#Input` | `<input>` | `<input class="form-control">` | `<TextField>` |
-| `#Select` | `<select>` | `<select class="form-select">` | `<Select>` |
-| `#Checkbox` | `<input type="checkbox">` | `<input class="form-check-input">` | `<Checkbox>` |
-| `#Radio` | `<input type="radio">` | `<input class="form-check-input">` | `<Radio>` |
-| `#Switch` | `<input type="checkbox">` | `<div class="form-switch">` | `<Switch>` |
-| `#Textarea` | `<textarea>` | `<textarea class="form-control">` | `<TextField multiline>` |
-| `#FormGroup` | `<div class="form-group">` | `<div class="mb-3">` | `<FormControl>` |
-
----
-
-## For Designers
-
-### Figma Rules
-
-1. **`#` prefix** - Add to frame name to export
-2. **Auto Layout** - Always use to maintain structure
-3. **Descriptive names** - `title`, `content`, not "Frame 1"
-4. **PascalCase** - `#ButtonPrimary`, not `#button-primary`
-
-### Correct structure example
-
-```
-#CardProduct (Frame, Auto Layout Vertical)
-├── image (Rectangle, Aspect Ratio 16:9)
-├── content (Frame, Auto Layout Vertical, Padding 16px)
-│   ├── title (Text, Heading/H3)
-│   ├── description (Text, Body/Small)
-│   └── price (Text, Heading/H2)
-└── actions (Frame, Auto Layout Horizontal)
-    └── button (Instance of #Button)
-```
-
----
-
-## Environment Variables
-
-| Variable | Description |
-|----------|-------------|
-| `FIGMA_TOKEN` | Figma access token |
-| `FIGMA_FILE_ID` | Figma file ID |
-
-### How to get Figma Token
-
-1. Go to [Figma Account Settings](https://www.figma.com/settings)
-2. Navigate to "Personal Access Tokens"
-3. Create a new token
-
-### How to get File ID
-
-The File ID is in your Figma file URL:
+### Exemplos de Prompts
 
 ```
-https://www.figma.com/file/ABC123xyz/MyProject
-                           ^^^^^^^^^^^
-                           This is the File ID
+"Gere o componente #Button do Figma usando Tailwind"
+"Gere todos os componentes marcados com Material UI"
+"Sincronize os design tokens para variáveis SCSS"
+"Preview do #LoginForm sem salvar"
 ```
 
 ---
 
-## Author
+## Autor
 
 **Desiree Menezes** - [@desireemenezes](https://github.com/desireemenezes)
 
 ---
 
-## License
+## Licença
 
-Proprietary - All rights reserved.
+Proprietário - Todos os direitos reservados.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/codegen",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "private": false,
   "description": "Code generator for PromptUI - generates React TSX and SCSS",
   "license": "UNLICENSED",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.13"
+    "@promptui-lib/core": "0.1.14"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",