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 289 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
Oct 3, 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
Oct 22, 2026 - TypeScript
Resources for design engineers.
-
Updated
Oct 24, 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
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
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
Oct 25, 2026 - TypeScript
Figma-style layout grids, rulers, snapping guides, and DOM geometry inspection for browser-based apps
-
Updated
Aug 20, 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
Oct 29, 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 motion craft from SoraLabs — animating-icons & motion-meaning
-
Updated
Aug 28, 2026 - TypeScript
Agent skills for the product process: design, build, review, behavior specs, verification recordings, brand assets.
-
Updated
Aug 30, 2026 - HTML
Claude Agent Skill that eliminates generic AI-generated design. Stop your AI shipping the same purple-gradient, Inter-font, three-feature-card website as everyone else.
ui-design frontend ux developer-tools web-design design-system claude design-engineering llm prompt-engineering anthropic ai-slop agent-skills claude-code claude-skill
-
Updated
Oct 2, 2026 - Python
🧱 A composable input for AI apps in React.
react chat autocomplete composer typescript ui ai input accessibility react-components contenteditable prompt mentions slash-commands design-engineering
-
Updated
Oct 12, 2026 - TypeScript
✨ A design tool selection effect for React.
react typescript ui animation react-components motion typography selection frame figma text-animation letter-spacing design-engineering
-
Updated
Sep 20, 2026 - TypeScript
The design system copilot that builds Figma from HTML using your real components and tokens. Learns your system, surfaces your gaps.
ui-design design-systems mcp design-tokens figma design-system claude design-automation figma-api figma-plugin design-engineering html-to-figma ai-design design-systems-and-ui-kits model-context-protocol mcp-server figma-design-system design-copilot design-system-copilot design-system-audit
-
Updated
Oct 9, 2026 - JavaScript
Faye & Cove's evidence-led Codex skill for real frontend work, with ImageGen opt-in
-
Updated
Oct 25, 2026 - Python
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."