TAU-HOME.COM
LOADING

400 Free Interactive UI/UX Prompts and Agent Skills for Claude Code and Codex

Creator Lucian (@lucian__03) has added 200 animated UI components to the open-source Lucian UX/UI Prompt library, expanding it to 400 designs. Here is how to co

tau · October 16, 2026

#UIUX #VibeCoding #ClaudeCode #Codex #AgentSkills #OpenSource #Frontend

400 Free Interactive UI/UX Prompts and Agent Skills for Claude Code and Codex

Building polished micro-animations and interactive front-end elements from scratch often demands significant styling time and manual tuning during vibe coding sessions. On October 16, 2026, creator Lucian (@lucian__03) announced a major update to the open-source 'Lucian UX/UI Prompt' project, adding 200 new animated UI components to expand the library from its original 200 to a total of 400 designs.

Gallery interface of Lucian open-source animated interactive UI/UX components integrated with Claude Code and Codex

Image source: 루샨 lucian (@lucian__03 via X)

Rather than merely inflating the component count, this release focuses on practical interactions and visual animations built for real-world production websites. The entire collection is published as 100% free open-source software, supporting both light and dark themes as well as bilingual Korean and English interfaces. It is free to use for both personal projects and commercial applications.

400 Interactive Components and Key Motion Features

The library moves beyond static cards and basic layouts, providing rich motion interactions that respond dynamically to user input. Key highlights from the 200 newly added components include:

  • 3D Rising Data Charts: Dimensional visual analytics where data columns rise dynamically above flat statistical graphics.
  • Automation Flowcharts: Clear workflow diagrams that visually communicate multi-step processes and pipeline stages.
  • Criterion-Based Bubble Regrouping: Dynamic bubble elements that fluidly reassemble and align based on user-selected criteria.
  • Wave Typography Animations: Smooth, eye-catching kinetic text effects.
  • Click-Reactive Network Graphs: Interactive node networks that respond in real time to user clicks and hover gestures to showcase entity relationships.
  • Micro-Interaction UI Elements: Animated submit buttons with paper planes taking flight, day/night toggle switches, and interactive hover cards.

Two Integration Workflows: Direct Prompt Copying vs. npx Agent Skills

The Lucian UX/UI Prompt library supports two primary implementation paths: manual prompt copying from the web gallery and automated retrieval through terminal-based AI coding agents.

1. Direct Prompt Copying

A straightforward approach for reviewing components visually in the web gallery before bringing them into Claude Code or Codex.

  1. Browse and select the desired UI component in the web gallery.
  2. Click the "Copy Prompt" button.
  3. Paste the prompt directly into your Claude Code or Codex session to generate the component.

2. Automated Agent Integration via npx skills

You can also install the skill package directly into your coding harness, allowing the AI agent to search and insert components using natural language requests.

npx skills add Seokwoooo/lucian-uxui
  • Example Prompt: Use the lucian-uxui skill to add a pricing toggle and an FAQ accordion to my website.
  • How It Works: The AI agent inspects your project directory structure and existing styling/theme configuration, searches the gallery of 400 UI components for matching designs, and automatically writes the code into the appropriate project files.
  • License: 100% free for personal and commercial services.

Practical Implementation Notes and Performance Considerations

  • Front-End Environment Compatibility: The interactive component prompts are primarily tailored for React and Tailwind CSS environments. If your existing project utilizes another styling solution or custom bundler configuration, you may need minor adjustments to class names or component wrappers.
  • Agent Skill Execution Permissions: Registering external skills via npx skills add Seokwoooo/lucian-uxui inside Claude Code or Codex harnesses requires terminal execution permissions and repository access within your development environment.
  • Browser Rendering Performance and Responsiveness: Incorporating numerous complex keyframe animations and JavaScript-driven interactions on a single page can impact mobile viewports and rendering frame rates. Reviewing responsive breakpoints and layout performance after integrating components is recommended.

Original source