Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE.
npx design-bites add pencil.dev
CSS Spring Easing Generator
A tool designed to intuitively generate spring animations for CSS linear(). Includes presets and customizable inputs for perceptual duration and bounce.
Tempo
Discover AI-powered tools at Tempo to prompt, develop, and design code effortlessly. Collaborate seamlessly with advanced solutions for faster, smarter web development.
AIcss
UI components for AI agent conversations, including states, tool calls, and tables, available in React, Vue, and Svelte.
Tokens captured from Pencil — palette, type, and components rendered live.
Sampled from CSS custom properties, body styles, and surface luminance.
Captured fonts and scale, rendered with system fallbacks.
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
