# ui-design-system

> Toolkit de sistema de design de UI para Designer de UI Sénior, incluindo geração de design tokens, documentação de componentes, cálculos de design responsi

- Fonte: https://doutorai.pt/componentes/skills__ui-design-system
- Tipo: Skills
- Categoria: Design criativo
- Downloads: 6761
- Site: Doutor AI (https://doutorai.pt) - ferramentas de IA para pequenos negócios em português

Componente da comunidade open-source, selecionado, traduzido e adaptado pelo Doutor AI.

## Para que serve e como usar

Uma **skill** que ensina o Claude Code a executar bem tarefas de design criativo. É conhecimento empacotado que o modelo passa a usar sempre que for relevante.

1. Instale a skill (comando acima).
2. No Claude Code, descreva o que precisa - a skill ativa-se sozinha quando o contexto encaixa.
3. Não precisa de decorar comandos: fala em linguagem natural e a skill faz o resto.

## Instalar (Claude Code)

```bash
mkdir -p .claude/skills/ui-design-system && curl -fsSL https://doutorai.pt/data/lib/skills__ui-design-system.md -o .claude/skills/ui-design-system/SKILL.md
```

Cole este comando no terminal, na pasta do seu projeto, e o componente é instalado automaticamente.

## Conteúdo

```
---
name: ui-design-system
description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
---

# UI Design System

Professional toolkit for creating and maintaining scalable design systems.

## Core Capabilities
- Design token generation (colors, typography, spacing)
- Component system architecture
- Responsive design calculations
- Accessibility compliance
- Developer h

- 🔒 Conteúdo completo no plano Pro (7,99€/mês) -
```

## Onde este componente é recomendado

Escolhemos este componente à mão para [Agentes e skills para frontend e interfaces](https://doutorai.pt/para/frontend-e-interfaces). Nessas páginas explicamos em que situação faz sentido e com que outros componentes se combina.

## Componentes relacionados

- [PocketBase API Rules](https://doutorai.pt/componentes/skills__pocketbase-api-rules): Regras de API e expressões de filtro para controlo de acessos do PocketBase. Use ao definir permissões, escrever expressões de filtro, confi
- [PocketBase Collections](https://doutorai.pt/componentes/skills__pocketbase-collections): Design de coleções e esquemas para o PocketBase. Use ao criar coleções, desenhar esquemas, adicionar campos, configurar relações ou escolher
- [PocketBase Deploy](https://doutorai.pt/componentes/skills__pocketbase-deploy): Deployment em produção para PocketBase. Use ao fazer o deploy do PocketBase para um servidor, configurar Docker, configurar systemd, reverse
- [PocketBase Hooks](https://doutorai.pt/componentes/skills__pocketbase-hooks): Hooks de JavaScript no lado do servidor para o PocketBase (pb_hooks). Use ao escrever rotas personalizadas, hooks de eventos, cron jobs, env
- [PocketBase Migrations](https://doutorai.pt/componentes/skills__pocketbase-migrations): Migrações de esquema e versionamento para o PocketBase. Use ao criar migrações, gerir versões de esquemas, sincronizar coleções entre ambien
- [PocketBase SDK](https://doutorai.pt/componentes/skills__pocketbase-sdk): Uso do SDK de JavaScript para aplicações cliente PocketBase. Use ao chamar o PocketBase a partir do frontend ou Node.js, autenticar utilizad

## Poupe horas todas as semanas com IA, sem complicações

O **Doutor AI** dá-lhe 1859 prompts de IA prontos a copiar, por indústria e em português simples - mais uma biblioteca técnica completa para quem quer ir mais longe. [Ver planos →](https://doutorai.pt/precos)

---
Conteúdo de Doutor AI (https://doutorai.pt). Ao citar, indique a fonte: https://doutorai.pt/componentes/skills__ui-design-system