Animated components for design engineers. 150+ free shadcn/ui components, built with Tailwind CSS and Motion. MIT licensed.
-
Updated
Oct 29, 2026 - TypeScript
#
design-engineering
Here are 326 public repositories matching this topic...
A library of creative canvas components. Real HTML with WebGL effects running over it. React, Vue, Svelte, vanilla.
react components threejs typescript ui canvas vue frontend creative-coding shaders animation nextjs glsl svelte component-library ui-library design-engineering shadcn weggl
-
Updated
Nov 8, 2026 - TypeScript
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
nodejs css cli open-source design-systems mcp reverse-engineering developer-experience design-tokens tailwind-css design-ops design-to-code playwright design-engineering dtcg claude-code ui-audit brand-audits design-md token-drift
-
Updated
Nov 1, 2026 - TypeScript
Resources for design engineers.
-
Updated
Nov 7, 2026 - TypeScript
Voice AI components using OpenAI Realtime API to copy and paste into your Nextjs projects built with TailwindCSS for building modern Voice AI applications with WebRTC.
ui animation nextjs webrtc openai component-library ui-components voice-assistant ui-library tailwindcss framer-motion voice-ai design-engineering shadcn vapiblocks openai-realtime-api realtime-beta
-
Updated
Dec 31, 2024 - TypeScript
Premium React components you install with shadcn. Styled by your theme, yours to change. Free and open source.
react components typescript reactjs nextjs motion ui-library tailwindcss design-engineering shadcn-ui shadcn
-
Updated
Nov 10, 2026 - TypeScript
Real letters by ordinary people, 1395–1929, written out live by writers who never existed. Every hand is a free font.
react fonts procedural-generation typography public-domain text-editor interaction-design letters handwriting micro-interactions generative-design vite design-engineering open-source-fonts
-
Updated
Nov 8, 2026 - TypeScript
200 web animation examples with copy-ready AI prompts + MotionLens: turn any site's animation into a prompt. React, TypeScript, Framer Motion, Three.js
react ui-design threejs typescript frontend inspiration animation developer-tools web-design motion-design animation-library micro-interactions css-animation web-animations vite framer-motion design-engineering prompt-engineering ai-prompts cursor-rules
-
Updated
Sep 19, 2026 - TypeScript
A liquid glass material you can take apart, tune and copy as CSS: a refracting thick rim, wallpaper-adaptive ink and live wallpapers, in a playground.
css playground webgl svg-filters refraction backdrop-filter design-engineering glassmorphism liquid-glass
-
Updated
Nov 5, 2026 - JavaScript
Take a real UI component apart. A Claude Code skill + runtime that explodes a live component into paint layers, states and tokens. Nothing is redrawn, no number is typed.
react css design-systems isometric ui-components design-tokens design-engineering agent-skills claude-code component-documentation
-
Updated
Oct 13, 2026 - JavaScript
Design engineering for AI coding tools. Brand identity + design projects, from strategy to code.
-
Updated
Jun 7, 2026 - JavaScript
The design layer for agentic AI — design context, interface checks, and verification for coding agents.
cli design-systems typescript frontend mcp design-tokens figma ai-agents tailwindcss figma-to-code design-engineering shadcn coding-agents agentic-ai mcp-server agent-skills shadcn-registry codex-plugin ux-audit ui-quality
-
Updated
Nov 4, 2026 - TypeScript
Figma-style layout grids, rulers, snapping guides, and DOM geometry inspection for browser-based apps
-
Updated
Aug 20, 2026 - TypeScript
Skills I use with coding agents for interface, motion, sound and launch film work.
svg ui skills animation cursor design-tokens codex sound-design design-engineering agent-skills claude-code launch-video
-
Updated
Nov 10, 2026 - JavaScript
Design CLI for Claude Code, Codex and Antigravity: describe the UI in plain words, get web, Figma and SwiftUI output through deterministic taste gates. FREE + source-available (PolyForm Shield).
cli typescript accessibility developer-tools design-tokens figma codex design-system ai-agents tailwindcss swiftui figma-plugin design-engineering ui-generation antigravity claude-code design-cli
-
Updated
Nov 10, 2026 - TypeScript
A place with 9 fun framer motion creations 😊
-
Updated
Feb 6, 2025 - TypeScript
CellMotion：可编辑的文字、图标与媒体动效，导出 PNG/GIF/MP4，可交给 AI 前端复用 / Editable motion for type, icons and media
-
Updated
Nov 8, 2026 - JavaScript
An open-source catalog for discovering, sharing and curating design and web development resources.
open-source design ui-design share web-development frontend resources design-resources design-engineering
-
Updated
Jul 23, 2026 - TypeScript
Agent skills for the product process: design, build, review, behavior specs, verification recordings, brand assets.
-
Updated
Aug 30, 2026 - HTML
Agent skills for motion craft from SoraLabs — animating-icons & motion-meaning
-
Updated
Aug 28, 2026 - TypeScript
Add this topic to your repo
To associate your repository with the design-engineering topic, visit your repo's landing page and select "manage topics."