pds

Generate a complete design system by providing your domain and branding details to automatically produce themed tokens, visual foundations, reusable components, and composition patterns. The system outputs approximately 89 light and dark tokens alongside 25 UI components and 4 layout patterns.

Yes, you can export your Pencil design system to production-ready React and Tailwind CSS. The export supports Tailwind CSS v3 or v4 and generates code for Next.js or Vite frameworks, allowing direct integration of your tokens and components into development environments.

Yes, the design system generator supports light and dark theming by creating approximately 89 themed tokens for both modes. It establishes a comprehensive visual foundation including color palettes, typography, spacing, elevation, and radius that automatically adapt across both light and dark themes.

Structure a UI kit by researching your business domain to establish a design brief, then generate foundational tokens, visual styles, and reusable components in batches. The system pauses for review after each phase, ensuring consistent UI foundations across multiple products before final component composition.

Build a design system in Pencil by inputting your domain and branding details to initiate automated research. The generator creates your design brief, establishes tokens and themes, and constructs visual foundations and components directly within a Pencil file, pausing for review checkpoints after each generation phase.