重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
airbnb-ui-skills by ihlamury/design-skills
npx skills add https://github.com/ihlamury/design-skills --skill airbnb-ui-skills为使用 AI 代理构建 Airbnb 风格界面而制定的规范约束。
在以下情况下参考这些指南:
#FEFEFE 作为页面背景 (surface-base)| 标记 | HEX | RGB | 用途 |
|---|---|---|---|
surface-base | #FEFEFE | rgb(254,254,254) |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 页面背景 |
surface-raised | #EEEBE4 | rgb(238,235,228) | 卡片、模态框、凸起表面 |
surface-overlay | #D5D3D1 | rgb(213,211,209) | 叠加层、工具提示、下拉菜单 |
text-primary | #8F8F8F | rgb(143,143,143) | 标题、正文文本 |
text-2 | #5C5955 | rgb(92,89,85) | 附加文本 |
text-secondary | #686868 | rgb(104,104,104) | 次要、弱化文本 |
border-default | #E6DECC | rgb(230,222,204) | 细微边框、分隔线 |
destructive | #E25275 | rgb(226,82,117) | 错误状态、删除操作 |
warning | #E6DECC | rgb(230,222,204) | 警告状态、注意提示 |
Inter 作为主要字体族19px / 500 作为主要标题15px / 400 作为正文文本text-balance,对正文使用 text-prettytabular-nums| 样式 | 字体 | 大小 | 粗细 | 颜色 | 数量 |
|---|---|---|---|---|---|
heading-1 | Inter | 19px | 500 | #4A4A4A | 1 |
heading-2 | Inter | 19px | 500 | #E25275 | 1 |
heading-3 | Inter | 15px | 300 | #C3C0BC | 1 |
body | Inter | 15px | 400 | #919191 | 1 |
body-secondary | Inter | 15px | 500 | #494949 | 1 |
body-secondary | Inter | 15px | 500 | #474747 | 1 |
body-secondary | Inter | 14px | 400 | #919191 | 5 |
body-secondary | Inter | 14px | 300 | #919191 | 3 |
body-secondary | Inter | 14px | 300 | #929292 | 3 |
body-secondary | Inter | 14px | 400 | #909090 | 1 |
字体族:
Inter (使用了 65 次)字体大小: 6px, 8px, 9px, 10px, 11px, 13px, 14px, 15px, 19px
比例尺: 11px, 12px, 13px, 14px, 28px
h-screen,应使用 h-dvh 来实现全视口高度safe-area-insetsize-* 而不是 w-* + h-*0px 高度| 变体 | 背景 | 文本 | 边框 | 高度 | 半径 |
|---|---|---|---|---|---|
| 幽灵按钮 | transparent | #5C5955 | none | - | - |
0px2px 轮廓线和强调色 (#5E6AD2)2px 的轮廓偏移#EEEBE4 背景#EEEBE4 背景opacity: 0.5cursor: not-allowedAlertDialoginput 或 textarea 元素中阻止粘贴aria-labeltransform, opacity) 进行动画处理width, height, top, left, margin, padding) 进行动画处理ease-out200msprefers-reduced-motion 设置blur() 或 backdrop-filter 表面进行动画处理will-changeuseEffect 用于任何可以用渲染逻辑表达的内容每周安装数
62
代码仓库
GitHub 星标数
18
首次出现
2026年2月6日
安全审计
安装于
opencode48
gemini-cli48
github-copilot47
codex46
cline46
kimi-cli45
Opinionated constraints for building Airbnb-style interfaces with AI agents.
Reference these guidelines when:
#FEFEFE as page background (surface-base)| Token | HEX | RGB | Usage |
|---|---|---|---|
surface-base | #FEFEFE | rgb(254,254,254) | Page background |
surface-raised | #EEEBE4 | rgb(238,235,228) | Cards, modals, raised surfaces |
surface-overlay | #D5D3D1 | rgb(213,211,209) | Overlays, tooltips, dropdowns |
text-primary | #8F8F8F | rgb(143,143,143) | Headings, body text |
text-2 | #5C5955 | rgb(92,89,85) | Additional text |
text-secondary | #686868 | rgb(104,104,104) | Secondary, muted text |
border-default | #E6DECC | rgb(230,222,204) | Subtle borders, dividers |
destructive | #E25275 | rgb(226,82,117) | Error states, delete actions |
warning | #E6DECC | rgb(230,222,204) | Warning states, cautions |
Inter as primary font family19px / 500 for primary headings15px / 400 for body texttext-balance for headings and text-pretty for body texttabular-nums for numeric data| Style | Font | Size | Weight | Color | Count |
|---|---|---|---|---|---|
heading-1 | Inter | 19px | 500 | #4A4A4A | 1 |
heading-2 | Inter | 19px | 500 | #E25275 | 1 |
heading-3 | Inter | 15px | 300 | #C3C0BC | 1 |
Font Families:
Inter (used 65x)Font Sizes: 6px, 8px, 9px, 10px, 11px, 13px, 14px, 15px, 19px
Scale: 11px, 12px, 13px, 14px, 28px
h-screen, use h-dvh for full viewport heightsafe-area-inset for fixed elementssize-* for square elements instead of w-* + h-*0px height for input fields| Variant | Background | Text | Border | Height | Radius |
|---|---|---|---|---|---|
| Ghost | transparent | #5C5955 | none | - | - |
0px2px outline with accent color (#5E6AD2)2px outline-offset#EEEBE4 background#EEEBE4 backgroundopacity: 0.5cursor: not-allowedAlertDialog for destructive or irreversible actionsinput or textarea elementsaria-label to icon-only buttonstransform, opacity)width, height, top, left, margin, padding)ease-out on entrance animations200ms for interaction feedbackprefers-reduced-motionblur() or backdrop-filter surfaceswill-change outside an active animationuseEffect for anything that can be expressed as render logicWeekly Installs
62
Repository
GitHub Stars
18
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode48
gemini-cli48
github-copilot47
codex46
cline46
kimi-cli45
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
123,700 周安装
shadcn UI组件库:36个Radix UI + Tailwind CSS预构建组件,无缝集成json-render
567 周安装
translate-book-parallel:使用并行子代理翻译整本书籍(PDF/DOCX/EPUB)的Claude Code技能
559 周安装
学术海报生成器posterskill:从Overleaf论文一键生成交互式会议海报
563 周安装
Effect-TS 最佳实践指南:提升类型安全、可测试性与可维护性
552 周安装
hairy-react-lib:React Hooks与组件库,异步、监听、生命周期、条件渲染与错误处理
550 周安装
valtio-define:基于 Valtio 的 React 状态管理库,提供类似 Pinia 的 API
553 周安装
body| Inter |
| 15px |
| 400 |
| #919191 |
| 1 |
body-secondary | Inter | 15px | 500 | #494949 | 1 |
body-secondary | Inter | 15px | 500 | #474747 | 1 |
body-secondary | Inter | 14px | 400 | #919191 | 5 |
body-secondary | Inter | 14px | 300 | #919191 | 3 |
body-secondary | Inter | 14px | 300 | #929292 | 3 |
body-secondary | Inter | 14px | 400 | #909090 | 1 |