Seokwoooo / lucian-uxui-prompt

🇰🇷 한국어 · 🇺🇸 English
# Lucian UX/UI Prompt
400 interactive UI elements you can try live, then take into your project as an AI prompt or as working code: 200 interface parts, from buttons and charts to workflow screens, and 200 website sections and animations, from heroes and pricing to scroll and text motion. Every element supports light and dark themes, pointer, touch and keyboard input, and reduced motion. No dependencies.
**Live gallery: lucianlabs.dev/uxui-prompt**
## What's inside
The library is split into two collections by element number.
| Collection | Numbers | Categories |
| --- | --- | --- |
| **Animation**: website sections and motion (new) | 201–400 | Text Motion · Hero & Backgrounds · Navigation · Scroll Motion · Sections & Content · Social Proof · Commerce & Pricing · Forms & Input · App Screens · Site Builder Tools · Cursor & Hover · Promos & Rewards · Data Motion |
| **Interface**: UI parts and work screens | 001–200 | Buttons · Toggles & Pickers · Inputs & Search · Menus & Tabs · Cards & Content · Sign-in & Sign-up · Alerts & Feedback · Loading & Progress · Empty & Error States · Widgets & Charts · Layout, Schedule & Design · Document & Data Editing · Analytics & Data · Workflow & Systems |
In the gallery, **All** shows the Animation collection first, then Interface. Switch collections at the top, narrow down by category, or search in English or Korean.
## How to use
1. Open the gallery and try an element. Each one plays a short demo when it scrolls into view, and you can take over at any time. Open a tile, or press **Reels**, to flip through elements full screen.
2. Press **Copy prompt**. The prompt contains the element's full working code plus porting instructions.
3. Paste it into your AI coding tool (Claude Code, Cursor, Codex, …), fill in `[Insertion point]` (and `[Replacement target]` if you are replacing something), and send.
The agent first checks your framework, styling and theming setup, then ports the element into a component, maps the `--ux-*` color tokens to your theme variables, and reports what it changed and what it could not check.
If you'd rather port it yourself, **Copy code** gives you the raw HTML, CSS and JS, and **Download code** saves a standalone HTML file with a theme toggle.
To link to a specific element, add its number: `https://lucianlabs.dev/uxui-prompt/#001`.
## Use it from an AI coding agent
Install the lucian-uxui skill, and your agent can search the library and port elements by itself:
 [code] 
Then ask something like "Build a landing page for my coffee subscription. Use the lucian-uxui skill and prefer its elements." The skill reads the static data in `api/v1/`, which is generated from `src/elements` and also served at `https://lucianlabs.dev/uxui-prompt/api/v1/`.
## Run locally
All you need is Node.js. There are no packages to install.
 [code] 
The build checks every element and writes the whole gallery into one self-contained HTML file.
## Element format
Each element is a single file, `src/ele