Resources and Tools

A growing collection of design tools, visual inspiration, AI articles, motion and 3D libraries, components, and podcasts that support my creative work.

Design and Visual Exploration Tools:

• Google Stitch - generates Vanilla Code
• Claude Design - generates Vanilla Code
• V0
• Figma Make
• Google Build
• Lovable
• Magic Patterns
• Figma - design tools + interacts with coding agents via MCP
• Paper - design tools + interacts with coding agents via MCP, generates Vanilla Code, or can generate pages in React.
• Pencil
• Subframe

Primitive Component Libraries:

• Tailwind
• ui.chadcn.com (built on top of Tailwind)
  • Styled:
    • 8bitcn.com
    • https://www.neobrutalism.dev/
• originui.com
• kibo-ui.com
• design.dev

Bigger Collections

• 21.dev - community-driven registry and marketplace for React UI components, marketing blocks, and hooks built with Tailwind CSS and shadcn/ui
• https://www.shadcn.io/awesome
• cult-ui.com
• tailark.com

Motion and Effects Libraries

• https://ui.aceternity.com/
• magicui.design
• reactbits.dev
• motion-primitives.com
• TweakCN - A fast themeing loop for shadcn (Customizer)

Motion Libraries:

• motion.dev - the friendly default for React
• Fancy Components (look for dependencies motion.dev, or GSAP)
• GSAP - timeline power, timeline, complex, orchestrated animations. Scrolling websites.
• Lenis - buttery smooth scroll

Gradient Libraries

• ShaderGradient - animated gradients, design-tool friendly (has dependencies)
• React Bits - plug-and-play gradient & aurora backgrounds (has dependencies)
• Where it shines - hero sections, backdrops, ambient mood

3D Libraries

• Three.js - the foundation
• React Three Fiber - 3D as react components
• Spline Runtime - run interactive Spline files in a site

Converting Figma Design System Tokens int ShadCN Theme

1. Use plugin “Tailwind Config Exporter” to generate and copy code: https://www.figma.com/community/plugin/1451132593944840937/tailwind-config-exporter
2. Use Tailwind Theme Converter Skill to convert the exported code to normalize the names into Tailwind theme.

Design . md files

• https://github.com/VoltAgent/awesome-design-md/tree/main/design-md - collection of real files
• https://www.designmd.co/ - generator and files
• https://impeccable.style/ - opinionated design skills
• Git-Hub spec-kit - the requirements / design / task trio

Figma Plugins

• https://lets-vibe.com/figma-capture (caputres the screen in your local host, so that you cna paste it back into figma)

Live prototype Commenting Tools:

• https://inflight.co/
• https://www.agentation.com/ - turns UI annotations into structured context: click an element in the browser, leave a note, and it captures the CSS selectors, computed styles, component hierarchy, and file paths for your agent — via copy-paste or MCP. Like leaving sticky notes on your live prototype that the agent can read.