{"name":"uilab","description":"Full visual-vocabulary catalog for AI agents.","site":"https://ui-lab-ten.vercel.app","count":164,"items":[{"kind":"component","category":"motion","slug":"tilt-card","name":"Tilt Card","nameZh":"3D 倾斜卡片","aliases":[],"description":"3D perspective tilt on hover with cursor-tracked glare.","descriptionZh":"悬停时呈现 3D 透视倾斜效果,并带有跟随光标的高光。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/tilt-card","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tilt-card.json","endpoint":"https://ui-lab-ten.vercel.app/r/tilt-card"},"sourceFile":"components/motion/tilt-card.tsx","sourceFiles":["components/motion/tilt-card.tsx"]},{"kind":"component","category":"motion","slug":"button","name":"Button","nameZh":"按钮","aliases":[],"description":"Spring-pressed Button plus StatefulButton (idle → loading → success / error) and MagneticButton.","descriptionZh":"带弹簧按压反馈的按钮,还包含状态按钮 StatefulButton(空闲 → 加载中 → 成功 / 失败)与磁吸按钮 MagneticButton。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/button","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/button.json","endpoint":"https://ui-lab-ten.vercel.app/r/button"},"sourceFile":"components/motion/button/index.tsx","sourceFiles":["components/motion/button/index.tsx","components/motion/button/base.tsx","components/motion/button/stateful.tsx","components/motion/button/magnetic.tsx"]},{"kind":"component","category":"motion","slug":"marquee","name":"Marquee","nameZh":"跑马灯","aliases":[],"description":"Infinite horizontal or vertical scroll with pause-on-hover.","descriptionZh":"支持水平或垂直方向的无限滚动,悬停时暂停。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/marquee","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/marquee.json","endpoint":"https://ui-lab-ten.vercel.app/r/marquee"},"sourceFile":"components/motion/marquee.tsx","sourceFiles":["components/motion/marquee.tsx"]},{"kind":"component","category":"motion","slug":"tabs","name":"Tabs","nameZh":"选项卡","aliases":[],"description":"Pill, segment or underline tabs with a spring layoutId indicator.","descriptionZh":"胶囊、分段或下划线样式的选项卡,配合 layoutId 实现弹簧动效的指示条切换。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/tabs","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tabs.json","endpoint":"https://ui-lab-ten.vercel.app/r/tabs"},"sourceFile":"components/motion/tabs.tsx","sourceFiles":["components/motion/tabs.tsx"]},{"kind":"component","category":"motion","slug":"switch","name":"Switch","nameZh":"开关","aliases":[],"description":"Toggle with a spring-driven thumb and press feedback.","descriptionZh":"带弹簧驱动滑块与按压反馈的切换开关。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/switch","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/switch.json","endpoint":"https://ui-lab-ten.vercel.app/r/switch"},"sourceFile":"components/motion/switch.tsx","sourceFiles":["components/motion/switch.tsx"]},{"kind":"component","category":"motion","slug":"input","name":"Input","nameZh":"输入框","aliases":["react animated input","input error shake","floating label input","react form input animation","animated text field"],"description":"Text input with label, left/right icons, error shake and success check draw.","descriptionZh":"带标签、左右图标的文本输入框,支持错误抖动提示与成功状态的对勾绘制动画。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/input","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/input.json","endpoint":"https://ui-lab-ten.vercel.app/r/input"},"sourceFile":"components/motion/input.tsx","sourceFiles":["components/motion/input.tsx"]},{"kind":"component","category":"motion","slug":"select","name":"Select","nameZh":"下拉选择器","aliases":[],"description":"Composable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout.","descriptionZh":"可组合的下拉选择器,面板以弹性动画从触发器展开并分离,另提供 Morph 变体,通过共享布局让触发器直接生长为面板。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/select","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/select.json","endpoint":"https://ui-lab-ten.vercel.app/r/select"},"sourceFile":"components/motion/select.tsx","sourceFiles":["components/motion/select.tsx"]},{"kind":"component","category":"motion","slug":"checkbox","name":"Checkbox","nameZh":"复选框","aliases":[],"description":"Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.","descriptionZh":"表单选择控件,支持对勾绘制动画、弹簧按压反馈以及不确定(indeterminate)状态。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/checkbox","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/checkbox.json","endpoint":"https://ui-lab-ten.vercel.app/r/checkbox"},"sourceFile":"components/motion/checkbox.tsx","sourceFiles":["components/motion/checkbox.tsx"]},{"kind":"component","category":"motion","slug":"radio","name":"Radio Group","nameZh":"单选组","aliases":[],"description":"Single-select choice control with a gliding layoutId indicator dot and spring press feedback.","descriptionZh":"单选控件,指示圆点通过 layoutId 平滑滑动定位,并带有弹簧按压反馈。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/radio","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/radio.json","endpoint":"https://ui-lab-ten.vercel.app/r/radio"},"sourceFile":"components/motion/radio.tsx","sourceFiles":["components/motion/radio.tsx"]},{"kind":"component","category":"motion","slug":"bottom-sheet","name":"Bottom Sheet","nameZh":"底部弹出面板","aliases":[],"description":"Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.","descriptionZh":"参考 Vaul 设计的可拖拽底部面板,支持吸附点、惯性滑动与毛玻璃质感表面。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/bottom-sheet","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bottom-sheet.json","endpoint":"https://ui-lab-ten.vercel.app/r/bottom-sheet"},"sourceFile":"components/motion/bottom-sheet.tsx","sourceFiles":["components/motion/bottom-sheet.tsx"]},{"kind":"component","category":"motion","slug":"shared-layout-bg","name":"Shared Layout Background","nameZh":"共享布局背景块","aliases":[],"description":"A pill that glides between hovered items via motion's shared layout, with blur enter/exit.","descriptionZh":"借助 Framer Motion 的共享布局,让一枚胶囊背景块在悬停项之间平滑滑动,进出场带模糊过渡。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/shared-layout-bg","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/shared-layout-bg.json","endpoint":"https://ui-lab-ten.vercel.app/r/shared-layout-bg"},"sourceFile":"components/motion/shared-layout-bg.tsx","sourceFiles":["components/motion/shared-layout-bg.tsx"]},{"kind":"component","category":"motion","slug":"preview-rail","name":"Preview Rail","nameZh":"预览导航栏","aliases":["codex app navigation","codex style navigation","openai codex navigation","codex navigation react","preview rail","navigation rail","hover navigation","navigation preview","vertical navigation react","horizontal navigation react"],"description":"Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.","descriptionZh":"参考 Codex 应用设计的导航栏,紧凑刻度在悬停时呈金字塔状展开,并浮现目标页面的预览。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/preview-rail","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/preview-rail.json","endpoint":"https://ui-lab-ten.vercel.app/r/preview-rail"},"sourceFile":"components/motion/preview-rail.tsx","sourceFiles":["components/motion/preview-rail.tsx"]},{"kind":"component","category":"motion","slug":"dock","name":"Dock","nameZh":"Dock 程序坞","aliases":[],"description":"macOS-style dock with grouped actions and a gliding active pill.","descriptionZh":"macOS 风格的程序坞,操作项分组排列,配合滑动的高亮胶囊标记当前项。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/dock","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dock.json","endpoint":"https://ui-lab-ten.vercel.app/r/dock"},"sourceFile":"components/motion/dock.tsx","sourceFiles":["components/motion/dock.tsx"]},{"kind":"component","category":"motion","slug":"tooltip","name":"Tooltip","nameZh":"文字提示 / Tooltip","aliases":["morphing tooltip react","shared tooltip surface","toolbar tooltip","tooltip morphs between triggers"],"description":"Hover or focus tooltip with blur enter/exit and spring spawn, plus a Morph variant where one shared bubble glides and resizes between neighboring triggers.","descriptionZh":"悬停或聚焦触发的文字提示,进出场带模糊过渡与弹簧生成动画;另有 Morph 变体,一块共享气泡在相邻触发器之间滑移变形。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/tooltip","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tooltip.json","endpoint":"https://ui-lab-ten.vercel.app/r/tooltip"},"sourceFile":"components/motion/tooltip.tsx","sourceFiles":["components/motion/tooltip.tsx"]},{"kind":"component","category":"motion","slug":"popover","name":"Popover","nameZh":"气泡浮层","aliases":["react popover","gooey popover","animated popover","svg goo filter","metaball popover","hover popover react","morph popover react","dropdown menu react"],"description":"Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled.","descriptionZh":"粘性气泡浮层,面板通过 SVG 果冻滤镜(goo filter)从触发器中渗出——如液态颈部先拉伸后收缩,清晰内容随后淡入;另提供 Morph 变体,面板从触发器一角以裁剪动画展开。支持点击或悬停触发,可受控也可非受控。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/popover","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/popover.json","endpoint":"https://ui-lab-ten.vercel.app/r/popover"},"sourceFile":"components/motion/popover.tsx","sourceFiles":["components/motion/popover.tsx"]},{"kind":"component","category":"motion","slug":"morphing-modal","name":"Morphing Modal","nameZh":"变形弹窗","aliases":[],"description":"Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.","descriptionZh":"类似 Family App 风格的弹窗。单一面板会随内部视图切换而变形高度,内容以模糊交叉淡化过渡。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/morphing-modal","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/morphing-modal.json","endpoint":"https://ui-lab-ten.vercel.app/r/morphing-modal"},"sourceFile":"components/motion/morphing-modal.tsx","sourceFiles":["components/motion/morphing-modal.tsx"]},{"kind":"component","category":"motion","slug":"text-animation","name":"Text Animation","nameZh":"文字动效","aliases":[],"description":"Animated text primitives for reveal sequences, shimmer loading states and letter-cascade swaps.","descriptionZh":"一组文字动效原语,涵盖逐字揭示、加载态微光扫过与字母级瀑布切换。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/text-animation","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/text-animation.json","endpoint":"https://ui-lab-ten.vercel.app/r/text-animation"},"sourceFile":"components/motion/text-reveal.tsx","sourceFiles":["components/motion/text-reveal.tsx","components/motion/text-shimmer.tsx","components/motion/text-cascade.tsx"]},{"kind":"component","category":"motion","slug":"number","name":"Number Animation","nameZh":"数字动效","aliases":[],"description":"Animated number primitives for count-up values and rolling digit tickers.","descriptionZh":"一组数字动效原语,涵盖数值递增计数与滚轮式数字翻转。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/number","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/number.json","endpoint":"https://ui-lab-ten.vercel.app/r/number"},"sourceFile":"components/motion/animated-number.tsx","sourceFiles":["components/motion/animated-number.tsx","components/motion/number-ticker.tsx"]},{"kind":"component","category":"motion","slug":"animated-badge","name":"Animated Badge","nameZh":"动效徽标","aliases":[],"description":"Status badge with animated state icons, pulse feedback and compact size variants.","descriptionZh":"状态徽标,图标随状态变化播放动画,带脉冲反馈,并提供紧凑尺寸变体。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/animated-badge","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-badge.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-badge"},"sourceFile":"components/motion/animated-badge.tsx","sourceFiles":["components/motion/animated-badge.tsx"]},{"kind":"component","category":"motion","slug":"action-swap","name":"Action Swap","nameZh":"操作切换器","aliases":[],"description":"CTA button and slot primitives for swapping text and icons with blur motion.","descriptionZh":"用于按钮文字与图标切换的 CTA 按钮及插槽原语,切换时带模糊过渡动效。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/action-swap","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/action-swap.json","endpoint":"https://ui-lab-ten.vercel.app/r/action-swap"},"sourceFile":"components/motion/action-swap.tsx","sourceFiles":["components/motion/action-swap.tsx"]},{"kind":"component","category":"motion","slug":"animated-toast-stack","name":"Animated Toast Stack","nameZh":"动效消息通知栈","aliases":[],"description":"Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.","descriptionZh":"堆叠式消息通知,支持状态变形、滑动关闭、操作按钮以及感知布局的动效。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/animated-toast-stack","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-toast-stack.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-toast-stack"},"sourceFile":"components/motion/animated-toast-stack.tsx","sourceFiles":["components/motion/animated-toast-stack.tsx"]},{"kind":"component","category":"motion","slug":"theme-toggle","name":"Theme Toggle","nameZh":"主题切换按钮","aliases":[],"description":"Theme toggle button with a full-page rectangle clip-path reveal via the View Transition API.","descriptionZh":"主题切换按钮,借助 View Transition API 以全屏矩形裁剪路径展开切换效果。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/theme-toggle","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-toggle.json","endpoint":"https://ui-lab-ten.vercel.app/r/theme-toggle"},"sourceFile":"components/motion/theme-toggle.tsx","sourceFiles":["components/motion/theme-toggle.tsx"]},{"kind":"component","category":"motion","slug":"bouncy-accordion","name":"Bouncy Accordion","nameZh":"弹性手风琴","aliases":[],"description":"Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.","descriptionZh":"单项展开的手风琴组件,采用带权重的弹簧布局与图标行,内容展开对「减少动效」偏好友好。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/bouncy-accordion","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bouncy-accordion.json","endpoint":"https://ui-lab-ten.vercel.app/r/bouncy-accordion"},"sourceFile":"components/motion/bouncy-accordion.tsx","sourceFiles":["components/motion/bouncy-accordion.tsx"]},{"kind":"component","category":"motion","slug":"drawer","name":"Drawer","nameZh":"抽屉面板","aliases":[],"description":"Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.","descriptionZh":"从左侧或右侧弹簧滑入的侧边面板,带背景模糊、页面滚动锁定,支持 Esc 键关闭。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/drawer","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/drawer.json","endpoint":"https://ui-lab-ten.vercel.app/r/drawer"},"sourceFile":"components/motion/drawer.tsx","sourceFiles":["components/motion/drawer.tsx"]},{"kind":"component","category":"motion","slug":"scroll-animation","name":"Scroll Animation","nameZh":"滚动动效","aliases":["smooth scroll","lenis","scroll progress","reading progress","momentum scroll","scroll velocity"],"description":"Scroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it.","descriptionZh":"由滚动驱动的动效:基于 Lenis 的平滑滚动 Provider,以及读取其状态的阅读进度指示器。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/scroll-animation","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/scroll-animation.json","endpoint":"https://ui-lab-ten.vercel.app/r/scroll-animation"},"sourceFile":"components/motion/smooth-scroll.tsx","sourceFiles":["components/motion/smooth-scroll.tsx","components/motion/scroll-progress.tsx","components/motion/parallax.tsx","components/motion/scroll-to.tsx","components/motion/scroll-reveal.tsx"]},{"kind":"component","category":"motion","slug":"range-slider","name":"Range Slider","nameZh":"范围滑块","aliases":["slider","range slider","range input","stepped slider","ticks"],"description":"Range slider with tick dots and a bouncy vertical-bar thumb that glides between snapped steps; drag and keyboard control, reduced-motion safe.","descriptionZh":"带刻度点的范围滑块,弹性竖条滑块在吸附步进间平滑滑动;支持拖拽与键盘操作,对「减少动效」偏好友好。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/range-slider","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/range-slider.json","endpoint":"https://ui-lab-ten.vercel.app/r/range-slider"},"sourceFile":"components/motion/range-slider.tsx","sourceFiles":["components/motion/range-slider.tsx"]},{"kind":"component","category":"motion","slug":"wheel-picker","name":"Wheel Picker","nameZh":"滚轮选择器","aliases":["picker","wheel picker","ios picker","drum picker","spinner","time picker","date picker","scroll picker"],"description":"iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for date and time pickers, reduced-motion safe.","descriptionZh":"iOS 风格的滚轮选择器:基于原生惯性滚动的 3D 转筒,自动吸附至最近刻度,支持滚轮、拖拽与键盘操作。可并排组合成日期与时间选择器,对「减少动效」偏好友好。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/wheel-picker","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/wheel-picker.json","endpoint":"https://ui-lab-ten.vercel.app/r/wheel-picker"},"sourceFile":"components/motion/wheel-picker.tsx","sourceFiles":["components/motion/wheel-picker.tsx"]},{"kind":"component","category":"motion","slug":"table","name":"Table","nameZh":"表格","aliases":["react data table","virtualized table","sortable table","table row selection","react table 10k rows","editable table react"],"description":"Virtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion.","descriptionZh":"虚拟滚动数据表格,万行以上依然流畅,支持表头排序、行选择、列宽调整与列重排,并带粘性表头。动效克制,对「减少动效」偏好友好。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/table","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/table.json","endpoint":"https://ui-lab-ten.vercel.app/r/table"},"sourceFile":"components/motion/table/index.tsx","sourceFiles":["components/motion/table/index.tsx"]},{"kind":"component","category":"motion","slug":"shader-background","name":"Shader Background","nameZh":"着色器背景","aliases":["shader background react","webgl background","mesh gradient react","animated background react","canvas shader","gradient background component"],"description":"Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.","descriptionZh":"基于 Canvas 着色器的背景效果(网格渐变、颗粒噪点、扭曲、波浪、Voronoi 图案、点阵环绕等),通过单一类型化的 variant 属性切换。「减少动效」偏好下动态效果会静止。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/shader-background","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/shader-background.json","endpoint":"https://ui-lab-ten.vercel.app/r/shader-background"},"sourceFile":"components/motion/shader-background.tsx","sourceFiles":["components/motion/shader-background.tsx"]},{"kind":"component","category":"motion","slug":"cylinder-carousel","name":"Cylinder Carousel","nameZh":"圆柱轮播","aliases":["3d carousel react","cylinder carousel","coverflow react","rolling carousel","draggable carousel react"],"description":"A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.","descriptionZh":"轮播项排列在圆柱体内壁,越靠中心越远、越靠边缘越大。可拖拽、滚动或方向键滚动切换,带弹性滑动与吸附。「减少动效」偏好下取消滑动过渡。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/cylinder-carousel","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/cylinder-carousel.json","endpoint":"https://ui-lab-ten.vercel.app/r/cylinder-carousel"},"sourceFile":"components/motion/cylinder-carousel.tsx","sourceFiles":["components/motion/cylinder-carousel.tsx"]},{"kind":"component","category":"motion","slug":"loader","name":"Loader","nameZh":"加载指示器","aliases":["loader react","loading spinner","dot matrix loader","dithering loader","loading indicator"],"description":"Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.","descriptionZh":"加载指示器,内置十七种样式:旋转圈、圆点、条形、点阵、抖动噪点、变形、彗星、乱码扫描、融球、牛顿摆、螺旋、百分比,以及五款终端风格的 ASCII 动画。单一 size 属性即可缩放,使用 currentColor 取色,「减少动效」偏好下所有变换动效都会替换为平缓的透明度脉冲。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/loader","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/loader.json","endpoint":"https://ui-lab-ten.vercel.app/r/loader"},"sourceFile":"components/motion/loader.tsx","sourceFiles":["components/motion/loader.tsx"]},{"kind":"component","category":"motion","slug":"text-scramble","name":"Text Scramble","nameZh":"文字解密","aliases":["text scramble react","decrypted text effect","decode on hover","matrix text reveal","glyph shuffle text"],"description":"Scrambled glyphs resolve left-to-right into the real text — on view, on hover, or whenever the text prop changes. Width stays stable mid-scramble; reduced-motion shows the final text instantly.","descriptionZh":"随机字符从左到右逐个解析为真实文本——进入视口、悬停或 text 变化时播放。解码过程中宽度不抖动,「减少动效」偏好下直接显示最终文本。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/text-scramble","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/text-scramble.json","endpoint":"https://ui-lab-ten.vercel.app/r/text-scramble"},"sourceFile":"components/motion/text-scramble.tsx","sourceFiles":["components/motion/text-scramble.tsx"]},{"kind":"component","category":"motion","slug":"webgl-background","name":"WebGL Background","nameZh":"WebGL 着色器背景","aliases":["webgl shader background","aurora background react","silk shader effect","plasma background","glsl hero background react"],"description":"Fragment-shader hero backgrounds (aurora, silk, plasma, light rays, pixel blast with click ripples, dither) behind a single typed variant prop. Reduced-motion renders one static frame; no WebGL falls back to a matching CSS gradient.","descriptionZh":"基于 fragment shader 的主视觉背景(极光、丝绸、等离子、光芒射线、像素爆裂(点击涟漪)、抖动噪点),单一类型化 variant 属性切换。「减少动效」偏好下渲染静态一帧;无 WebGL 时回退为同色系 CSS 渐变。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/webgl-background","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/webgl-background.json","endpoint":"https://ui-lab-ten.vercel.app/r/webgl-background"},"sourceFile":"components/motion/webgl-background.tsx","sourceFiles":["components/motion/webgl-background.tsx"]},{"kind":"component","category":"motion","slug":"halftone-image","name":"Halftone Image","nameZh":"网点图像","aliases":["halftone image react","dithered photo canvas","print screen dots","risograph image effect","newsprint halftone"],"description":"Renders any bitmap as a printed halftone screen on canvas: tone drives dot size on a grid you can rotate (45° reads as print), with circle or square dots and adjustable pitch. Pass a second plate and the grey screen crossfades to colour on hover, each dot inked with the tone beneath it. Transparent between dots, so it composes over any surface.","descriptionZh":"把任意位图在 canvas 上渲染成印刷网点:明暗决定网点大小,网格可旋转(45° 才是印刷味),圆点或方点、疏密可调。再给一张彩色版,灰网点便在悬停时交叉淡入彩色版,每个点取它所在位置的颜色。点与点之间透明,可直接叠在任何表面上。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/halftone-image","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/halftone-image.json","endpoint":"https://ui-lab-ten.vercel.app/r/halftone-image"},"sourceFile":"components/motion/halftone-image.tsx","sourceFiles":["components/motion/halftone-image.tsx"]},{"kind":"component","category":"motion","slug":"star-border","name":"Star Border","nameZh":"星光描边","aliases":["star border button","animated border react","orbiting border light","glowing border cta","conic gradient border"],"description":"A slow light orbits the border of a CTA button or card — a pure-CSS conic-gradient wrapper with color, speed and thickness props. Reduced-motion freezes it into a static ring.","descriptionZh":"一束缓慢的光沿按钮或卡片边框环绕运行——纯 CSS 锥形渐变包裹器,可调光色、速度与描边厚度。「减少动效」偏好下静止为固定描边。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/star-border","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/star-border.json","endpoint":"https://ui-lab-ten.vercel.app/r/star-border"},"sourceFile":"components/motion/star-border.tsx","sourceFiles":["components/motion/star-border.tsx"]},{"kind":"component","category":"motion","slug":"bounce-cards","name":"Bounce Cards","nameZh":"弹跳卡组","aliases":["bounce cards react","card stack fan out","staggered card entrance","spring card deck"],"description":"A stacked deck of cards fans open with a staggered spring bounce when it enters the view. Spacing, rotation and stagger are tunable; reduced-motion keeps the fanned layout and only fades in.","descriptionZh":"一叠卡片进入视口时错峰弹跳着扇形展开。间距、旋转与错峰节奏可调;「减少动效」偏好下保留扇形布局,仅做透明度渐入。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/bounce-cards","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bounce-cards.json","endpoint":"https://ui-lab-ten.vercel.app/r/bounce-cards"},"sourceFile":"components/motion/bounce-cards.tsx","sourceFiles":["components/motion/bounce-cards.tsx"]},{"kind":"component","category":"motion","slug":"glare-hover","name":"Glare Hover","nameZh":"眩光悬停","aliases":["glare hover effect","light sweep card","sheen hover react","shine sweep button"],"description":"A diagonal band of light sweeps across a card or button on hover. Color, angle and duration props; touch devices skip it, reduced-motion swaps the sweep for a soft opacity highlight.","descriptionZh":"悬停时一道斜向光带扫过卡片或按钮表面。光色、角度、时长可调;触屏设备不渲染,「减少动效」偏好下换成轻微透明度高亮。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/glare-hover","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/glare-hover.json","endpoint":"https://ui-lab-ten.vercel.app/r/glare-hover"},"sourceFile":"components/motion/glare-hover.tsx","sourceFiles":["components/motion/glare-hover.tsx"]},{"kind":"component","category":"motion","slug":"skeleton","name":"Skeleton","nameZh":"骨架屏","aliases":["skeleton loading react","shimmer placeholder","loading skeleton component","content placeholder"],"description":"Loading placeholder block with a soft shimmer sweep — shape it entirely with className, compose avatars, text bars and image blocks. Reduced-motion swaps the sweep for a calm opacity pulse.","descriptionZh":"内容加载占位块,自带柔和微光扫过——形状完全由 className 决定,可组合出头像、文本条、图块。「减少动效」偏好下换成平缓的透明度脉冲。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/skeleton","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/skeleton.json","endpoint":"https://ui-lab-ten.vercel.app/r/skeleton"},"sourceFile":"components/motion/skeleton.tsx","sourceFiles":["components/motion/skeleton.tsx"]},{"kind":"component","category":"motion","slug":"scroll-hint","name":"Scroll Hint","nameZh":"滚动提示","aliases":["scroll down indicator","scroll hint react","mouse scroll icon animated","hero scroll cue"],"description":"A hero-section scroll-down indicator in two shapes: a mouse outline with a dropping dot, or a pair of pulsing chevrons. currentColor sizing, optional label, reduced-motion shows the static glyph.","descriptionZh":"首屏底部的向下滚动指示器,两种形态:鼠标轮廓内圆点下落,或两枚 chevron 依次脉冲。跟随 currentColor,可带文字标签,「减少动效」偏好下静态显示。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/scroll-hint","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/scroll-hint.json","endpoint":"https://ui-lab-ten.vercel.app/r/scroll-hint"},"sourceFile":"components/motion/scroll-hint.tsx","sourceFiles":["components/motion/scroll-hint.tsx"]},{"kind":"component","category":"motion","slug":"animated-icon","name":"Animated Icon","nameZh":"动效图标","aliases":["animated icon react","hover icon animation","icon micro interaction","lucide animated icon"],"description":"Hover-played icon micro-interactions in one component — draw, wiggle, spin, bounce, pop, pulse, nudge — driven by a single variant prop. Built on motion + lucide, reduced-motion safe.","descriptionZh":"一个组件承载七种 hover 动效图标(描边/摆动/旋转/弹跳/弹入/脉动/微移),用单个 variant prop 切换。基于 motion + lucide,尊重减少动态偏好。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/animated-icon","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon"},"sourceFile":"components/motion/animated-icon.tsx","sourceFiles":["components/motion/animated-icon.tsx"]},{"kind":"component","category":"motion","slug":"dropdown-menu","name":"Dropdown Menu","nameZh":"下拉菜单","aliases":["dropdown menu react","animated dropdown","context menu react","menu keyboard navigation","submenu react","shared highlight menu"],"description":"Composable animated dropdown menu: a corner-origin spring entrance with viewport collision flip, one shared focus surface that glides between rows for both pointer and keyboard, grouped labels, two-line items with icons and shortcuts, checkbox items, a hover/arrow-key submenu, and full roving-focus keyboard navigation.","descriptionZh":"可组合的动效下拉菜单:面板从触发器近角弹簧展开并带视口碰撞翻转;hover 与键盘共用一块在行间滑动的焦点表面;支持分组标签、图标+双行描述+快捷键、勾选项、悬停/方向键子菜单,以及完整的键盘循环导航。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/dropdown-menu","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dropdown-menu.json","endpoint":"https://ui-lab-ten.vercel.app/r/dropdown-menu"},"sourceFile":"components/motion/dropdown-menu.tsx","sourceFiles":["components/motion/dropdown-menu.tsx"]},{"kind":"component","category":"motion","slug":"expanding-card","name":"Expanding Card","nameZh":"卡片展开弹层","aliases":["app store card expansion","card to modal react","shared layout modal","morphing card react","expanding card animation"],"description":"App Store-style card expansion: the card itself morphs into a centered modal over a heavily blurred backdrop via a shared layoutId FLIP — expanded content fades in once the surface lands, and the card shrinks back on close.","descriptionZh":"App Store 式卡片展开:卡片经共享 layoutId 直接变形为居中弹层,背景整页重模糊;扩展内容在表面落定后淡入,关闭时沿原路缩回原位并归还焦点。","pageUrl":"https://ui-lab-ten.vercel.app/components/motion/expanding-card","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expanding-card.json","endpoint":"https://ui-lab-ten.vercel.app/r/expanding-card"},"sourceFile":"components/motion/expanding-card.tsx","sourceFiles":["components/motion/expanding-card.tsx"]},{"kind":"component","category":"blocks","slug":"recording-card","name":"Recording Card","nameZh":"录屏演示卡","aliases":["screen recording card react","loom style video card","webcam bubble overlay","product demo card","container query scaling"],"description":"Presents any content as a screen recording: wallpaper and scrim behind a window mock, a webcam bubble that doubles as the play control, a running timer with a blinking record dot, and a “tap for sound” pill that slides back behind the bubble once playing. Sized entirely in container-query units, so one card scales from grid thumbnail to full-width hero with no breakpoints — plus an optional aspect-locked theatre view.","descriptionZh":"把任意内容呈现成一段录屏:窗口 mock 背后是壁纸与压暗层,摄像头气泡兼作播放按钮,计时器带闪烁录制红点,「点击听声音」药丸在播放后滑回气泡背后藏起来。全部尺寸用容器查询单位写成,同一张卡从网格缩略图到整宽 hero 都是等比的,不需要任何断点;另可开启锁定 16:9 的剧场视图。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/recording-card","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/recording-card.json","endpoint":"https://ui-lab-ten.vercel.app/r/recording-card"},"sourceFile":"components/motion/recording-card.tsx","sourceFiles":["components/motion/recording-card.tsx"]},{"kind":"component","category":"blocks","slug":"login-card","name":"Login Card","nameZh":"登录卡片","aliases":["login card react","sign in modal react","wechat qr login","phone otp login form","chinese login page component","验证码登录"],"description":"Chinese product sign-in modal: a blue gradient header with floating bokeh, a WeChat QR-scan column beside phone quick-login (country-code dropdown, code field with a 60s resend countdown), an agreement checkbox that shakes on invalid submit, and an ICP footer.","descriptionZh":"中文产品登录弹窗:蓝色渐变头部带漂浮光斑,微信扫码列与手机号快捷登录并排(区号下拉、验证码 60 秒重发倒计时),未勾选协议提交时协议行抖动提示,并带 ICP 备案页脚。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/login-card","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/login-card.json","endpoint":"https://ui-lab-ten.vercel.app/r/login-card"},"sourceFile":"components/motion/login-card.tsx","sourceFiles":["components/motion/login-card.tsx"]},{"kind":"component","category":"blocks","slug":"thread-list","name":"Thread List","nameZh":"会话列表","aliases":["thread list react","conversation list sidebar","chat history list","shared layout active indicator","sidebar rows hover actions"],"description":"Sidebar conversation list: section headers with action slots, 30px rows with unread dots and time metas that swap to hover actions, and an active pill that glides between rows via shared layout.","descriptionZh":"侧栏会话列表:带操作槽的分组标题、30px 行(未读圆点、时间与悬停操作钮互换),以及用共享布局在行间平滑滑动的选中底块。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/thread-list","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/thread-list.json","endpoint":"https://ui-lab-ten.vercel.app/r/thread-list"},"sourceFile":"components/motion/thread-list/index.tsx","sourceFiles":["components/motion/thread-list/index.tsx"]},{"kind":"component","category":"blocks","slug":"artifact-panel","name":"Artifact Panel","nameZh":"制品画布面板","aliases":["artifact panel react","ai canvas component","side pane preview code","artifact version history","canvas split view chat"],"description":"Side-pane canvas for AI-generated artifacts: hairline panel shell, header with action cluster, preview/code view toggle with cross-fade, and a version navigator with restore.","descriptionZh":"AI 产物的画布侧栏:发丝面板壳、带操作簇的头部、交叉淡切的预览/代码双视图切换,以及带恢复按钮的版本导航。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/artifact-panel","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/artifact-panel.json","endpoint":"https://ui-lab-ten.vercel.app/r/artifact-panel"},"sourceFile":"components/motion/artifact-panel/index.tsx","sourceFiles":["components/motion/artifact-panel/index.tsx"]},{"kind":"component","category":"blocks","slug":"agent-inbox","name":"Agent Inbox","nameZh":"Agent 审批收件箱","aliases":["human in the loop react","approval queue component","agent approval inbox","action receipt card","hitl ui component","risk badge component"],"description":"Human-in-the-loop approval queue: risk-tiered request items with expiry and detail expand, approve/deny flows that settle in place, and an action receipt card with scope, diff stats and undo.","descriptionZh":"人机协同审批队列:带风险分级与过期时间的请求项、可展开详情、原地落定的批准/拒绝流转,以及带影响范围、增删统计与撤销的操作回执卡。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-inbox","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-inbox.json","endpoint":"https://ui-lab-ten.vercel.app/r/agent-inbox"},"sourceFile":"components/motion/agent-inbox/index.tsx","sourceFiles":["components/motion/agent-inbox/index.tsx"]},{"kind":"component","category":"blocks","slug":"agent-trace","name":"Agent Trace","nameZh":"Agent 执行轨迹","aliases":["agent trace react","activity rail component","agent steps timeline","nested subagent trace","tool execution trace","claude code style trace"],"description":"Activity rail for agent runs: kind-styled step nodes on a hairline rail, live steps with pulse ring and cadenced shimmer, raw-output expand, parallel tool groups, and nested sub-agent mini traces.","descriptionZh":"Agent 执行轨迹组件族:发丝竖轨上按类型着装的步骤节点、带脉冲环与节奏扫光的进行中步骤、原始输出展开、并行工具组,以及可嵌套展开的子 Agent 迷你轨迹。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-trace","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-trace.json","endpoint":"https://ui-lab-ten.vercel.app/r/agent-trace"},"sourceFile":"components/motion/agent-trace/index.tsx","sourceFiles":["components/motion/agent-trace/index.tsx"]},{"kind":"component","category":"blocks","slug":"streaming-json","name":"Streaming JSON","nameZh":"流式结构化输出","aliases":["streaming json react","partial json renderer","tool call arguments stream","structured output component","json syntax highlight stream"],"description":"Tolerant syntax-colored rendering for partial JSON as it streams in: an incremental tokenizer that survives unclosed strings, fade-in for freshly arrived spans, a streaming caret, and a function-call wrapper.","descriptionZh":"流式结构化输出组件族:对不完整 JSON 容错的分色渲染——可承受未闭合字符串的增量 tokenizer、仅对新到片段做淡入、流式光标,以及函数调用外壳。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/streaming-json","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/streaming-json.json","endpoint":"https://ui-lab-ten.vercel.app/r/streaming-json"},"sourceFile":"components/motion/streaming-json/index.tsx","sourceFiles":["components/motion/streaming-json/index.tsx"]},{"kind":"component","category":"blocks","slug":"citations","name":"Citations","nameZh":"引用与来源","aliases":["inline citation react","source preview popover","citation chip component","ai answer sources list","perplexity style citations"],"description":"Inline citation chips with a hover source-preview popover, plus source cards and a staggered source list for the answer footer.","descriptionZh":"引用与来源组件族:行内引用角标(悬停弹出来源预览浮层)、来源卡片,以及答案尾部带级联进场的来源列表。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/citations","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/citations.json","endpoint":"https://ui-lab-ten.vercel.app/r/citations"},"sourceFile":"components/motion/citations/index.tsx","sourceFiles":["components/motion/citations/index.tsx"]},{"kind":"component","category":"blocks","slug":"voice-orb","name":"Voice Orb","nameZh":"语音律动球","aliases":["voice orb react","voice assistant animation","ai voice mode ui","breathing orb component","voice mode sphere"],"description":"Immersive voice-mode orb: one continuous gradient sphere whose breathing, hue drift, echo rings and thinking sheen follow idle / listening / thinking / speaking states.","descriptionZh":"沉浸式语音模式光球:单一连续渐变球体,呼吸、色相漂移、回声环与思考高光随待机/聆听/思考/说话四态切换。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/voice-orb","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/voice-orb.json","endpoint":"https://ui-lab-ten.vercel.app/r/voice-orb"},"sourceFile":"components/motion/voice-orb/index.tsx","sourceFiles":["components/motion/voice-orb/index.tsx"]},{"kind":"component","category":"blocks","slug":"activity-stats","name":"Activity Stats","nameZh":"活动统计","aliases":["activity stats react","contribution heatmap react","github style activity graph","stats summary bar","usage dashboard component","codex style activity heatmap"],"description":"Usage-summary widgets: a connected stats bar for headline metrics, a GitHub-style contribution heatmap with a color-mix intensity scale and column-cascade entrance, and a text period switch.","descriptionZh":"使用量统计组件族:用于关键指标的连体统计条、基于 color-mix 强度色阶与逐列级联淡入的 GitHub 风格贡献热力图,以及纯文本周期切换器。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/activity-stats","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/activity-stats.json","endpoint":"https://ui-lab-ten.vercel.app/r/activity-stats"},"sourceFile":"components/motion/activity-stats/index.tsx","sourceFiles":["components/motion/activity-stats/index.tsx"]},{"kind":"component","category":"blocks","slug":"settings-panel","name":"Settings Panel","nameZh":"设置面板","aliases":["settings form react","preferences panel","color picker field","settings group component","theme editor react","codex style settings panel"],"description":"Preference-form building blocks: a titled settings group with hairline-divided rows, a hex color field with auto-contrasting text, a text field, a preset-picker button and a ghost header action.","descriptionZh":"偏好设置表单组件族:带发丝分隔行的带标题设置分组、文字自动反差的十六进制颜色输入胶囊、文本框、预设选择按钮,以及头部幽灵操作按钮。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/settings-panel","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/settings-panel.json","endpoint":"https://ui-lab-ten.vercel.app/r/settings-panel"},"sourceFile":"components/motion/settings-panel/index.tsx","sourceFiles":["components/motion/settings-panel/index.tsx"]},{"kind":"component","category":"blocks","slug":"agent-thread","name":"Agent Thread","nameZh":"Agent 会话流","aliases":["agent thread react","ai chat messages react","conversation stream component","tool call cards react","diff card component","agent status states","reasoning indicator","tool call status","approval card","codex style thread"],"description":"AI agent conversation stream: user message pills, turn headers, markdown typography, thinking & tool-call status rows, approval card, streaming caret, file & diff artifact cards with expand animation, command rows, and hover-revealed turn actions.","descriptionZh":"AI agent 会话流组件族:用户消息 pill、回合头、Markdown 排版容器、思考与工具调用状态行、审批请求卡、流式输出光标、带展开动画的文件与变更产物卡、命令执行行,以及悬停显现的回合操作栏。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-thread","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-thread.json","endpoint":"https://ui-lab-ten.vercel.app/r/agent-thread"},"sourceFile":"components/motion/agent-thread/index.tsx","sourceFiles":["components/motion/agent-thread/index.tsx","components/motion/agent-thread/cards.tsx","components/motion/agent-thread/status.tsx"]},{"kind":"component","category":"blocks","slug":"agent-composer","name":"Agent Composer","nameZh":"Agent 输入台","aliases":["agent composer react","ai chat input react","prompt input component","chat composer react","reasoning effort slider","model picker react","voice dictation bar","attachment menu","codex style composer"],"description":"AI agent chat composer with context chips, access chip, model picker with a segmented reasoning-effort slider, and a morphing send/stop button, plus an add menu and a voice dictation bar.","descriptionZh":"AI agent 聊天输入台组件族:上下文 chips、权限 chip、内置分段推理力度滑杆的模型选择器,以及可变形的发送/停止按钮,并带添加菜单与语音听写态。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-composer","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-composer.json","endpoint":"https://ui-lab-ten.vercel.app/r/agent-composer"},"sourceFile":"components/motion/agent-composer/index.tsx","sourceFiles":["components/motion/agent-composer/index.tsx","components/motion/agent-composer/effort-slider.tsx","components/motion/agent-composer/autonomy-dial.tsx"]},{"kind":"component","category":"blocks","slug":"agent-workbench","name":"Agent Workbench","nameZh":"Agent 工作台","aliases":["agent workbench react","three pane layout react","resizable sidebar react","app shell component","codex style app shell","ai chat workbench","split pane layout"],"description":"Responsive agent app shell: a resizable three-pane desktop layout, tablet side overlays, and mobile single-surface navigation, with spring transitions and a full-width 46px toolbar overlay. Includes a pinned summary card overlay.","descriptionZh":"响应式 Agent 应用外壳:桌面端为可拖宽三栏布局,平板端将侧区切换为覆盖层,移动端一次只展示一个任务表面;支持弹簧过渡与横跨全宽的 46px 顶部工具栏,并内置置顶摘要浮层卡片。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-workbench","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-workbench.json","endpoint":"https://ui-lab-ten.vercel.app/r/agent-workbench"},"sourceFile":"components/motion/agent-workbench/index.tsx","sourceFiles":["components/motion/agent-workbench/index.tsx","components/motion/agent-workbench/resize-handle.tsx","components/motion/agent-workbench/summary-card.tsx"]},{"kind":"component","category":"blocks","slug":"availability-scheduler","name":"Availability Scheduler","nameZh":"可用时间编辑器","aliases":["availability scheduler react","weekly hours picker react","working hours component","cal.com availability component","time range picker react","business hours editor"],"description":"Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.","descriptionZh":"每周可用时间编辑器,每一天在「可用/不可用」之间弹簧切换,时间段的增删带模糊滑动动效,时间通过可滚动下拉菜单选取,并可通过复制菜单将时段套用到其他天。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/availability-scheduler","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/availability-scheduler.json","endpoint":"https://ui-lab-ten.vercel.app/r/availability-scheduler"},"sourceFile":"components/motion/availability-scheduler/index.tsx","sourceFiles":["components/motion/availability-scheduler/index.tsx"]},{"kind":"component","category":"blocks","slug":"swap","name":"Multi-chain Swap","nameZh":"多链兑换","aliases":[],"description":"Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.","descriptionZh":"跨链兑换组件,内置链与代币选择器、视图变形动效、翻转动画与实时报价。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/swap","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/swap.json","endpoint":"https://ui-lab-ten.vercel.app/r/swap"},"sourceFile":"components/motion/swap.tsx","sourceFiles":["components/motion/swap.tsx"]},{"kind":"component","category":"blocks","slug":"dynamic-island","name":"Dynamic Island","nameZh":"灵动岛","aliases":[],"description":"iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.","descriptionZh":"iOS 风格的灵动岛胶囊组件,在多个实时活动视图间变形切换,外壳弹性缩放并带模糊交叉淡化。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/dynamic-island","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dynamic-island.json","endpoint":"https://ui-lab-ten.vercel.app/r/dynamic-island"},"sourceFile":"components/motion/dynamic-island.tsx","sourceFiles":["components/motion/dynamic-island.tsx"]},{"kind":"component","category":"blocks","slug":"command-palette","name":"Command Palette","nameZh":"命令面板","aliases":[],"description":"⌘K palette with fuzzy filter, spring-animated active row and glass surface.","descriptionZh":"⌘K 呼出的命令面板,支持模糊搜索过滤,当前行带弹簧动效高亮,毛玻璃质感表面。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/command-palette","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/command-palette.json","endpoint":"https://ui-lab-ten.vercel.app/r/command-palette"},"sourceFile":"components/motion/command-palette.tsx","sourceFiles":["components/motion/command-palette.tsx"]},{"kind":"component","category":"blocks","slug":"expandable-action-bar","name":"Expandable Action Bar","nameZh":"可展开操作栏","aliases":[],"description":"Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.","descriptionZh":"紧凑的图标操作项,在悬停或聚焦时通过共享布局动效展开为带文字标签的控件。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/expandable-action-bar","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expandable-action-bar.json","endpoint":"https://ui-lab-ten.vercel.app/r/expandable-action-bar"},"sourceFile":"components/motion/expandable-action-bar.tsx","sourceFiles":["components/motion/expandable-action-bar.tsx"]},{"kind":"component","category":"blocks","slug":"overflow-actions","name":"Overflow Actions","nameZh":"溢出操作栏","aliases":[],"description":"Connected pill rail for primary actions that springs open to reveal extra controls.","descriptionZh":"连体胶囊式主操作栏,弹簧展开后可露出更多附加操作。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/overflow-actions","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/overflow-actions.json","endpoint":"https://ui-lab-ten.vercel.app/r/overflow-actions"},"sourceFile":"components/motion/overflow-actions.tsx","sourceFiles":["components/motion/overflow-actions.tsx"]},{"kind":"component","category":"blocks","slug":"expandable-tabs","name":"Expandable Tabs","nameZh":"可展开选项卡","aliases":[],"description":"Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.","descriptionZh":"图标选项卡栏,当前选项卡展开为带文字标签的胶囊,上方面板随切换变形高度,内容按方向感知滑动。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/expandable-tabs","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expandable-tabs.json","endpoint":"https://ui-lab-ten.vercel.app/r/expandable-tabs"},"sourceFile":"components/motion/expandable-tabs.tsx","sourceFiles":["components/motion/expandable-tabs.tsx"]},{"kind":"component","category":"blocks","slug":"swipeable-list","name":"Swipeable List","nameZh":"可滑动列表","aliases":[],"description":"Mobile-style list rows that swipe left or right to reveal contextual action buttons.","descriptionZh":"移动端风格的列表行,左右滑动可露出上下文操作按钮。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/swipeable-list","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/swipeable-list.json","endpoint":"https://ui-lab-ten.vercel.app/r/swipeable-list"},"sourceFile":"components/motion/swipeable-list.tsx","sourceFiles":["components/motion/swipeable-list.tsx"]},{"kind":"component","category":"blocks","slug":"file-upload","name":"File Upload","nameZh":"文件上传","aliases":[],"description":"Drag-and-drop upload queue with progress rows, retry/remove actions and reduced-motion-safe state changes.","descriptionZh":"支持拖拽上传的队列组件,带进度行、重试/移除操作,状态切换对「减少动效」偏好友好。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/file-upload","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/file-upload.json","endpoint":"https://ui-lab-ten.vercel.app/r/file-upload"},"sourceFile":"components/motion/file-upload.tsx","sourceFiles":["components/motion/file-upload.tsx"]},{"kind":"component","category":"blocks","slug":"prediction-market","name":"Prediction Market","nameZh":"预测市场交易卡","aliases":[],"description":"Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.","descriptionZh":"预测市场交易面板,支持买入/卖出模式、结果价格展示、滚动数字输入、快捷金额芯片以及多种交易状态。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/prediction-market","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prediction-market.json","endpoint":"https://ui-lab-ten.vercel.app/r/prediction-market"},"sourceFile":"components/motion/prediction-market.tsx","sourceFiles":["components/motion/prediction-market.tsx"]},{"kind":"component","category":"blocks","slug":"wallet-card","name":"Wallet Card","nameZh":"钱包卡片","aliases":["wallet card react","web3 wallet component","crypto balance component","account switcher react","chain switcher react"],"description":"Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, copy-address, and Send / Deposit / Swap / Buy actions.","descriptionZh":"钱包概览卡片,账户切换器与搜索均从触发器变形展开,余额以瀑布动效呈现并带实时涨跌胶囊与隐私开关,支持一键复制地址以及转账/充值/兑换/购买等操作。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/wallet-card","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/wallet-card.json","endpoint":"https://ui-lab-ten.vercel.app/r/wallet-card"},"sourceFile":"components/motion/wallet-card/index.tsx","sourceFiles":["components/motion/wallet-card/index.tsx"]},{"kind":"component","category":"blocks","slug":"otp-input","name":"OTP Input","nameZh":"验证码输入框","aliases":[],"description":"One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.","descriptionZh":"一次性验证码输入框,聚焦环平滑滑动定位,数字逐格滚入,错误时抖动提示,成功时绘制对勾动画。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/otp-input","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/otp-input.json","endpoint":"https://ui-lab-ten.vercel.app/r/otp-input"},"sourceFile":"components/motion/otp-input.tsx","sourceFiles":["components/motion/otp-input.tsx"]},{"kind":"component","category":"blocks","slug":"bloom-menu","name":"Bloom Menu","nameZh":"绽放菜单","aliases":[],"description":"A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.","descriptionZh":"按钮变形展开为菜单,以虹膜式效果从中心向外绽放,网格项沿径向错落展开。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/bloom-menu","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bloom-menu.json","endpoint":"https://ui-lab-ten.vercel.app/r/bloom-menu"},"sourceFile":"components/motion/bloom-menu.tsx","sourceFiles":["components/motion/bloom-menu.tsx"]},{"kind":"component","category":"blocks","slug":"feedback-widget","name":"Feedback Widget","nameZh":"反馈小组件","aliases":["react feedback widget","feedback popover react","in-app feedback component","feedback form animation","react feedback button"],"description":"Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.","descriptionZh":"角落触发按钮变形展开为反馈弹窗,支持消息输入,并带发送中、成功、重试等动效状态。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/feedback-widget","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/feedback-widget.json","endpoint":"https://ui-lab-ten.vercel.app/r/feedback-widget"},"sourceFile":"components/motion/feedback-widget.tsx","sourceFiles":["components/motion/feedback-widget.tsx"]},{"kind":"component","category":"blocks","slug":"not-found","name":"404 / Not Found","nameZh":"404 页面","aliases":[],"description":"Animated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal.","descriptionZh":"五种风格的动效 404 页面:故障扫描、磁吸数字、光标聚光灯、扇形卡片堆叠与打字终端。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/not-found","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/not-found.json","endpoint":"https://ui-lab-ten.vercel.app/r/not-found"},"sourceFile":"components/motion/not-found/index.tsx","sourceFiles":["components/motion/not-found/index.tsx","components/motion/not-found/shared.tsx","components/motion/not-found/glitch.tsx","components/motion/not-found/magnetic.tsx","components/motion/not-found/spotlight.tsx","components/motion/not-found/stacked.tsx","components/motion/not-found/terminal.tsx"]},{"kind":"component","category":"blocks","slug":"step-form","name":"Step Form","nameZh":"分步表单","aliases":["multi step form react","step form animation","typeform style form","onboarding form react","wizard form react","directional form transitions"],"description":"Focused one-question-at-a-time multi-step form: segmented progress with a mono counter, directional slide transitions with container height morph, text and choice steps, shake-on-invalid validation with reserved error space, Enter-to-advance, and a drawn-check success state.","descriptionZh":"「一次一题」聚焦式多步表单:分段进度条配等宽计数,方向性滑动切换配合容器高度变形;支持文本题与选择卡题,校验失败抖动且错误行预留空间不跳版,Enter 直接推进,完成态画圈打勾。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/step-form","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/step-form.json","endpoint":"https://ui-lab-ten.vercel.app/r/step-form"},"sourceFile":"components/motion/step-form.tsx","sourceFiles":["components/motion/step-form.tsx"]},{"kind":"component","category":"blocks","slug":"empty-state","name":"Empty State","nameZh":"空状态","aliases":["empty state react","animated empty state","inbox zero illustration","no results state","empty state component"],"description":"Animated empty-state blocks with hand-drawn line-art illustrations, concise copy and a primary action — an inbox-zero envelope, a hover-to-open archive cabinet, and a scanning search lens.","descriptionZh":"带线稿动画插图的空状态区块:信封收件箱清零、悬停弹开抽屉的档案柜、来回扫描的搜索放大镜;统一「插图 + 短文案 + 主操作」结构。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/empty-state","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/empty-state.json","endpoint":"https://ui-lab-ten.vercel.app/r/empty-state"},"sourceFile":"components/motion/empty-state/index.tsx","sourceFiles":["components/motion/empty-state/index.tsx","components/motion/empty-state/shared.tsx","components/motion/empty-state/inbox.tsx","components/motion/empty-state/archive.tsx","components/motion/empty-state/search.tsx"]},{"kind":"component","category":"blocks","slug":"prompt-bar","name":"Prompt Bar","nameZh":"AI 提示输入条","aliases":["ai prompt bar react","chat input with credits","queued messages steer","slash command skill chip","compact ai composer","prompt input component"],"description":"Compact credits-aware AI prompt bar: a dismissible credits banner, queued messages you can steer, edit or drop while streaming, slash-commands that morph into a removable skill chip, demo attachments, a web-search toggle pill, a model menu, and a morphing send-to-stop button.","descriptionZh":"紧凑的积分感知 AI 输入条:可关闭的积分横幅;流式进行中再提交会入队,可插队(Steer)、编辑或删除;输入 / 唤起技能面板并把命令凝固成可移除的技能 chip;附件演示、联网搜索开关、模型菜单与发送⇄停止变形按钮。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/prompt-bar","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prompt-bar.json","endpoint":"https://ui-lab-ten.vercel.app/r/prompt-bar"},"sourceFile":"components/motion/prompt-bar.tsx","sourceFiles":["components/motion/prompt-bar.tsx"]},{"kind":"component","category":"blocks","slug":"prompt-input","name":"Prompt Input","nameZh":"提示输入","aliases":["AI prompt input React","model selector dropdown","chat composer component","agent input UI","AI textarea React","LLM model picker"],"description":"An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.","descriptionZh":"可自动增高的 Agent 输入台:动作菜单、模型选择、Enter 发送、多行输入,以及发送/停止的动效切换。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/prompt-input","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prompt-input.json","endpoint":"https://ui-lab-ten.vercel.app/r/prompt-input"},"sourceFile":"components/agents/prompt-input.tsx","sourceFiles":["components/agents/prompt-input.tsx"]},{"kind":"component","category":"blocks","slug":"todo-list","name":"Todo List","nameZh":"任务清单","aliases":["AI agent todo list React","agent task progress UI","LLM task plan component","AI checklist React","streaming todo list","agent workflow status"],"description":"A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.","descriptionZh":"可折叠的 Agent 任务计划:待办/进行中/完成/取消状态、进度变形为对勾、完成计数、稳定流式行与紧凑元数据。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/todo-list","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/todo-list.json","endpoint":"https://ui-lab-ten.vercel.app/r/todo-list"},"sourceFile":"components/agents/todo-list.tsx","sourceFiles":["components/agents/todo-list.tsx"]},{"kind":"component","category":"blocks","slug":"code-block","name":"Code Block","nameZh":"代码块","aliases":["AI code block React","streaming code component","syntax highlighted code block","LLM code response UI","agent generated code","Shiki React code block"],"description":"A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.","descriptionZh":"面向 Agent 的语法高亮代码面:稳定流式更新、可选行号与高亮行、有界平滑跟随、文件名/语言元数据与复制反馈。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/code-block","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/code-block.json","endpoint":"https://ui-lab-ten.vercel.app/r/code-block"},"sourceFile":"components/agents/code-block.tsx","sourceFiles":["components/agents/code-block.tsx"]},{"kind":"component","category":"blocks","slug":"approval-card","name":"Approval Card","nameZh":"审批卡片","aliases":["AI approval card React","human in the loop UI","agent clarification question","AI multiple choice prompt","approve agent decision","agent review workflow"],"description":"A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.","descriptionZh":"人机协同决策面:批准/拒绝/修订,以及单选、多选、自由文本或多步问题;提交后折叠为已记录结果。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/approval-card","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/approval-card.json","endpoint":"https://ui-lab-ten.vercel.app/r/approval-card"},"sourceFile":"components/agents/approval-card/index.tsx","sourceFiles":["components/agents/approval-card/index.tsx","components/agents/approval-card/types.ts"]},{"kind":"component","category":"blocks","slug":"file-diff","name":"File Diff","nameZh":"文件差异","aliases":["AI file diff React","agent code changes UI","streaming diff component","file edit result","code additions deletions"],"description":"A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.","descriptionZh":"语法高亮的文件变更披露:渐进行、行号、实时增删计数、有界平滑跟随,完成后可折叠。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/file-diff","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/file-diff.json","endpoint":"https://ui-lab-ten.vercel.app/r/file-diff"},"sourceFile":"components/agents/file-diff.tsx","sourceFiles":["components/agents/file-diff.tsx"]},{"kind":"component","category":"blocks","slug":"tool-result","name":"Tool Result","nameZh":"工具结果","aliases":["AI tool result React","agent terminal output UI","streaming command result","agent API response","tool execution status"],"description":"A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.","descriptionZh":"轻量执行披露:语法高亮的终端输出与请求响应、有界自动跟随、成功/错误/取消态,完成后折叠,支持复制与重试。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/tool-result","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tool-result.json","endpoint":"https://ui-lab-ten.vercel.app/r/tool-result"},"sourceFile":"components/agents/tool-result.tsx","sourceFiles":["components/agents/tool-result.tsx"]},{"kind":"component","category":"blocks","slug":"streaming-response","name":"Streaming Response","nameZh":"流式回复","aliases":["AI streaming response React","LLM token stream UI","chat response actions","AI response sources","AI answer component","streaming text React"],"description":"A stable response surface with completion actions, rendered content, and an expandable source summary.","descriptionZh":"稳定的流式回答面:完成后复制/重试/反馈、可选可展开来源摘要,以及嵌套 live region 播报控制。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/streaming-response","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/streaming-response.json","endpoint":"https://ui-lab-ten.vercel.app/r/streaming-response"},"sourceFile":"components/agents/streaming-response.tsx","sourceFiles":["components/agents/streaming-response.tsx"]},{"kind":"component","category":"blocks","slug":"image-generation","name":"Image Generation","nameZh":"图像生成","aliases":["AI image generation React","generated image loading UI","AI image progress component","image generation animation","text to image interface","AI media result"],"description":"A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.","descriptionZh":"稳定的生成图画面:排队→生成→精修→完成/可恢复错误,逐步解析媒体且不 remount、不挤压周围会话。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/image-generation","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/image-generation.json","endpoint":"https://ui-lab-ten.vercel.app/r/image-generation"},"sourceFile":"components/agents/image-generation.tsx","sourceFiles":["components/agents/image-generation.tsx"]},{"kind":"component","category":"blocks","slug":"tool-approval","name":"Tool Approval","nameZh":"工具授权","aliases":["AI tool approval UI","agent permission component","human in the loop React","approve agent action","AI tool confirmation"],"description":"A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.","descriptionZh":"人机协同权限卡:审阅工具详情与参数、允许一次/始终允许/拒绝,可选 Shiki 高亮代码值。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/tool-approval","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tool-approval.json","endpoint":"https://ui-lab-ten.vercel.app/r/tool-approval"},"sourceFile":"components/agents/tool-approval.tsx","sourceFiles":["components/agents/tool-approval.tsx"]},{"kind":"component","category":"blocks","slug":"agent-activity","name":"Agent Activity","nameZh":"Agent 活动流","aliases":["AI agent activity component","agent tool calls UI","AI search results React","agent reasoning timeline","mixed agent activity stream","agent execution trace UI","collapsible AI activity"],"description":"One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.","descriptionZh":"自适应 Agent 活动流:推理文本、搜索结果、工具调用、结构化执行轨迹,或按时间混排;进行中有界跟随,完成后折叠为可重开摘要。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-activity","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-activity.json","endpoint":"https://ui-lab-ten.vercel.app/r/agent-activity"},"sourceFile":"components/agents/agent-activity/index.tsx","sourceFiles":["components/agents/agent-activity/index.tsx","components/agents/agent-activity/activity-row.tsx","components/agents/agent-activity/types.ts"]},{"kind":"atom-set","category":"atoms","slug":"motion","name":"Motion tokens","nameZh":"动效 token","aliases":[],"description":"Bézier curves, springs, and durations for consistent motion.","descriptionZh":"统一动效用的贝塞尔曲线、弹簧与时长。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=motion","fetch":{"method":"copy-tokens","value":"## Motion\n\n| Token | Value |\n| --- | --- |\n| curve/swift-out | cubic-bezier(0.16, 1, 0.3, 1) |\n| curve/push-pull | cubic-bezier(0.77, 0, 0.175, 1) |\n| curve/drawer | cubic-bezier(0.32, 0.72, 0, 1) |\n| spring/press | { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 } |\n| spring/swap | { type: \"spring\", stiffness: 460, damping: 30, mass: 0.55 } |\n| spring/panel | { type: \"spring\", stiffness: 420, damping: 40, mass: 0.5 } |\n| spring/glide | { type: \"spring\", stiffness: 360, damping: 32, mass: 0.6 } |\n| spring/follow | { type: \"spring\", stiffness: 200, damping: 15, mass: 0.3 } |\n| duration/instant | 90ms |\n| duration/quick | 150ms |\n| duration/standard | 220ms |\n| duration/deliberate | 320ms |\n| duration/ambient | 600ms |\n\n**Rule:** Use these curves, spring physics, and durations consistently; never replace them with generic easing defaults."}},{"kind":"atom-set","category":"atoms","slug":"shape","name":"Shape tokens","nameZh":"圆角与阴影 token","aliases":[],"description":"A radius scale, elevation shadows, and z-index layers for consistent surfaces.","descriptionZh":"统一表面质感用的圆角尺度、分层阴影与 z-index 层叠阶梯。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=shape","fetch":{"method":"copy-tokens","value":"## Shape\n\n| Token | Value |\n| --- | --- |\n| radius/none | 0 |\n| radius/xs | 4px |\n| radius/sm | 6px |\n| radius/md | 10px |\n| radius/lg | 12.5px |\n| radius/xl | 20px |\n| radius/2xl | 25px |\n| radius/full | 9999px |\n| shadow/hairline/light | 0 0 0 0.5px rgb(0 0 0 / 0.08) |\n| shadow/hairline/dark | 0 0 0 0.5px rgb(255 255 255 / 0.157) |\n| shadow/raised/light | 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.05) |\n| shadow/raised/dark | 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.4) |\n| shadow/floating/light | 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 3px 7.5px rgb(0 0 0 / 0.04), 0 0 20px rgb(0 0 0 / 0.05) |\n| shadow/floating/dark | 0 0 0 0.5px rgb(255 255 255 / 0.157), 0 3px 7.5px rgb(0 0 0 / 0.2), 0 0 20px rgb(0 0 0 / 0.25) |\n| shadow/prominent/light | 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.12) |\n| shadow/prominent/dark | 0 0 0 0.5px rgb(255 255 255 / 0.157), 0 12px 32px rgb(0 0 0 / 0.5) |\n| layer/base | 0 |\n| layer/lifted | 10 |\n| layer/sticky | 20 |\n| layer/dropdown | 30 |\n| layer/overlay | 40 |\n| layer/toast | 50 |\n| layer/tooltip | 60 |\n\n**Rule:** Use the radius scale consistently, establish elevation with hairlines and shallow shadows before prominent shadows, and stack UI only with these named layers; never invent one-off z-index values like 999."}},{"kind":"atom-set","category":"atoms","slug":"typography","name":"Typography tokens","nameZh":"字体排印 token","aliases":[],"description":"Font pairings and a type scale for consistent text.","descriptionZh":"统一文字排版用的字体搭配与字号尺度。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=typography","fetch":{"method":"copy-tokens","value":"## Typography\n\n| Token | Value |\n| --- | --- |\n| font/system-neutral | display: Geist, Inter, system-ui, sans-serif; body: Geist, Inter, system-ui, sans-serif; mono: 'Geist Mono', ui-monospace, monospace |\n| font/native-crisp | display: 'SF Pro Display', -apple-system, system-ui; body: 'SF Pro Text', -apple-system, system-ui; mono: 'SF Mono', ui-monospace, Menlo |\n| font/editorial-serif | display: 'Tiempos Headline', Georgia, serif; body: -apple-system, 'Segoe UI', sans-serif; mono: ui-monospace, monospace |\n| font/humanist-warm | display: 'Camera Plain', 'PingFang SC', ui-sans-serif, system-ui; body: 'Camera Plain', 'PingFang SC', ui-sans-serif, system-ui; mono: ui-monospace, monospace |\n| font/geek-mono | display: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; body: ui-sans-serif, system-ui; mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace |\n| font/swiss-grotesk | display: 'Helvetica Neue', Helvetica, Arial, sans-serif; body: 'Helvetica Neue', Helvetica, Arial, sans-serif; mono: ui-monospace |\n| text/display | 48px / 1.1 / -0.02em |\n| text/headline | 28px / 1.2 / -0.01em |\n| text/title | 20px / 1.3 / 0 |\n| text/body | 16px / 1.5 / 0 |\n| text/body-sm | 14px / 1.5 / 0 |\n| text/caption | 12px / 1.4 / 0.01em |\n\n**Rule:** Load no webfonts for these system pairings, keep Chinese on the system family, and use only this type scale."}},{"kind":"atom-set","category":"atoms","slug":"spacing","name":"Spacing tokens","nameZh":"间距 token","aliases":[],"description":"A spacing scale, density presets, and responsive breakpoints for a consistent layout rhythm.","descriptionZh":"统一布局节奏用的间距尺度、密度预设与响应式断点。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=spacing","fetch":{"method":"copy-tokens","value":"## Spacing\n\n| Token | Value |\n| --- | --- |\n| micro | 4px |\n| tight | 8px |\n| element | 12px |\n| base | 16px |\n| group | 24px |\n| block | 32px |\n| section | 48px |\n| region | 64px |\n| density/compact | 32px row / 8px padding |\n| density/standard | 40px row / 12px padding |\n| density/comfortable | 48px row / 16px padding |\n| breakpoint/sm | 640px |\n| breakpoint/md | 768px |\n| breakpoint/lg | 1024px |\n| breakpoint/xl | 1280px |\n| breakpoint/2xl | 1536px |\n\n**Rule:** Use this scale across the entire product; never introduce off-scale values such as 13px or 18px. Design mobile-first; add a breakpoint only where the layout actually breaks."}},{"kind":"atom-set","category":"atoms","slug":"lines","name":"Line tokens","nameZh":"描边 token","aliases":[],"description":"Hairlines, borders, and outlines for consistent dividers.","descriptionZh":"统一分割用的发丝线、边框与描边。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=lines","fetch":{"method":"copy-tokens","value":"## Lines\n\n| Token | Value |\n| --- | --- |\n| divider/light | border: 1px solid rgb(0 0 0 / 0.05) |\n| divider/dark | border: 1px solid rgb(255 255 255 / 0.06) |\n| border/light | border: 1px solid rgb(0 0 0 / 0.1) |\n| border/dark | border: 1px solid rgb(255 255 255 / 0.1) |\n| border-strong/light | border: 1px solid rgb(0 0 0 / 0.15) |\n| border-strong/dark | border: 1px solid rgb(255 255 255 / 0.15) |\n| hairline-ring/light | box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08) |\n| hairline-ring/dark | box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.157) |\n| focus-ring/light | outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px |\n| focus-ring/dark | outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px |\n\n**Rule:** Do not mix a hairline ring and a 1px border on elements at the same hierarchy level."}},{"kind":"atom-set","category":"atoms","slug":"backgrounds","name":"Background tokens","nameZh":"背景质感 token","aliases":[],"description":"Static CSS background recipes for texture, plus fade masks that keep a texture from reading as wallpaper.","descriptionZh":"用于增加质感的静态 CSS 背景配方，外加让底纹不显得像壁纸的淡出遮罩。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=backgrounds","fetch":{"method":"copy-tokens","value":"## Backgrounds\n\n### Grid\n\n#### Light\n\n```css\nbackground-image: linear-gradient(rgb(0 0 0 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 0.06) 1px, transparent 1px); background-size: 24px 24px;\n```\n\n#### Dark\n\n```css\nbackground-image: linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px); background-size: 24px 24px;\n```\n\n**Use when:** For dashboard and technical backdrops.\n\n### Dot Matrix\n\n#### Light\n\n```css\nbackground-image: radial-gradient(rgb(0 0 0 / 0.12) 1px, transparent 1.5px); background-size: 20px 20px;\n```\n\n#### Dark\n\n```css\nbackground-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.5px); background-size: 20px 20px;\n```\n\n**Use when:** For airy empty states and card backgrounds.\n\n### Halftone Fine\n\n#### Light\n\n```css\nbackground-image: radial-gradient(circle, rgb(0 0 0 / 0.26) 0.55px, transparent 1.05px); background-size: 5px 5px;\n```\n\n#### Dark\n\n```css\nbackground-image: radial-gradient(circle, rgb(255 255 255 / 0.32) 0.55px, transparent 1.05px); background-size: 5px 5px;\n```\n\n**Use when:** As a whole-surface print grain that stays texture rather than pattern — it should read as paper, not polka dots.\n\n### Halftone Medium\n\n#### Light\n\n```css\nbackground-image: radial-gradient(circle, rgb(0 0 0 / 0.36) 0.7px, transparent 1.25px); background-size: 7px 7px;\n```\n\n#### Dark\n\n```css\nbackground-image: radial-gradient(circle, rgb(255 255 255 / 0.45) 0.7px, transparent 1.25px); background-size: 7px 7px;\n```\n\n**Use when:** The default print screen — coarse enough to see the dots, fine enough to sit under body copy.\n\n### Halftone Coarse\n\n#### Light\n\n```css\nbackground-image: radial-gradient(circle, rgb(0 0 0 / 0.46) 1.1px, transparent 1.7px); background-size: 11px 11px;\n```\n\n#### Dark\n\n```css\nbackground-image: radial-gradient(circle, rgb(255 255 255 / 0.55) 1.1px, transparent 1.7px); background-size: 11px 11px;\n```\n\n**Use when:** For editorial art direction where the screen itself is the statement — behind display headings and hero art.\n\n### Blueprint\n\n#### Light\n\n```css\nbackground-color: #f4f7fb; background-image: linear-gradient(rgb(37 99 235 / 0.10) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.10) 1px, transparent 1px), linear-gradient(rgb(37 99 235 / 0.20) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.20) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;\n```\n\n#### Dark\n\n```css\nbackground-color: #0b1220; background-image: linear-gradient(rgb(37 99 235 / 0.16) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.16) 1px, transparent 1px), linear-gradient(rgb(37 99 235 / 0.28) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.28) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;\n```\n\n**Use when:** For engineering and technical narratives.\n\n### Noise Grain\n\n#### Light\n\n```css\nbackground-image: url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>\"); background-size: 120px 120px;\n```\n\n#### Dark\n\n```css\nbackground-image: url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/></svg>\"); background-size: 120px 120px;\n```\n\n**Use when:** As an overlay that removes digital flatness and adds texture.\n\n### Mesh Gradient\n\n#### Light\n\n```css\nbackground-color: #fafafa; background-image: radial-gradient(at 18% 22%, rgb(99 102 241 / 0.18), transparent 50%), radial-gradient(at 82% 28%, rgb(236 72 153 / 0.15), transparent 48%), radial-gradient(at 50% 82%, rgb(45 212 191 / 0.16), transparent 50%);\n```\n\n#### Dark\n\n```css\nbackground-color: #0c0d10; background-image: radial-gradient(at 18% 22%, rgb(99 102 241 / 0.22), transparent 50%), radial-gradient(at 82% 28%, rgb(236 72 153 / 0.19), transparent 48%), radial-gradient(at 50% 82%, rgb(45 212 191 / 0.20), transparent 50%);\n```\n\n**Use when:** For a soft atmospheric backdrop behind heroes and landing pages.\n\n### Radial Glow\n\n#### Light\n\n```css\nbackground-image: radial-gradient(120% 80% at 50% 0%, rgb(51 156 255 / 0.16), transparent 60%);\n```\n\n#### Dark\n\n```css\nbackground-image: radial-gradient(120% 80% at 50% 0%, rgb(51 156 255 / 0.22), transparent 60%);\n```\n\n**Use when:** To guide attention toward a top heading or primary action.\n\n### Diagonal Stripes\n\n#### Light\n\n```css\nbackground-image: repeating-linear-gradient(45deg, rgb(0 0 0 / 0.04) 0 10px, transparent 10px 20px);\n```\n\n#### Dark\n\n```css\nbackground-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.05) 0 10px, transparent 10px 20px);\n```\n\n**Use when:** For emphasis areas, warnings, and retro treatments.\n\n### Scanlines\n\n#### Light\n\n```css\nbackground-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 3px);\n```\n\n#### Dark\n\n```css\nbackground-image: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px);\n```\n\n**Use when:** For retro, technical, and terminal-inspired interfaces.\n\n### Vignette\n\n#### Light\n\n```css\nbackground-image: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.10));\n```\n\n#### Dark\n\n```css\nbackground-image: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.28));\n```\n\n**Use when:** To focus the center and subdue the edges.\n\n### Fade mask — Fade Bottom\n\n```css\nmask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);\n```\n\n**Use when:** The default. A hero texture dissolves into the page so the section below needs no divider.\n\n### Fade mask — Fade Top\n\n```css\nmask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);\n```\n\n**Use when:** For a texture that belongs to the section below it — it grows in from the seam instead of starting abruptly.\n\n### Fade mask — Fade Ring\n\n```css\nmask-image: radial-gradient(transparent 14%, #000 60%, transparent 100%);\n```\n\n**Use when:** Punches a hole in the middle of the texture so headline and copy sit on clean ground while the edges stay textured.\n\n### Fade mask — Fade Edges\n\n```css\nmask-image: radial-gradient(#000 30%, transparent 92%);\n```\n\n**Use when:** Concentrates the texture at the centre and dissolves it before the edges, so a card or panel has no hard texture boundary.\n\n**Fade rule:** A fade is orthogonal to a texture — any recipe above can wear any mask. Put the texture on its own layer and mask that layer, never the container:\n\n```html\n<div class=\"relative\">\n  <div class=\"pointer-events-none absolute inset-0\" style=\"<texture>; <fade mask>\"></div>\n  <!-- content sits above, unmasked -->\n</div>\n```\n\nMasking the container fades the content along with the texture.\n\n**Rule:** Use these static CSS recipes for texture; for dynamic shader effects, use the `webgl-background` component. Tune any dot texture by its radius pair, not its opacity — halving both stops keeps the grid and quiets the screen."}},{"kind":"icon-style","category":"icons","slug":"outline","name":"Outline","nameZh":"线性","aliases":["lucide","feather","line icon","线框图标"],"description":"The default for tool interfaces.","descriptionZh":"工具 UI 默认。","prompt":"Outline icons, 1.5px stroke, round line caps, 24px grid, and even visual weight.","promptZh":"线性图标，1.5px 描边，圆角端点，24px 网格，视觉重量均匀。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#outline","fetch":{"method":"copy-prompt","value":"Outline icons, 1.5px stroke, round line caps, 24px grid, and even visual weight."}},{"kind":"icon-style","category":"icons","slug":"bold-outline","name":"Bold Outline","nameZh":"粗线","aliases":["2px icon","2px 图标","bold line","粗描边"],"description":"Lively, youthful interfaces that need more visual weight.","descriptionZh":"更活泼年轻、需要更强视觉重量的界面。","prompt":"Bold outline icons, 2px stroke, round line caps, 24px grid, with lively and even visual weight.","promptZh":"粗线图标，2px 描边，圆角端点，24px 网格，视觉重量活泼且均匀。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#bold-outline","fetch":{"method":"copy-prompt","value":"Bold outline icons, 2px stroke, round line caps, 24px grid, with lively and even visual weight."}},{"kind":"icon-style","category":"icons","slug":"rounded","name":"Rounded","nameZh":"圆角线性","aliases":["soft outline","柔和线性","consumer icon","消费级图标"],"description":"Friendly, consumer-facing products.","descriptionZh":"亲和、消费级产品。","prompt":"Rounded outline icons with clearly rounded caps and joins, a 24px grid, and friendly even weight.","promptZh":"圆角线性图标，端点与转角明显圆润，24px 网格，视觉重量亲和且均匀。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#rounded","fetch":{"method":"copy-prompt","value":"Rounded outline icons with clearly rounded caps and joins, a 24px grid, and friendly even weight."}},{"kind":"icon-style","category":"icons","slug":"filled","name":"Filled","nameZh":"面性","aliases":["solid icon","实心图标","tab icon","导航栏图标"],"description":"High-recognition states such as mobile tab bars.","descriptionZh":"高识别度场景，例如移动端 tab 栏。","prompt":"Filled icons with solid silhouettes, a 24px grid, high recognition, and consistent optical area.","promptZh":"面性图标，实心轮廓，24px 网格，高识别度，光学占位一致。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#filled","fetch":{"method":"copy-prompt","value":"Filled icons with solid silhouettes, a 24px grid, high recognition, and consistent optical area."}},{"kind":"icon-style","category":"icons","slug":"duotone","name":"Duotone","nameZh":"双色调","aliases":["two tone","双色","brand icon","品牌图标"],"description":"Brand-forward interfaces that can support a stronger icon voice.","descriptionZh":"品牌感较强、允许图标更有存在感的界面。","prompt":"Duotone icons with a solid primary shape and a same-color secondary shape at 30% opacity on a 24px grid.","promptZh":"双色调图标，主形实色，副形使用同色 30% 透明度，24px 网格。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#duotone","fetch":{"method":"copy-prompt","value":"Duotone icons with a solid primary shape and a same-color secondary shape at 30% opacity on a 24px grid."}},{"kind":"icon-style","category":"icons","slug":"pixel","name":"Pixel","nameZh":"像素","aliases":["pixel art","像素画","retro computing","复古计算"],"description":"Retro-computing aesthetics and deliberately game-like products.","descriptionZh":"复古计算美学与刻意游戏化的产品。","prompt":"Pixel icons built from hard-edged square cells on a 16px grid, with no curves or antialiased diagonals.","promptZh":"像素图标，16px 方格硬边，以矩形拼合，不使用曲线或抗锯齿斜线。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#pixel","fetch":{"method":"copy-prompt","value":"Pixel icons built from hard-edged square cells on a 16px grid, with no curves or antialiased diagonals."}},{"kind":"icon-motion","category":"icons","slug":"draw","name":"Draw-on","nameZh":"描边绘制","aliases":["draw-on","描边","line draw","路径绘制"],"description":"Entrance flourish for a confirm or success icon; the stroke draws itself in.","descriptionZh":"确认、成功类图标的入场；描边像被手写出来。","prompt":"On hover, animate the icon stroke with pathLength from 0 to 1 so it draws itself in over ~0.6s.","promptZh":"hover 时用 pathLength 从 0 到 1 让图标描边自我绘制入场（约 0.6s）。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#draw","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"draw\" icon={AnyLucideIcon} />\n\nInteraction: On hover, animate the icon stroke with pathLength from 0 to 1 so it draws itself in over ~0.6s."}},{"kind":"icon-motion","category":"icons","slug":"wiggle","name":"Wiggle","nameZh":"摆动","aliases":["shake","摇铃","摆动","wobble"],"description":"Notification and alert icons; a quick side-to-side wiggle draws the eye.","descriptionZh":"通知、提醒类图标；快速左右摆动吸引注意。","prompt":"On hover, rotate the icon in a keyframe wiggle of [0, -14, 10, -6, 0] degrees over ~0.6s.","promptZh":"hover 时按关键帧 [0, -14, 10, -6, 0] 度左右摆动，约 0.6s。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#wiggle","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"wiggle\" icon={AnyLucideIcon} />\n\nInteraction: On hover, rotate the icon in a keyframe wiggle of [0, -14, 10, -6, 0] degrees over ~0.6s."}},{"kind":"icon-motion","category":"icons","slug":"spin","name":"Spin","nameZh":"旋转","aliases":["rotate","旋转","转圈","refresh"],"description":"Settings, sync, and refresh icons; a full 360° rotation signals process.","descriptionZh":"设置、同步、刷新类图标；360° 旋转表示进行中。","prompt":"On hover, rotate the icon 360 degrees once with an easeInOut curve over ~0.6s.","promptZh":"hover 时以 easeInOut 旋转一圈 360°，约 0.6s。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#spin","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"spin\" icon={AnyLucideIcon} />\n\nInteraction: On hover, rotate the icon 360 degrees once with an easeInOut curve over ~0.6s."}},{"kind":"icon-motion","category":"icons","slug":"bounce","name":"Bounce","nameZh":"弹跳","aliases":["hop","弹跳","跳动","spring"],"description":"Download and scroll-down cues; a springy vertical bounce implies action.","descriptionZh":"下载、下滑提示；上下弹跳暗示动作。","prompt":"On hover, bounce the icon vertically with a spring, y from 0 to 4 and back, stiffness ~400.","promptZh":"hover 时用弹簧（刚度约 400）让图标垂直弹跳，y 从 0 到 4 再回弹。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#bounce","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"bounce\" icon={AnyLucideIcon} />\n\nInteraction: On hover, bounce the icon vertically with a spring, y from 0 to 4 and back, stiffness ~400."}},{"kind":"icon-motion","category":"icons","slug":"pop","name":"Pop","nameZh":"弹入","aliases":["scale","弹入","放大","zoom"],"description":"Add and create actions; a quick scale pop gives tactile feedback.","descriptionZh":"新增、创建动作；快速放大回弹给出触觉反馈。","prompt":"On hover, pop the icon scale from 1 to 1.25 and back with a spring.","promptZh":"hover 时用弹簧让缩放从 1 到 1.25 再回弹。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#pop","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"pop\" icon={AnyLucideIcon} />\n\nInteraction: On hover, pop the icon scale from 1 to 1.25 and back with a spring."}},{"kind":"icon-motion","category":"icons","slug":"pulse","name":"Pulse","nameZh":"脉动","aliases":["heartbeat","脉动","心跳","throb"],"description":"Like and live-status icons; a continuous gentle pulse while hovered.","descriptionZh":"点赞、在线状态类图标；hover 期间持续轻微脉动。","prompt":"While hovered, loop the icon scale between 1 and 1.15 every ~0.8s.","promptZh":"hover 期间循环缩放 1 到 1.15，约 0.8s 一次。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#pulse","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"pulse\" icon={AnyLucideIcon} />\n\nInteraction: While hovered, loop the icon scale between 1 and 1.15 every ~0.8s."}},{"kind":"icon-motion","category":"icons","slug":"nudge","name":"Nudge","nameZh":"微移","aliases":["slide","微移","位移","shift"],"description":"'Next', 'send', and link icons; a small directional nudge hints at travel.","descriptionZh":"'下一步'、'发送'、链接类图标；朝方向轻微位移暗示前进。","prompt":"On hover, nudge the icon along x by 4px and back with a spring.","promptZh":"hover 时让图标沿 x 轻移 4px 再弹回。","pageUrl":"https://ui-lab-ten.vercel.app/atoms?cat=icons#nudge","fetch":{"method":"shadcn","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json","endpoint":"https://ui-lab-ten.vercel.app/r/animated-icon","value":"Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):\n<AnimatedIcon variant=\"nudge\" icon={AnyLucideIcon} />\n\nInteraction: On hover, nudge the icon along x by 4px and back with a spring."}},{"kind":"style","category":"material","slug":"glassmorphism","name":"Glassmorphism","nameZh":"玻璃拟态","aliases":["毛玻璃","磨砂玻璃","Frosted Glass","Glass UI"],"description":"Frosted translucent cards floating over colorful glows, like a pane of misted glass.","descriptionZh":"半透明磨砂卡片浮在彩色光斑之上,像一层结了霜的玻璃。","prompt":"Design this page in a glassmorphism style: a dark blue-violet gradient background with 2-3 large blurred color glows (cyan, violet). Cards and panels are translucent white (8-12% opacity) with backdrop-filter: blur(12px), a 1px semi-transparent white border (15-20%) and large 16-24px rounded corners. Text is white; create hierarchy by lowering opacity, not by changing hue. The primary button is near-solid white with dark text; secondary buttons stay glassy. Forbidden: white or light backgrounds, fully opaque cards, harsh dark shadows, small border radii, and blurring everything — blur belongs to cards and the nav only.","promptZh":"请用玻璃拟态(Glassmorphism)风格设计这个页面:深色蓝紫渐变背景,上面放 2-3 个大的彩色模糊光斑(青色、紫色);卡片和面板用半透明白色(8%-12% 不透明度)加 backdrop-filter: blur(12px) 磨砂效果,配 1px 半透明白色描边(15%-20%)和 16-24px 的大圆角;文字用白色,次要信息靠降低不透明度区分层级;主按钮用近实色的白底深色字,次按钮保持玻璃质感。禁止:纯白或浅色背景、完全不透明的卡片、生硬的深色阴影、小圆角、给所有元素都加模糊(模糊只属于卡片和导航)。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=glassmorphism","fetch":{"method":"copy-prompt","value":"Design this page in a glassmorphism style: a dark blue-violet gradient background with 2-3 large blurred color glows (cyan, violet). Cards and panels are translucent white (8-12% opacity) with backdrop-filter: blur(12px), a 1px semi-transparent white border (15-20%) and large 16-24px rounded corners. Text is white; create hierarchy by lowering opacity, not by changing hue. The primary button is near-solid white with dark text; secondary buttons stay glassy. Forbidden: white or light backgrounds, fully opaque cards, harsh dark shadows, small border radii, and blurring everything — blur belongs to cards and the nav only."}},{"kind":"style","category":"material","slug":"neumorphism","name":"Neumorphism","nameZh":"新拟态","aliases":["软 UI","Soft UI","Neomorphism","单色拟物"],"description":"A single soft gray-blue surface where every card and button seems pressed or embossed by light and shadow alone, no outlines anywhere.","descriptionZh":"整站一块柔灰蓝底色,卡片按钮全靠光影凹凸感区分层次,不见一根描边。","prompt":"Design this page in a neumorphism style: a single-hue light blue-gray background #e0e5ec; cards share the exact same color with no border, relying on a two-directional soft shadow (light from the top-left, box-shadow: 9px 9px 16px rgba(163,177,198,.55), -9px -9px 16px rgba(255,255,255,.95)) to read as embossed volume; corners are large and soft (18px/14px); body text is a low-contrast indigo-gray #44476a, muted text #7b7f9e; the accent is a soft periwinkle #6c7ee1, reserved for the primary button and icons; the primary button sits on the accent color with white text and the same soft shadow; the secondary button matches the page background and only 'pops' via shadow, never a border; dividers are a faint 1px #cdd3e0. Forbidden: pure black or white, any crisp outline, high-contrast color pairs, sharp hard-edged shadows, saturated clashing colors, and flat shadowless cards.","promptZh":"请用新拟态(Neumorphism)风格设计这个页面:整站单色浅灰蓝背景 #e0e5ec;卡片与背景同色,不用描边,靠双向柔阴影(阳光从左上照射,box-shadow: 9px 9px 16px rgba(163,177,198,.55), -9px -9px 16px rgba(255,255,255,.95))撑出凸起体积感;圆角大而柔和(18px/14px);正文用低对比的靛灰色 #44476a,次要文字 #7b7f9e;强调色是柔和靛蓝 #6c7ee1,只用在主按钮和图标上;主按钮 accent 底、白字,配同款柔阴影;次按钮与背景同色,靠阴影「凸」出来,不加描边;分割线用极淡的 1px #cdd3e0。禁止:纯黑或纯白、任何清晰描边、强对比配色、锐利硬阴影、鲜艳撞色、平面无阴影的卡片。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=neumorphism","fetch":{"method":"copy-prompt","value":"Design this page in a neumorphism style: a single-hue light blue-gray background #e0e5ec; cards share the exact same color with no border, relying on a two-directional soft shadow (light from the top-left, box-shadow: 9px 9px 16px rgba(163,177,198,.55), -9px -9px 16px rgba(255,255,255,.95)) to read as embossed volume; corners are large and soft (18px/14px); body text is a low-contrast indigo-gray #44476a, muted text #7b7f9e; the accent is a soft periwinkle #6c7ee1, reserved for the primary button and icons; the primary button sits on the accent color with white text and the same soft shadow; the secondary button matches the page background and only 'pops' via shadow, never a border; dividers are a faint 1px #cdd3e0. Forbidden: pure black or white, any crisp outline, high-contrast color pairs, sharp hard-edged shadows, saturated clashing colors, and flat shadowless cards."}},{"kind":"style","category":"material","slug":"claymorphism","name":"Claymorphism","nameZh":"黏土拟态","aliases":["黏土风","Clay UI","3D 软泥风","Claymorphic"],"description":"Cards look pinched out of soft purple clay, plump and rounded with a light gleam caught in every fold.","descriptionZh":"卡片像被捏出来的一坨紫色软泥,浑圆饱满,每一道折痕都留着一点高光。","prompt":"Design this page in a claymorphism style: a soft lavender-blue background #eef1ff; cards are solid white #ffffff with oversized, almost gumdrop-like corners (30px, 18px on small components); the signature move is layering an inset highlight and an outer drop shadow together — inset 4px 4px 10px rgba(120,120,190,.18), inset -6px -6px 12px #ffffff, plus an outer 10px 14px 24px rgba(120,120,190,.28) — so cards read as pinched, puffy clay; the accent is candy purple #7c6cf6; badges sit on soft pink #ffd6ea with deep purple text; the primary button is purple with white text in a pill-like rounded shape; body text is deep grayish purple #2f2a45, muted text #6f6a8a; headings are weight 700, noticeably bold but never harsh. Forbidden: sharp square corners, pure black shadows, thin outline borders, desaturated gray tones, flat shadowless cards, and any glassy transparency.","promptZh":"请用黏土拟态(Claymorphism)风格设计这个页面:背景是浅紫雾蓝 #eef1ff;卡片纯白 #ffffff,圆角超大近乎软糖块(30px,小组件 18px);标志性的内外双阴影同时使用——内凹提亮 inset 4px 4px 10px rgba(120,120,190,.18)、内凹高光 inset -6px -6px 12px #ffffff,外层再叠一层向下投影 10px 14px 24px rgba(120,120,190,.28),做出「捏出来的软泥块」体积感;强调色用糖果紫 #7c6cf6;徽章用柔粉底 #ffd6ea 配深紫字;主按钮紫底白字、胶囊感圆角;正文深灰紫 #2f2a45,次要文字 #6f6a8a;标题字重 700,略粗但不生硬。禁止:硬直角、纯黑投影、细描边线框、低饱和灰调、扁平无阴影卡片、玻璃通透感。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=claymorphism","fetch":{"method":"copy-prompt","value":"Design this page in a claymorphism style: a soft lavender-blue background #eef1ff; cards are solid white #ffffff with oversized, almost gumdrop-like corners (30px, 18px on small components); the signature move is layering an inset highlight and an outer drop shadow together — inset 4px 4px 10px rgba(120,120,190,.18), inset -6px -6px 12px #ffffff, plus an outer 10px 14px 24px rgba(120,120,190,.28) — so cards read as pinched, puffy clay; the accent is candy purple #7c6cf6; badges sit on soft pink #ffd6ea with deep purple text; the primary button is purple with white text in a pill-like rounded shape; body text is deep grayish purple #2f2a45, muted text #6f6a8a; headings are weight 700, noticeably bold but never harsh. Forbidden: sharp square corners, pure black shadows, thin outline borders, desaturated gray tones, flat shadowless cards, and any glassy transparency."}},{"kind":"style","category":"material","slug":"liquid-glass","name":"Liquid Glass","nameZh":"液态玻璃","aliases":["Liquid Glass","Apple 液态玻璃","iOS 26 风格","水润玻璃"],"description":"Bright, dewy glass panels that glow with saturated light instead of hiding in a dark aurora — Apple's newest surface language.","descriptionZh":"明亮水润的玻璃面板,不靠深色极光遮掩,而是让饱和的光透出来——苹果最新的界面语言。","prompt":"Design this page in a liquid glass style: a bright blue-white gradient background linear-gradient(160deg, #dfe9f5 0%, #f4f8fd 55%, #e3ecf7 100%) — luminous and airy, never dark; cards are translucent white rgba(255,255,255,.45) layered with backdrop-filter: blur(20px) saturate(160%) so the base color shows through with a wetter, more saturated glow; borders are a near-solid 1px solid rgba(255,255,255,.75) that rings the edge with a liquid highlight; corners are either large and rounded (28px) or pushed all the way to a 999px capsule; the accent is true iOS blue #0a84ff, reserved for the primary button and interactive states; body text is deep near-black #1d1d1f, muted text is the same color at 60% opacity; the primary button is blue with white text in a capsule shape, with a soft shadow and a thin top highlight line to mimic light reflecting off water. Forbidden: dark backgrounds, dull low-saturation glass, hard square corners, matte flat-color borders, and the dark neon color-glow look of classic glassmorphism.","promptZh":"请用液态玻璃(Liquid Glass)风格设计这个页面:背景是浅蓝白渐变 linear-gradient(160deg, #dfe9f5 0%, #f4f8fd 55%, #e3ecf7 100%),明亮通透,不用深色;卡片用半透明白 rgba(255,255,255,.45)叠加 backdrop-filter: blur(20px) saturate(160%),让底色透出饱和度更高的「湿润」质感;描边用近乎实白的 1px solid rgba(255,255,255,.75),在边缘制造一圈液态高光;圆角要么大且圆润(28px),要么直接做成 999px 全胶囊;强调色是纯正的 iOS 蓝 #0a84ff,只用在主按钮和交互态上;正文深灰黑 #1d1d1f,次要文字用同色降到 60% 不透明度;主按钮蓝底白字胶囊形,搭配柔和投影和顶部一条高光线模拟水面反光。禁止:深色背景、低饱和灰蒙蒙的玻璃、生硬直角、无光泽的纯色描边、和玻璃拟态一样的暗色霓虹光斑。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=liquid-glass","fetch":{"method":"copy-prompt","value":"Design this page in a liquid glass style: a bright blue-white gradient background linear-gradient(160deg, #dfe9f5 0%, #f4f8fd 55%, #e3ecf7 100%) — luminous and airy, never dark; cards are translucent white rgba(255,255,255,.45) layered with backdrop-filter: blur(20px) saturate(160%) so the base color shows through with a wetter, more saturated glow; borders are a near-solid 1px solid rgba(255,255,255,.75) that rings the edge with a liquid highlight; corners are either large and rounded (28px) or pushed all the way to a 999px capsule; the accent is true iOS blue #0a84ff, reserved for the primary button and interactive states; body text is deep near-black #1d1d1f, muted text is the same color at 60% opacity; the primary button is blue with white text in a capsule shape, with a soft shadow and a thin top highlight line to mimic light reflecting off water. Forbidden: dark backgrounds, dull low-saturation glass, hard square corners, matte flat-color borders, and the dark neon color-glow look of classic glassmorphism."}},{"kind":"style","category":"raw","slug":"neubrutalism","name":"Neubrutalism","nameZh":"新粗野主义","aliases":["新野兽派","Neo-brutalism","新粗野风"],"description":"Thick black borders, hard offset shadows and clashing candy colors — deliberately unpolished, loudly alive.","descriptionZh":"粗黑描边、硬阴影和糖果撞色,故意的「不精致」,张扬得理直气壮。","prompt":"Design this page in a neubrutalism style: a bright cream background; every card, button and input gets a 2px solid black border with a hard black shadow (box-shadow: 4px 4px 0 #111 — zero blur); corners are sharp or barely rounded (4-8px); headings are extra bold (800-900); clash saturated candy colors (hot pink, lemon yellow, mint). On hover, elements translate a few pixels toward the shadow while the shadow shrinks, so they feel physically pressed. Forbidden: soft shadows, any gradients, transparency, thin font weights, desaturated grays, large border radii.","promptZh":"请用新粗野主义(Neubrutalism)风格设计这个页面:明亮的奶油色底;所有卡片、按钮、输入框都用 2px 纯黑描边,配黑色硬阴影(box-shadow: 4px 4px 0 #111,零模糊);圆角很小(4-8px)或干脆直角;标题用超粗字重(800-900);配色用高饱和糖果色撞色(亮粉、柠檬黄、薄荷绿);hover 时元素朝阴影方向平移几像素、阴影同步缩小,像被物理按下去。禁止:柔和阴影、任何渐变、半透明、细字重、低饱和灰色调、大圆角。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=neubrutalism","fetch":{"method":"copy-prompt","value":"Design this page in a neubrutalism style: a bright cream background; every card, button and input gets a 2px solid black border with a hard black shadow (box-shadow: 4px 4px 0 #111 — zero blur); corners are sharp or barely rounded (4-8px); headings are extra bold (800-900); clash saturated candy colors (hot pink, lemon yellow, mint). On hover, elements translate a few pixels toward the shadow while the shadow shrinks, so they feel physically pressed. Forbidden: soft shadows, any gradients, transparency, thin font weights, desaturated grays, large border radii."}},{"kind":"style","category":"raw","slug":"brutalism","name":"Brutalism","nameZh":"原教旨粗野主义","aliases":["粗野主义网页","Web Brutalism","原生 HTML 风","Brutalist Web Design"],"description":"Back to the web's rawest state — pure black, pure white, Times New Roman, none of neubrutalism's candy colors or hard shadows. This is 'raw' in the literal sense.","descriptionZh":"回到网页最原始的模样:纯白、纯黑、Times New Roman,没有新粗野主义的糖果色和硬阴影 —— 这才是真正意义上的「生」。","prompt":"Design this page in brutalism (raw web) style: pure white background #ffffff with pure black text #000000, secondary text #333333; fall back to the browser's default serif stack — \"Times New Roman\", Times, serif — no custom web fonts; keep links native blue #0000ee with an underline; give every card and button a 1px solid #000000 table-like square border, zero radius; shadows are always none, no depth or hover-lift effects; headings are weight 700 with zero letter-spacing, relying only on font-size to build hierarchy; separate sections with 1px solid #000000 hairlines instead of whitespace. Forbidden: rounded corners, shadows, gradients, brand or candy colors, custom fonts, decorative hover/transform animations.","promptZh":"请用原教旨粗野主义(Brutalism)风格设计这个页面:纯白背景 #ffffff、纯黑文字 #000000,次要文字用 #333333;全局字体退回浏览器默认衬线体 \"Times New Roman\", Times, serif,不引入任何自定义 Web 字体;链接保持原生蓝 #0000ee 加下划线;卡片、按钮统一用 1px solid #000000 的表格感直角边框,圆角为 0;阴影一律 none,不做任何立体或悬浮效果;标题字重 700、字距为 0,只靠字号差异分层级;区块之间用 1px solid #000000 的分隔线代替留白暗示。禁止:任何圆角、阴影、渐变、品牌色或糖果色、自定义字体、多余的悬浮/位移动效。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=brutalism","fetch":{"method":"copy-prompt","value":"Design this page in brutalism (raw web) style: pure white background #ffffff with pure black text #000000, secondary text #333333; fall back to the browser's default serif stack — \"Times New Roman\", Times, serif — no custom web fonts; keep links native blue #0000ee with an underline; give every card and button a 1px solid #000000 table-like square border, zero radius; shadows are always none, no depth or hover-lift effects; headings are weight 700 with zero letter-spacing, relying only on font-size to build hierarchy; separate sections with 1px solid #000000 hairlines instead of whitespace. Forbidden: rounded corners, shadows, gradients, brand or candy colors, custom fonts, decorative hover/transform animations."}},{"kind":"style","category":"raw","slug":"maximalism","name":"Maximalism","nameZh":"极繁主义","aliases":["极繁主义","Maximalism","More is More","反极简风"],"description":"A violet gradient backdrop, lemon-yellow cards and colorful hard shadows — the exact opposite of 'less is more': more is more.","descriptionZh":"紫色渐变打底、柠檬黄卡片撞彩色硬阴影,把「少即是多」整个反过来说 —— 多即是多。","prompt":"Design this page in maximalism style: a bright violet gradient page background linear-gradient(160deg, #6a2ff7 0%, #8b3df5 100%), white body text, semi-transparent white rgba(255,255,255,.75) for secondary text; cards in saturated lemon yellow #ffe14d with a 3px solid deep-violet border #16003b, 12px radius, and deep-violet #16003b text inside cards for contrast; every card and button gets a colorful hard shadow box-shadow: 6px 6px 0 0 #ff2d78 with zero blur; the accent is hot magenta #ff2d78, splashed across buttons, icon blocks and numbers; badges are cyan #2de1c2 with black text, uppercase with wide tracking; headings sit at font-weight 900, and elements are packed tight with almost no breathing room. Forbidden: generous whitespace, a single dominant hue, thin font weights, minimalist restraint, soft gradients or desaturated Morandi tones.","promptZh":"请用极繁主义(Maximalism)风格设计这个页面:整页背景用亮紫渐变 linear-gradient(160deg, #6a2ff7 0%, #8b3df5 100%),正文用白色,次要文字用半透明白 rgba(255,255,255,.75);卡片用高饱和柠檬黄 #ffe14d,配 3px 实色深紫边框 #16003b,圆角 12px,卡片内文字改用深紫 #16003b 保证对比;所有卡片、按钮统一用彩色硬阴影 box-shadow: 6px 6px 0 0 #ff2d78,零模糊;强调色用品红 #ff2d78,大量用于按钮、图标块和数字;徽标(badge)用青绿色 #2de1c2 底配黑字,大写字母加宽字距;标题字重给到 900,营造塞满版面的视觉密度,元素之间尽量不留呼吸空间。禁止:大面积留白、单一主色调、纤细字重、性冷淡极简排版、柔和渐变或低饱和莫兰迪色。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=maximalism","fetch":{"method":"copy-prompt","value":"Design this page in maximalism style: a bright violet gradient page background linear-gradient(160deg, #6a2ff7 0%, #8b3df5 100%), white body text, semi-transparent white rgba(255,255,255,.75) for secondary text; cards in saturated lemon yellow #ffe14d with a 3px solid deep-violet border #16003b, 12px radius, and deep-violet #16003b text inside cards for contrast; every card and button gets a colorful hard shadow box-shadow: 6px 6px 0 0 #ff2d78 with zero blur; the accent is hot magenta #ff2d78, splashed across buttons, icon blocks and numbers; badges are cyan #2de1c2 with black text, uppercase with wide tracking; headings sit at font-weight 900, and elements are packed tight with almost no breathing room. Forbidden: generous whitespace, a single dominant hue, thin font weights, minimalist restraint, soft gradients or desaturated Morandi tones."}},{"kind":"style","category":"minimal","slug":"swiss","name":"Swiss Style","nameZh":"瑞士极简","aliases":["国际主义风格","International Typographic Style","网格系统风"],"description":"Black on white plus one red: huge type, a strict grid and whitespace do all the talking.","descriptionZh":"白底黑字加一点红,大字号、严格网格和留白完成全部表达。","prompt":"Design this page in Swiss / International Typographic Style: pure white background, near-black text, exactly one accent color (classic Swiss red). Headlines use a very large sans-serif (Helvetica / Inter family) at weight 700 with tight letter-spacing (~-0.03em), at least 4x the body size. Left-align everything on a strict grid with generous whitespace; separate sections with 1px black hairlines. Buttons are sharp-cornered solid black rectangles or plain text links; small labels are uppercase with wide tracking. Forbidden: shadows, gradients, rounded corners, decorative illustrations, a second accent color, and centered layouts — stay left-aligned on the grid.","promptZh":"请用瑞士极简 / 国际主义(Swiss Style)风格设计这个页面:纯白背景、近黑文字,全站只用一个强调色(经典是红色);标题用非常大的无衬线字体(Helvetica / Inter 一类),字重 700、字距收紧(约 -0.03em),和正文形成 4 倍以上的大小反差;严格按网格左对齐,大量留白;区块之间用 1px 黑色细线分隔;按钮是直角的黑色实色矩形或纯文字链接;小标签用大写字母加宽字距。禁止:阴影、渐变、圆角、装饰性插画和图形、第二种强调色、居中排版(保持左对齐网格)。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=swiss","fetch":{"method":"copy-prompt","value":"Design this page in Swiss / International Typographic Style: pure white background, near-black text, exactly one accent color (classic Swiss red). Headlines use a very large sans-serif (Helvetica / Inter family) at weight 700 with tight letter-spacing (~-0.03em), at least 4x the body size. Left-align everything on a strict grid with generous whitespace; separate sections with 1px black hairlines. Buttons are sharp-cornered solid black rectangles or plain text links; small labels are uppercase with wide tracking. Forbidden: shadows, gradients, rounded corners, decorative illustrations, a second accent color, and centered layouts — stay left-aligned on the grid."}},{"kind":"style","category":"minimal","slug":"minimalism","name":"Minimalism","nameZh":"极简主义","aliases":["极简风","Minimal","性冷淡风","Minimalist Design"],"description":"A softer, more universal minimalism than Swiss style — no strict grid or red accent, just generous whitespace and restrained grayscale that hands focus back to the content.","descriptionZh":"比瑞士风更柔和、更通用的极简:不靠网格和红色说话,靠大量留白和克制的灰阶把视线交还给内容。","prompt":"Design this page in minimalism style: a near-white background #fcfcfc, dark gray body text #171717, mid-gray secondary text #737373; cards are soft gray blocks #f4f4f5 with no visible border, large 12px radius (8px for small controls), and no shadow; the accent color is simply the primary text color #171717 — no brand hue; primary buttons are solid black with white text, secondary buttons are transparent with a 1px light-gray border #d4d4d4; headings sit at weight 600 with tight -0.02em tracking, restrained but not harsh; separate sections with a 1px light-gray divider #e5e5e5 instead of card shadows. Forbidden: saturated colors, hard shadows, thick black borders, oversized type contrast, decorative graphics.","promptZh":"请用极简主义(Minimalism)风格设计这个页面:近白背景 #fcfcfc,正文深灰 #171717,次要文字中灰 #737373;卡片用浅灰块 #f4f4f5,不设可见描边,大圆角 12px(小尺寸控件用 8px),不用阴影;强调色就是主文字色本身 #171717,不引入品牌色;主按钮纯黑底白字,次按钮透明底配 1px 浅灰描边 #d4d4d4;标题字重 600、字距收紧到 -0.02em,克制但不生硬;区块间用 1px 浅灰分隔线 #e5e5e5 代替卡片阴影。禁止:高饱和色、硬阴影、粗黑描边、超大字号对比、装饰性图形。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=minimalism","fetch":{"method":"copy-prompt","value":"Design this page in minimalism style: a near-white background #fcfcfc, dark gray body text #171717, mid-gray secondary text #737373; cards are soft gray blocks #f4f4f5 with no visible border, large 12px radius (8px for small controls), and no shadow; the accent color is simply the primary text color #171717 — no brand hue; primary buttons are solid black with white text, secondary buttons are transparent with a 1px light-gray border #d4d4d4; headings sit at weight 600 with tight -0.02em tracking, restrained but not harsh; separate sections with a 1px light-gray divider #e5e5e5 instead of card shadows. Forbidden: saturated colors, hard shadows, thick black borders, oversized type contrast, decorative graphics."}},{"kind":"style","category":"minimal","slug":"editorial","name":"Editorial","nameZh":"杂志编辑风","aliases":["杂志风","Editorial Design","报刊排版风","Magazine Style"],"description":"A warm paper-toned background with serif display headlines and a wine-red accent — the feel of flipping through a well-made indie magazine.","descriptionZh":"米白纸感底色配衬线大标题,酒红点缀,像翻开一本考究的独立杂志。","prompt":"Design this page in editorial (magazine) style: a warm paper background #faf7f2, ink-black body text #1c1a17, warm-gray secondary text #6e675c; set headlines in a serif — Georgia, \"Times New Roman\", serif — at weight 700 with tight -0.01em tracking for a typeset feel; cards are cream paper blocks #f4efe6 with no visible border, only 2px radius, and no shadow; the accent is a deep wine red #8c2f39, reserved for badge text and key emphasis; badges are transparent with wine-red uppercase text at 0.16em tracking, like a journal section tag; primary buttons are sharp-cornered ink black with cream text, secondary buttons get a thin #d8d0c2 outline; separate sections with a 1px tan hairline #d8d0c2 for a printed-column feel. Forbidden: bold sans-serif display headlines, saturated color clashes, hard shadows, large border radii, digital/tech-flavored decoration.","promptZh":"请用杂志编辑风(Editorial)风格设计这个页面:米白纸感背景 #faf7f2,墨黑正文 #1c1a17,次要文字暖灰 #6e675c;标题字体换成衬线 Georgia, \"Times New Roman\", serif,字重 700、字距收紧到 -0.01em,做出排版感;卡片用米黄纸色块 #f4efe6,不设描边,圆角仅 2px,不用阴影;强调色是深酒红 #8c2f39,只用在徽标文字和关键强调处;徽标是透明底酒红字,大写字母加宽字距到 0.16em,像期刊分类标签;主按钮墨黑底米白字直角,次按钮细描边 #d8d0c2;区块间用 1px 米棕分隔线 #d8d0c2,营造版面栏线感。禁止:无衬线大黑体标题、高饱和撞色、硬阴影、大圆角、数字化科技感元素。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=editorial","fetch":{"method":"copy-prompt","value":"Design this page in editorial (magazine) style: a warm paper background #faf7f2, ink-black body text #1c1a17, warm-gray secondary text #6e675c; set headlines in a serif — Georgia, \"Times New Roman\", serif — at weight 700 with tight -0.01em tracking for a typeset feel; cards are cream paper blocks #f4efe6 with no visible border, only 2px radius, and no shadow; the accent is a deep wine red #8c2f39, reserved for badge text and key emphasis; badges are transparent with wine-red uppercase text at 0.16em tracking, like a journal section tag; primary buttons are sharp-cornered ink black with cream text, secondary buttons get a thin #d8d0c2 outline; separate sections with a 1px tan hairline #d8d0c2 for a printed-column feel. Forbidden: bold sans-serif display headlines, saturated color clashes, hard shadows, large border radii, digital/tech-flavored decoration."}},{"kind":"style","category":"minimal","slug":"japanese-minimal","name":"Japanese Minimalism","nameZh":"日式极简","aliases":["日式极简","Japandi","侘寂风","MUJI 风"],"description":"Warm off-white paper tones with ink-gray text and vermillion used only in tiny doses — restraint so deliberate that the whitespace itself becomes the message.","descriptionZh":"暖白纸色配墨灰文字,朱红只点缀在极小面积,克制得近乎留白本身就是内容。","prompt":"Design this page in Japanese minimalism (Japandi) style: warm off-white background #f7f5f0, ink-gray body text #2b2b2b, soft taupe secondary text #8a857c; cards match the page color #f7f5f0, separated only by a thin 1px border #e6e0d4, with just 4px radius and never a shadow; the accent vermillion #b5432a appears only in tiny doses — badge text, small numerals — never as a large color block; badges are transparent with uppercase vermillion text at 0.2em tracking; headings use a light weight (500) with slightly loosened 0.02em tracking for breathing room, the opposite of the usual tight-minimalism move; primary buttons are sharp-cornered ink black with warm-white text, secondary buttons stay transparent with a thin ink outline; separate sections with a 1px taupe hairline #e6e0d4. Forbidden: large vermillion or saturated color blocks, hard shadows, thick borders, ornate decoration, extra-bold display headlines.","promptZh":"请用日式极简(Japanese Minimalism / Japandi)风格设计这个页面:暖白背景 #f7f5f0,墨灰正文 #2b2b2b,次要文字浅灰褐 #8a857c;卡片与页面同色 #f7f5f0,只用 1px 细边 #e6e0d4 做区隔,圆角仅 4px,绝不用阴影;强调色朱红 #b5432a 只出现在极小面积——徽标文字、数字这类点缀处,大面积绝不铺色;徽标透明底朱红字,大写字母加宽字距到 0.2em;标题字重偏轻(500),字距略微放宽到 0.02em,留出呼吸感,而非常规极简的收紧字距;主按钮墨黑底暖白字直角,次按钮透明配墨色细框;区块间用 1px 浅褐分隔线 #e6e0d4。禁止:大面积朱红或任何高饱和色块、硬阴影、粗描边、繁复装饰、超粗字重标题。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=japanese-minimal","fetch":{"method":"copy-prompt","value":"Design this page in Japanese minimalism (Japandi) style: warm off-white background #f7f5f0, ink-gray body text #2b2b2b, soft taupe secondary text #8a857c; cards match the page color #f7f5f0, separated only by a thin 1px border #e6e0d4, with just 4px radius and never a shadow; the accent vermillion #b5432a appears only in tiny doses — badge text, small numerals — never as a large color block; badges are transparent with uppercase vermillion text at 0.2em tracking; headings use a light weight (500) with slightly loosened 0.02em tracking for breathing room, the opposite of the usual tight-minimalism move; primary buttons are sharp-cornered ink black with warm-white text, secondary buttons stay transparent with a thin ink outline; separate sections with a 1px taupe hairline #e6e0d4. Forbidden: large vermillion or saturated color blocks, hard shadows, thick borders, ornate decoration, extra-bold display headlines."}},{"kind":"style","category":"retro","slug":"y2k","name":"Y2K","nameZh":"千禧风","aliases":["千禧风","Y2K Aesthetic","千禧辣妹风","Cyber Y2K"],"description":"Brushed-chrome gradients, candy-pink badges and glossy capsule buttons — the millennium's idea of the future.","descriptionZh":"银色金属渐变配糖果粉徽标,胶囊按钮泛着光泽,是千禧年想象中的未来感。","prompt":"Design this page in Y2K style: wash the whole page in a silver metallic gradient linear-gradient(135deg, #dfe3f0 0%, #f6f7fb 50%, #cfd6ea 100%); cards sit on frosted translucent white rgba(255,255,255,.7) with a 1px solid #aab4d4 edge for a brushed-chrome feel; large cards use 24px rounded corners while buttons and badges go full capsule at 999px; the primary button is bright blue #3d7bff on white text with a glossy drop shadow 0 6px 14px rgba(61,123,255,.4); badges pair candy pink #ff8ad8 with deep plum #4a0e3a text; body copy sits at #1f2544, secondary text at #5a6285; headings carry weight 700 for a light futuristic edge; layer a soft glow behind the content to push the tech-candy mood. Forbidden: over-blurred frosted glass that swallows legibility, stark black-and-white high contrast, minimalist wireframe styling, raw hand-drawn doodles, any aged/grunge retro filter.","promptZh":"请用千禧风(Y2K)风格设计这个页面:整页底色用银色金属渐变 linear-gradient(135deg, #dfe3f0 0%, #f6f7fb 50%, #cfd6ea 100%);卡片用半透明白 rgba(255,255,255,.7) 叠 1px solid #aab4d4 描边,营造磨砂金属质感;大卡片圆角 24px,按钮 / 徽标用 999px 全胶囊圆角;主按钮亮蓝 #3d7bff 底白字,配光泽感投影 0 6px 14px rgba(61,123,255,.4);徽标用糖果粉 #ff8ad8 底配深紫 #4a0e3a 字;正文字色 #1f2544,次要文字 #5a6285;标题字重 700,略带未来感但不夸张;背景叠加流光光晕层增强科技糖果氛围。禁止:磨砂玻璃过度模糊到看不清文字、纯黑纯白无过渡的高对比、极简线框风、粗野手绘涂鸦、任何做旧做脏的复古滤镜。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=y2k","fetch":{"method":"copy-prompt","value":"Design this page in Y2K style: wash the whole page in a silver metallic gradient linear-gradient(135deg, #dfe3f0 0%, #f6f7fb 50%, #cfd6ea 100%); cards sit on frosted translucent white rgba(255,255,255,.7) with a 1px solid #aab4d4 edge for a brushed-chrome feel; large cards use 24px rounded corners while buttons and badges go full capsule at 999px; the primary button is bright blue #3d7bff on white text with a glossy drop shadow 0 6px 14px rgba(61,123,255,.4); badges pair candy pink #ff8ad8 with deep plum #4a0e3a text; body copy sits at #1f2544, secondary text at #5a6285; headings carry weight 700 for a light futuristic edge; layer a soft glow behind the content to push the tech-candy mood. Forbidden: over-blurred frosted glass that swallows legibility, stark black-and-white high contrast, minimalist wireframe styling, raw hand-drawn doodles, any aged/grunge retro filter."}},{"kind":"style","category":"retro","slug":"vaporwave","name":"Vaporwave","nameZh":"蒸汽波","aliases":["蒸汽波","Vaporwave","80s 复古未来","Synthwave"],"description":"Deep-purple dusk, a neon grid horizon and pink-on-cyan glow — an 80s arcade sunset frozen in CSS.","descriptionZh":"深紫暮色配霓虹网格地平线,粉青对撞发着光,像被冻结的 80 年代街机落日。","prompt":"Design this page in Vaporwave style: base the page on a deep-purple vertical gradient linear-gradient(180deg, #1a0b3b 0%, #3c1a78 100%) with a neon grid horizon layered behind the content; cards fill with translucent deep purple rgba(30,10,70,.55) and a cyan edge 1px solid rgba(1,205,254,.5); the primary accent is neon pink #ff71ce with cyan #01cdfe as the secondary accent; headings are fully uppercase, weight 700, tracked out to 0.08em for that synth-aesthetic feel; badges pair cyan fills with deep-purple #1a0b3b text in sharp rectangles; the primary button is pink with deep-purple text wrapped in a neon glow box-shadow: 0 0 24px rgba(255,113,206,.35); dividers are thin cyan hairlines 1px solid rgba(1,205,254,.35). Forbidden: any warm palette (orange, brown, earth tones), minimalist white backgrounds, soft pastel macaron colors, rounded cartoonish outlines, paper texture or film-grain filters.","promptZh":"请用蒸汽波(Vaporwave)风格设计这个页面:整页底色用深紫渐变 linear-gradient(180deg, #1a0b3b 0%, #3c1a78 100%),背景叠加霓虹网格地平线;卡片用半透明深紫 rgba(30,10,70,.55) 填充,配青色描边 1px solid rgba(1,205,254,.5);强调色用霓虹粉 #ff71ce,搭配青色 #01cdfe 做次强调;标题全部大写(text-transform: uppercase),字重 700、字间距拉宽到 0.08em,营造合成器美学;徽标用青色底配深紫字 #1a0b3b,直角矩形;主按钮粉底深紫字,四周叠加霓虹光晕 box-shadow: 0 0 24px rgba(255,113,206,.35);分隔线用 1px solid rgba(1,205,254,.35) 的细青线。禁止:任何暖色调(橙、棕、大地色)、无衬线极简白底、柔和马卡龙配色、圆润卡通描边、纸质纹理或胶片颗粒滤镜。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=vaporwave","fetch":{"method":"copy-prompt","value":"Design this page in Vaporwave style: base the page on a deep-purple vertical gradient linear-gradient(180deg, #1a0b3b 0%, #3c1a78 100%) with a neon grid horizon layered behind the content; cards fill with translucent deep purple rgba(30,10,70,.55) and a cyan edge 1px solid rgba(1,205,254,.5); the primary accent is neon pink #ff71ce with cyan #01cdfe as the secondary accent; headings are fully uppercase, weight 700, tracked out to 0.08em for that synth-aesthetic feel; badges pair cyan fills with deep-purple #1a0b3b text in sharp rectangles; the primary button is pink with deep-purple text wrapped in a neon glow box-shadow: 0 0 24px rgba(255,113,206,.35); dividers are thin cyan hairlines 1px solid rgba(1,205,254,.35). Forbidden: any warm palette (orange, brown, earth tones), minimalist white backgrounds, soft pastel macaron colors, rounded cartoonish outlines, paper texture or film-grain filters."}},{"kind":"style","category":"retro","slug":"pixel-art","name":"Pixel Art","nameZh":"像素风","aliases":["像素风","8-bit","Pixel Art","红白机风"],"description":"Chunky black outlines, monospace type and zero-blur hard shadows — a sprite sheet rendered as a webpage.","descriptionZh":"粗黑直角描边、等宽字体和零模糊硬阴影,像一张精灵图被渲染成了网页。","prompt":"Design this page in Pixel Art style: base the page on midnight blue #26233a; cards fill with dark grey-violet #1f1d2e and a chunky 3px solid #0c0a14 square border — every radius is 0; swap the body font for a monospace stack '\"Courier New\", ui-monospace, monospace' to sell the game-sprite feel; the accent color is glowing green #7fff6b; headings are fully uppercase, weight 700, tracked to 0.04em; badges are glowing green fills with pure black text in sharp rectangles, no border; the primary button is glowing green on black text with a hard shadow box-shadow: 4px 4px 0 0 #0c0a14 (zero blur); the secondary button is transparent with a glowing green outline; dividers are thick 3px solid #0c0a14 rules. Forbidden: any rounded corners, any gradients, soft blurred shadows, thin font weights, serif fonts, anti-aliased soft edges.","promptZh":"请用像素风(Pixel Art)风格设计这个页面:整页底色用深夜蓝 #26233a;卡片用深灰紫 #1f1d2e 填充,配 3px solid #0c0a14 的粗直角描边,圆角一律为 0;全局字体换成等宽字体 \"Courier New\", ui-monospace, monospace,强化像素游戏感;强调色用荧光绿 #7fff6b;标题全部大写、字重 700、字间距 0.04em;徽标用荧光绿底配纯黑字,直角矩形,不带描边;主按钮荧光绿底黑字,配硬阴影 box-shadow: 4px 4px 0 0 #0c0a14(零模糊);次按钮用透明底配荧光绿描边;分隔线用 3px solid #0c0a14 的粗线。禁止:任何圆角、任何渐变色、模糊柔和投影、细字重、衬线字体、抗锯齿式的柔和边缘。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=pixel-art","fetch":{"method":"copy-prompt","value":"Design this page in Pixel Art style: base the page on midnight blue #26233a; cards fill with dark grey-violet #1f1d2e and a chunky 3px solid #0c0a14 square border — every radius is 0; swap the body font for a monospace stack '\"Courier New\", ui-monospace, monospace' to sell the game-sprite feel; the accent color is glowing green #7fff6b; headings are fully uppercase, weight 700, tracked to 0.04em; badges are glowing green fills with pure black text in sharp rectangles, no border; the primary button is glowing green on black text with a hard shadow box-shadow: 4px 4px 0 0 #0c0a14 (zero blur); the secondary button is transparent with a glowing green outline; dividers are thick 3px solid #0c0a14 rules. Forbidden: any rounded corners, any gradients, soft blurred shadows, thin font weights, serif fonts, anti-aliased soft edges."}},{"kind":"style","category":"retro","slug":"frutiger-aero","name":"Frutiger Aero","nameZh":"Frutiger Aero","aliases":["Frutiger Aero","Vista 风","水晶气泡风","Aero 玻璃风"],"description":"Sky-blue-to-grass gradients, dewy glass cards and a grass-green glow — 2000s optimism rendered in Aero glass.","descriptionZh":"天空到草地的渐变配露珠玻璃卡片,草绿微光点缀,是 2000 年代那股乐观的 Aero 玻璃质感。","prompt":"Design this page in Frutiger Aero style: base the page on a fresh sky-to-grass gradient linear-gradient(160deg, #9fd8f7 0%, #e8f7ff 55%, #d3f0e2 100%); cards sit on translucent white rgba(255,255,255,.6) with an 8px backdrop blur (backdrop-filter: blur(8px)) and a glossy highlight edge 1px solid rgba(255,255,255,.9), for a dewy glass-bubble feel; large cards use 16px rounded corners while buttons and badges go full capsule at 999px; the accent color is grass green #58b947; the primary button is green on white text with a natural gloss shadow 0 4px 12px rgba(88,185,71,.45); the secondary button is 70% white on deep-blue text; body copy sits at deep teal-blue #17435f, secondary text at rgba(23,67,95,.65); layer a soft glow to reinforce the crisp bubbly optimism. Forbidden: dark backgrounds, thick black outlines, hard sharp-cornered shadows, glitch noise or aged/grunge filters, desaturated grey tones.","promptZh":"请用 Frutiger Aero 风格设计这个页面:整页底色用清透渐变 linear-gradient(160deg, #9fd8f7 0%, #e8f7ff 55%, #d3f0e2 100%),模拟天空到草地的自然光感;卡片用半透明白 rgba(255,255,255,.6) 叠 8px 高斯模糊(backdrop-filter: blur(8px)),配 1px solid rgba(255,255,255,.9) 的高光描边,营造玻璃水珠质感;大卡片圆角 16px,按钮 / 徽标用 999px 胶囊圆角;强调色用草绿 #58b947;主按钮绿底白字,配自然光泽投影 0 4px 12px rgba(88,185,71,.45);次按钮用白 70% 底深蓝字;正文字色深蓝绿 #17435f,次要文字用 rgba(23,67,95,.65);背景叠加柔光层增强清透气泡感。禁止:暗色调背景、粗黑描边、硬直角阴影、故障噪点或做旧滤镜、低饱和灰调。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=frutiger-aero","fetch":{"method":"copy-prompt","value":"Design this page in Frutiger Aero style: base the page on a fresh sky-to-grass gradient linear-gradient(160deg, #9fd8f7 0%, #e8f7ff 55%, #d3f0e2 100%); cards sit on translucent white rgba(255,255,255,.6) with an 8px backdrop blur (backdrop-filter: blur(8px)) and a glossy highlight edge 1px solid rgba(255,255,255,.9), for a dewy glass-bubble feel; large cards use 16px rounded corners while buttons and badges go full capsule at 999px; the accent color is grass green #58b947; the primary button is green on white text with a natural gloss shadow 0 4px 12px rgba(88,185,71,.45); the secondary button is 70% white on deep-blue text; body copy sits at deep teal-blue #17435f, secondary text at rgba(23,67,95,.65); layer a soft glow to reinforce the crisp bubbly optimism. Forbidden: dark backgrounds, thick black outlines, hard sharp-cornered shadows, glitch noise or aged/grunge filters, desaturated grey tones."}},{"kind":"style","category":"retro","slug":"memphis","name":"Memphis","nameZh":"孟菲斯","aliases":["孟菲斯设计","Memphis Design","80s 波普几何","Postmodern Memphis"],"description":"80s Italian toy-shop energy — primary-color geometry, hard candy shadows and a radius clash between rounded cards and pill buttons.","descriptionZh":"80 年代意大利玩具铺的欢闹感,原色几何图形、糖果硬阴影,卡片圆角和胶囊按钮故意打架。","prompt":"Design this page in Memphis style: a warm cream background (#fff8e7); cards in pure white (#ffffff) with a 2px solid black (#14140f) border plus a candy-colored hard shadow (box-shadow: 5px 5px 0 0 #ff4d6d, zero blur); sprinkle bright yellow (#ffce00) accents on squiggles, underlines and dots; cards keep a moderate 12px radius while buttons turn fully pill-shaped (999px) — the radius clash is what reads as toy-like; primary buttons are bright blue (#2f6bff) with white text and a 2px black border, secondary buttons are white with a black border; headings are weight 800 with small geometric doodles (triangles, zigzags, squiggles) scattered around; dividers are 2px solid black. Forbidden: soft gradients, monochrome minimalism, glassmorphism blur, thin hairlines, any metallic sheen, restrained whitespace-heavy layouts.","promptZh":"请用孟菲斯(Memphis)风格设计这个页面:底色用奶白 #fff8e7;卡片用纯白 #ffffff 配 2px 纯黑描边(#14140f),外加一圈撞色硬阴影(box-shadow: 5px 5px 0 0 #ff4d6d,零模糊);点缀亮黄 #ffce00 作为强调色,用在图形装饰、下划线、圆点上;卡片圆角适中(12px),但按钮做成胶囊形(999px),两种圆角混搭出玩具感;主按钮用亮蓝 #2f6bff 底 + 白字 + 2px 黑框,次按钮白底黑框;标题字重 800,配几何小图形(三角、锯齿、波浪线)做装饰;分隔线用 2px 纯黑实线。禁止:柔和渐变、单色极简、玻璃拟态模糊、纤细线条、任何金属质感、大面积留白的克制排版。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=memphis","fetch":{"method":"copy-prompt","value":"Design this page in Memphis style: a warm cream background (#fff8e7); cards in pure white (#ffffff) with a 2px solid black (#14140f) border plus a candy-colored hard shadow (box-shadow: 5px 5px 0 0 #ff4d6d, zero blur); sprinkle bright yellow (#ffce00) accents on squiggles, underlines and dots; cards keep a moderate 12px radius while buttons turn fully pill-shaped (999px) — the radius clash is what reads as toy-like; primary buttons are bright blue (#2f6bff) with white text and a 2px black border, secondary buttons are white with a black border; headings are weight 800 with small geometric doodles (triangles, zigzags, squiggles) scattered around; dividers are 2px solid black. Forbidden: soft gradients, monochrome minimalism, glassmorphism blur, thin hairlines, any metallic sheen, restrained whitespace-heavy layouts."}},{"kind":"style","category":"retro","slug":"bauhaus","name":"Bauhaus","nameZh":"包豪斯","aliases":["包豪斯设计","Bauhaus Design","几何构成主义","三原色构成风"],"description":"Primary-color-and-black geometric composition — square corners, zero ornament, the functionalist restraint of the 1920s design school.","descriptionZh":"三原色加黑白的几何构成,直角、无装饰,复刻 1920 年代设计学院的功能主义克制感。","prompt":"Design this page in Bauhaus style: a warm off-white background (#f4efe6); cards in the same off-white with a 2px solid black border (#17171b), fully square corners (border-radius: 0); no shadows at all (box-shadow: none); the accent is a pure primary red (#d9291a), used sparingly on key blocks and links; badges are a yellow (#f0a500) block with black text and square corners; primary buttons are deep blue (#1f4796) with white text and square corners, secondary buttons are transparent with a black border; headings are weight 800 with zero letter-spacing (tracking: 0), set in a sans-serif to keep the functionalist restraint; dividers are 2px solid black, and the layout aligns to a strict grid with flat geometric shapes (circles, triangles, rectangles) as color-block decoration. Forbidden: rounded corners, gradients, shadows, soft pastel colors, decorative serif scripts, any ornamental texture.","promptZh":"请用包豪斯(Bauhaus)风格设计这个页面:底色米白 #f4efe6;卡片同为米白,配 2px 纯黑描边 #17171b,直角无圆角(border-radius: 0);完全不用阴影(box-shadow: none);强调色用纯正红 #d9291a,只在关键色块和链接上使用;徽标用黄底 #f0a500 黑字直角矩形;主按钮深蓝 #1f4796 底白字直角,次按钮透明底黑框;标题字重 800、字间距为 0(tracking: 0),用无衬线字体保持功能主义的克制;分隔线 2px 纯黑实线,版式按网格对齐、用圆/三角/矩形等几何色块做点缀。禁止:圆角、渐变、阴影、柔和粉彩色、衬线花体字、任何装饰性纹理。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=bauhaus","fetch":{"method":"copy-prompt","value":"Design this page in Bauhaus style: a warm off-white background (#f4efe6); cards in the same off-white with a 2px solid black border (#17171b), fully square corners (border-radius: 0); no shadows at all (box-shadow: none); the accent is a pure primary red (#d9291a), used sparingly on key blocks and links; badges are a yellow (#f0a500) block with black text and square corners; primary buttons are deep blue (#1f4796) with white text and square corners, secondary buttons are transparent with a black border; headings are weight 800 with zero letter-spacing (tracking: 0), set in a sans-serif to keep the functionalist restraint; dividers are 2px solid black, and the layout aligns to a strict grid with flat geometric shapes (circles, triangles, rectangles) as color-block decoration. Forbidden: rounded corners, gradients, shadows, soft pastel colors, decorative serif scripts, any ornamental texture."}},{"kind":"style","category":"retro","slug":"art-deco","name":"Art Deco","nameZh":"装饰艺术","aliases":["装饰艺术风","Art Deco","盖茨比风","黑金风"],"description":"Black-and-gold symmetrical luxury with hairline gold linework, reviving the ceremonial glamour of the 1920s Jazz Age.","descriptionZh":"黑金配色的奢华对称感,金色细线勾边,复刻 1920 年代爵士乐时代的仪式感光泽。","prompt":"Design this page in Art Deco style: a near-black deep green background (#0f1713); body text in a warm gold-white (#ece5d3), muted text at rgba(232,222,196,.6); the accent is a champagne gold (#c8a24b); cards sit on a near-transparent gold wash (rgba(200,162,75,.04)) with a hairline 1px gold border (rgba(200,162,75,.55)) and square corners; headings use a serif face (Georgia / Times New Roman), set in uppercase with wide 0.1em tracking and weight 700 to read as symmetrical and ceremonial; badges are transparent with a gold border and uppercase gold text at 0.18em tracking; primary buttons are gold-filled with black text and square corners, secondary buttons are transparent with a gold border; dividers are hairline 1px gold lines; shadows are disabled entirely. Forbidden: rounded corners, thick borders, neon or bright saturated colors, casual sans-serif headings, any cartoonish illustration.","promptZh":"请用装饰艺术(Art Deco)风格设计这个页面:底色用近黑的墨绿 #0f1713;正文用米金白 #ece5d3,弱化文字用 rgba(232,222,196,.6);强调色用香槟金 #c8a24b;卡片背景几乎透明 rgba(200,162,75,.04),配 1px 细金框 rgba(200,162,75,.55),直角无圆角;标题用衬线字体(Georgia / Times New Roman),全大写、字间距拉宽到 0.1em、字重 700,体现装饰艺术的对称仪式感;徽标透明底、金色描边、金字全大写、字间距 0.18em;主按钮金底黑字直角,次按钮透明金框;分隔线用 1px 细金线;完全不用阴影。禁止:圆角、粗描边、亮色荧光色、无衬线随意字体、任何卡通化插画。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=art-deco","fetch":{"method":"copy-prompt","value":"Design this page in Art Deco style: a near-black deep green background (#0f1713); body text in a warm gold-white (#ece5d3), muted text at rgba(232,222,196,.6); the accent is a champagne gold (#c8a24b); cards sit on a near-transparent gold wash (rgba(200,162,75,.04)) with a hairline 1px gold border (rgba(200,162,75,.55)) and square corners; headings use a serif face (Georgia / Times New Roman), set in uppercase with wide 0.1em tracking and weight 700 to read as symmetrical and ceremonial; badges are transparent with a gold border and uppercase gold text at 0.18em tracking; primary buttons are gold-filled with black text and square corners, secondary buttons are transparent with a gold border; dividers are hairline 1px gold lines; shadows are disabled entirely. Forbidden: rounded corners, thick borders, neon or bright saturated colors, casual sans-serif headings, any cartoonish illustration."}},{"kind":"style","category":"retro","slug":"retro-terminal","name":"Retro Terminal","nameZh":"复古终端","aliases":["复古终端风","CRT Terminal","黑客帝国风","DOS 风"],"description":"Glowing green phosphor text on a black CRT screen with flickering scanlines — a terminal window straight out of the Matrix.","descriptionZh":"黑色 CRT 屏幕上的荧光绿字符,叠加闪烁扫描线,像是黑客帝国里跳出来的终端窗口。","prompt":"Design this page in Retro Terminal style: a near-black green-tinted background (#050c06) overlaid with a scanline texture; the whole UI uses a monospace font (Courier New / ui-monospace); body text is phosphor green (#c7ffd4), muted text at rgba(120,255,150,.55); the accent is a bright glowing green (#33ff66); cards sit on a near-transparent green wash (rgba(51,255,102,.05)) with a hairline 1px green border (rgba(51,255,102,.4)) and square corners; cards and buttons both carry a phosphor glow shadow (box-shadow: 0 0 16px rgba(51,255,102,.18)); headings are uppercase with 0.06em tracking and weight 700; badges are green-filled with black uppercase text. Forbidden: serif fonts, rounded corners, warm color tones, gradient backgrounds, any skeuomorphic texture.","promptZh":"请用复古终端(Retro Terminal)风格设计这个页面:底色纯黑偏绿 #050c06,叠加扫描线纹理(scanlines);全局字体用等宽字体(Courier New / ui-monospace);正文荧光绿 #c7ffd4,弱化文字用 rgba(120,255,150,.55);强调色用高亮荧光绿 #33ff66;卡片背景几乎透明的绿色 rgba(51,255,102,.05),配 1px 细绿框 rgba(51,255,102,.4),直角无圆角;卡片和按钮都带荧光辉光阴影(box-shadow: 0 0 16px rgba(51,255,102,.18));标题全大写、字间距 0.06em、字重 700;徽标绿底黑字全大写。禁止:衬线字体、圆角、暖色调、渐变背景、任何拟物质感贴图。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=retro-terminal","fetch":{"method":"copy-prompt","value":"Design this page in Retro Terminal style: a near-black green-tinted background (#050c06) overlaid with a scanline texture; the whole UI uses a monospace font (Courier New / ui-monospace); body text is phosphor green (#c7ffd4), muted text at rgba(120,255,150,.55); the accent is a bright glowing green (#33ff66); cards sit on a near-transparent green wash (rgba(51,255,102,.05)) with a hairline 1px green border (rgba(51,255,102,.4)) and square corners; cards and buttons both carry a phosphor glow shadow (box-shadow: 0 0 16px rgba(51,255,102,.18)); headings are uppercase with 0.06em tracking and weight 700; badges are green-filled with black uppercase text. Forbidden: serif fonts, rounded corners, warm color tones, gradient backgrounds, any skeuomorphic texture."}},{"kind":"style","category":"tech","slug":"dark-tech","name":"Dark Tech","nameZh":"暗黑科技风","aliases":["Linear 风","Dark SaaS","暗黑科技风","暗色 SaaS 风"],"description":"A restrained dark SaaS surface with soft glass cards and a single electric-violet accent — precise, quiet, unmistakably Linear-style.","descriptionZh":"克制的暗色 SaaS 界面,毛玻璃卡片配一抹电紫蓝强调色,精致到近乎沉默,一眼就是 Linear 风。","prompt":"Design this page in a Linear-style dark tech aesthetic: a vertical dark gradient background linear-gradient(180deg, #0d0e13 0%, #0a0b0f 100%); cards use rgba(255,255,255,.04) fill with a 1px solid rgba(255,255,255,.08) border and a generous 10px radius; a single electric-violet accent #5e6ad2 reserved for buttons, links and sparse highlights; body text #e6e7ec, muted text at 55% opacity; headings at weight 600 with -0.02em tracking, restrained and quiet; primary buttons are violet-filled with white text, secondary buttons are transparent with a thin 1px border; shadows are very soft, 0 12px 32px rgba(0,0,0,.45). Forbidden: saturated color clashes, thick black borders, gradient accent fills, radii under 8px, skeuomorphic textures, mixing more than one accent hue.","promptZh":"请用暗黑科技风(Dark Tech,Linear-style)风格设计这个页面:背景用竖向深色渐变 linear-gradient(180deg, #0d0e13 0%, #0a0b0f 100%);卡片用 rgba(255,255,255,.04) 底 + 1px solid rgba(255,255,255,.08) 描边,大圆角 10px;强调色是电紫蓝 #5e6ad2,只用在按钮、链接和少量高亮上;正文 #e6e7ec,次要文字用 55% 透明度;标题字重 600、字距 -0.02em,克制不张扬;主按钮紫蓝底白字,次按钮透明底 + 1px 细描边;卡片阴影极软 0 12px 32px rgba(0,0,0,.45)。禁止:高饱和撞色、粗黑描边、渐变强调色、圆角小于 8px、任何拟物质感、多种强调色混用。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=dark-tech","fetch":{"method":"copy-prompt","value":"Design this page in a Linear-style dark tech aesthetic: a vertical dark gradient background linear-gradient(180deg, #0d0e13 0%, #0a0b0f 100%); cards use rgba(255,255,255,.04) fill with a 1px solid rgba(255,255,255,.08) border and a generous 10px radius; a single electric-violet accent #5e6ad2 reserved for buttons, links and sparse highlights; body text #e6e7ec, muted text at 55% opacity; headings at weight 600 with -0.02em tracking, restrained and quiet; primary buttons are violet-filled with white text, secondary buttons are transparent with a thin 1px border; shadows are very soft, 0 12px 32px rgba(0,0,0,.45). Forbidden: saturated color clashes, thick black borders, gradient accent fills, radii under 8px, skeuomorphic textures, mixing more than one accent hue."}},{"kind":"style","category":"tech","slug":"cyberpunk","name":"Cyberpunk","nameZh":"赛博朋克风","aliases":["赛博朋克","Cyberpunk","夜之城风","霓虹科幻"],"description":"Neon cyan and magenta slicing through a near-black grid — sharp corners, glowing edges, a night-city interface with an attitude.","descriptionZh":"电青与品红霓虹划破近黑背景网格,直角锐边、发光描边,一副夜之城界面的张扬姿态。","prompt":"Design this page in a cyberpunk style: a near-black background #07070f with a faint grid overlay for depth; the accent is electric cyan #00f0ff, used for glowing borders and text; badges are magenta #ff2ea6 fill with black text and sharp corners; cards use rgba(0,240,255,.04) fill with a 1px solid rgba(0,240,255,.35) cyan hairline border and near-zero 2px radius; headings are uppercase, tracked wide at 0.04em, weight 700; primary buttons are cyan-filled with black text and sharp corners, secondary buttons are transparent with a cyan outline; shadows are glows, 0 0 20px rgba(0,240,255,.2), never a conventional drop shadow. Forbidden: large border radii, soft diffuse shadows, pastel or desaturated palettes, serif typefaces, skeuomorphic textures, rounded pill buttons.","promptZh":"请用赛博朋克(Cyberpunk)风格设计这个页面:背景近黑 #07070f,叠加一层低对比度网格线做深度;强调色是电青 #00f0ff,发光描边和文字投影都用它;徽章用品红 #ff2ea6 底 + 黑字 + 直角;卡片用 rgba(0,240,255,.04) 底 + 1px solid rgba(0,240,255,.35) 青色细描边,圆角极小 2px 几乎是直角;标题全大写、字距拉宽 0.04em、字重 700;主按钮青底黑字直角,次按钮透明底 + 青色描边;阴影用发光效果 0 0 20px rgba(0,240,255,.2) 而不是常规投影。禁止:大圆角、柔和阴影、粉彩低饱和配色、衬线字体、任何拟物纹理、圆润按钮。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=cyberpunk","fetch":{"method":"copy-prompt","value":"Design this page in a cyberpunk style: a near-black background #07070f with a faint grid overlay for depth; the accent is electric cyan #00f0ff, used for glowing borders and text; badges are magenta #ff2ea6 fill with black text and sharp corners; cards use rgba(0,240,255,.04) fill with a 1px solid rgba(0,240,255,.35) cyan hairline border and near-zero 2px radius; headings are uppercase, tracked wide at 0.04em, weight 700; primary buttons are cyan-filled with black text and sharp corners, secondary buttons are transparent with a cyan outline; shadows are glows, 0 0 20px rgba(0,240,255,.2), never a conventional drop shadow. Forbidden: large border radii, soft diffuse shadows, pastel or desaturated palettes, serif typefaces, skeuomorphic textures, rounded pill buttons."}},{"kind":"style","category":"tech","slug":"aurora","name":"Aurora Gradient","nameZh":"极光渐变风","aliases":["极光渐变","Aurora Gradient","Mesh Gradient","弥散光风"],"description":"Diffuse multi-hue gradient light pooling behind frosted glass cards — soft, borderless, like an aurora seen through a window.","descriptionZh":"多色弥散光在毛玻璃卡片背后流动堆叠,柔和无边界,像隔着窗户看极光。","prompt":"Design this page in an aurora gradient style: a background built from stacked radial gradients — blue-violet top-left, cyan-teal top-right, purple-pink bottom-right, over a deep navy base #0b1026, each gradient fading softly to transparent for a diffuse-light feel; cards use rgba(255,255,255,.06) fill with a 1px solid rgba(255,255,255,.12) border and backdrop-filter: blur(10px) for frosted glass, with a generous 20px radius; the accent is cyan-teal #22d3ee; body text #f1f5fd, muted text at 65% opacity; badges are translucent white pills; primary buttons are white-filled with deep-navy text in pill shape, secondary buttons are transparent with a thin white outline; shadows are soft, 0 8px 32px rgba(4,10,30,.4). Forbidden: flat solid-color backgrounds, hard borders, sharp corners, saturated color clashes, dark opaque cards, any grid or scanline decoration.","promptZh":"请用极光渐变(Aurora Gradient)风格设计这个页面:背景由多层径向渐变叠加而成 —— 左上蓝紫、右上青绿、右下紫粉,底色深蓝 #0b1026,渐变边缘柔和过渡到透明,营造弥散光感;卡片用 rgba(255,255,255,.06) 底 + 1px solid rgba(255,255,255,.12) 描边 + backdrop-filter: blur(10px) 毛玻璃效果,大圆角 20px;强调色青绿 #22d3ee;正文 #f1f5fd,次要文字 65% 透明度;徽章用半透明白底胶囊形;主按钮白底深蓝字胶囊形,次按钮透明底 + 白色细描边;阴影柔和 0 8px 32px rgba(4,10,30,.4)。禁止:纯色平面背景、硬边框、直角、高饱和撞色、深色卡片、任何网格或扫描线装饰。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=aurora","fetch":{"method":"copy-prompt","value":"Design this page in an aurora gradient style: a background built from stacked radial gradients — blue-violet top-left, cyan-teal top-right, purple-pink bottom-right, over a deep navy base #0b1026, each gradient fading softly to transparent for a diffuse-light feel; cards use rgba(255,255,255,.06) fill with a 1px solid rgba(255,255,255,.12) border and backdrop-filter: blur(10px) for frosted glass, with a generous 20px radius; the accent is cyan-teal #22d3ee; body text #f1f5fd, muted text at 65% opacity; badges are translucent white pills; primary buttons are white-filled with deep-navy text in pill shape, secondary buttons are transparent with a thin white outline; shadows are soft, 0 8px 32px rgba(4,10,30,.4). Forbidden: flat solid-color backgrounds, hard borders, sharp corners, saturated color clashes, dark opaque cards, any grid or scanline decoration."}},{"kind":"style","category":"tech","slug":"sci-fi-hud","name":"Sci-Fi HUD","nameZh":"科幻 HUD 风","aliases":["科幻 HUD","FUI","全息界面","太空舱 UI"],"description":"A cockpit-style heads-up display in monospace type and cyan hairlines — data-dense, diegetic, straight out of a spacecraft interface.","descriptionZh":"等宽字体配青色细线的驾驶舱式抬头显示界面,数据密集、拟真感强,像是从飞船座舱里搬出来的。","prompt":"Design this page in a sci-fi HUD style: a deep navy-black background #04101c with a low-contrast grid overlay simulating a cockpit scan surface; use a monospace font stack (ui-monospace / SF Mono) throughout to reinforce the data-readout feel; the accent is HUD cyan #35e0ff; cards use rgba(53,224,255,.05) fill with a 1px solid rgba(53,224,255,.4) cyan hairline border and a near-zero 2px radius; headings are uppercase, tracked wide at 0.12em, weight 600, mimicking instrument readouts; badges are transparent with a cyan outline and cyan uppercase text tracked at 0.2em; primary buttons are cyan-filled with dark navy text and sharp corners, secondary buttons are transparent with a cyan outline; shadows are glows, not drop shadows, 0 0 18px rgba(53,224,255,.15). Forbidden: serif or humanist typefaces, large border radii, warm color tones, soft gradients, any hand-drawn or organic lines, oversized borders.","promptZh":"请用科幻 HUD(Sci-Fi HUD)风格设计这个页面:背景深蓝黑 #04101c,叠加低对比网格线模拟舱体扫描面;全局字体用等宽字体 ui-monospace / SF Mono,强化数据仪表盘质感;强调色 HUD 青 #35e0ff;卡片用 rgba(53,224,255,.05) 底 + 1px solid rgba(53,224,255,.4) 青色细描边,圆角极小 2px;标题全大写、字距拉宽到 0.12em、字重 600,模拟仪表读数;徽章透明底 + 青色描边 + 青字,全大写字距 0.2em;主按钮青底深蓝黑字直角,次按钮透明底青色描边;阴影是发光而非投影 0 0 18px rgba(53,224,255,.15)。禁止:衬线或人文字体、大圆角、暖色调、柔和渐变、任何手绘 / 有机线条、比例失调的粗描边。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=sci-fi-hud","fetch":{"method":"copy-prompt","value":"Design this page in a sci-fi HUD style: a deep navy-black background #04101c with a low-contrast grid overlay simulating a cockpit scan surface; use a monospace font stack (ui-monospace / SF Mono) throughout to reinforce the data-readout feel; the accent is HUD cyan #35e0ff; cards use rgba(53,224,255,.05) fill with a 1px solid rgba(53,224,255,.4) cyan hairline border and a near-zero 2px radius; headings are uppercase, tracked wide at 0.12em, weight 600, mimicking instrument readouts; badges are transparent with a cyan outline and cyan uppercase text tracked at 0.2em; primary buttons are cyan-filled with dark navy text and sharp corners, secondary buttons are transparent with a cyan outline; shadows are glows, not drop shadows, 0 0 18px rgba(53,224,255,.15). Forbidden: serif or humanist typefaces, large border radii, warm color tones, soft gradients, any hand-drawn or organic lines, oversized borders."}},{"kind":"style","category":"layout","slug":"bento-grid","name":"Bento Grid","nameZh":"便当格","aliases":["便当盒排版","Bento Box Layout","苹果发布会风","宫格卡片风"],"description":"Uneven cards packed edge-to-edge like compartments in a bento box, each cell sized to say exactly one thing.","descriptionZh":"大小不一的卡片像便当格拼在一起,每一格只讲一件事,靠格子大小分主次。","prompt":"Design this page in a Bento Grid style: an uneven, tightly packed grid of white cards (#ffffff) on a light gray backdrop (#f5f5f7), like compartments in a bento box — each cell states exactly one point. Make the largest cell roughly twice the area of the others to carry the primary message, with the rest sized down by importance. Cards get 22px rounded corners, a hairline 1px solid #e8e8ed border, and only a whisper of shadow (0 1px 2px rgba(0,0,0,.04)) — no heavy drop shadows. Use one restrained Apple-blue accent (#0071e3) and pill-shaped buttons. Headlines are weight 700 with tight -0.02em tracking; two grays (#1d1d1f / #6e6e73) carry the rest of the hierarchy. Forbidden: a uniform equal-size grid (sizes must vary), heavy shadows or gradients, multiple accent colors, sharp square corners, cramming everything into one cell.","promptZh":"请用便当格(Bento Grid)风格设计这个页面:浅灰背景 #f5f5f7 上铺一张不规则网格,把内容拆成大小不一的白色卡片(#ffffff),像便当盒的格子一样紧密拼接,一格只讲一个卖点;最大的一格明显占两倍面积,承载主要信息,其余格子按重要性递减;卡片圆角 22px、细边框 1px solid #e8e8ed,只用极轻的投影 0 1px 2px rgba(0,0,0,.04) 做区分,不做强阴影;强调色克制地用一种苹果蓝 #0071e3,按钮做成胶囊形状;标题字重 700、字距收紧 -0.02em;正文灰 #6e6e73 与深灰黑 #1d1d1f 两级足够。禁止:等大小的规整网格(必须大小错落)、强投影或渐变、多种强调色、方角卡片、把所有内容塞进同一格。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=bento-grid","fetch":{"method":"copy-prompt","value":"Design this page in a Bento Grid style: an uneven, tightly packed grid of white cards (#ffffff) on a light gray backdrop (#f5f5f7), like compartments in a bento box — each cell states exactly one point. Make the largest cell roughly twice the area of the others to carry the primary message, with the rest sized down by importance. Cards get 22px rounded corners, a hairline 1px solid #e8e8ed border, and only a whisper of shadow (0 1px 2px rgba(0,0,0,.04)) — no heavy drop shadows. Use one restrained Apple-blue accent (#0071e3) and pill-shaped buttons. Headlines are weight 700 with tight -0.02em tracking; two grays (#1d1d1f / #6e6e73) carry the rest of the hierarchy. Forbidden: a uniform equal-size grid (sizes must vary), heavy shadows or gradients, multiple accent colors, sharp square corners, cramming everything into one cell."}},{"kind":"style","category":"organic","slug":"organic-shapes","name":"Organic Shapes","nameZh":"有机风","aliases":["自然曲面风","Organic Design","大地色系","柔态设计"],"description":"Soft rounded blobs and warm earth tones — every corner curves, nothing points.","descriptionZh":"浑圆的曲线块面和温暖大地色,没有一处是尖角。","prompt":"Design this page in an Organic Shapes style: a cream background (#fdf8f0) with off-white cards (#fffdfa), rounded up to 32px — and fully round (999px) on small elements — so every card reads like a smoothed river stone. Shadows are a soft warm ambient glow (0 12px 32px rgba(196,144,100,.16)) paired with a faint 1px solid #f0e4d3 border. The accent is terracotta (#d97742) against deep brown text (#3d3128) and a warm gray for muted copy (#8a7b6c). Headlines are weight 600 with a slight -0.01em tracking — no need for heavy weight. Buttons are fully rounded pills too, giving the whole page the feel of sun-warmed pottery. Forbidden: any sharp or square corners, cool tones (blue, gray-violet), high-contrast black-and-white, hard-edged drop shadows, sharp geometric shapes.","promptZh":"请用有机风(Organic Shapes)风格设计这个页面:奶油底色 #fdf8f0,卡片用米白 #fffdfa,圆角开到 32px(小元素干脆用 999px 全圆),让每张卡片看起来像被打磨过的鹅卵石;阴影用柔和的暖色环境光 0 12px 32px rgba(196,144,100,.16),配 1px solid #f0e4d3 的浅描边;强调色用陶土橙 #d97742,搭配深棕文字 #3d3128 和暖灰 muted #8a7b6c;标题字重 600、字距轻收 -0.01em,不需要很粗;按钮同样是全圆角胶囊;整体给人被阳光晒过的陶罐质感。禁止:任何直角或尖角、冷色调(蓝、灰紫)、高对比黑白、硬边投影、锐利几何图形。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=organic-shapes","fetch":{"method":"copy-prompt","value":"Design this page in an Organic Shapes style: a cream background (#fdf8f0) with off-white cards (#fffdfa), rounded up to 32px — and fully round (999px) on small elements — so every card reads like a smoothed river stone. Shadows are a soft warm ambient glow (0 12px 32px rgba(196,144,100,.16)) paired with a faint 1px solid #f0e4d3 border. The accent is terracotta (#d97742) against deep brown text (#3d3128) and a warm gray for muted copy (#8a7b6c). Headlines are weight 600 with a slight -0.01em tracking — no need for heavy weight. Buttons are fully rounded pills too, giving the whole page the feel of sun-warmed pottery. Forbidden: any sharp or square corners, cool tones (blue, gray-violet), high-contrast black-and-white, hard-edged drop shadows, sharp geometric shapes."}},{"kind":"style","category":"organic","slug":"hand-drawn","name":"Hand-drawn","nameZh":"手绘风","aliases":["Sketchy","涂鸦风","手绘涂鸦","Doodle Style"],"description":"Wobbly pencil-drawn borders and comic lettering on notebook paper — like a sketch that escaped into a browser.","descriptionZh":"歪歪扭扭的铅笔描边和涂鸦字体印在纸白背景上,像一张跑进浏览器的手稿。","prompt":"Design this page in a hand-drawn style: a paper-white background (#fffdf5); cards are white with a 2px solid black hand-sketched border, using an irregular rounded-corner combo (e.g. 255px 18px 225px 18px / 18px 225px 18px 255px) so the outline looks like it wobbled off a pencil. Headings and body copy use a handwritten font stack (Comic Sans MS / Chalkboard SE). Shadows fake a pencil stroke — a hard offset 3px 3px 0 rgba(43,43,43,.75), never blurred. The accent is crayon blue (#4a7cff), tags are sticky-note yellow (#fff3a3) with black text. Primary text is #2b2b2b, muted is #6b6558. The primary button is crayon-blue with white text and the same irregular rounded corners; the secondary button is white with a black outline. Forbidden: standard clean sans-serif fonts, perfectly circular or perfectly square corners, any blurred or soft shadow, minimalist whitespace-driven layouts, cold gray palettes.","promptZh":"请用手绘风(Hand-drawn)风格设计这个页面:纸白底色 #fffdf5;卡片用白底配 2px 纯黑手绘描边,四角用不规则的圆角组合(比如 255px 18px 225px 18px / 18px 225px 18px 255px)模拟手抖画出来的边框;标题和正文用手写体字体栈(如 Comic Sans MS / Chalkboard SE);投影模拟铅笔笔触,用生硬的偏移阴影 3px 3px 0 rgba(43,43,43,.75),不做模糊;强调色用蜡笔蓝 #4a7cff,标签用便签黄 #fff3a3 配黑字;文字主色 #2b2b2b,次要 #6b6558;主按钮蜡笔蓝底白字并保持同样不规则圆角,次按钮白底黑框。禁止:标准无衬线字体、规整的正圆角或直角、任何模糊柔和阴影、极简留白式排版、冷灰色系。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=hand-drawn","fetch":{"method":"copy-prompt","value":"Design this page in a hand-drawn style: a paper-white background (#fffdf5); cards are white with a 2px solid black hand-sketched border, using an irregular rounded-corner combo (e.g. 255px 18px 225px 18px / 18px 225px 18px 255px) so the outline looks like it wobbled off a pencil. Headings and body copy use a handwritten font stack (Comic Sans MS / Chalkboard SE). Shadows fake a pencil stroke — a hard offset 3px 3px 0 rgba(43,43,43,.75), never blurred. The accent is crayon blue (#4a7cff), tags are sticky-note yellow (#fff3a3) with black text. Primary text is #2b2b2b, muted is #6b6558. The primary button is crayon-blue with white text and the same irregular rounded corners; the secondary button is white with a black outline. Forbidden: standard clean sans-serif fonts, perfectly circular or perfectly square corners, any blurred or soft shadow, minimalist whitespace-driven layouts, cold gray palettes."}},{"kind":"style","category":"organic","slug":"dopamine-colors","name":"Dopamine Colors","nameZh":"多巴胺配色","aliases":["快乐色彩风","Dopamine Dressing UI","糖果色风","高饱和配色风"],"description":"Candy-saturated color blocks and oversized rounded shapes turned up to maximum joy.","descriptionZh":"高饱和糖果色块配上放大的圆角形状,把快乐值直接拉满。","prompt":"Design this page in a Dopamine Colors style: a warm off-white background (#fff7ec) with pure white cards at a generous 20px radius — small elements go fully round at 999px. The accent is a saturated hot pink (#ff477e); tags are orange (#ff9f1c) white-text pills. Shadows carry a colorful diffuse glow (0 10px 24px rgba(255,71,126,.18)) — never gray or black. Headlines go all the way to weight 800 with tight -0.01em tracking for an energetic, joyful punch. Primary text is #33202a and muted is #8a6470, both warm-tinted rather than neutral gray. The primary button is hot-pink with white text as a pill; the secondary is white with a hot-pink label and hot-pink outline. Forbidden: any desaturated Morandi palette, black/white/gray-only color schemes, thin headline weights, sharp corners, gray shadows.","promptZh":"请用多巴胺配色(Dopamine Colors)风格设计这个页面:暖白底色 #fff7ec;卡片纯白,大圆角 20px,小元素直接 999px 全圆;强调色用高饱和玫红 #ff477e,标签用橙色 #ff9f1c 配白字胶囊;投影带彩色扩散光 0 10px 24px rgba(255,71,126,.18),不用灰黑阴影;标题字重拉到 800、字距收紧 -0.01em,营造有力量的快乐感;文字主色 #33202a,次要 #8a6470,都带一点暖调而不是纯灰;主按钮玫红底白字胶囊,次按钮白底玫红字玫红描边。禁止:任何低饱和莫兰迪色、纯黑白灰配色、细字重标题、尖角、灰色投影。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=dopamine-colors","fetch":{"method":"copy-prompt","value":"Design this page in a Dopamine Colors style: a warm off-white background (#fff7ec) with pure white cards at a generous 20px radius — small elements go fully round at 999px. The accent is a saturated hot pink (#ff477e); tags are orange (#ff9f1c) white-text pills. Shadows carry a colorful diffuse glow (0 10px 24px rgba(255,71,126,.18)) — never gray or black. Headlines go all the way to weight 800 with tight -0.01em tracking for an energetic, joyful punch. Primary text is #33202a and muted is #8a6470, both warm-tinted rather than neutral gray. The primary button is hot-pink with white text as a pill; the secondary is white with a hot-pink label and hot-pink outline. Forbidden: any desaturated Morandi palette, black/white/gray-only color schemes, thin headline weights, sharp corners, gray shadows."}},{"kind":"style","category":"system","slug":"material-design","name":"Material Design 3","nameZh":"材料设计","aliases":["Material You","M3","谷歌设计语言","Material Design"],"description":"Google's tonal surfaces and pill-shaped controls — elevation and color roles do the structural work.","descriptionZh":"谷歌的色调化表面与胶囊控件,靠层级投影和色彩角色搭骨架。","prompt":"Design this page in a Material Design 3 (Material You) style: a light gray background (#fafafa) with pure white cards (#ffffff) at 16px radius, while buttons and tags use the signature 999px pill shape. Shadows use M3's two-layer elevation to fake a real light source: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24). The accent is M3 purple (#6750a4); tags use a tonal container — a light purple tint background rgba(103,80,164,.12) with purple text — rather than a flat solid fill. Headlines stay at a regular weight of 500; hierarchy comes from color roles and elevation, not boldness. Primary text is #1c1b1f, muted is #49454f. The primary button is purple-filled with white text as a pill; the secondary is an outlined button — transparent background, purple text, 1px solid #79747e border. Forbidden: hard zero-blur offset shadows, square-cornered controls, extra-bold headline weights, single flat black shadows, and flat solid-color tags that skip the tonal-container pattern.","promptZh":"请用材料设计(Material Design 3 / Material You)风格设计这个页面:浅灰底 #fafafa;卡片纯白 #ffffff,圆角 16px,按钮和标签用 999px 胶囊(M3 的标志性控件形状);投影用双层高度阴影模拟真实光源:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);强调色用 M3 紫 #6750a4;标签用浅紫色调背景 rgba(103,80,164,.12) 配紫字(tonal 色调容器的做法);标题字重保持常规 500,不刻意加粗,靠色彩角色和层级阴影分主次;文字主色 #1c1b1f,次要 #49454f;主按钮紫底白字胶囊,次按钮透明底紫字配 1px solid #79747e 描边(M3 的 outlined button)。禁止:硬阴影(box-shadow 零扩散的生硬偏移)、方角控件、超粗标题字重、单一纯黑投影、忽略色调容器直接用纯色块做标签。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=material-design","fetch":{"method":"copy-prompt","value":"Design this page in a Material Design 3 (Material You) style: a light gray background (#fafafa) with pure white cards (#ffffff) at 16px radius, while buttons and tags use the signature 999px pill shape. Shadows use M3's two-layer elevation to fake a real light source: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24). The accent is M3 purple (#6750a4); tags use a tonal container — a light purple tint background rgba(103,80,164,.12) with purple text — rather than a flat solid fill. Headlines stay at a regular weight of 500; hierarchy comes from color roles and elevation, not boldness. Primary text is #1c1b1f, muted is #49454f. The primary button is purple-filled with white text as a pill; the secondary is an outlined button — transparent background, purple text, 1px solid #79747e border. Forbidden: hard zero-blur offset shadows, square-cornered controls, extra-bold headline weights, single flat black shadows, and flat solid-color tags that skip the tonal-container pattern."}},{"kind":"style","category":"system","slug":"flat-design","name":"Flat Design 2.0","nameZh":"扁平化 2.0","aliases":["扁平化","Flat UI","极简扁平风","Flat Design"],"description":"Solid color blocks and zero shadow — every surface stays perfectly flat on the page.","descriptionZh":"纯色色块与零投影,每一个表面都老老实实贴在页面上,不装立体。","prompt":"Design this page in a Flat Design 2.0 style: a pure white background (#ffffff) with light gray-blue card blocks (#f1f5f9), borders removed or set transparent, and radii kept restrained at 8px (6px for small elements). Drop shadows entirely — box-shadow: none everywhere. The accent is a bright blue (#3b82f6) used as flat solid fill, never a gradient. Tags are solid blue rectangles with white text. Primary text is near-black (#0f172a), muted is #64748b. The primary button is solid blue with white text; the secondary uses a light gray-blue fill (#e2e8f0) with dark text — neither gets a border or shadow. Headlines are weight 700 with a slight -0.01em tracking; hierarchy comes from color-block contrast, not any illusion of depth. Forbidden: any gradient, skeuomorphic texture (faux leather, faux paper), drop shadows, decorative border strokes, large rounded corners or fully pill-shaped buttons.","promptZh":"请用扁平化 2.0(Flat Design 2.0)风格设计这个页面:纯白底 #ffffff;卡片用浅灰蓝色块 #f1f5f9 铺底,不描边或描边设为透明,圆角克制在 8px(小元素 6px);彻底不用阴影,box-shadow: none;强调色用明快的蓝 #3b82f6,做纯色块而不是渐变;标签用蓝底白字纯色矩形;文字主色近黑 #0f172a,次要 #64748b;主按钮蓝底白字,次按钮用浅灰蓝 #e2e8f0 底配深字,都不加描边和阴影;标题字重 700、字距轻收 -0.01em,靠色块对比而不是立体效果分层级。禁止:任何渐变、拟物质感(仿皮革/仿纸张纹理)、投影、描边装饰线、圆润的大圆角或全圆角胶囊按钮。","pageUrl":"https://ui-lab-ten.vercel.app/styles?style=flat-design","fetch":{"method":"copy-prompt","value":"Design this page in a Flat Design 2.0 style: a pure white background (#ffffff) with light gray-blue card blocks (#f1f5f9), borders removed or set transparent, and radii kept restrained at 8px (6px for small elements). Drop shadows entirely — box-shadow: none everywhere. The accent is a bright blue (#3b82f6) used as flat solid fill, never a gradient. Tags are solid blue rectangles with white text. Primary text is near-black (#0f172a), muted is #64748b. The primary button is solid blue with white text; the secondary uses a light gray-blue fill (#e2e8f0) with dark text — neither gets a border or shadow. Headlines are weight 700 with a slight -0.01em tracking; hierarchy comes from color-block contrast, not any illusion of depth. Forbidden: any gradient, skeuomorphic texture (faux leather, faux paper), drop shadows, decorative border strokes, large rounded corners or fully pill-shaped buttons."}},{"kind":"palette","category":"soft","slug":"morandi","name":"Morandi","nameZh":"莫兰迪","aliases":["莫兰迪色系","Morandi Colors","高级灰","低饱和灰调"],"description":"Grays that remember being colors — dusty green, muted rose and warm greige, all hushed to a whisper.","descriptionZh":"记得自己曾是颜色的灰:灰绿、灰粉、暖米,全都压低了嗓音说话。","prompt":"Use a Morandi palette: low-saturation grays that feel dusted with fog. Background #EAE6E0 (warm greige), cards #F4F1EB, borders #DAD3C9; body text #4C4842 (warm charcoal, never pure black), secondary text #8E877C; primary buttons #97A094 (gray-green) with off-white text #F7F6F2; the accent is #C0A9A2 (dusty rose), reserved for badges and small icons. Keep every color under ~25% saturation and build hierarchy with lightness, not hue. Forbidden: saturated primaries, pure #000 or #fff, high-contrast clashes, more than three hues, vivid gradients.","promptZh":"请用莫兰迪(Morandi)配色:整体低饱和灰调,颜色像蒙了一层灰雾。背景 #EAE6E0(暖灰米)、卡片 #F4F1EB、描边 #DAD3C9;正文 #4C4842(暖炭灰,不用纯黑)、次要文字 #8E877C;主按钮 #97A094(灰绿)配米白字 #F7F6F2;点缀色 #C0A9A2(灰粉),只用在徽标和小图标上。所有颜色饱和度不超过 25%,层次靠明度差而非色相差。禁止:高饱和原色、纯黑 #000 或纯白 #fff、强对比撞色、超过三种色相、鲜艳渐变。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=morandi","fetch":{"method":"copy-tokens","value":"/**\n * Morandi · 莫兰迪 — UI Lab palette (Soft & Muted)\n *\n * Grays that remember being colors — dusty green, muted rose and warm greige, all hushed to a whisper.\n *\n * Best for: Lifestyle and home brands, women-focused products, portfolio sites, wellness apps\n *\n * - 60-30-10: greige background 60%, cards and whitespace 30%, gray-green primary plus dusty-rose accent ≤10% combined\n * - Cap saturation at ~25% across the board; keep hues close and step lightness instead (#EAE6E0 → #DAD3C9 → #8E877C → #4C4842)\n * - No pure black text: warm charcoal #4C4842 gives ~9:1 contrast on the background — readable without the sting\n * - Off-white #F7F6F2 on the #97A094 button, never pure white, to keep the foggy feel\n * - Limit the #C0A9A2 accent to two appearances per screen or the hush falls apart\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #EAE6E0; /* bg */\n  --foreground: #4C4842; /* text */\n  --card: #F4F1EB; /* surface */\n  --muted-foreground: #8E877C; /* muted */\n  --border: #DAD3C9; /* border */\n  --primary: #97A094; /* primary */\n  --primary-foreground: #F7F6F2; /* primaryFg */\n  --accent: #C0A9A2; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #4C4842;\n  --popover: #F4F1EB;\n  --popover-foreground: #4C4842;\n  --secondary: #F4F1EB;\n  --secondary-foreground: #4C4842;\n  --muted: #F4F1EB;\n  --accent-foreground: #4C4842;\n  --input: #DAD3C9;\n  --border-strong: color-mix(in oklab, #DAD3C9 78%, #4C4842 22%);\n  --ring: color-mix(in oklab, #DAD3C9 78%, #4C4842 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"soft","slug":"cream","name":"Cream","nameZh":"奶油风","aliases":["奶油风","Cream Tone","奶油色系","暖调奶咖"],"description":"Butter and clotted cream stacked fresh from the oven — warm, sweet without tipping into cloying.","descriptionZh":"刚出炉的黄油与淡奶油堆叠在一起:温暖、甜而不腻,像烘焙店的下午。","prompt":"Use a Cream palette: warm and soft, like butter and clotted cream stacked fresh from the oven. Background #FFF8F0 (creamy white), cards #FFFDFA (near-paper white, still warm), borders #F2E5D8 (pale baked tone); body text #5C4F43 (warm cocoa brown, never pure black), secondary text #A6968A (milky taupe); primary buttons #E8B88A (caramel cream) with deep brown text #4A3B2C; the accent #F5D89E (custard yellow) reserved for tags, icons, or highlighted numbers. Keep overall saturation low-to-mid and build hierarchy through lightness within the warm hue family — no cool colors allowed in. Forbidden: cool tones (blue, cyan, cool gray), high-saturation clashes, dark or black backgrounds, sharp high-contrast borders, metallic gradients, any cool-toned shadows.","promptZh":"请用奶油风(Cream)配色:整体暖调柔和,像刚出炉的黄油和淡奶油堆叠在一起。背景 #FFF8F0(奶油白)、卡片 #FFFDFA(接近纸白但仍偏暖)、描边 #F2E5D8(浅烘焙色);正文 #5C4F43(暖可可棕,不用纯黑)、次要文字 #A6968A(奶咖灰棕);主按钮 #E8B88A(焦糖奶油)配深棕字 #4A3B2C;点缀色 #F5D89E(奶油黄),只用于标签、图标或强调数字。整体饱和度中低,靠暖色相的明度差堆出层次,不引入冷色。禁止:冷色调(蓝、青、冷灰)、高饱和撞色、深色/黑色背景、锐利强对比描边、金属感渐变、任何冷调阴影。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=cream","fetch":{"method":"copy-tokens","value":"/**\n * Cream · 奶油风 — UI Lab palette (Soft & Muted)\n *\n * Butter and clotted cream stacked fresh from the oven — warm, sweet without tipping into cloying.\n *\n * Best for: Dessert and bakery brands, baby and parenting products, lifestyle blogs, warm-toned personal sites\n *\n * - 60-30-10: cream-white background 60%, cards and whitespace 30%, caramel primary plus custard-yellow accent ≤10% combined\n * - Keep the whole palette warm and mid-to-low saturation; step lightness for hierarchy (#FFF8F0 → #F2E5D8 → #A6968A → #5C4F43)\n * - No pure black text: cocoa brown #5C4F43 gives ~8:1 contrast on the background — legible without being harsh\n * - Deep brown #4A3B2C on the #E8B88A button, not pure black, to keep the warmth intact\n * - Cap the #F5D89E accent at two or three spots per screen, or sweet tips into cloying\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #FFF8F0; /* bg */\n  --foreground: #5C4F43; /* text */\n  --card: #FFFDFA; /* surface */\n  --muted-foreground: #A6968A; /* muted */\n  --border: #F2E5D8; /* border */\n  --primary: #E8B88A; /* primary */\n  --primary-foreground: #4A3B2C; /* primaryFg */\n  --accent: #F5D89E; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #5C4F43;\n  --popover: #FFFDFA;\n  --popover-foreground: #5C4F43;\n  --secondary: #FFFDFA;\n  --secondary-foreground: #5C4F43;\n  --muted: #FFFDFA;\n  --accent-foreground: #5C4F43;\n  --input: #F2E5D8;\n  --border-strong: color-mix(in oklab, #F2E5D8 78%, #5C4F43 22%);\n  --ring: color-mix(in oklab, #F2E5D8 78%, #5C4F43 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"soft","slug":"macaron","name":"Macaron","nameZh":"马卡龙","aliases":["马卡龙色","Macaron","粉彩","Pastel"],"description":"Frosted pastries lined up in a dessert window — light, girlish, with pink and mint as the signature duo.","descriptionZh":"甜品橱窗里码得整整齐齐的糖霜色:轻盈少女感,粉与薄荷蓝是这组配色的签名双色。","prompt":"Use a Macaron palette: light and girlish, like frosted pastries lined up in a dessert window. Background #FDF6F8 (blush white), cards #FFFFFF (pure white, for lift), borders #F3DEE6 (soft pink outline); body text #55464E (deep berry-gray, never pure black), secondary text #A38B96 (dusty pink-brown); primary buttons #F2A7C3 (macaron pink) with deep berry text #4A2C3A; the accent #A7D8DE (mint blue) is this palette's signature second color — reserved for icons, tags, or emphasis, echoing the pink rather than clashing with it. Forbidden: muddy tones (grayed-out pink or blue), large blocks of dark gray or pure black, primary red/blue, thick black outlines, high-saturation clashing gradients.","promptZh":"请用马卡龙(Macaron)配色:轻盈甜美,像甜品橱窗里码得整整齐齐的糖霜色。背景 #FDF6F8(浅粉白)、卡片 #FFFFFF(纯白,拉开层次)、描边 #F3DEE6(浅粉描边);正文 #55464E(深莓灰紫,不用纯黑)、次要文字 #A38B96(灰粉棕);主按钮 #F2A7C3(马卡龙粉)配深莓字 #4A2C3A;点缀色 #A7D8DE(薄荷蓝),是这组配色的签名双色,只用在图标、标签或强调元素上,和粉色形成呼应而非对撞。禁止:脏色(灰浊的粉/蓝)、深灰或纯黑大面积使用、原色红/原色蓝、粗黑描边、高饱和撞色渐变。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=macaron","fetch":{"method":"copy-tokens","value":"/**\n * Macaron · 马卡龙 — UI Lab palette (Soft & Muted)\n *\n * Frosted pastries lined up in a dessert window — light, girlish, with pink and mint as the signature duo.\n *\n * Best for: Female-oriented products, beauty brands, dessert shops, stickers and creative merchandise\n *\n * - 60-30-10: blush-white background 60%, white cards and whitespace 30%, macaron-pink primary plus mint accent ≤10% combined\n * - Pink and mint are the signature duo — weight pink heavier, let mint stay a supporting flourish, not a co-lead\n * - No pure black text: deep berry-gray #55464E gives ~8.5:1 contrast on the background — girlish without sacrificing legibility\n * - Deep berry #4A2C3A on the #F2A7C3 button, not pure black, to keep the pink's soft edge\n * - Keep the #F3DEE6 border hairline-thin — a thick black outline turns macaron into comic-book instantly\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #FDF6F8; /* bg */\n  --foreground: #55464E; /* text */\n  --card: #FFFFFF; /* surface */\n  --muted-foreground: #A38B96; /* muted */\n  --border: #F3DEE6; /* border */\n  --primary: #F2A7C3; /* primary */\n  --primary-foreground: #4A2C3A; /* primaryFg */\n  --accent: #A7D8DE; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #55464E;\n  --popover: #FFFFFF;\n  --popover-foreground: #55464E;\n  --secondary: #FFFFFF;\n  --secondary-foreground: #55464E;\n  --muted: #FFFFFF;\n  --accent-foreground: #55464E;\n  --input: #F3DEE6;\n  --border-strong: color-mix(in oklab, #F3DEE6 78%, #55464E 22%);\n  --ring: color-mix(in oklab, #F3DEE6 78%, #55464E 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"soft","slug":"sage","name":"Sage","nameZh":"鼠尾草绿","aliases":["鼠尾草绿","Sage Green","灰绿色系","植物系配色"],"description":"A row of matte glass bottles on an organic skincare counter — botanical, quiet, restrained.","descriptionZh":"有机护肤品柜台上一排哑光玻璃瓶:植物系、安静克制,不喧哗也不刺眼。","prompt":"Use a Sage palette: quiet and restrained, like a row of matte glass bottles on an organic skincare counter. Background #F2F4EF (pale sage), cards #FAFBF8 (near-white, slightly cool), borders #DCE2D6 (soft sage outline); body text #3F4A3C (deep olive green, never pure black), secondary text #83907E (grayed sage); primary buttons #7C9473 (sage green) with pale cream text #F5F8F2; the accent #C8B394 (woody khaki) belongs on icons, tags, or small emphasis — it warms the green with a touch of earth. Forbidden: neon green, high-saturation clashes, large blocks of pure black, industrial dark gray, any glossy plastic-like gradient.","promptZh":"请用鼠尾草绿(Sage)配色:安静克制,像有机护肤品柜台上一排哑光玻璃瓶。背景 #F2F4EF(浅灰绿)、卡片 #FAFBF8(近白,略偏冷)、描边 #DCE2D6(浅灰绿描边);正文 #3F4A3C(深橄榄绿,不用纯黑)、次要文字 #83907E(灰绿);主按钮 #7C9473(鼠尾草绿)配浅米字 #F5F8F2;点缀色 #C8B394(木质卡其),用在图标、标签或小面积强调上,给植物绿添一点大地暖度。禁止:荧光绿、高饱和撞色、纯黑大面积、工业感深灰、任何塑料感高光渐变。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=sage","fetch":{"method":"copy-tokens","value":"/**\n * Sage · 鼠尾草绿 — UI Lab palette (Soft & Muted)\n *\n * A row of matte glass bottles on an organic skincare counter — botanical, quiet, restrained.\n *\n * Best for: Skincare and wellness brands, yoga and meditation apps, eco-friendly products, minimalist portfolios\n *\n * - 60-30-10: pale-sage background 60%, near-white cards and whitespace 30%, sage-green primary plus khaki accent ≤10% combined\n * - Keep the whole palette in the sage-to-olive range; step lightness for hierarchy (#F2F4EF → #DCE2D6 → #83907E → #3F4A3C)\n * - No pure black text: deep olive #3F4A3C gives ~8:1 contrast on the background — calm without losing clarity\n * - Pale cream #F5F8F2 on the #7C9473 button, not pure white, to avoid a cold jump\n * - Limit the #C8B394 accent to one or two spots per screen, or the botanical mood tips into workwear khaki\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #F2F4EF; /* bg */\n  --foreground: #3F4A3C; /* text */\n  --card: #FAFBF8; /* surface */\n  --muted-foreground: #83907E; /* muted */\n  --border: #DCE2D6; /* border */\n  --primary: #7C9473; /* primary */\n  --primary-foreground: #F5F8F2; /* primaryFg */\n  --accent: #C8B394; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #3F4A3C;\n  --popover: #FAFBF8;\n  --popover-foreground: #3F4A3C;\n  --secondary: #FAFBF8;\n  --secondary-foreground: #3F4A3C;\n  --muted: #FAFBF8;\n  --accent-foreground: #3F4A3C;\n  --input: #DCE2D6;\n  --border-strong: color-mix(in oklab, #DCE2D6 78%, #3F4A3C 22%);\n  --ring: color-mix(in oklab, #DCE2D6 78%, #3F4A3C 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"vivid","slug":"dopamine","name":"Dopamine","nameZh":"多巴胺","aliases":["多巴胺配色","Dopamine Colors","快乐色","candy colors"],"description":"Hot rose crashing into tangerine — like biting into a fruit candy that glows from the inside.","descriptionZh":"玫红撞橙黄,像一口咬开的水果糖,甜得发光。","prompt":"Use a Dopamine palette: high-saturation, high-energy color like walking into a candy store. Background #FFF7EC (creamy orange-white), cards #FFFFFF (pure white), borders #FFE3D3 (pale apricot-pink); body text #33202A (deep berry-plum, never pure black), secondary text #8A6470; primary buttons #FF477E (hot rose) with pure white text #FFFFFF; the accent is #FF9F1C (tangerine), reserved for badges, icons and emphasized numbers. The rose + orange dual high-saturation clash is this palette's signature — keep the mood bouncy, sweet, candy-shop bright. Forbidden: low-saturation grays, dark backgrounds, thin font weights, Morandi-style haze, a single cool-only hue family.","promptZh":"请用多巴胺(Dopamine)配色:整体高饱和、高能量,像走进一家糖果店。背景 #FFF7EC(奶油橙白)、卡片 #FFFFFF(纯白)、描边 #FFE3D3(浅杏粉);正文 #33202A(深莓紫,不用纯黑)、次要文字 #8A6470;主按钮 #FF477E(玫红)配纯白字 #FFFFFF;点缀色 #FF9F1C(橙黄),用于徽标、图标和强调数字。玫红与橙黄双高饱和撞色是这套配色的签名,情绪要跳、要甜、要有糖果感。禁止:低饱和灰调、深色背景、细字重、莫兰迪式雾感、单一冷色系。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=dopamine","fetch":{"method":"copy-tokens","value":"/**\n * Dopamine · 多巴胺 — UI Lab palette (Vivid & Playful)\n *\n * Hot rose crashing into tangerine — like biting into a fruit candy that glows from the inside.\n *\n * Best for: Young-brand marketing pages, events and festivals, creative studios, consumer apps\n *\n * - 60-30-10: creamy orange-white background 60%, white card space 30%, rose primary plus tangerine accent ≤10% combined\n * - Rose #FF477E and tangerine #FF9F1C are the signature clash — keep both above ~80% saturation, never gray them down\n * - No pure black text: deep berry #33202A gives ~11:1 contrast on #FFF7EC — readable without losing the sweetness\n * - Pure white #FFFFFF on the #FF477E button keeps it the first thing the eye lands on\n * - Reserve #FF9F1C for badges, icons and emphasized numbers — 2-3 spots per screen, more and it overpowers the primary\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #FFF7EC; /* bg */\n  --foreground: #33202A; /* text */\n  --card: #FFFFFF; /* surface */\n  --muted-foreground: #8A6470; /* muted */\n  --border: #FFE3D3; /* border */\n  --primary: #FF477E; /* primary */\n  --primary-foreground: #FFFFFF; /* primaryFg */\n  --accent: #FF9F1C; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #33202A;\n  --popover: #FFFFFF;\n  --popover-foreground: #33202A;\n  --secondary: #FFFFFF;\n  --secondary-foreground: #33202A;\n  --muted: #FFFFFF;\n  --accent-foreground: #33202A;\n  --input: #FFE3D3;\n  --border-strong: color-mix(in oklab, #FFE3D3 78%, #33202A 22%);\n  --ring: color-mix(in oklab, #FFE3D3 78%, #33202A 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"vivid","slug":"neon","name":"Neon","nameZh":"赛博霓虹","aliases":["霓虹色","Neon","赛博配色","Cyberpunk colors"],"description":"Electric cyan and magenta bursting off a deep indigo base — the smell of neon signage on a rainy night.","descriptionZh":"深靛蓝底上炸开电青与品红,雨夜霓虹灯牌的味道。","prompt":"Use a Neon (Cyberpunk) palette: dark background, high contrast, like neon signage reflecting off a rainy night street. Background #0C0C16 (near-black indigo), cards #161626 (deep violet-gray), borders #2C2C46 (dim indigo); body text #F2F2FF (cool white, never pure white), secondary text #9C9CC0; primary buttons #00F0FF (electric cyan) with deep-toned text #061018; the accent is #FF2EA6 (magenta), used on tags, icons and emphasis lines. Electric cyan clashing with magenta over a dark base is this palette's signature. Forbidden: light backgrounds, earthy tones, soft pastels, low-contrast grays, Morandi-style haze.","promptZh":"请用赛博霓虹(Neon)配色:整体深色底、高对比,像夜店霓虹灯牌打在雨夜街道上。背景 #0C0C16(近黑靛蓝)、卡片 #161626(深紫灰)、描边 #2C2C46(暗紫蓝);正文 #F2F2FF(冷白,不用纯白)、次要文字 #9C9CC0;主按钮 #00F0FF(电青)配深底字 #061018;点缀色 #FF2EA6(品红),用于标签、图标和强调线条。电青与品红双霓虹在深底上对撞,是这套配色的签名。禁止:浅色背景、大地色系、柔和粉彩、低对比灰调、莫兰迪式雾感。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=neon","fetch":{"method":"copy-tokens","value":"/**\n * Neon · 赛博霓虹 — UI Lab palette (Vivid & Playful)\n *\n * Electric cyan and magenta bursting off a deep indigo base — the smell of neon signage on a rainy night.\n *\n * Best for: Esports and gaming, music events, tech streetwear brands, nightlife brands\n *\n * - 60-30-10: near-black indigo background 60%, deep violet-gray cards and whitespace 30%, cyan primary plus magenta accent ≤10% combined\n * - Electric cyan #00F0FF and magenta #FF2EA6 are the signature neon pair — keep both at full brightness, never desaturate\n * - No pure white text: cool white #F2F2FF gives ~15:1 contrast on #0C0C16 — glow-strong without glare\n * - Use deep-toned text #061018 on the #00F0FF button rather than black, to keep the electric clarity\n * - Keep #FF2EA6 concentrated on badges, status dots and emphasis lines — large fills turn the clash harsh\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #0C0C16; /* bg */\n  --foreground: #F2F2FF; /* text */\n  --card: #161626; /* surface */\n  --muted-foreground: #9C9CC0; /* muted */\n  --border: #2C2C46; /* border */\n  --primary: #00F0FF; /* primary */\n  --primary-foreground: #061018; /* primaryFg */\n  --accent: #FF2EA6; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #F2F2FF;\n  --popover: #161626;\n  --popover-foreground: #F2F2FF;\n  --secondary: #161626;\n  --secondary-foreground: #F2F2FF;\n  --muted: #161626;\n  --accent-foreground: #F2F2FF;\n  --input: #2C2C46;\n  --border-strong: color-mix(in oklab, #2C2C46 78%, #F2F2FF 22%);\n  --ring: color-mix(in oklab, #2C2C46 78%, #F2F2FF 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"vivid","slug":"sunset","name":"Sunset","nameZh":"日落暖调","aliases":["日落色","Sunset","珊瑚橙暖调","落日渐变色系"],"description":"Coral melting into gold — the last hour of a holiday beach before the sun goes down.","descriptionZh":"珊瑚橙融进金黄,是假日海滩上太阳落下前的最后一小时。","prompt":"Use a Sunset palette: warm, gradient-like light, like the last hour of dusk on a holiday beach. Background #FFF4EC (warm apricot-white), cards #FFFBF7 (near-white warm tone), borders #FFDFC7 (pale apricot-orange); body text #4A3226 (warm brown, never pure black), secondary text #A07A62; primary buttons #F4633A (coral orange) with warm-white text #FFF8F4; the accent is #FFC53D (golden yellow), used on tags, icons and highlighted numbers. The coral-to-gold warm gradient is this palette's signature — keep the mood loose, like a melting sunset. Forbidden: cool-blue dominance, gray tones, dark backgrounds, neon/fluorescent colors, high-saturation clashes.","promptZh":"请用日落暖调(Sunset)配色:整体温暖、渐变感,像假日海滩上黄昏最后一小时的光。背景 #FFF4EC(暖杏白)、卡片 #FFFBF7(近白暖调)、描边 #FFDFC7(浅杏橙);正文 #4A3226(暖棕,不用纯黑)、次要文字 #A07A62;主按钮 #F4633A(珊瑚橙)配暖白字 #FFF8F4;点缀色 #FFC53D(金黄),用于标签、图标和高光数字。珊瑚橙与金黄的暖色渐变是这套配色的签名,要有夕阳融化的松弛感。禁止:冷蓝主导、灰调、深色背景、荧光色、高饱和撞色。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=sunset","fetch":{"method":"copy-tokens","value":"/**\n * Sunset · 日落暖调 — UI Lab palette (Vivid & Playful)\n *\n * Coral melting into gold — the last hour of a holiday beach before the sun goes down.\n *\n * Best for: Travel and vacation brands, dining, lifestyle products, summer event pages\n *\n * - 60-30-10: warm apricot-white background 60%, near-white cards and whitespace 30%, coral primary plus golden accent ≤10% combined\n * - Let coral #F4633A ease into gold #FFC53D as adjacent warm hues — don't cut in a cool color and break the gradient feel\n * - No pure black text: warm brown #4A3226 gives ~8:1 contrast on #FFF4EC — warm and still legible\n * - Use warm-white #FFF8F4 on the #F4633A button instead of pure white, to keep the warmth unbroken\n * - Reserve #FFC53D for prices, ratings and icon highlights — 2-3 spots per screen keeps the sunset relaxed, not loud\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #FFF4EC; /* bg */\n  --foreground: #4A3226; /* text */\n  --card: #FFFBF7; /* surface */\n  --muted-foreground: #A07A62; /* muted */\n  --border: #FFDFC7; /* border */\n  --primary: #F4633A; /* primary */\n  --primary-foreground: #FFF8F4; /* primaryFg */\n  --accent: #FFC53D; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #4A3226;\n  --popover: #FFFBF7;\n  --popover-foreground: #4A3226;\n  --secondary: #FFFBF7;\n  --secondary-foreground: #4A3226;\n  --muted: #FFFBF7;\n  --accent-foreground: #4A3226;\n  --input: #FFDFC7;\n  --border-strong: color-mix(in oklab, #FFDFC7 78%, #4A3226 22%);\n  --ring: color-mix(in oklab, #FFDFC7 78%, #4A3226 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"vivid","slug":"pop","name":"Pop","nameZh":"波普电光","aliases":["波普撞色","Pop Colors","电光蓝黄","蓝黄互补色"],"description":"Cobalt slamming into bright yellow, pinned down by near-black text — crisp as a sports poster.","descriptionZh":"钴蓝对撞明黄,近黑文字压住阵脚,体育海报般干脆。","prompt":"Use a Pop (Pop Art) palette: crisp and confident, like sports-poster and streetwear-magazine layout. Background #F7F7FB (cool off-white), cards #FFFFFF (pure white), borders #E2E2F0 (pale gray-blue); body text #14141A (near-black, never pure black), secondary text #6E6E85; primary buttons #2456F0 (cobalt blue) with cool-white text #F5F8FF; the accent is #FFD400 (bright yellow), used on tags, icons and emphasized numbers. Cobalt and yellow form a complementary clash, and the near-black text must carry full contrast — keep the mood sharp, not soft. Forbidden: pastel tones, low contrast, warm brown tones, more than three high-saturation hues, Morandi-style haze.","promptZh":"请用波普电光(Pop)配色:整体利落、自信,像体育海报和潮流杂志的排版。背景 #F7F7FB(冷白灰)、卡片 #FFFFFF(纯白)、描边 #E2E2F0(浅灰蓝);正文 #14141A(近黑,不用纯黑)、次要文字 #6E6E85;主按钮 #2456F0(钴蓝)配冷白字 #F5F8FF;点缀色 #FFD400(明黄),用于标签、图标和强调数字。钴蓝与明黄是互补撞色,近黑文字要给足对比,情绪干净利落不暧昧。禁止:粉彩色调、低对比、暖棕色调、超过三种高饱和色相、莫兰迪式雾感。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=pop","fetch":{"method":"copy-tokens","value":"/**\n * Pop · 波普电光 — UI Lab palette (Vivid & Playful)\n *\n * Cobalt slamming into bright yellow, pinned down by near-black text — crisp as a sports poster.\n *\n * Best for: Sports and athletic brands, tech launch pages, recruiting and campus events, streetwear e-commerce\n *\n * - 60-30-10: cool off-white background 60%, pure white cards and whitespace 30%, cobalt primary plus yellow accent ≤10% combined\n * - Cobalt #2456F0 and yellow #FFD400 form the complementary clash — use only these two saturated hues, don't stack a third\n * - No pure black text but keep it deep: near-black #14141A gives ~17:1 contrast on #F7F7FB — sharp and clean\n * - Use cool-white #F5F8FF on the #2456F0 button rather than warm white, to keep the whole palette cool-toned\n * - Reserve #FFD400 for tags, icons and emphasized numbers — large fills lose the pop-art restraint\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #F7F7FB; /* bg */\n  --foreground: #14141A; /* text */\n  --card: #FFFFFF; /* surface */\n  --muted-foreground: #6E6E85; /* muted */\n  --border: #E2E2F0; /* border */\n  --primary: #2456F0; /* primary */\n  --primary-foreground: #F5F8FF; /* primaryFg */\n  --accent: #FFD400; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #14141A;\n  --popover: #FFFFFF;\n  --popover-foreground: #14141A;\n  --secondary: #FFFFFF;\n  --secondary-foreground: #14141A;\n  --muted: #FFFFFF;\n  --accent-foreground: #14141A;\n  --input: #E2E2F0;\n  --border-strong: color-mix(in oklab, #E2E2F0 78%, #14141A 22%);\n  --ring: color-mix(in oklab, #E2E2F0 78%, #14141A 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"dark","slug":"dark-luxe","name":"Dark Luxe","nameZh":"暗黑奢华","aliases":["黑金配色","Dark Luxe","轻奢暗色","Black & Gold"],"description":"Black lacquer and champagne gold — the hush of a five-star lobby after the last guest has gone up.","descriptionZh":"黑漆与香槟金——五星酒店大堂打烊后的那种静。","prompt":"Use a Dark Luxe palette: black-and-gold, the hush of a whisky bar or a five-star hotel lobby after hours. Background #0D0D10 (near-black, never pure black), cards #17171C, borders #2A2A32; body text #EDEAE2 (warm white, never pure white), secondary text #9B978C; primary buttons in champagne gold #C8A24B with deep charcoal text #141410 — this pairing is the signature move; accent #E8DFC8 (pale gold), reserved for badges, dividers, or numerals. Gold is punctuation, not paint — keep it small. Forbidden: bright backgrounds, candy colors, large gold fills, cheap neon, pure #000 or #fff.","promptZh":"请用暗黑奢华(Dark Luxe)配色:黑金基调,像威士忌吧台或五星酒店大堂的夜色。背景 #0D0D10(近黑,不用纯黑)、卡片 #17171C、描边 #2A2A32;正文 #EDEAE2(暖白,不用纯白)、次要文字 #9B978C;主按钮 #C8A24B(香槟金)配深炭字 #141410,这是签名组合;点缀色 #E8DFC8(浅金),只用在徽标、分隔线或数字上。金色只做点睛,不做大面积填充。禁止:明亮底色、糖果色、大面积铺金、廉价荧光色、纯黑 #000 或纯白 #fff。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=dark-luxe","fetch":{"method":"copy-tokens","value":"/**\n * Dark Luxe · 暗黑奢华 — UI Lab palette (Dark)\n *\n * Black lacquer and champagne gold — the hush of a five-star lobby after the last guest has gone up.\n *\n * Best for: Luxury hotels and members clubs, jewelry and watch brands, whisky and cigar labels, high-end concierge services\n *\n * - 60-30-10: near-black background 60%, cards and whitespace 30%, champagne-gold primary plus pale-gold accent ≤10% combined\n * - Dark backgrounds should never go pure black: #0D0D10 keeps a whisper of warmth, reading richer than #000 and easier on the eyes\n * - Body text should never go pure white: #EDEAE2 gives ~15:1 contrast on the background — crisp without glaring\n * - Pair the #C8A24B button with deep charcoal text #141410, not white — gold-on-dark-text is the luxury-brand accent\n * - Limit the #E8DFC8 accent to two spots per screen (a price, an icon stroke) — more than that reads cheap\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #0D0D10; /* bg */\n  --foreground: #EDEAE2; /* text */\n  --card: #17171C; /* surface */\n  --muted-foreground: #9B978C; /* muted */\n  --border: #2A2A32; /* border */\n  --primary: #C8A24B; /* primary */\n  --primary-foreground: #141410; /* primaryFg */\n  --accent: #E8DFC8; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #EDEAE2;\n  --popover: #17171C;\n  --popover-foreground: #EDEAE2;\n  --secondary: #17171C;\n  --secondary-foreground: #EDEAE2;\n  --muted: #17171C;\n  --accent-foreground: #EDEAE2;\n  --input: #2A2A32;\n  --border-strong: color-mix(in oklab, #2A2A32 78%, #EDEAE2 22%);\n  --ring: color-mix(in oklab, #2A2A32 78%, #EDEAE2 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"dark","slug":"midnight","name":"Midnight Blue","nameZh":"午夜蓝","aliases":["午夜蓝","Midnight Blue","深蓝暗色","deep navy"],"description":"Coding at 2am under a single desk lamp — deep, trustworthy blue with an observatory hush.","descriptionZh":"凌晨两点独自写代码的蓝,像天文台的寂静,深邃又让人信任。","prompt":"Use a Midnight Blue palette: deep, trustworthy blue with the hush of coding at 2am or an observatory at night. Background #0B1220 (deep indigo, never pure black), cards #131C2E, borders #24314D; body text #E4EAF5 (cool white, never pure white), secondary text #8DA0BF; primary buttons in electric blue #4C7DFF with near-white text #F2F6FF; accent #8FB8FF (bright blue), for icons, links, and status hints. Keep the whole palette inside the blue family and separate layers by lightness. Forbidden: large warm-orange areas, pure black backgrounds, gray-purple gradients, low-contrast blue-on-blue text.","promptZh":"请用午夜蓝(Midnight)配色:深邃可信赖的蓝,像深夜写代码或天文台的静。背景 #0B1220(深靛蓝,不用纯黑)、卡片 #131C2E、描边 #24314D;正文 #E4EAF5(冷白,不用纯白)、次要文字 #8DA0BF;主按钮 #4C7DFF(电光蓝)配近白字 #F2F6FF;点缀色 #8FB8FF(亮蓝),用于图标、链接和状态提示。整体色相集中在蓝色系,靠明度拉开层次。禁止:暖橙大面积使用、纯黑背景、灰紫渐变、蓝字配蓝底导致的低对比。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=midnight","fetch":{"method":"copy-tokens","value":"/**\n * Midnight Blue · 午夜蓝 — UI Lab palette (Dark)\n *\n * Coding at 2am under a single desk lamp — deep, trustworthy blue with an observatory hush.\n *\n * Best for: Developer tools, fintech products, SaaS dashboards, security software\n *\n * - 60-30-10: deep-indigo background 60%, cards and whitespace 30%, electric-blue primary plus bright-blue accent ≤10% combined\n * - Dark backgrounds should never go pure black: #0B1220 carries a touch of indigo warmth, reading more deliberate than flat black\n * - Body text should never go pure white: #E4EAF5 gives ~13:1 contrast — cool and legible without glare\n * - Pair the #4C7DFF button with near-white text #F2F6FF, never a same-family dark blue, or readability collapses\n * - Reserve #8FB8FF for interactive states — hover, links, status dots — never as a large fill\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #0B1220; /* bg */\n  --foreground: #E4EAF5; /* text */\n  --card: #131C2E; /* surface */\n  --muted-foreground: #8DA0BF; /* muted */\n  --border: #24314D; /* border */\n  --primary: #4C7DFF; /* primary */\n  --primary-foreground: #F2F6FF; /* primaryFg */\n  --accent: #8FB8FF; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #E4EAF5;\n  --popover: #131C2E;\n  --popover-foreground: #E4EAF5;\n  --secondary: #131C2E;\n  --secondary-foreground: #E4EAF5;\n  --muted: #131C2E;\n  --accent-foreground: #E4EAF5;\n  --input: #24314D;\n  --border-strong: color-mix(in oklab, #24314D 78%, #E4EAF5 22%);\n  --ring: color-mix(in oklab, #24314D 78%, #E4EAF5 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"dark","slug":"forest-night","name":"Forest Night","nameZh":"墨绿夜","aliases":["墨绿配色","Forest Night","深绿金","绿金暗色"],"description":"A forest after rain, moss and lantern light — quiet but unmistakably alive.","descriptionZh":"雨后的森林夜色,苔藓与灯笼微光,沉静却有生命力。","prompt":"Use a Forest Night palette: a forest after rain, moss and lantern light, quiet but alive. Background #0E1512 (near-black forest green, never pure black), cards #16211C, borders #27352E; body text #E3EBE5 (cool, faintly green white, never pure white), secondary text #8FA598; primary buttons in forest green #3E9B6E with pale mint-white text #EAF6EF; accent #D9B44A (mossy gold), used for icons, badges, or emphasized numerals — one lantern glow inside the green. Forbidden: neon green, blue-purple tech tones, bright backgrounds, pink accents.","promptZh":"请用墨绿夜(Forest Night)配色:雨后森林的夜色,苔藓与灯笼微光,沉静但有生命力。背景 #0E1512(墨绿黑,不用纯黑)、卡片 #16211C、描边 #27352E;正文 #E3EBE5(冷白微绿,不用纯白)、次要文字 #8FA598;主按钮 #3E9B6E(森林绿)配浅绿白字 #EAF6EF;点缀色 #D9B44A(苔金),用于图标、徽标或强调数字,是绿色主调里的一点灯笼光。禁止:荧光绿、蓝紫科技感配色、明亮底色、粉色点缀。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=forest-night","fetch":{"method":"copy-tokens","value":"/**\n * Forest Night · 墨绿夜 — UI Lab palette (Dark)\n *\n * A forest after rain, moss and lantern light — quiet but unmistakably alive.\n *\n * Best for: Eco and outdoor brands, specialty coffee and tea, wellness and nature-healing products, bookstores\n *\n * - 60-30-10: near-black forest-green background 60%, cards and whitespace 30%, forest-green primary plus mossy-gold accent ≤10% combined\n * - Dark backgrounds should never go pure black: #0E1512 carries a green undertone, reading like a forest night rather than flat dark\n * - Body text should never go pure white: #E3EBE5 leans faintly green at ~13:1 contrast, staying in family without glare\n * - Mossy gold #D9B44A is the only warm note — one or two per screen (an icon, a number); more than that steals the scene from green\n * - Pair the #3E9B6E button with pale mint-white text #EAF6EF, not pure white, to keep everything inside the green family\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #0E1512; /* bg */\n  --foreground: #E3EBE5; /* text */\n  --card: #16211C; /* surface */\n  --muted-foreground: #8FA598; /* muted */\n  --border: #27352E; /* border */\n  --primary: #3E9B6E; /* primary */\n  --primary-foreground: #EAF6EF; /* primaryFg */\n  --accent: #D9B44A; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #E3EBE5;\n  --popover: #16211C;\n  --popover-foreground: #E3EBE5;\n  --secondary: #16211C;\n  --secondary-foreground: #E3EBE5;\n  --muted: #16211C;\n  --accent-foreground: #E3EBE5;\n  --input: #27352E;\n  --border-strong: color-mix(in oklab, #27352E 78%, #E3EBE5 22%);\n  --ring: color-mix(in oklab, #27352E 78%, #E3EBE5 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"dark","slug":"mono-slate","name":"Mono Slate","nameZh":"炭黑单色","aliases":["单色暗色","Monochrome Dark","炭黑灰阶","黑白极简"],"description":"No color at all — black-and-white-photography restraint that lets the content speak.","descriptionZh":"没有一丝彩色的克制,像黑白摄影,让内容自己说话。","prompt":"Use a Mono Slate palette: total colorlessness, black-and-white-photography restraint that lets the content speak. Background #111113 (charcoal, never pure black), cards #1A1A1D, borders #2A2A2E; body text #EAEAEC (near-white gray, never pure white), secondary text #909095; primary buttons in light gray-white #E5E5E8 with deep charcoal text #131316 — the signature move is this light-on-dark inversion; accent #A0A0A8 (mid-gray), used only for subtle emphasis. The whole palette lives on the grayscale — no hue anywhere. Forbidden: any colored element (this is an achromatic palette), pure #000 backgrounds, colored shadows, color gradients.","promptZh":"请用炭黑单色(Mono Slate)配色:完全无彩色的克制,像黑白摄影,让内容本身说话。背景 #111113(炭黑,不用纯黑)、卡片 #1A1A1D、描边 #2A2A2E;正文 #EAEAEC(近白灰,不用纯白)、次要文字 #909095;主按钮 #E5E5E8(浅灰白)配深炭字 #131316,白底黑字的反转是这套配色的签名;点缀色 #A0A0A8(中灰),仅作细微强调。整套配色只有灰阶,没有任何色相。禁止:任何彩色元素(这是无彩配色)、纯黑 #000 底、彩色阴影、彩色渐变。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=mono-slate","fetch":{"method":"copy-tokens","value":"/**\n * Mono Slate · 炭黑单色 — UI Lab palette (Dark)\n *\n * No color at all — black-and-white-photography restraint that lets the content speak.\n *\n * Best for: Photography and design portfolios, fashion brands, writing platforms, minimalist tools\n *\n * - 60-30-10: charcoal background 60%, cards and whitespace 30%, light gray-white primary plus mid-gray accent ≤10% combined\n * - Dark backgrounds should never go pure black: #111113 keeps a breath of grayscale, less flat and airless than #000\n * - Body text should never go pure white: #EAEAEC gives ~14:1 contrast — legible without glaring\n * - Invert the primary button to light gray-white #E5E5E8 on deep charcoal text #131316 — the single 'bright block' in the palette, built on lightness alone, never hue\n * - Reserve #A0A0A8 for minor emphasis (timestamps, index numbers) — never reach for color to rescue a flat moment\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #111113; /* bg */\n  --foreground: #EAEAEC; /* text */\n  --card: #1A1A1D; /* surface */\n  --muted-foreground: #909095; /* muted */\n  --border: #2A2A2E; /* border */\n  --primary: #E5E5E8; /* primary */\n  --primary-foreground: #131316; /* primaryFg */\n  --accent: #A0A0A8; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #EAEAEC;\n  --popover: #1A1A1D;\n  --popover-foreground: #EAEAEC;\n  --secondary: #1A1A1D;\n  --secondary-foreground: #EAEAEC;\n  --muted: #1A1A1D;\n  --accent-foreground: #EAEAEC;\n  --input: #2A2A2E;\n  --border-strong: color-mix(in oklab, #2A2A2E 78%, #EAEAEC 22%);\n  --ring: color-mix(in oklab, #2A2A2E 78%, #EAEAEC 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"earthy","slug":"earth","name":"Earth Tones","nameZh":"大地色","aliases":["大地色系","Earth Tones","陶土色","Terracotta"],"description":"Clay pots, linen sheets, and wood left out in the sun — terracotta grounded by a touch of olive.","descriptionZh":"陶罐、亚麻布、晒透了的木头 —— 赭陶打底,一点橄榄绿收尾。","prompt":"Use an Earth Tones palette: clay, linen, and sun-warmed wood. Background #F7F1E8 (linen beige), cards #FCF9F3 (warm white), borders #E5D8C4 (pale terracotta); body text #4A3B2B (deep umber, never pure black), secondary text #97835F (warm taupe); primary buttons #A9744A (terracotta) with warm-white text #FBF6EE; the accent is #6B7F4F (olive green), reserved for icons, tags, or small emphasis text. The overall feel should be grounded and warm, like fired clay and weathered wood. Forbidden: neon colors, cool-blue dominance, pure #000 or #fff, plastic-slick high saturation, glossy metallic gradients.","promptZh":"请用大地色(Earth Tones)配色:陶土、亚麻、晒过太阳的木头质感。背景 #F7F1E8(亚麻米)、卡片 #FCF9F3(暖白)、描边 #E5D8C4(浅陶土);正文 #4A3B2B(深赭棕,不用纯黑)、次要文字 #97835F(暖褐灰);主按钮 #A9744A(赭陶)配暖白字 #FBF6EE;点缀色 #6B7F4F(橄榄绿),只用在图标、标签或少量强调文字上。整体沉稳温暖,像被太阳晒透的陶器和木材。禁止:荧光色、冷蓝主导、纯黑 #000 或纯白 #fff、塑料感高饱和、光泽金属渐变。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=earth","fetch":{"method":"copy-tokens","value":"/**\n * Earth Tones · 大地色 — UI Lab palette (Earthy & Classic)\n *\n * Clay pots, linen sheets, and wood left out in the sun — terracotta grounded by a touch of olive.\n *\n * Best for: Furniture and home brands, artisan/craft goods, coffee roasters, sustainable fashion\n *\n * - 60-30-10: linen background 60%, cards and whitespace 30%, terracotta primary plus olive accent ≤10% combined\n * - Step lightness rather than hue: #F7F1E8 → #E5D8C4 → #97835F → #4A3B2B, staying within warm browns and oranges\n * - Body text uses deep umber #4A3B2B instead of pure black — readable against #F7F1E8 without feeling harsh\n * - Pair the #A9744A button with warm-white #FBF6EE text, never pure white, to keep the color temperature consistent\n * - Keep #6B7F4F olive as a true accent — past ~10% of the screen it overpowers the terracotta lead\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #F7F1E8; /* bg */\n  --foreground: #4A3B2B; /* text */\n  --card: #FCF9F3; /* surface */\n  --muted-foreground: #97835F; /* muted */\n  --border: #E5D8C4; /* border */\n  --primary: #A9744A; /* primary */\n  --primary-foreground: #FBF6EE; /* primaryFg */\n  --accent: #6B7F4F; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #4A3B2B;\n  --popover: #FCF9F3;\n  --popover-foreground: #4A3B2B;\n  --secondary: #FCF9F3;\n  --secondary-foreground: #4A3B2B;\n  --muted: #FCF9F3;\n  --accent-foreground: #4A3B2B;\n  --input: #E5D8C4;\n  --border-strong: color-mix(in oklab, #E5D8C4 78%, #4A3B2B 22%);\n  --ring: color-mix(in oklab, #E5D8C4 78%, #4A3B2B 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"earthy","slug":"ocean","name":"Ocean Blue","nameZh":"海洋蓝","aliases":["海洋蓝","Ocean Blue","青蓝色系","水色系"],"description":"Clean and cool, like a tide pool at low water — deep teal grounded by a flash of sky blue.","descriptionZh":"清爽干净,像退潮后的浅滩 —— 深青打底,一点天蓝跳色。","prompt":"Use an Ocean Blue palette: clean and cool, like a tide pool at low water. Background #F2F8FA (pale aqua), cards #FBFDFE (near-white), borders #D5E6EC (light cyan); body text #173B4A (deep teal, never pure black), secondary text #5E8494 (slate blue-gray); primary buttons #0E7490 (deep teal) with pale-blue text #F0FAFD; the accent is #38BDF8 (sky blue), reserved for icons, tags, or highlighted data. The feel should be bright and airy, with no warm tones creeping in. Forbidden: warm browns, hot pink, dark backgrounds, muddy grays, high-saturation color clashes.","promptZh":"请用海洋蓝(Ocean Blue)配色:清爽干净,像退潮后的浅滩。背景 #F2F8FA(浅水蓝)、卡片 #FBFDFE(近白)、描边 #D5E6EC(浅青);正文 #173B4A(深青蓝,不用纯黑)、次要文字 #5E8494(灰青);主按钮 #0E7490(深青)配浅蓝白字 #F0FAFD;点缀色 #38BDF8(天蓝),只用在图标、标签或数据高亮上。整体明亮通透,不带一点暖调。禁止:暖棕、艳粉、深色底、脏灰、高饱和撞色。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=ocean","fetch":{"method":"copy-tokens","value":"/**\n * Ocean Blue · 海洋蓝 — UI Lab palette (Earthy & Classic)\n *\n * Clean and cool, like a tide pool at low water — deep teal grounded by a flash of sky blue.\n *\n * Best for: Healthcare and wellness, travel/island tourism, ocean conservation orgs, clean-tech products\n *\n * - 60-30-10: pale-aqua background 60%, cards and whitespace 30%, deep-teal primary plus sky-blue accent ≤10% combined\n * - Step lightness, not hue: #F2F8FA → #D5E6EC → #5E8494 → #173B4A, staying within blues and teals throughout\n * - Body text uses deep teal #173B4A instead of pure black — clear against the pale-aqua background while staying cool\n * - Pair the #0E7490 button with pale-blue #F0FAFD text, never pure white, to keep a trace of water in it\n * - Sky blue #38BDF8 is highly saturated — reserve it for data points, icons, or small badges; large areas turn glaring\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #F2F8FA; /* bg */\n  --foreground: #173B4A; /* text */\n  --card: #FBFDFE; /* surface */\n  --muted-foreground: #5E8494; /* muted */\n  --border: #D5E6EC; /* border */\n  --primary: #0E7490; /* primary */\n  --primary-foreground: #F0FAFD; /* primaryFg */\n  --accent: #38BDF8; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #173B4A;\n  --popover: #FBFDFE;\n  --popover-foreground: #173B4A;\n  --secondary: #FBFDFE;\n  --secondary-foreground: #173B4A;\n  --muted: #FBFDFE;\n  --accent-foreground: #173B4A;\n  --input: #D5E6EC;\n  --border-strong: color-mix(in oklab, #D5E6EC 78%, #173B4A 22%);\n  --ring: color-mix(in oklab, #D5E6EC 78%, #173B4A 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"earthy","slug":"business","name":"Corporate Blue","nameZh":"商务蓝灰","aliases":["商务蓝","Corporate Blue","企业级配色","蓝灰商务"],"description":"Professional, trustworthy, unshakeably corporate — the blue that never surprises anyone.","descriptionZh":"专业、可信、不出错的企业蓝 —— 一种永远不会让人意外的颜色。","prompt":"Use a Corporate Blue palette: professional, trustworthy, unshakeably enterprise. Background #F6F8FA (cool off-white), cards #FFFFFF (pure white), borders #DDE3EA (pale blue-gray); body text #1F2A37 (deep graphite blue, never pure black), secondary text #64748B (slate gray); primary buttons #1D4ED8 (standard blue) with pale-blue text #F5F8FF; the accent is #0EA5E9 (bright sky blue), reserved for charts, status tags, or link hover states. The overall feel is restrained and orderly, like a tightly typeset corporate report. Forbidden: playful candy colors, saturated reds or purples, dark-mode-only backgrounds, decorative gradients, handwritten or doodle-style elements.","promptZh":"请用商务蓝灰(Corporate Blue)配色:专业、可信、不出错的企业感。背景 #F6F8FA(冷白灰)、卡片 #FFFFFF(纯白)、描边 #DDE3EA(浅灰蓝);正文 #1F2A37(深石墨蓝,不用纯黑)、次要文字 #64748B(石板灰);主按钮 #1D4ED8(标准蓝)配浅蓝白字 #F5F8FF;点缀色 #0EA5E9(亮天蓝),只用在图表、状态标签或链接悬停上。整体克制、规整,像一份排版严谨的企业报告。禁止:娱乐化糖果色、大红大紫、暗黑底、装饰性渐变、手写体或涂鸦元素。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=business","fetch":{"method":"copy-tokens","value":"/**\n * Corporate Blue · 商务蓝灰 — UI Lab palette (Earthy & Classic)\n *\n * Professional, trustworthy, unshakeably corporate — the blue that never surprises anyone.\n *\n * Best for: B2B corporate websites, finance and legal, enterprise SaaS, consulting firms\n *\n * - 60-30-10: cool off-white background 60%, white cards and whitespace 30%, standard-blue primary plus sky-blue accent ≤10% combined\n * - Step lightness, not hue: #F6F8FA → #DDE3EA → #64748B → #1F2A37, staying strictly within blue-grays with no third hue\n * - Body text uses deep graphite blue #1F2A37 instead of pure black — sufficient contrast but softer for long reading sessions\n * - Pair the #1D4ED8 button with pale-blue #F5F8FF text, never pure white, to keep the cool temperature consistent\n * - Reserve #0EA5E9 for chart data points or rare interactive feedback — any larger footprint breaks the corporate restraint\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #F6F8FA; /* bg */\n  --foreground: #1F2A37; /* text */\n  --card: #FFFFFF; /* surface */\n  --muted-foreground: #64748B; /* muted */\n  --border: #DDE3EA; /* border */\n  --primary: #1D4ED8; /* primary */\n  --primary-foreground: #F5F8FF; /* primaryFg */\n  --accent: #0EA5E9; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #1F2A37;\n  --popover: #FFFFFF;\n  --popover-foreground: #1F2A37;\n  --secondary: #FFFFFF;\n  --secondary-foreground: #1F2A37;\n  --muted: #FFFFFF;\n  --accent-foreground: #1F2A37;\n  --input: #DDE3EA;\n  --border-strong: color-mix(in oklab, #DDE3EA 78%, #1F2A37 22%);\n  --ring: color-mix(in oklab, #DDE3EA 78%, #1F2A37 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"palette","category":"earthy","slug":"ink-wash","name":"Ink Wash","nameZh":"水墨丹青","aliases":["水墨色","Ink Wash","新中式配色","宣纸墨色"],"description":"Rice paper, pine-soot ink, and a single stroke of cinnabar — Chinese aesthetics translated for a screen.","descriptionZh":"宣纸、松烟墨、一点朱砂印 —— 中国传统审美的数字化转译。","prompt":"Use an Ink Wash palette: rice-paper background, ink-black text, one seal-stamp of cinnabar. Background #F7F5F0 (rice paper), cards #FDFCF8 (warm white), borders #E2DDD2 (pale greige); body text #26241F (pine-soot black, never pure black), secondary text #7D786C (taupe gray); primary buttons #2F3A44 (indigo ink) with warm-white text #F5F4EE; the accent is #B5432A (cinnabar red), reserved for seal-stamp-sized emphasis only — a badge corner or a key number. The overall look is restrained new-Chinese aesthetics: ink dominates, cinnabar merely punctuates. Forbidden: garish lantern-red (cinnabar stays seal-sized, never a large color block), heaps of gold, high-saturation clashes, tech-blue accents.","promptZh":"请用水墨丹青(Ink Wash)配色:宣纸底、墨色文字、一点朱砂印。背景 #F7F5F0(宣纸米)、卡片 #FDFCF8(米白)、描边 #E2DDD2(浅灰米);正文 #26241F(松烟墨黑,不用纯黑)、次要文字 #7D786C(灰褐);主按钮 #2F3A44(黛蓝墨)配米白字 #F5F4EE;点缀色 #B5432A(朱砂红),只用在印章式的小面积强调上,比如标签角标或关键数字。整体是新中式的克制美学,墨色为主、朱砂点睛。禁止:大红灯笼式的艳俗红(朱砂只做印章式点睛,不做大面积色块)、金色堆砌、高饱和撞色、科技蓝。","pageUrl":"https://ui-lab-ten.vercel.app/palettes?palette=ink-wash","fetch":{"method":"copy-tokens","value":"/**\n * Ink Wash · 水墨丹青 — UI Lab palette (Earthy & Classic)\n *\n * Rice paper, pine-soot ink, and a single stroke of cinnabar — Chinese aesthetics translated for a screen.\n *\n * Best for: Tea, calligraphy, and guofeng brands, museums and exhibitions, Chinese dining, cultural publishing\n *\n * - 60-30-10: rice-paper background 60%, cards and whitespace 30%, indigo-ink primary plus cinnabar accent ≤10% combined\n * - Step lightness, not hue: #F7F5F0 → #E2DDD2 → #7D786C → #26241F, keeping to ink black and indigo with no third hue\n * - Body text uses pine-soot black #26241F instead of pure black, keeping a trace of warmth like brushed ink rather than print\n * - Pair the #2F3A44 button with warm-white #F5F4EE text, never pure white, to echo the rice-paper undertone\n * - Keep cinnabar #B5432A strictly seal-stamp sized — spread it wider and the look shifts from ink wash to New Year print\n *\n * Paste this below `@import \"tailwindcss\";` in your globals.css. This\n * is a single light/dark-agnostic theme — if this palette is from the\n * \"dark\" group, its colors already are the dark theme. Pairs with UI\n * Lab's /theme.css theme layer if you're using it.\n */\n\n:root {\n  --background: #F7F5F0; /* bg */\n  --foreground: #26241F; /* text */\n  --card: #FDFCF8; /* surface */\n  --muted-foreground: #7D786C; /* muted */\n  --border: #E2DDD2; /* border */\n  --primary: #2F3A44; /* primary */\n  --primary-foreground: #F5F4EE; /* primaryFg */\n  --accent: #B5432A; /* accent */\n\n  /* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */\n  --card-foreground: #26241F;\n  --popover: #FDFCF8;\n  --popover-foreground: #26241F;\n  --secondary: #FDFCF8;\n  --secondary-foreground: #26241F;\n  --muted: #FDFCF8;\n  --accent-foreground: #26241F;\n  --input: #E2DDD2;\n  --border-strong: color-mix(in oklab, #E2DDD2 78%, #26241F 22%);\n  --ring: color-mix(in oklab, #E2DDD2 78%, #26241F 22%);\n  /* --destructive: not set — this palette has no danger role; keep your project's default */\n}\n"}},{"kind":"design-system","category":"workbench","slug":"graphite","name":"Graphite","nameZh":"石墨","aliases":["工具型 Agent 工作台","agent workbench baseline","三栏任务控制台","graphite console"],"description":"The baseline light-and-dark skin for a tool-first Agent workbench: quiet graphite surfaces, hairline structure, compact controls, and one restrained accent keep long-running work legible without competing with it.","descriptionZh":"工具型 Agent 工作台的基准深浅双态皮肤：安静的石墨表面、发丝结构线、紧凑控件与单一克制强调色，让长时间运行的任务始终清楚而不喧宾夺主。","prompt":"Use the 'Graphite Agent Workbench' design system: build a resizable three-column workbench with a compact conversation rail on the left, a fixed-reading-width Agent thread plus bottom composer in the center, and an on-demand artifact area on the right with rendered preview, raw source, and version restore. Establish hierarchy with near-neutral graphite surfaces, 0.5–1px hairlines, low-contrast hover fills, and one restrained cool accent. Keep density high but line-height controlled; use monospace for code and commands, and introduce semantic color only for success, warning, and error states. Support matching light and dark themes without changing component sizing or spatial relationships. FORBIDDEN: colorful gradient backdrops, heavy drop shadows, glassmorphism everywhere, competing accent colors, stacks of oversized rounded cards, collapsing the desktop workbench into a generic marketing page, or decorative animation that obscures task state.","promptZh":"采用「Graphite / 石墨 Agent 工作台」设计系统：搭建可拖拽的三栏工作台，左侧是紧凑会话轨，中间是固定阅读宽度的 Agent 线程与贴底输入台，右侧是按需打开的产物区，提供产物预览、原始源码与版本恢复；用近中性的石墨灰分层、0.5–1px 发丝描边、低对比悬停面和单一冷色强调来表达层级；信息密度高但行高克制，代码和命令使用等宽字体，状态只在成功、警告、错误时短暂引入语义色；同时提供浅色与深色主题，组件尺寸和空间关系保持一致。FORBIDDEN：彩色渐变大背景、厚重投影、玻璃拟态泛滥、多个竞争强调色、超大圆角卡片堆叠、把桌面三栏降级成普通营销页、用装饰动画遮盖任务状态。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=graphite","fetch":{"method":"copy-tokens","value":"# Graphite\n\nGraphite is a baseline light-and-dark design system for tool-first Agent workbenches.\n\n## Principles\n\n- Keep the work visible: chrome is quiet, dense, and subordinate to the task.\n- Build hierarchy with graphite surface steps and 0.5–1px hairlines.\n- Reserve one cool accent for selection, focus, and active execution.\n- Use semantic color only for success, warning, approval, and failure.\n\n## Workbench anatomy\n\n- Header: compact global controls and the current task title.\n- Sidebar: resizable conversation rail with grouped, selectable threads.\n- Thread: fixed reading width for user prompts, work logs, tools, and artifacts.\n- Composer: pinned input with explicit context, model, effort, and attachments.\n- Artifacts: optional resizable preview/source panel with version navigation and restore; it squeezes the main column in flow.\n\n## Typography and motion\n\nUse a neutral system sans stack for UI and a system monospace stack for commands. Animate transform and opacity only; keep routine feedback below 300ms, respect reduced motion, and never animate away critical state.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-graphite.json","endpoint":"https://ui-lab-ten.vercel.app/themes/graphite.css"},"themePreview":{"modes":["light","dark"],"light":{"background":"oklch(97.8% 0.0015 250)","foreground":"oklch(15% 0 0)","card":"oklch(95.2% 0.002 250)","muted-foreground":"oklch(50% 0 0)","border":"oklch(15% 0 0 / 0.09)","primary":"oklch(15% 0 0)","primary-foreground":"oklch(97.8% 0.0015 250)","success":"oklch(59.6% 0.145 163.225)","danger":"oklch(63.7% 0.237 25.331)","warning":"#e25507","wb-surface":"rgb(255 255 255)","wb-accent":"#339cff","wb-hairline":"rgb(0 0 0 / 0.12)","chart-1":"oklch(0.55 0.17 251)","chart-2":"oklch(0.68 0.17 311)","chart-3":"oklch(0.52 0.17 41)","chart-4":"oklch(0.70 0.17 101)","chart-5":"oklch(0.58 0.17 176)","chart-6":"oklch(0.65 0.17 221)","font-sans":"Geist, Inter, system-ui, sans-serif"},"dark":{"background":"#151515","foreground":"oklch(96% 0 0)","card":"#1c1c1c","muted-foreground":"oklch(62% 0 0)","border":"rgb(255 255 255 / 0.05)","primary":"oklch(96% 0 0)","primary-foreground":"#151515","success":"#40c977","danger":"#fa423e","warning":"#ff8549","wb-surface":"oklch(20.5% 0 0)","wb-accent":"#339cff","wb-hairline":"rgb(255 255 255 / 0.157)","chart-1":"oklch(0.52 0.17 251)","chart-2":"oklch(0.64 0.17 311)","chart-3":"oklch(0.50 0.17 41)","chart-4":"oklch(0.66 0.17 101)","chart-5":"oklch(0.55 0.17 176)","chart-6":"oklch(0.62 0.17 221)","font-sans":"Geist, Inter, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"nightflight","name":"Nightflight","nameZh":"夜航","aliases":["夜间任务舱","近黑工艺工作台","lavender dark console","蓝紫单强调"],"description":"A near-black workbench with cool graphite depth, precise lavender-blue focus states, and restrained contrast for long-running tasks after dark.","descriptionZh":"以近黑层次、冷静石墨深度与精准薰衣草蓝焦点构成的夜间工作台，适合长时间运行与持续监看任务。","prompt":"Use the 'Nightflight Workbench' design system: establish low-light depth with a #0a0a0b canvas, #0f1011 primary surfaces, and #18191a raised layers, then separate the sidebar, thread, composer, and artifact area with precise cool-gray hairlines. Keep primary copy crisp and cool, step secondary information down through blue-gray tones, and reserve #5e6ad2 for focus, selection, and primary actions. Semantic green, red, and orange appear only when the underlying state is real; typography is a compact system sans paired with a technical monospace, and motion stays brief, quiet, and predictable.\n\nFORBIDDEN: multicolor gradients, warm foundations, thick borders, large shadows, decorative accent coverage, or using the accent anywhere beyond focus, selection, and primary controls.","promptZh":"采用「Nightflight / 夜航工作台」设计系统：用 #0a0a0b 近黑画布、#0f1011 主表面和 #18191a 浮层建立低照度纵深，以细密冷灰发丝线切分侧栏、线程、输入台和产物区；正文保持清晰冷白，次级信息逐级退到灰蓝，#5e6ad2 只用于焦点、选中态和主行动，成功、危险、警告仅在真实状态出现；排版采用紧凑系统无衬线与等宽代码字，交互短促、安静、可预期。\n\nFORBIDDEN：多彩渐变、暖色基底、粗边框、大面积阴影、把强调色当装饰铺满界面，或让强调色出现在焦点、选中和主按钮之外。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=nightflight","fetch":{"method":"copy-tokens","value":"---\nname: Nightflight\ndescription: A near-black workbench with a single lavender-blue focus color.\n---\n\n# Nightflight\n\n## Colors\n\ncolors:\n  canvas: \"#0a0a0b\"\n  surface: \"#0f1011\"\n  raised: \"#18191a\"\n  ink: \"#f7f8f8\"\n  ink-secondary: \"#d0d6e0\"\n  ink-muted: \"#8a8f98\"\n  ink-faint: \"#62666d\"\n  hairline: \"#23252a\"\n  hairline-strong: \"#34343a\"\n  accent: \"#5e6ad2\"\n  accent-hover: \"#828fff\"\n  success: \"#27a644\"\n  danger: \"#eb5757\"\n  warning: \"#f2994a\"\n\n## Typography\n\ntypography:\n  body: \"'SF Pro Display', Inter, system-ui, sans-serif\"\n  display: \"'SF Pro Display', Inter, system-ui, sans-serif\"\n  mono: \"'SF Mono', ui-monospace, monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep the canvas almost black and distinguish depth with small value steps.\n- Use 0.5–1px cool hairlines; reserve the strong line for active boundaries.\n- Avoid ambient shadows. Raised layers should read through tone and adjacency.\n- Keep routine radii compact and consistent across controls and panels.\n\n## Components\n\n- Sidebar: use the primary surface with faint rows and one lavender selection.\n- Thread: keep the reading field quiet; logs and code sit on restrained insets.\n- Composer: raise it one step, show a precise focus line, and avoid glow.\n- Artifact panel: match the main surface, retain hairlines, and show version state clearly.\n- Buttons: solid accent is only for the primary action; secondary actions stay neutral.\n- Status: introduce semantic color only for actual success, danger, or warning.\n\n## FORBIDDEN\n\n- Multicolor or decorative gradients.\n- Warm foundations and amber-tinted neutrals.\n- Thick borders, large shadows, or luminous glows.\n- Accent color used outside focus, selection, and primary actions.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-nightflight.json","endpoint":"https://ui-lab-ten.vercel.app/themes/nightflight.css"},"themePreview":{"modes":["dark"],"dark":{"background":"#0a0a0b","foreground":"#f7f8f8","card":"#0f1011","muted-foreground":"#8a8f98","border":"color-mix(in srgb, #23252a 60%, transparent)","primary":"#5e6ad2","primary-foreground":"#fff","success":"#27a644","danger":"#eb5757","warning":"#f2994a","wb-surface":"#0f1011","wb-accent":"#5e6ad2","wb-hairline":"#23252a","chart-1":"oklch(0.52 0.16 275)","chart-2":"oklch(0.64 0.16 335)","chart-3":"oklch(0.50 0.16 65)","chart-4":"oklch(0.66 0.16 125)","chart-5":"oklch(0.55 0.16 200)","chart-6":"oklch(0.62 0.16 245)","font-sans":"'SF Pro Display', Inter, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"stark","name":"Stark","nameZh":"锋白","aliases":["纯黑工具台","高对比几何","monochrome console","单蓝链接色"],"description":"A pure-black, high-contrast tool surface shaped by crisp geometry, compact radii, and a single electric-blue action color.","descriptionZh":"以纯黑底、高对比灰阶、利落几何和单一电蓝行动色构成的紧凑工具界面。","prompt":"Use the 'Stark Workbench' design system: start from a pure #000000 canvas and build only small but legible surface steps with #0a0a0a and #111111. Organize the interface through high-contrast grayscale, a compact grid, short labels, and radii no larger than 8px. Reserve #0070f3 for links, focus, and the primary action; give the sidebar, thread, composer, and artifact panel the same crisp hairline boundaries, while monospace carries code, versions, and execution state.\n\nFORBIDDEN: tinted foundations outside grayscale, colorful gradient backgrounds, large cards with radii above 8px, glowing shadows, or soft decoration that weakens the geometric order.","promptZh":"采用「Stark / 锋白工作台」设计系统：以纯黑 #000000 为画布，使用 #0a0a0a 与 #111111 形成极小但清楚的表面阶梯，所有信息依靠高对比灰阶、紧凑网格、短标签和不超过 8px 的圆角组织；#0070f3 只承担链接、焦点和主行动，侧栏、线程、输入台和产物面板共享锋利的发丝边界，等宽字体负责代码、版本与运行状态。\n\nFORBIDDEN：灰阶之外的底色、彩色渐变背景、超过 8px 的大圆角卡片、发光阴影，以及用柔软装饰削弱几何秩序。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=stark","fetch":{"method":"copy-tokens","value":"---\nname: Stark\ndescription: A pure-black geometric workbench with one electric-blue action color.\n---\n\n# Stark\n\n## Colors\n\ncolors:\n  canvas: \"#000000\"\n  surface: \"#0a0a0a\"\n  raised: \"#111111\"\n  ink: \"#ededed\"\n  ink-secondary: \"#cccccc\"\n  ink-muted: \"#a1a1a1\"\n  ink-faint: \"#666666\"\n  hairline: \"#2e2e2e\"\n  hairline-strong: \"#444444\"\n  accent: \"#0070f3\"\n  success: \"#50e3c2\"\n  danger: \"#ff4d4f\"\n  warning: \"#f5a623\"\n\n## Typography\n\ntypography:\n  body: \"Geist, Inter, system-ui, sans-serif\"\n  display: \"Geist, Inter, system-ui, sans-serif\"\n  mono: \"'Geist Mono', 'SF Mono', ui-monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep foundations strictly black and neutral gray.\n- Separate layers with exact value steps and 1px hairlines, not atmospheric depth.\n- Cap large container radii at 8px; small controls may be tighter.\n- Do not use glow. If elevation is necessary, prefer a hard local boundary.\n\n## Components\n\n- Sidebar: compact rows, square rhythm, and one high-contrast selected state.\n- Thread: maximize readable contrast and keep metadata visibly subordinate.\n- Composer: use a clear border and compact controls with no floating-card effect.\n- Artifact panel: align to the grid and preserve crisp preview/code boundaries.\n- Buttons: blue is primary only; neutral buttons use monochrome hover fills.\n- Status: use semantic colors as small state signals, never as backgrounds.\n\n## FORBIDDEN\n\n- Tinted or colored foundation surfaces.\n- Colorful gradient backgrounds.\n- Large cards with radii above 8px.\n- Glowing shadows or soft decorative effects.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-stark.json","endpoint":"https://ui-lab-ten.vercel.app/themes/stark.css"},"themePreview":{"modes":["dark"],"dark":{"background":"#000000","foreground":"#ededed","card":"#0a0a0a","muted-foreground":"#a1a1a1","border":"color-mix(in srgb, #2e2e2e 60%, transparent)","primary":"#0070f3","primary-foreground":"#fff","success":"#50e3c2","danger":"#ff4d4f","warning":"#f5a623","wb-surface":"#0a0a0a","wb-accent":"#0070f3","wb-hairline":"#2e2e2e","chart-1":"oklch(0.52 0.17 258)","chart-2":"oklch(0.64 0.17 318)","chart-3":"oklch(0.50 0.17 48)","chart-4":"oklch(0.66 0.17 108)","chart-5":"oklch(0.55 0.17 183)","chart-6":"oklch(0.62 0.17 228)","font-sans":"Geist, Inter, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"paper","name":"Paper","nameZh":"纸感","aliases":["暖白纸面","柔和灰墨","paper-like workspace","留白驱动"],"description":"A warm-white, paper-like workspace where gentle gray ink, generous breathing room, and one clear blue action color replace heavy chrome.","descriptionZh":"以暖白纸面、温和灰墨、充足留白和单一清蓝行动色取代厚重界面外壳的工作空间。","prompt":"Use the 'Paper Workbench' design system: create paper-like depth with a warm #ffffff canvas and soft #f7f7f5 surfaces, write primary content in #37352f gray ink, and step metadata down through #787774 and #9b9a97. Build hierarchy mainly with whitespace, paragraph rhythm, and very pale hairlines; reserve #0075de for links, focus, and the primary action. Treat the sidebar as a table of contents, the thread as a working manuscript, the composer as a footer annotation, and the artifact area as a parallel document with versions.\n\nFORBIDDEN: large high-saturation color fields, dark foundations, hard shadows, neon accents, or dense frames used in place of whitespace and pale surfaces.","promptZh":"采用「Paper / 纸感工作台」设计系统：以 #ffffff 暖白画布与 #f7f7f5 柔灰表面形成纸张般的层次，用 #37352f 灰墨书写正文，让元信息逐级退到 #787774 与 #9b9a97；层级主要依赖留白、段落节奏和极浅发丝线，#0075de 只标记链接、焦点和主行动；侧栏像目录，线程像文稿，输入台像页脚批注，产物区像可切换版本的并排文档。\n\nFORBIDDEN：高饱和大面积色块、深色基底、硬阴影、霓虹强调，或用密集线框堆叠替代留白和浅灰表面。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=paper","fetch":{"method":"copy-tokens","value":"---\nname: Paper\ndescription: A warm-white workbench organized by whitespace and gentle gray ink.\n---\n\n# Paper\n\n## Colors\n\ncolors:\n  canvas: \"#ffffff\"\n  surface: \"#f7f7f5\"\n  raised: \"#ffffff\"\n  ink: \"#37352f\"\n  ink-secondary: \"#4d4a42\"\n  ink-muted: \"#787774\"\n  ink-faint: \"#9b9a97\"\n  hairline: \"#e9e9e7\"\n  accent: \"#0075de\"\n  success: \"#1aae39\"\n  danger: \"#eb5757\"\n  warning: \"#dd5b00\"\n\n## Typography\n\ntypography:\n  body: \"ui-sans-serif, -apple-system, 'Segoe UI', sans-serif\"\n  display: \"ui-sans-serif, -apple-system, 'Segoe UI', sans-serif\"\n  mono: \"'SFMono-Regular', Consolas, ui-monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Let whitespace and text rhythm establish most of the hierarchy.\n- Use warm off-white surfaces and very pale hairlines only where needed.\n- Keep shadows nearly absent; a raised sheet should feel adjacent, not floating.\n- Use modest, consistent radii and avoid pill shapes for large containers.\n\n## Components\n\n- Sidebar: read as a quiet table of contents with one soft selected row.\n- Thread: format the conversation like a working document with calm measure.\n- Composer: resemble a footer annotation, separated by space and one hairline.\n- Artifact panel: present preview and source as parallel paper documents.\n- Buttons: reserve blue for the primary action and text links.\n- Status: use compact semantic labels instead of broad colored surfaces.\n\n## FORBIDDEN\n\n- Large high-saturation color fields.\n- Dark foundations, hard shadows, or neon accents.\n- Dense frame stacking used instead of whitespace.\n- Excess decorative chrome around text content.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-paper.json","endpoint":"https://ui-lab-ten.vercel.app/themes/paper.css"},"themePreview":{"modes":["light"],"light":{"background":"#ffffff","foreground":"#37352f","card":"#f7f7f5","muted-foreground":"#787774","border":"color-mix(in srgb, #e9e9e7 60%, transparent)","primary":"#0075de","primary-foreground":"#fff","success":"#1aae39","danger":"#eb5757","warning":"#dd5b00","wb-surface":"#f7f7f5","wb-accent":"#0075de","wb-hairline":"#e9e9e7","chart-1":"oklch(0.55 0.17 254)","chart-2":"oklch(0.68 0.17 314)","chart-3":"oklch(0.52 0.17 44)","chart-4":"oklch(0.70 0.17 104)","chart-5":"oklch(0.58 0.17 179)","chart-6":"oklch(0.65 0.17 224)","font-sans":"ui-sans-serif, -apple-system, 'Segoe UI', sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"terracotta","name":"Terracotta","nameZh":"陶土","aliases":["奶油陶土","温暖编辑台","serif craft console","低频橙强调"],"description":"A quiet cream workbench with terracotta emphasis, crafted serif display type, and warm tactile surfaces for thoughtful collaboration.","descriptionZh":"以奶油暖底、陶土橙强调、手作感衬线展示字与温润表面构成的安静协作工作台。","prompt":"Use the 'Terracotta Workbench' design system: create a quiet tactile field with a #faf9f5 cream canvas and #f5f0e8 warm surfaces. Set body copy in near-black #141413, use a restrained literary serif for display moments, and keep controls and code in clear sans and monospace faces. Introduce #cc785c terracotta sparingly for primary actions, focus, and selection; connect the sidebar, thread, composer, and artifact area through warm-gray hairlines and gentle surface steps, with plain semantic status colors.\n\nFORBIDDEN: cool-gray foundations, a vast pure-white base, technological gradients, sharp square corners, frequent decorative accent use, or heavy stacked shadows.","promptZh":"采用「Terracotta / 陶土工作台」设计系统：以 #faf9f5 奶油画布和 #f5f0e8 暖表面营造安静触感，正文使用近黑 #141413，标题用克制的书卷感衬线，操作与代码仍用清楚的无衬线和等宽字体；#cc785c 陶土橙低频出现于主行动、焦点和选中，侧栏、线程、输入台与产物区通过暖灰发丝线和柔和表面阶梯衔接，状态色保持朴素。\n\nFORBIDDEN：冷灰基底、纯白大底、科技感渐变、锐利直角、频繁铺陈陶土强调色，或用重阴影制造悬浮层堆叠。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=terracotta","fetch":{"method":"copy-tokens","value":"---\nname: Terracotta\ndescription: A cream workbench with quiet terracotta emphasis and serif display type.\n---\n\n# Terracotta\n\n## Colors\n\ncolors:\n  canvas: \"#faf9f5\"\n  surface: \"#f5f0e8\"\n  raised: \"#ffffff\"\n  ink: \"#141413\"\n  ink-secondary: \"#3d3d3a\"\n  ink-muted: \"#6c6a64\"\n  ink-faint: \"#8e8b82\"\n  hairline: \"#e6dfd8\"\n  accent: \"#cc785c\"\n  success: \"#5db872\"\n  danger: \"#c64545\"\n  warning: \"#d4a017\"\n\n## Typography\n\ntypography:\n  body: \"-apple-system, 'Segoe UI', sans-serif\"\n  display: \"'Copernicus', 'Tiempos Headline', Georgia, serif\"\n  mono: \"ui-monospace, 'SF Mono', monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 500\n\n## Surfaces & lines\n\n- Keep the canvas creamy and the working surfaces softly warm.\n- Use warm-gray hairlines and small tonal steps instead of hard separation.\n- Prefer gentle local depth; shadows should be rare, short, and low contrast.\n- Use softened corners consistently without turning every control into a pill.\n\n## Components\n\n- Sidebar: use a warm surface and a low-frequency terracotta selection mark.\n- Thread: keep body copy sans; reserve serif for titles and artifact headings.\n- Composer: make it tactile and calm with one warm hairline and clear focus.\n- Artifact panel: feel like a crafted sheet with explicit preview and version controls.\n- Buttons: terracotta is primary only; secondary controls remain warm neutral.\n- Status: keep green, red, and ochre compact and informational.\n\n## FORBIDDEN\n\n- Cool-gray foundations or a vast pure-white base.\n- Technological gradients and sharp square corners.\n- Heavy stacks of floating shadows.\n- Frequent or decorative use of the terracotta accent.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-terracotta.json","endpoint":"https://ui-lab-ten.vercel.app/themes/terracotta.css"},"themePreview":{"modes":["light"],"light":{"background":"#faf9f5","foreground":"#141413","card":"#f5f0e8","muted-foreground":"#6c6a64","border":"color-mix(in srgb, #e6dfd8 60%, transparent)","primary":"#cc785c","primary-foreground":"#fff","success":"#5db872","danger":"#c64545","warning":"#d4a017","wb-surface":"#f5f0e8","wb-accent":"#cc785c","wb-hairline":"#e6dfd8","chart-1":"oklch(0.55 0.11 39)","chart-2":"oklch(0.68 0.11 99)","chart-3":"oklch(0.52 0.11 189)","chart-4":"oklch(0.70 0.11 249)","chart-5":"oklch(0.58 0.11 324)","chart-6":"oklch(0.65 0.11 9)","font-sans":"-apple-system, 'Segoe UI', sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"indigo","name":"Indigo","nameZh":"靛蓝","aliases":["冷白金融工具台","雾蓝灰界面","indigo control desk","克制蓝紫"],"description":"A cool-white precision workbench with misted blue-gray structure and a controlled indigo action color for data-heavy operations.","descriptionZh":"以冷白底、雾蓝灰结构和克制靛蓝行动色构成的精密工作台，适合数据密集型操作。","prompt":"Use the 'Indigo Workbench' design system: establish a precise but approachable operational field with a #ffffff cool canvas and #f6f9fc mist-blue surfaces. Set primary copy in deep navy #0d253d and step secondary information back through blue-gray tones. Organize dense data, the sidebar, thread, composer, and artifact versions with #e3e8ee hairlines; reserve #533afd for the primary action and selected state, and keep success, danger, and warning as compact signals rather than broad decoration.\n\nFORBIDDEN: warm paper foundations, serif typography, stacks of heavy floating shadows, large indigo decorations, or accent color outside primary actions, focus, and selection.","promptZh":"采用「Indigo / 靛蓝工作台」设计系统：以 #ffffff 冷白画布和 #f6f9fc 雾蓝表面建立精密但不冰冷的金融工具感，正文采用深海军蓝 #0d253d，次级信息沿蓝灰阶退后；用 #e3e8ee 发丝线组织紧凑数据、侧栏、线程、输入台和产物版本，#533afd 只用于主行动与选中态，成功、危险、警告作为小面积状态信号，避免层层漂浮。\n\nFORBIDDEN：暖纸底、衬线字体、重阴影浮层堆叠、大面积蓝紫装饰，或让强调色逃离主行动、焦点和选中状态。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=indigo","fetch":{"method":"copy-tokens","value":"---\nname: Indigo\ndescription: A cool-white precision workbench with mist-blue structure and indigo action states.\n---\n\n# Indigo\n\n## Colors\n\ncolors:\n  canvas: \"#ffffff\"\n  surface: \"#f6f9fc\"\n  raised: \"#ffffff\"\n  ink: \"#0d253d\"\n  ink-secondary: \"#273951\"\n  ink-muted: \"#64748d\"\n  ink-faint: \"#8ca2ba\"\n  hairline: \"#e3e8ee\"\n  accent: \"#533afd\"\n  success: \"#1ea672\"\n  danger: \"#df1b41\"\n  warning: \"#d97917\"\n\n## Typography\n\ntypography:\n  body: \"'sohne-var', 'SF Pro Display', system-ui, sans-serif\"\n  display: \"'sohne-var', 'SF Pro Display', system-ui, sans-serif\"\n  mono: \"'SF Mono', Menlo, ui-monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep foundations cool white with mist-blue working surfaces.\n- Use pale blue-gray hairlines to structure dense information precisely.\n- Prefer borders and tonal adjacency over stacked elevation or heavy shadow.\n- Keep radii controlled and consistent for a dependable operational feel.\n\n## Components\n\n- Sidebar: use compact blue-gray rows and one indigo selected state.\n- Thread: keep navy text crisp and metadata visibly lighter without losing contrast.\n- Composer: frame it with a pale line and use indigo only for focus and send.\n- Artifact panel: maintain exact preview/code and version boundaries on cool surfaces.\n- Buttons: indigo is reserved for primary action; secondary controls stay neutral.\n- Status: use small green, red, and orange signals tied to real state.\n\n## FORBIDDEN\n\n- Warm paper foundations or serif typography.\n- Heavy stacks of floating shadows.\n- Large decorative indigo fields.\n- Accent use beyond primary actions, focus, and selection.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-indigo.json","endpoint":"https://ui-lab-ten.vercel.app/themes/indigo.css"},"themePreview":{"modes":["light"],"light":{"background":"#ffffff","foreground":"#0d253d","card":"#f6f9fc","muted-foreground":"#64748d","border":"color-mix(in srgb, #e3e8ee 60%, transparent)","primary":"#533afd","primary-foreground":"#fff","success":"#1ea672","danger":"#df1b41","warning":"#d97917","wb-surface":"#f6f9fc","wb-accent":"#533afd","wb-hairline":"#e3e8ee","chart-1":"oklch(0.55 0.17 277)","chart-2":"oklch(0.68 0.17 337)","chart-3":"oklch(0.52 0.17 67)","chart-4":"oklch(0.70 0.17 127)","chart-5":"oklch(0.58 0.17 202)","chart-6":"oklch(0.65 0.17 247)","font-sans":"'sohne-var', 'SF Pro Display', system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"pearl","name":"Pearl","nameZh":"珍珠","aliases":["珍珠白","系统原生风","羊皮纸灰白","pearl white","frosted minimal"],"description":"A system-native pearl-white workbench where quiet gray zoning, fine hairlines, and one restrained blue accent keep focused tools immediately legible.","descriptionZh":"以珍珠灰白分区、轻柔发丝线与单一克制蓝色构成的系统原生工作台，让专注型工具保持清楚、轻盈且熟悉。","prompt":"Use the 'Pearl Workbench' design system: build a light, system-native hierarchy with a #ffffff pearl-white canvas and #f5f5f7 gray-white zoning, then organize the sidebar, thread, composer, and artifact area with #e0e0e0 structural hairlines and #f0f0f0 quiet dividers. Set primary text in #1d1d1f, step secondary information down through soft neutral grays, and reserve #0071e3 for focus, selection, and primary actions. Give display, body, and code distinct clear type stacks, and create depth through whitespace, zoning, and exact alignment instead of shadows.\n\nFORBIDDEN: large dark backgrounds, high-saturation clashing colors, thick hard borders, accent colors outside the system blue, or shadow-stacked hierarchy.","promptZh":"采用「Pearl / 珍珠工作台」设计系统：以 #ffffff 珍珠白画布和 #f5f5f7 灰白分区建立系统原生的轻盈层级，使用 #e0e0e0 主发丝线与 #f0f0f0 轻分隔组织侧栏、线程、输入台和产物区；正文以 #1d1d1f 为主，次级信息逐级退到柔和中灰，#0071e3 只用于焦点、选中态和主行动；标题、正文与代码分别使用清晰的展示、文本和等宽字体，层级依靠留白、分区与精确对齐而非投影。\n\nFORBIDDEN：深色大背景、高饱和冲突色、粗硬边框、系统蓝之外的强调色、用层层阴影堆叠界面层级。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=pearl","fetch":{"method":"copy-tokens","value":"---\nname: Pearl\ndescription: A system-native pearl-white workbench shaped by quiet zoning and one blue accent.\n---\n\n# Pearl\n\n## Colors\n\ncolors:\n  canvas: \"#ffffff\"\n  surface: \"#f5f5f7\"\n  raised: \"#ffffff\"\n  ink: \"#1d1d1f\"\n  ink-secondary: \"#333333\"\n  ink-muted: \"#7a7a7a\"\n  ink-faint: \"#a1a1a6\"\n  hairline: \"#e0e0e0\"\n  divider: \"#f0f0f0\"\n  accent: \"#0071e3\"\n  success: \"#34c759\"\n  danger: \"#ff3b30\"\n  warning: \"#ff9500\"\n\n## Typography\n\ntypography:\n  body: \"'SF Pro Text', -apple-system, system-ui, sans-serif\"\n  display: \"'SF Pro Display', -apple-system, system-ui, sans-serif\"\n  mono: \"'SF Mono', ui-monospace, Menlo, monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep the canvas pearl white and use #f5f5f7 to zone working regions.\n- Use #e0e0e0 for structural hairlines and #f0f0f0 for quiet dividers.\n- Establish hierarchy with spacing and tonal adjacency rather than shadow.\n- Keep radii controlled, smooth, and consistent across panels and controls.\n\n## Components\n\n- Sidebar: use the gray-white surface with one restrained blue selection.\n- Thread: preserve generous reading space and step metadata down in neutral gray.\n- Composer: define it with zoning and a fine focus line, never a floating shadow.\n- Artifact panel: keep preview, source, and version boundaries light but explicit.\n- Buttons: reserve system blue for the primary action and selected controls.\n- Status: use green, red, and orange only for real semantic state.\n\n## FORBIDDEN\n\n- Large dark backgrounds.\n- High-saturation clashing colors.\n- Thick hard borders or accent colors outside the system blue.\n- Shadow-stacked hierarchy.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-pearl.json","endpoint":"https://ui-lab-ten.vercel.app/themes/pearl.css"},"themePreview":{"modes":["light"],"light":{"background":"#ffffff","foreground":"#1d1d1f","card":"#f5f5f7","muted-foreground":"#7a7a7a","border":"color-mix(in srgb, #e0e0e0 60%, transparent)","primary":"#0071e3","primary-foreground":"#fff","success":"#34c759","danger":"#ff3b30","warning":"#ff9500","wb-surface":"#f5f5f7","wb-accent":"#0071e3","wb-hairline":"#e0e0e0","chart-1":"oklch(0.55 0.17 256)","chart-2":"oklch(0.68 0.17 316)","chart-3":"oklch(0.52 0.17 46)","chart-4":"oklch(0.70 0.17 106)","chart-5":"oklch(0.58 0.17 181)","chart-6":"oklch(0.65 0.17 226)","font-sans":"'SF Pro Text', -apple-system, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"jade","name":"Jade","nameZh":"翡翠","aliases":["墨底翡翠","深色数据工具","emerald developer console","数据库控制台"],"description":"A dark developer workbench with ink-black depth, precise emerald action states, and the dense clarity of a database operations tool.","descriptionZh":"以墨色纵深、精准翡翠绿行动态与数据库运维工具般的高密度清晰度构成的深色开发者工作台。","prompt":"Use the 'Jade Workbench' design system: establish compact database-tool depth with a #1c1c1c ink canvas, #202020 primary surfaces, and #262626 raised layers, then organize the sidebar, thread, composer, and artifact area with #303030 hairlines. Keep primary copy white and step metadata down through neutral grays. Reserve #3ecf8e emerald for primary actions, selection, and focus, pairing it with #171717 dark foreground text as the system's defining green-control treatment. Set queries, code, and version data in monospace, and show semantic green, red, or yellow only for real state.\n\nFORBIDDEN: large light foundations, blue-violet accents, warm gradients, decorative green coverage, or green used outside primary actions, selection, and success.","promptZh":"采用「Jade / 翡翠工作台」设计系统：以 #1c1c1c 墨色画布、#202020 主表面和 #262626 浮层构成数据库开发工具般的紧凑纵深，用 #303030 发丝线组织侧栏、线程、输入台与产物区；正文保持纯白，元信息沿中性灰阶退后，#3ecf8e 翡翠绿只用于主行动、选中与焦点，并以 #171717 深色文字形成绿底深字的身份特征；代码、查询和版本信息采用等宽字体，成功绿、危险红与警告黄只在真实状态出现。\n\nFORBIDDEN：亮色大底、蓝紫强调、暖色渐变、把绿色铺满装饰界面，或让绿色出现在主行动、选中与成功状态之外。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=jade","fetch":{"method":"copy-tokens","value":"---\nname: Jade\ndescription: A dark database workbench with precise emerald action states.\n---\n\n# Jade\n\n## Colors\n\ncolors:\n  canvas: \"#1c1c1c\"\n  surface: \"#202020\"\n  raised: \"#262626\"\n  ink: \"#ffffff\"\n  ink-secondary: \"#d4d4d4\"\n  ink-muted: \"#9a9a9a\"\n  ink-faint: \"#707070\"\n  hairline: \"#303030\"\n  accent: \"#3ecf8e\"\n  accent-foreground: \"#171717\"\n  success: \"#4ade80\"\n  danger: \"#f56565\"\n  warning: \"#ffdb13\"\n\n## Typography\n\ntypography:\n  body: \"Circular, 'Helvetica Neue', Helvetica, sans-serif\"\n  display: \"Circular, 'Helvetica Neue', Helvetica, sans-serif\"\n  mono: \"ui-monospace, 'SF Mono', monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Build depth through close ink-black value steps and exact hairlines.\n- Keep surfaces opaque, compact, and free of atmospheric glow or gradients.\n- Use emerald controls with dark foreground text for the system identity.\n- Let dense grids and alignment communicate a dependable database-tool rhythm.\n\n## Components\n\n- Sidebar: use compact neutral rows with one emerald selected state.\n- Thread: keep prose white and set queries, code, and paths in monospace.\n- Composer: raise it one value step and reserve emerald for focus and send.\n- Artifact panel: preserve crisp source, preview, and version boundaries.\n- Buttons: primary controls use emerald with #171717 text; others stay neutral.\n- Status: use green, red, and yellow only when the underlying state is real.\n\n## FORBIDDEN\n\n- Large light foundations or blue-violet accents.\n- Warm gradients.\n- Decorative or broad green coverage.\n- Green outside primary actions, selection, and success.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-jade.json","endpoint":"https://ui-lab-ten.vercel.app/themes/jade.css"},"themePreview":{"modes":["dark"],"dark":{"background":"#1c1c1c","foreground":"#ffffff","card":"#202020","muted-foreground":"#9a9a9a","border":"color-mix(in srgb, #303030 60%, transparent)","primary":"#3ecf8e","primary-foreground":"#171717","success":"#4ade80","danger":"#f56565","warning":"#ffdb13","wb-surface":"#202020","wb-accent":"#3ecf8e","wb-hairline":"#303030","chart-1":"oklch(0.52 0.15 159)","chart-2":"oklch(0.64 0.15 219)","chart-3":"oklch(0.50 0.15 309)","chart-4":"oklch(0.66 0.15 9)","chart-5":"oklch(0.55 0.15 84)","chart-6":"oklch(0.62 0.15 129)","font-sans":"Circular, 'Helvetica Neue', Helvetica, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"prism","name":"Prism","nameZh":"棱彩","aliases":["棱彩白板","柔色设计台","soft-block canvas","黑墨蓝点"],"description":"A white design workbench with crisp black ink, one clear blue action color, and soft color blocks reserved for labels and illustration.","descriptionZh":"以白底黑墨、单一清蓝行动色与仅用于标签和插画的柔和色块构成的设计工具工作台。","prompt":"Use the 'Prism Workbench' design system: establish direct design-tool hierarchy with a #ffffff canvas, #f7f7f5 soft zoning, and crisp #000000 ink, then organize the sidebar, thread, composer, and artifact area with #e6e6e6 hairlines and #f1f1f1 quiet dividers. Reserve #0d99ff for primary actions, focus, and selection. Introduce lime #dceeb1, lilac #c5b0f4, cream #f4ecd6, and mint #c8e6cd only as label or illustration backgrounds so the interface retains a soft prismatic note without competing with blue.\n\nFORBIDDEN: large dark foundations, monochrome minimalism so severe that no soft color remains, or thick black borders; black is ink for text, never interface framing.","promptZh":"采用「Prism / 棱彩工作台」设计系统：以 #ffffff 白画布、#f7f7f5 柔灰分区和 #000000 清晰黑墨建立设计工具般的直接层级，用 #e6e6e6 发丝线与 #f1f1f1 轻分隔组织侧栏、线程、输入台和产物区；#0d99ff 设计蓝只负责主行动、焦点和选中，lime #dceeb1、lilac #c5b0f4、cream #f4ecd6、mint #c8e6cd 仅作为标签或插画底，让界面保留一点柔和棱彩而不争夺主色。\n\nFORBIDDEN：深色大底、单色性冷淡到没有任何柔色点缀、粗黑边框；黑色只用作文字墨色，不用作界面框线。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=prism","fetch":{"method":"copy-tokens","value":"---\nname: Prism\ndescription: A white design workbench with black ink, blue actions, and soft color blocks.\n---\n\n# Prism\n\n## Colors\n\ncolors:\n  canvas: \"#ffffff\"\n  surface: \"#f7f7f5\"\n  raised: \"#ffffff\"\n  ink: \"#000000\"\n  ink-secondary: \"#333333\"\n  ink-muted: \"#6b6b6b\"\n  ink-faint: \"#9a9a9a\"\n  hairline: \"#e6e6e6\"\n  divider: \"#f1f1f1\"\n  accent: \"#0d99ff\"\n  success: \"#1ea64a\"\n  danger: \"#f24822\"\n  warning: \"#ffcd29\"\n  illustration-lime: \"#dceeb1\"\n  illustration-lilac: \"#c5b0f4\"\n  illustration-cream: \"#f4ecd6\"\n  illustration-mint: \"#c8e6cd\"\n\n## Typography\n\ntypography:\n  body: \"'Figma Sans', Inter, system-ui, sans-serif\"\n  display: \"'Figma Sans', Inter, system-ui, sans-serif\"\n  mono: \"'SF Mono', ui-monospace, monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep the main interface white, direct, and structured by pale gray zoning.\n- Use fine gray hairlines; black belongs to text and never to interface frames.\n- Reserve soft color blocks for labels, annotations, and illustration grounds.\n- Avoid shadow depth; prefer adjacency, spacing, and canvas-like alignment.\n\n## Components\n\n- Sidebar: use soft gray zoning and one clear blue selected state.\n- Thread: keep black ink crisp and allow small pastel annotation labels.\n- Composer: remain white with a pale divider and a blue focus or send action.\n- Artifact panel: feel like a precise canvas with light preview/source boundaries.\n- Buttons: blue is primary; pastel colors never become competing controls.\n- Status: use semantic colors only for actual state.\n\n## FORBIDDEN\n\n- Large dark foundations.\n- Colorless minimalism with no soft accent blocks.\n- Thick black borders; black is text ink only.\n- Pastel blocks used as the primary interface color.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-prism.json","endpoint":"https://ui-lab-ten.vercel.app/themes/prism.css"},"themePreview":{"modes":["light"],"light":{"background":"#ffffff","foreground":"#000000","card":"#f7f7f5","muted-foreground":"#6b6b6b","border":"color-mix(in srgb, #e6e6e6 60%, transparent)","primary":"#0d99ff","primary-foreground":"#fff","success":"#1ea64a","danger":"#f24822","warning":"#ffcd29","wb-surface":"#f7f7f5","wb-accent":"#0d99ff","wb-hairline":"#e6e6e6","chart-1":"oklch(0.55 0.17 249)","chart-2":"oklch(0.68 0.17 309)","chart-3":"oklch(0.52 0.17 39)","chart-4":"oklch(0.70 0.17 99)","chart-5":"oklch(0.58 0.17 174)","chart-6":"oklch(0.65 0.17 219)","font-sans":"'Figma Sans', Inter, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"coral","name":"Coral","nameZh":"珊瑚","aliases":["象牙珊瑚","学术暖调","warm research console","石底橙点"],"description":"An ivory-stone workbench with coral action states and an academic warmth suited to thoughtful enterprise research and language tools.","descriptionZh":"以象牙石分区、珊瑚橙行动态与学术暖感构成的工作台，适合审慎的企业研究与语言工具。","prompt":"Use the 'Coral Workbench' design system: establish warm, considered academic hierarchy with a #ffffff canvas and #eeece7 ivory-stone surfaces. Carry long-form research in #212121 charcoal text with muted gray-violet secondary tones, and separate the sidebar, thread, composer, and artifact area using #d9d9dd hairlines. Reserve #ff7759 coral for primary interface actions, focus, and selection. Deep green #003c33 and action blue #1863dc may support links or graphics, but never replace coral as the interface accent.\n\nFORBIDDEN: cool gray-blue dominance, large dark foundations, coral used as body text, or adjacent high-saturation colors that clash.","promptZh":"采用「Coral / 珊瑚工作台」设计系统：以 #ffffff 画布和 #eeece7 象牙石表面建立温暖、审慎的学术层级，用 #212121 炭黑正文与灰紫中间色承载长篇研究内容，#d9d9dd 发丝线轻分侧栏、线程、输入台和产物区；#ff7759 珊瑚橙只作为界面主行动、焦点与选中，deep green #003c33 和 action blue #1863dc 仅用于链接或图形辅助，不取代珊瑚界面强调。\n\nFORBIDDEN：冷灰蓝主导、深色大底、把珊瑚色用作正文色、高饱和颜色彼此撞色并置。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=coral","fetch":{"method":"copy-tokens","value":"---\nname: Coral\ndescription: An ivory-stone workbench with coral actions and academic warmth.\n---\n\n# Coral\n\n## Colors\n\ncolors:\n  canvas: \"#ffffff\"\n  surface: \"#eeece7\"\n  raised: \"#ffffff\"\n  ink: \"#212121\"\n  ink-secondary: \"#616161\"\n  ink-muted: \"#75758a\"\n  ink-faint: \"#93939f\"\n  hairline: \"#d9d9dd\"\n  accent: \"#ff7759\"\n  success: \"#1ea64a\"\n  danger: \"#b30000\"\n  warning: \"#d97917\"\n  supporting-deep-green: \"#003c33\"\n  supporting-action-blue: \"#1863dc\"\n\n## Typography\n\ntypography:\n  body: \"'Cohere Text', -apple-system, system-ui, sans-serif\"\n  display: \"'Cohere Text', -apple-system, system-ui, sans-serif\"\n  mono: \"ui-monospace, monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Use ivory-stone zoning to create warmth without reducing text clarity.\n- Keep hairlines cool enough for precision but subordinate to the warm surface.\n- Prefer quiet adjacency and editorial spacing over elevated shadow stacks.\n- Use deep green and action blue only for links or supporting graphics.\n\n## Components\n\n- Sidebar: use ivory stone with one restrained coral selected state.\n- Thread: support long-form reading with charcoal ink and generous measure.\n- Composer: stay white, lightly framed, and coral only at focus or send.\n- Artifact panel: feel editorial, with clear but quiet preview/version structure.\n- Buttons: coral owns interface emphasis; blue remains a link or graphic aid.\n- Status: semantic colors appear in small, factual state indicators.\n\n## FORBIDDEN\n\n- Cool gray-blue dominance or large dark foundations.\n- Coral used as body text.\n- High-saturation colors placed in direct competition.\n- Supporting colors promoted to the primary interface accent.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-coral.json","endpoint":"https://ui-lab-ten.vercel.app/themes/coral.css"},"themePreview":{"modes":["light"],"light":{"background":"#ffffff","foreground":"#212121","card":"#eeece7","muted-foreground":"#75758a","border":"color-mix(in srgb, #d9d9dd 60%, transparent)","primary":"#ff7759","primary-foreground":"#fff","success":"#1ea64a","danger":"#b30000","warning":"#d97917","wb-surface":"#eeece7","wb-accent":"#ff7759","wb-hairline":"#d9d9dd","chart-1":"oklch(0.55 0.17 34)","chart-2":"oklch(0.68 0.17 94)","chart-3":"oklch(0.52 0.17 184)","chart-4":"oklch(0.70 0.17 244)","chart-5":"oklch(0.58 0.17 319)","chart-6":"oklch(0.65 0.17 4)","font-sans":"'Cohere Text', -apple-system, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"stone","name":"Stone","nameZh":"石纹","aliases":["暖石灰阶","单色语音台","serif monochrome console","黑墨克制"],"description":"A warm-stone monochrome workbench with pure-black emphasis, restrained serif display type, and illustration-only waveform color.","descriptionZh":"以暖石灰阶、纯黑强调、克制衬线展示字与仅限插画波形的柔色构成的单色工作台。","prompt":"Use the 'Stone Workbench' design system: build a warm stone grayscale with a #f5f5f5 canvas, #fafafa surfaces, and #ffffff raised layers. Use near-black #0c0a09 for body ink, focus, primary actions, and selection, while #e7e5e4 warm hairlines organize the sidebar, thread, composer, and artifact area. Set display moments in serif and working text in a clear sans. Mint #a7e5d3, peach #f4c5a8, and lavender #c8b8e0 belong only to illustration or waveform graphics, never controls or interface emphasis.\n\nFORBIDDEN: colored interface accents, cool-gray foundations, large dark backgrounds, or radii above 12px; preserve a warm-stone grayscale and monochrome control hierarchy.","promptZh":"采用「Stone / 石纹工作台」设计系统：以 #f5f5f5 画布、#fafafa 表面和 #ffffff 浮层搭建温暖石灰阶，使用 #0c0a09 近纯黑承担正文、焦点、主行动与选中，#e7e5e4 暖发丝线组织侧栏、线程、输入台和产物区；展示标题使用衬线字，正文保持清晰无衬线，mint #a7e5d3、peach #f4c5a8、lavender #c8b8e0 只进入插画或波形，不进入控件与界面强调。\n\nFORBIDDEN：彩色界面强调、冷灰基底、深色大底、超过 12px 的大圆角；必须保持暖石灰阶和单色控件秩序。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=stone","fetch":{"method":"copy-tokens","value":"---\nname: Stone\ndescription: A warm-stone monochrome workbench with serif display type.\n---\n\n# Stone\n\n## Colors\n\ncolors:\n  canvas: \"#f5f5f5\"\n  surface: \"#fafafa\"\n  raised: \"#ffffff\"\n  ink: \"#0c0a09\"\n  ink-secondary: \"#292524\"\n  ink-muted: \"#777169\"\n  ink-faint: \"#a8a29e\"\n  hairline: \"#e7e5e4\"\n  accent: \"#0c0a09\"\n  accent-foreground: \"#ffffff\"\n  success: \"#1ea64a\"\n  danger: \"#dc2626\"\n  warning: \"#d97706\"\n  illustration-mint: \"#a7e5d3\"\n  illustration-peach: \"#f4c5a8\"\n  illustration-lavender: \"#c8b8e0\"\n\n## Typography\n\ntypography:\n  body: \"ui-sans-serif, -apple-system, sans-serif\"\n  display: \"Waldenburg, 'Times New Roman', serif\"\n  mono: \"ui-monospace, monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep every foundation inside a warm stone grayscale.\n- Use near-black controls and fine warm hairlines instead of color emphasis.\n- Cap all radii at 12px and prefer restrained tonal adjacency over shadow.\n- Confine the mint-to-peach-to-lavender accent gradient to illustration and waveform graphics.\n\n## Components\n\n- Sidebar: use warm gray zoning with a near-black selected state.\n- Thread: pair serif display moments with highly readable sans body copy.\n- Composer: stay monochrome, compact, and clearly bounded by a warm hairline.\n- Artifact panel: preserve quiet structure and let content carry the hierarchy.\n- Buttons: primary is near black with white text; secondary controls stay stone.\n- Status: semantic color remains factual and never becomes the visual accent.\n\n## FORBIDDEN\n\n- Colored interface accents or cool-gray foundations.\n- Large dark backgrounds.\n- Radii above 12px.\n- Illustration colors used inside controls.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-stone.json","endpoint":"https://ui-lab-ten.vercel.app/themes/stone.css"},"themePreview":{"modes":["light"],"light":{"background":"#f5f5f5","foreground":"#0c0a09","card":"#fafafa","muted-foreground":"#777169","border":"color-mix(in srgb, #e7e5e4 60%, transparent)","primary":"#0c0a09","primary-foreground":"#ffffff","success":"#1ea64a","danger":"#dc2626","warning":"#d97706","wb-surface":"#fafafa","wb-accent":"#0c0a09","wb-hairline":"#e7e5e4","chart-1":"oklch(0.55 0.11 195)","chart-2":"oklch(0.68 0.11 255)","chart-3":"oklch(0.52 0.11 345)","chart-4":"oklch(0.70 0.11 45)","chart-5":"oklch(0.58 0.11 120)","chart-6":"oklch(0.65 0.11 165)","font-sans":"ui-sans-serif, -apple-system, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"parchment","name":"Parchment","nameZh":"羊皮纸","aliases":["奶油羊皮纸","炭墨胶囊","warm handmade console","玫粉心跳点"],"description":"A cream-parchment workbench defined by charcoal pill controls and a heartbeat of rose, distinct from Terracotta's serif type and clay-orange craft.","descriptionZh":"以奶油羊皮纸、炭墨胶囊控件与一点玫粉心跳构成的人文手作工作台，区别于 Terracotta 的衬线字与陶土橙。","prompt":"Use the 'Parchment Workbench' design system: establish a human, handmade field with a #f7f4ed cream-parchment canvas, #f1eee5 surfaces, and #fcfbf8 raised layers. Derive the grayscale from #1c1c1c charcoal at 3%, 4%, 40%, and 82% opacity steps, and favor fully rounded pill buttons. Reserve #ff4d84 rose for primary actions, selection, or a small heartbeat accent. Unlike Terracotta's serif display type and clay-orange craft, this system uses one sans voice, charcoal pills, and low-frequency rose.\n\nFORBIDDEN: cool-white foundations, pure #000000, technology blue, sharp square corners, or broad rose coverage; rose is only a restrained heartbeat accent and key action signal.","promptZh":"采用「Parchment / 羊皮纸工作台」设计系统：以 #f7f4ed 奶油羊皮纸画布、#f1eee5 主表面和 #fcfbf8 浮层建立人文手作感，文字与灰阶由 #1c1c1c 炭墨及其 3% / 4% / 40% / 82% 透明度派生，按钮偏好全圆角胶囊；#ff4d84 玫粉只作为主行动、选中或心跳般的小点缀。它不同于 Terracotta 的衬线展示字与陶土橙：这里用同一无衬线语气、炭墨胶囊和低频玫粉建立身份。\n\nFORBIDDEN：冷白底、纯黑 #000000、科技蓝、锐利直角、把玫粉大面积铺陈；玫粉只允许作为克制的心跳点缀与关键行动。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=parchment","fetch":{"method":"copy-tokens","value":"---\nname: Parchment\ndescription: A cream-parchment workbench with charcoal pills and a heartbeat of rose.\n---\n\n# Parchment\n\n## Colors\n\ncolors:\n  canvas: \"#f7f4ed\"\n  surface: \"#f1eee5\"\n  raised: \"#fcfbf8\"\n  ink: \"#1c1c1c\"\n  ink-secondary: \"#3a3a38\"\n  ink-muted: \"#5f5f5d\"\n  ink-faint: \"#8a8a86\"\n  hairline: \"#eceae4\"\n  accent: \"#ff4d84\"\n  success: \"#1ea64a\"\n  danger: \"#c64545\"\n  warning: \"#d97917\"\n  charcoal-03: \"color-mix(in srgb, #1c1c1c 3%, transparent)\"\n  charcoal-04: \"color-mix(in srgb, #1c1c1c 4%, transparent)\"\n  charcoal-40: \"color-mix(in srgb, #1c1c1c 40%, transparent)\"\n  charcoal-82: \"color-mix(in srgb, #1c1c1c 82%, transparent)\"\n\n## Typography\n\ntypography:\n  body: \"'Camera Plain', ui-sans-serif, system-ui, sans-serif\"\n  display: \"'Camera Plain', ui-sans-serif, system-ui, sans-serif\"\n  mono: \"ui-monospace, monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Derive gray fills and text hierarchy from #1c1c1c opacity steps.\n- Keep canvas and surfaces cream, tactile, and visibly warmer than pure white.\n- Prefer fully rounded pill buttons and soft continuous control silhouettes.\n- Use rose as a heartbeat accent, never as a broad surface or body color.\n\n## Components\n\n- Sidebar: use parchment zoning with a charcoal pill selected state.\n- Thread: keep the sans voice warm, conversational, and comfortably spaced.\n- Composer: form a full pill with charcoal controls and one restrained rose action.\n- Artifact panel: feel like a clean handmade sheet with very soft hairlines.\n- Buttons: default to fully rounded pills; reserve rose for the key action.\n- Status: use semantic colors sparingly and keep charcoal dominant.\n\n## FORBIDDEN\n\n- Cool-white foundations, pure black, or technology blue.\n- Sharp square corners.\n- Broad rose surfaces or repeated decorative pink.\n- Terracotta-like serif and clay-orange styling.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-parchment.json","endpoint":"https://ui-lab-ten.vercel.app/themes/parchment.css"},"themePreview":{"modes":["light"],"light":{"background":"#f7f4ed","foreground":"#1c1c1c","card":"#f1eee5","muted-foreground":"#5f5f5d","border":"color-mix(in srgb, #eceae4 60%, transparent)","primary":"#ff4d84","primary-foreground":"#fff","success":"#1ea64a","danger":"#c64545","warning":"#d97917","wb-surface":"#f1eee5","wb-accent":"#ff4d84","wb-hairline":"#eceae4","chart-1":"oklch(0.55 0.17 6)","chart-2":"oklch(0.68 0.17 66)","chart-3":"oklch(0.52 0.17 156)","chart-4":"oklch(0.70 0.17 216)","chart-5":"oklch(0.58 0.17 291)","chart-6":"oklch(0.65 0.17 336)","font-sans":"'Camera Plain', ui-sans-serif, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"frost","name":"Frost","nameZh":"霜玻","aliases":["玻璃拟态","毛玻璃","frosted glass","acrylic","glass ui"],"description":"An in-house glass workbench with pearl translucency, bright glass edges, and soft aurora color visibly diffused behind every working surface.","descriptionZh":"以珍珠半透明表面、明亮玻璃边缘与在工作层后清晰漫射的柔和极光构成的自研霜玻工作台。","prompt":"Use the 'Frost Workbench' design system: place large, low-saturation aurora fields of sky #7dd3fc, violet #c4b5fd, pink #f9a8d4, and mint #6ee7b7 over a white base, keeping that color visibly present through rgba(255,255,255,0.55) primary surfaces and rgba(255,255,255,0.72) raised layers. Apply 18px backdrop blur directly to the translucent sidebar, thread cards, composer, and artifact panel. Build hierarchy with bright glass hairlines and quiet dividers, reserve #6d5dfc for focus, selection, and primary actions, and protect readability with deep slate ink.\n\nFORBIDDEN: solid opaque large-area surfaces, dark backgrounds, hard drop shadows, glass panels with no visible content bleeding through behind them, or hairlines with excessive contrast that read as hard frames.","promptZh":"采用「Frost / 霜玻工作台」设计系统：在白色基底上铺设天蓝 #7dd3fc、柔紫 #c4b5fd、粉色 #f9a8d4 与薄荷 #6ee7b7 的大尺度低饱和极光，让颜色真实穿透 rgba(255,255,255,0.55) 主表面与 rgba(255,255,255,0.72) 浮层；侧栏、线程卡、输入台和产物面板在自身半透明底色上执行 18px backdrop blur，以明亮玻璃发丝边和低对比分隔组织层级，#6d5dfc 仅用于焦点、选中和主行动，深灰蓝文字保证可读性。\n\nFORBIDDEN：大面积纯色不透明表面、深色背景、硬投影、背后没有任何可见内容穿透的空洞玻璃面板、对比度过高而像实线框的发丝边。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=frost","fetch":{"method":"copy-tokens","value":"---\nname: Frost\ndescription: An in-house glass workbench with aurora color diffused behind pearl surfaces.\n---\n\n# Frost\n\n## Colors\n\ncolors:\n  canvas: \"rgba(255,255,255,0.2)\"\n  surface: \"rgba(255,255,255,0.55)\"\n  raised: \"rgba(255,255,255,0.72)\"\n  ink: \"#1e293b\"\n  ink-secondary: \"#334155\"\n  ink-muted: \"#64748b\"\n  ink-faint: \"#94a3b8\"\n  hairline: \"rgba(255,255,255,0.65)\"\n  divider: \"rgba(30,41,59,0.08)\"\n  hover: \"rgba(255,255,255,0.5)\"\n  accent: \"#6d5dfc\"\n  success: \"#10b981\"\n  danger: \"#ef4444\"\n  warning: \"#f59e0b\"\n  aurora-sky: \"#7dd3fc\"\n  aurora-violet: \"#c4b5fd\"\n  aurora-pink: \"#f9a8d4\"\n  aurora-mint: \"#6ee7b7\"\n\n## Typography\n\ntypography:\n  body: \"inherit the site default sans\"\n  display: \"inherit the site default display face\"\n  mono: \"inherit the site default monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep the white-base aurora visibly bleeding through every glass surface.\n- Apply 18px backdrop blur on the element that owns each translucent background.\n- Use bright glass edges and low-contrast slate dividers instead of hard frames.\n- Avoid opaque elevation; depth comes from diffusion, overlap, and tonal alpha.\n\n## Components\n\n- Sidebar: blur its clipped content layer so the resize handle remains unobstructed.\n- Thread: place file, diff, and approval cards on translucent blurred glass.\n- Composer: use raised pearl glass with a quiet edge and violet focus or send.\n- Artifact panel: preserve visible aurora diffusion behind preview and version content.\n- Buttons: reserve violet for primary action and selected controls.\n- Status: keep green, red, and amber compact, factual, and readable on glass.\n\n## FORBIDDEN\n\n- Solid opaque large-area surfaces or dark backgrounds.\n- Hard drop shadows.\n- Glass panels with no visible content bleeding through behind them.\n- Hairlines with enough contrast to read as hard frames.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-frost.json","endpoint":"https://ui-lab-ten.vercel.app/themes/frost.css"},"themePreview":{"modes":["light"],"light":{"background":"rgba(255,255,255,0.2)","foreground":"#1e293b","card":"rgba(255,255,255,0.55)","muted-foreground":"#64748b","border":"color-mix(in srgb, rgba(255,255,255,0.65) 60%, transparent)","primary":"#6d5dfc","primary-foreground":"#fff","success":"#10b981","danger":"#ef4444","warning":"#f59e0b","wb-surface":"rgba(255,255,255,0.55)","wb-accent":"#6d5dfc","wb-hairline":"rgba(255,255,255,0.65)","chart-1":"oklch(0.55 0.17 281)","chart-2":"oklch(0.68 0.17 341)","chart-3":"oklch(0.52 0.17 71)","chart-4":"oklch(0.70 0.17 131)","chart-5":"oklch(0.58 0.17 206)","chart-6":"oklch(0.65 0.17 251)","font-sans":"Geist, Inter, system-ui, sans-serif"}}},{"kind":"design-system","category":"workbench","slug":"eclipse","name":"Eclipse","nameZh":"日蚀","aliases":["纯黑单色舱","白胶囊按钮","mono inverse console","spacecraft black"],"description":"A pure-black monochrome workbench where the only emphasis is inversion: white pill controls with near-black text, circular hairline icon chips, and a four-step gray text ladder.","descriptionZh":"以「反白」为唯一强调的纯黑单色工作台：白色胶囊控件配近黑文字、发丝圆环图标徽章、四档灰阶文字层级。","prompt":"Use the 'Eclipse Workbench' design system: layer #141416 primary surfaces and #1d1d20 raised panels over a pure #000000 canvas, organizing the sidebar, thread, composer, and artifact area with #2b2d31 hairlines. Step text down a four-stop gray ladder (#ffffff / #d7d9dd / #8f939b / #5f6268). The only emphasis device is inversion: the primary action is a fully-rounded white pill with #0a0a0a near-black text, and selection and focus are white as well. Set icons inside circular hairline chips — never filled color blocks. Semantic green, red, and orange appear only for real state; code and commands are monospace.\n\nFORBIDDEN: any hued accent (no blue, violet, or green), surface gradients or glow, heavy shadows, low-contrast gray-on-gray buttons, filled icon chips, or spending the inverse pill on secondary actions.","promptZh":"采用「Eclipse / 日蚀工作台」设计系统：#000000 纯黑画布上叠 #141416 主表面与 #1d1d20 浮层，用 #2b2d31 发丝线组织侧栏、线程、输入台与产物区；文字沿 #ffffff / #d7d9dd / #8f939b / #5f6268 四档灰阶退后；唯一的强调手段是「反白」——主行动是全圆角白色胶囊配 #0a0a0a 近黑文字，选中与焦点同样用白；图标一律装进发丝圆环徽章，不用实底色块；语义绿红橙只在真实状态出现，等宽字体承载代码与命令。\n\nFORBIDDEN：任何彩色强调（蓝紫绿一概不用）、表面渐变或辉光、厚投影、灰底灰字的低对比按钮、实底图标色块、把反白胶囊用在次级操作上。","pageUrl":"https://ui-lab-ten.vercel.app/layouts?ds=eclipse","fetch":{"method":"copy-tokens","value":"---\nname: Eclipse\ndescription: A pure-black monochrome workbench where emphasis is inversion, not color.\n---\n\n# Eclipse\n\n## Colors\n\ncolors:\n  canvas: \"#000000\"\n  surface: \"#141416\"\n  raised: \"#1d1d20\"\n  ink: \"#ffffff\"\n  ink-secondary: \"#d7d9dd\"\n  ink-muted: \"#8f939b\"\n  ink-faint: \"#5f6268\"\n  hairline: \"#2b2d31\"\n  accent: \"#ffffff\"\n  accent-foreground: \"#0a0a0a\"\n  success: \"#30a46c\"\n  danger: \"#e5484d\"\n  warning: \"#f0a13a\"\n\n## Typography\n\ntypography:\n  body: \"Inter, 'Helvetica Neue', system-ui, sans-serif\"\n  display: \"Inter, 'Helvetica Neue', system-ui, sans-serif\"\n  mono: \"ui-monospace, 'SF Mono', monospace\"\n  body-weight: 400\n  label-weight: 500\n  heading-weight: 600\n\n## Surfaces & lines\n\n- Keep the canvas pure black; separate depth with small near-black value steps.\n- Draw structure with #2b2d31 hairlines; never with shadows or glow.\n- Emphasis is inversion: white fills carry black text, and nothing else shouts.\n- Icons live in circular hairline chips, all outline-style, never filled blocks.\n\n## Components\n\n- Sidebar: neutral compact rows; the selected row inverts to white-on-black text emphasis.\n- Thread: white prose over black, metadata stepped down the gray ladder.\n- Composer: raised one value step with a hairline; send is the white pill.\n- Buttons: primary is a fully-rounded white pill with #0a0a0a text; secondary and ghost stay hairline-outlined and neutral.\n- Status: green, red, and orange only when the underlying state is real.\n\n## FORBIDDEN\n\n- Any hued accent — no blue, violet, or green emphasis.\n- Surface gradients, glow, or heavy shadows.\n- Low-contrast gray-on-gray buttons.\n- Filled icon chips or colored icon backgrounds.\n- Inverse pills on secondary actions.\n","command":"npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-eclipse.json","endpoint":"https://ui-lab-ten.vercel.app/themes/eclipse.css"},"themePreview":{"modes":["dark"],"dark":{"background":"#000000","foreground":"#ffffff","card":"#141416","muted-foreground":"#8f939b","border":"color-mix(in srgb, #2b2d31 60%, transparent)","primary":"#ffffff","primary-foreground":"#0a0a0a","success":"#30a46c","danger":"#e5484d","warning":"#f0a13a","wb-surface":"#141416","wb-accent":"#ffffff","wb-hairline":"#2b2d31","chart-1":"oklch(0.52 0.11 195)","chart-2":"oklch(0.64 0.11 255)","chart-3":"oklch(0.50 0.11 345)","chart-4":"oklch(0.66 0.11 45)","chart-5":"oklch(0.55 0.11 120)","chart-6":"oklch(0.62 0.11 165)","font-sans":"Inter, 'Helvetica Neue', system-ui, sans-serif"}}},{"kind":"recipe","category":"application","slug":"agent-workbench","name":"Agent Workbench","nameZh":"智能体工作台","aliases":["AI workbench","agent desktop","智能体桌面","AI 工作台"],"description":"A dense application shell for agent conversations, tools, approvals, and artifacts.","descriptionZh":"用于智能体会话、工具调用、审批与产物查看的高密度应用外壳。","pageUrl":"https://ui-lab-ten.vercel.app/components/blocks/agent-workbench","fetch":{"method":"endpoint","endpoint":"https://ui-lab-ten.vercel.app/catalog.json"},"profiles":["next-app","vite-app","electron-renderer"],"recommendedSystem":"graphite","entryComponent":"agent-workbench","components":["agent-workbench","thread-list","agent-thread","agent-composer","artifact-panel"],"optionalComponents":["agent-inbox","agent-trace","citations","voice-orb"],"slots":[{"name":"navigation","description":"Conversation and task navigation in the left rail.","descriptionZh":"左侧栏中的会话与任务导航。","required":true},{"name":"thread","description":"The primary agent conversation and execution timeline.","descriptionZh":"主要的智能体会话与执行时间线。","required":true},{"name":"composer","description":"Prompt, context, model, and send/stop controls.","descriptionZh":"提示词、上下文、模型与发送/停止控制区。","required":true},{"name":"artifact","description":"An on-demand preview, source, and version surface.","descriptionZh":"按需打开的预览、源码与版本区域。","required":false}],"states":[{"name":"empty","description":"No active conversation is selected.","descriptionZh":"尚未选择活动会话。"},{"name":"streaming","description":"The agent is producing output or running tools.","descriptionZh":"智能体正在生成内容或运行工具。"},{"name":"approval","description":"A tool action is waiting for explicit approval.","descriptionZh":"工具操作正在等待明确审批。"},{"name":"error","description":"A turn or tool execution failed and can be retried.","descriptionZh":"会话轮次或工具执行失败，可重试。"}],"responsive":[{"viewport":"desktop","behavior":"Keep the three workbench regions visible and independently resizable.","behaviorZh":"保持三个工作台区域可见并可独立调整宽度。"},{"viewport":"tablet","behavior":"Collapse navigation first and open artifacts as an overlay panel.","behaviorZh":"优先收起导航，将产物区作为覆盖面板打开。"},{"viewport":"mobile","behavior":"Show one task surface at a time with explicit navigation between regions.","behaviorZh":"一次只显示一个任务区域，并提供明确的区域切换。"}],"assets":[{"kind":"font","requirement":"Use the Theme Kit system sans and monospace stacks.","requirementZh":"使用主题套件的系统无衬线与等宽字体栈。","required":true},{"kind":"icon","requirement":"Use Lucide icons with consistent 16px workbench sizing.","requirementZh":"使用 Lucide 图标，并保持工作台统一的 16px 尺寸。","required":true}],"required":["Use the complete AgentWorkbench shell as the composition entry point.","Install the selected Theme Kit before adapting application content.","Preserve the --wb-* workbench token contract in vendored components."],"forbidden":["Do not replace the workbench shell with unrelated generic dashboard cards.","Do not collapse --wb-* tokens into a smaller ad-hoc semantic palette.","Do not hide task state behind decorative animation."]},{"kind":"recipe","category":"landing","slug":"saas-landing","name":"SaaS Landing","nameZh":"SaaS 落地页","aliases":["startup landing","product marketing page","软件落地页","产品官网"],"description":"A product-led landing composition with a clear hero, proof, features, pricing, and CTA rhythm.","descriptionZh":"以产品为主线，组合首屏、信任证明、功能、定价与行动召唤的落地页配方。","pageUrl":"https://ui-lab-ten.vercel.app/sections","fetch":{"method":"endpoint","endpoint":"https://ui-lab-ten.vercel.app/catalog.json"},"profiles":["next-app","vite-app"],"recommendedSystem":"pearl","entryComponent":"recording-card","components":["recording-card","button","animated-badge"],"optionalComponents":["marquee","tabs","feedback-widget"],"slots":[{"name":"navigation","description":"Brand, primary links, and the single primary CTA.","descriptionZh":"品牌、主导航链接与唯一主行动按钮。","required":true},{"name":"hero","description":"Product promise, supporting copy, CTA, and product proof.","descriptionZh":"产品承诺、辅助文案、行动按钮与产品证明。","required":true},{"name":"proof","description":"Customer logos, metrics, testimonials, or product recording.","descriptionZh":"客户标志、指标、评价或产品录屏证明。","required":true},{"name":"features","description":"Outcome-led feature groups grounded in real product UI.","descriptionZh":"以结果为导向、由真实产品界面支撑的功能分组。","required":true},{"name":"pricing","description":"Comparable plans with one recommended path.","descriptionZh":"可比较的方案与一个明确的推荐选择。","required":false},{"name":"cta","description":"The repeated primary action before the footer.","descriptionZh":"页脚之前重复出现的主行动入口。","required":true},{"name":"footer","description":"Product, legal, and support links that close the page hierarchy.","descriptionZh":"收束页面层级的产品、法律与支持链接。","required":true}],"states":[{"name":"default","description":"All product proof and calls to action are readable without interaction.","descriptionZh":"无需交互即可阅读产品证明与行动入口。"},{"name":"media-loading","description":"Product imagery or recordings reserve stable space while loading.","descriptionZh":"产品图片或录屏加载时保留稳定空间。"},{"name":"form-error","description":"Lead or signup forms explain validation and recovery inline.","descriptionZh":"线索或注册表单就地说明校验错误与恢复方式。"},{"name":"submitted","description":"A successful conversion receives an explicit confirmation state.","descriptionZh":"转化成功后显示明确的确认状态。"}],"responsive":[{"viewport":"desktop","behavior":"Use a bounded content grid with alternating proof and feature regions.","behaviorZh":"使用有最大宽度的内容网格，交替组织证明与功能区域。"},{"viewport":"tablet","behavior":"Reduce multi-column sections without changing content order.","behaviorZh":"减少多列布局，但不改变内容顺序。"},{"viewport":"mobile","behavior":"Stack content, keep CTA order intact, and avoid horizontal carousels for core proof.","behaviorZh":"纵向堆叠内容，保持行动按钮顺序，核心证明不使用横向轮播。"}],"assets":[{"kind":"font","requirement":"Load the Theme Kit display and body fonts without layout shift.","requirementZh":"加载主题套件的展示与正文字体，避免布局偏移。","required":true},{"kind":"image","requirement":"Provide real product screenshots or a concise product recording.","requirementZh":"提供真实产品截图或简洁的产品录屏。","required":true},{"kind":"icon","requirement":"Use one consistent Lucide icon treatment for feature support.","requirementZh":"功能辅助图标统一使用一种 Lucide 处理方式。","required":false}],"sections":[{"slug":"navbar","variant":"simple","required":true},{"slug":"hero","variant":"screenshot","required":true},{"slug":"logo-wall","variant":"row","required":true},{"slug":"features","variant":"alternating","required":true},{"slug":"testimonials","variant":"quote","required":true},{"slug":"pricing","variant":"tiers","required":false},{"slug":"faq","variant":"accordion","required":false},{"slug":"cta","variant":"boxed","required":true},{"slug":"footer","variant":"columns","required":true}],"required":["Establish one primary CTA and repeat it consistently through the page.","Preserve the declared navigation, hero, proof, features, CTA, and footer order; pricing is optional and may be omitted when the product has no pricing model.","Apply the selected Theme Kit typography, spacing, and semantic color tokens."],"forbidden":["Do not use generic gradient blobs as the main visual identity.","Do not invent competing button, card, or typography systems per section.","Do not add motion that delays reading or obscures the primary CTA."]}]}