Blog
Para quem já sabe o básico e quer ir fundo. Aqui o assunto é como os modelos funcionam em produção: memória, roteamento, ferramentas, agentes. O lado técnico que pouca gente explica direito.
Design Tokens Community Group spec, Style Dictionary, TokensStudio. 3-tier model: primitives (#0d6efd) → semantic (color-action) → component (button-bg). Tokens em CSS custom properties vs build-time vars.
Theming via CSS custom properties (color-mix, light-dark()). prefers-color-scheme + class strategy + cookie/localStorage para persist. Evitar FOUC com inline script. Theming multi-brand (white-label).
Por que escrever Modal/Dropdown/Select próprio é loucura. Radix UI (React-only, WAI-ARIA correto), Ark UI (multi-framework, Zag.js state machines), shadcn/ui copy-paste pattern. Por que substituiu MUI/Chakra em 2024-26.
Tailwind v4 (lançado 2025): @theme directive em CSS (não tailwind.config.js), engine Lightning CSS, container queries first-class, @starting-style, plugins via CSS. Migration de v3.
Storybook 9 (2025) Vite-first, test addon nativo (Vitest browser mode), interaction tests, accessibility addon. Chromatic para visual regression (screenshots diff cross-browser, baselines automáticos). Workflow CI completo.
DS é uma lib publicada — precisa de versionamento sério. changesets (Atlassian), semver na prática (breaking change real), deprecation lifecycle, codemods (jscodeshift) para auto-migrar consumers. RFC process.
A11y começa no DS — se você acerta lá, todo produto herda. WAI-ARIA Authoring Practices, focus trap em modal, escape patterns, aria-live regions, screen reader testing (NVDA/VoiceOver/JAWS). Axe core, Lighthouse CI.
Pipeline de Figma para código real. Variables Figma → Style Dictionary, MCP Figma server (Claude/Cursor lê design), Anima/Builder.io export, Locofy. Por que "Figma to code" 100% automático ainda não funciona em 2026.