一键在 Manus 中运行任何 Skill

tailwind-design-system

星标2

分支1

更新时间2026年4月29日 00:58

Cria e mantém o design system com Tailwind CSS v4 para projetos Rails. Estabelece tokens de design (cores, tipografia, espaçamento, sombras) via CSS Variables no application.css. Use quando precisar definir ou atualizar a identidade visual do projeto, escolher uma paleta, configurar fontes ou criar um sistema de design consistente. Palavras-chave: "paleta de cores", "tipografia", "design tokens", "tema", "identidade visual", "configurar Tailwind", "criar design system". QUANDO NÃO: Para componentes específicos (ver rails-components) ou animações (ver rails-animations).

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

tarv7

tarv7/ai-spec-driven-development-template-rails

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

相关职业SOC

基于 SOC 职业分类

网页与数字界面设计师计算机与数学类职业·SOC 15-1255

SKILL.md

readonly

同仓库更多 Skills

同仓库

cria-design

tarv7/ai-spec-driven-development-template-rails

Orquestra a criação ou atualização do protótipo visual (telas/wireframes) de uma feature a partir do PRD existente. Gera um único arquivo `ai-sdd/prd-[slug]/design.md` por feature. Paper-first: tenta usar o Paper Desktop (via MCP) chamando design-in-paper, que registra cada tela com seu Paper artboard ID. Fallback agnóstico: se o Paper não estiver disponível ou o usuário preferir outra ferramenta (Figma, Sketch, screenshots, descrição textual), registra as telas com referências externas no mesmo design.md. Detecta automaticamente criação (sem design.md) vs edição (design.md existe). Use quando o usuário pedir "criar o design", "criar protótipo", "wireframe da feature", "atualizar design", "/cria-design [feature-slug]". Posição no pipeline: após cria-prd, antes de cria-techspec. QUANDO NÃO: para criar PRD (cria-prd), para implementar telas em código (executa-task + paper-to-rails), para criar techspec (cria-techspec).

2026-05-282

cria-tasks

tarv7/ai-spec-driven-development-template-rails

Converte PRD e Tech Spec em uma lista detalhada e sequencial de tarefas de implementação. Cada tarefa é um entregável funcional e incremental com sua própria suíte de testes. Gera tasks.md (resumo) e arquivos de tarefas individuais com subtarefas, critérios de sucesso e testes. Use quando o usuário solicitar criar tarefas, decompor trabalho ou planejar implementação a partir de PRD e Tech Spec existentes. Não use para criação de PRD, criação de tech spec ou implementação real de código.

2026-05-282

cria-techspec

tarv7/ai-spec-driven-development-template-rails

Cria Especificações Técnicas a partir de um PRD existente, traduzindo requisitos de produto em decisões arquiteturais e orientação de implementação. Realiza análise profunda do projeto, pesquisa técnica, pesquisa regras de negócio e esclarecimento com o usuário. Use quando o usuário solicitar criar uma spec técnica, definir arquitetura ou planejar implementação de uma funcionalidade com PRD existente. Não use para criação de PRD, detalhamento de tarefas ou implementação direta de código.

2026-05-282

design-in-paper

tarv7/ai-spec-driven-development-template-rails

Cria ou atualiza wireframes e designs de UI no Paper (paper.design) a partir de um PRD existente. Gera artboards estruturados e Rails-ready (flex layouts, tokens do design system, conteúdo real) para revisão humana antes da techspec. REQUER: Paper Desktop app rodando + MCP Paper configurado no editor. Use quando o usuário pedir "crie o design no Paper", "wireframe no Paper", "gere os artboards", "monte a UI no Paper a partir do PRD". QUANDO NÃO: Use sem Paper disponível. Para converter design em código Rails (ver paper-to-rails). Para criar o PRD (ver cria-prd). PRÉ-REQUISITO NO PIPELINE AI-SDD: após cria-prd, antes de cria-techspec.

2026-05-282

executa-task

tarv7/ai-spec-driven-development-template-rails

Implementa tarefas de funcionalidades lendo o contexto do PRD/TechSpec, analisando dependências, executando a implementação com testes e verificações de qualidade. Marca as tarefas como concluídas em tasks.md e aciona revisão ao finalizar. Use quando o usuário solicitar implementar uma tarefa, executar uma tarefa ou começar a trabalhar em um número de tarefa específico. Não use para criar tarefas, rodar QA, revisão de código ou correção de bugs avulsos.

2026-05-282

paper-to-rails

tarv7/ai-spec-driven-development-template-rails

Converte designs do Paper (paper.design) em código Rails idiomático: views ERB, partials, helpers, layouts e i18n. Lê o design via Paper MCP (get_jsx, get_computed_styles, get_screenshot) e produz código Rails seguindo os padrões do projeto (Tailwind CSS v4, Hotwire, Stimulus). REQUER: Paper Desktop app rodando + MCP Paper configurado no editor. Use quando o usuário pedir "implemente o design do Paper", "converta esse artboard em Rails", "gere o código a partir do Paper". Pode ser invocada diretamente ou pela skill executa-task quando a task tem referências de artboards Paper em seu arquivo de task ou em design.md. QUANDO NÃO: Use sem Paper disponível. Para criar designs no Paper (ver design-in-paper).

2026-05-282

name	tailwind-design-system
description	Cria e mantém o design system com Tailwind CSS v4 para projetos Rails. Estabelece tokens de design (cores, tipografia, espaçamento, sombras) via CSS Variables no application.css. Use quando precisar definir ou atualizar a identidade visual do projeto, escolher uma paleta, configurar fontes ou criar um sistema de design consistente. Palavras-chave: "paleta de cores", "tipografia", "design tokens", "tema", "identidade visual", "configurar Tailwind", "criar design system". QUANDO NÃO: Para componentes específicos (ver rails-components) ou animações (ver rails-animations).
license	MIT
compatibility	Tailwind CSS v4, Rails 8.1+, Propshaft

Você é um especialista em design systems com foco em Tailwind CSS v4 para Rails. Seu objetivo é criar uma base visual consistente e coesa via CSS Variables — a fonte única da verdade para cores, tipografia e espaçamento em todo o projeto.

Fundamentos: Tailwind CSS v4 + Rails

No Tailwind v4, a configuração é CSS-first — tudo vai no application.css via @theme. Não há mais tailwind.config.js obrigatório para tokens básicos.

/* app/assets/stylesheets/application.css */
@import "tailwindcss";

@theme {
  /* Seus tokens aqui */
}

Passo 1: Escolha do Tipo de Produto

Antes de definir tokens, identifique o tipo de produto para guiar as escolhas:

Tipo	Estética	Paleta Base	Fontes Típicas
SaaS B2B	Clean, profissional, neutro	Slate/Zinc + accent azul/violeta	Inter, Plus Jakarta Sans
SaaS B2C	Amigável, colorido, acessível	Cores vibrantes + neutros quentes	DM Sans, Outfit
Dashboard/Admin	Denso, funcional, sério	Cinzas neutros + accent sutil	Inter, Geist
Landing/Marketing	Impactante, ousado	Gradientes + cor primária forte	Sora, Cal Sans, Plus Jakarta
Marketplace	Confiável, limpo	Azul/verde + neutros	Inter, DM Sans
Fintech	Preciso, seguro, premium	Azul profundo + dourado/verde	Sora, Inter
Saúde	Acolhedor, limpo, confiável	Verde/azul suave + branco	DM Sans, Nunito

Passo 2: Paletas Prontas por Tipo

SaaS B2B — "Slate & Indigo"

@theme {
  --color-primary:       oklch(52% 0.22 264);   /* indigo-600 */
  --color-primary-hover: oklch(46% 0.22 264);   /* indigo-700 */
  --color-primary-light: oklch(95% 0.08 264);   /* indigo-50 */

  --color-success:       oklch(55% 0.18 142);
  --color-warning:       oklch(72% 0.19 65);
  --color-error:         oklch(52% 0.22 25);
  --color-info:          oklch(56% 0.19 230);

  --color-surface:          oklch(98% 0.005 264);
  --color-surface-elevated: oklch(100% 0 0);
  --color-surface-sunken:   oklch(95% 0.01 264);

  --color-text-primary:   oklch(13% 0.015 264);
  --color-text-secondary: oklch(35% 0.015 264);
  --color-text-muted:     oklch(55% 0.01 264);
  --color-text-disabled:  oklch(72% 0.01 264);

  --color-border:         oklch(88% 0.01 264);
  --color-border-strong:  oklch(75% 0.02 264);
}

SaaS B2C — "Rose & Amber" (caloroso, jovem)

@theme {
  --color-primary:       oklch(54% 0.23 15);    /* rose-600 */
  --color-primary-hover: oklch(48% 0.23 15);
  --color-primary-light: oklch(97% 0.08 15);

  --color-surface:          oklch(99% 0.005 50);
  --color-surface-elevated: oklch(100% 0 0);
  --color-surface-sunken:   oklch(97% 0.01 50);

  --color-text-primary:   oklch(14% 0.02 15);
  --color-text-secondary: oklch(38% 0.02 15);
  --color-text-muted:     oklch(58% 0.01 15);

  --color-border:         oklch(90% 0.01 50);
}

Dashboard/Admin — "Zinc" (neutro denso)

@theme {
  --color-primary:       oklch(56% 0.20 230);   /* sky-600 */
  --color-primary-hover: oklch(50% 0.20 230);
  --color-primary-light: oklch(96% 0.06 230);

  --color-surface:          oklch(97% 0 0);
  --color-surface-elevated: oklch(100% 0 0);
  --color-surface-sunken:   oklch(94% 0 0);
  --color-sidebar:          oklch(12% 0.01 264);
  --color-sidebar-text:     oklch(80% 0.01 264);
  --color-sidebar-active:   oklch(56% 0.20 230);

  --color-text-primary:   oklch(12% 0 0);
  --color-text-secondary: oklch(32% 0 0);
  --color-text-muted:     oklch(52% 0 0);

  --color-border:         oklch(90% 0 0);
}

Fintech/Premium — "Slate & Emerald"

@theme {
  --color-primary:       oklch(50% 0.18 156);   /* emerald-700 */
  --color-primary-hover: oklch(43% 0.18 156);
  --color-primary-light: oklch(96% 0.06 156);

  --color-accent:        oklch(72% 0.19 65);    /* âmbar/dourado */

  --color-surface:          oklch(98% 0.005 220);
  --color-surface-elevated: oklch(100% 0 0);

  --color-text-primary:   oklch(11% 0.02 220);
  --color-text-muted:     oklch(50% 0.01 220);

  --color-border:         oklch(88% 0.01 220);
}

Passo 3: Sistema de Tipografia

Escala de Tamanhos (padrão)

@theme {
  /* Escala de tipo — base 16px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
}

Pares de Fontes Recomendados

Par	Display	Body	Uso
Clássico SaaS	Inter 600-700	Inter 400	Versátil, todo produto
Premium B2B	Plus Jakarta Sans 700	Plus Jakarta Sans 400	SaaS enterprise
Tech/Dev	Sora 600	DM Sans 400	Fintech, dev tools
Amigável B2C	Nunito 700	DM Sans 400	Saúde, educação, consumer
Editorial	Fraunces 700	Instrument Sans 400	Blog, marketing sofisticado
Minimalista	Geist 600	Geist 400	Dashboard, admin

/* Exemplo: Inter (Google Fonts) */
@theme {
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;
}

<%# No <head> do layout — preconnect para performance %>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Passo 4: Sombras, Raios e Bordas

@theme {
  /* Border radius — consistência em todo projeto */
  --radius-xs: 0.25rem;   /* 4px  — badges, tags pequenas */
  --radius-sm: 0.375rem;  /* 6px  — inputs, botões pequenos */
  --radius-md: 0.625rem;  /* 10px — botões, cards pequenos */
  --radius-lg: 1rem;      /* 16px — cards principais */
  --radius-xl: 1.5rem;    /* 24px — modais, drawers */
  --radius-2xl: 2rem;     /* 32px — hero sections */

  /* Sombras semanticamente nomeadas */
  --shadow-xs:       0 1px 2px oklch(0% 0 0 / 5%);
  --shadow-sm:       0 1px 3px oklch(0% 0 0 / 8%), 0 1px 2px oklch(0% 0 0 / 6%);
  --shadow-card:     0 1px 3px oklch(0% 0 0 / 8%), 0 4px 16px oklch(0% 0 0 / 6%);
  --shadow-elevated: 0 4px 6px oklch(0% 0 0 / 7%), 0 12px 32px oklch(0% 0 0 / 10%);
  --shadow-modal:    0 8px 16px oklch(0% 0 0 / 10%), 0 32px 64px oklch(0% 0 0 / 15%);
}

Passo 5: Tokens de Interação e Estado

@theme {
  /* Transições padrão */
  --transition-fast:   150ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   300ms ease-out;

  /* Z-index scale */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

Passo 6: Estados Semânticos (Alerts, Badge, Flash)

@theme {
  /* Success */
  --color-success-bg:     oklch(97% 0.06 142);
  --color-success-text:   oklch(35% 0.18 142);
  --color-success-border: oklch(80% 0.14 142);

  /* Warning */
  --color-warning-bg:     oklch(98% 0.06 65);
  --color-warning-text:   oklch(40% 0.18 65);
  --color-warning-border: oklch(82% 0.14 65);

  /* Error */
  --color-error-bg:       oklch(97% 0.06 25);
  --color-error-text:     oklch(38% 0.20 25);
  --color-error-border:   oklch(80% 0.16 25);

  /* Info */
  --color-info-bg:        oklch(97% 0.06 230);
  --color-info-text:      oklch(38% 0.18 230);
  --color-info-border:    oklch(80% 0.14 230);
}

Uso das Variáveis nas Views ERB

<%# Uso dos tokens como classes Tailwind v4 %>
<div class="bg-(--color-surface-elevated) text-(--color-text-primary)
            border border-(--color-border) rounded-(--radius-lg)
            shadow-(--shadow-card)">
  <h2 class="text-xl font-semibold text-(--color-text-primary)">
    Título
  </h2>
  <p class="text-sm text-(--color-text-muted)">
    Descrição
  </p>
</div>

Checklist do Design System

Todos os tokens definidos no @theme do application.css
Paleta escolhida adequada ao tipo de produto
Fontes importadas com preconnect para performance
Sombras e raios consistentes (sem valores avulsos nas views)
Estados semânticos (success, warning, error, info) definidos
Nenhuma cor hex hardcoded diretamente nas views

Anti-padrões

Não faça	Faça
`class="bg-indigo-600"` hardcoded	`class="bg-(--color-primary)"`
`@apply` extensivamente no CSS	Classes Tailwind diretamente no ERB
Tokens em `tailwind.config.js`	Tokens em `@theme` no CSS (v4)
Cores diferentes para o mesmo conceito	Um token, uma cor, consistência total
Sombras inventadas por view	`shadow-(--shadow-card)` do design system