重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
framer-ui-skills by ihlamury/design-skills
npx skills add https://github.com/ihlamury/design-skills --skill framer-ui-skills用于构建 Framer 风格界面的 AI 代理的约定性约束。
在以下情况下参考这些准则:
#000000 作为页面背景 (surface-base)| 令牌 | HEX | RGB | 用途 |
|---|---|---|---|
surface-base | #000000 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| rgb(0,0,0) |
| 页面背景 |
surface-raised | #141415 | rgb(20,20,21) | 卡片、模态框、凸起表面 |
surface-overlay | #F8F8F1 | rgb(248,248,241) | 覆盖层、工具提示、下拉菜单 |
text-primary | #89786E | rgb(137,120,110) | 标题、正文文本 |
text-2 | #D8AD9D | rgb(216,173,157) | 附加文本 |
text-tertiary | #D1CFD0 | rgb(209,207,208) | 附加文本 |
border-default | #494453 | rgb(73,68,83) | 细微边框、分隔线 |
destructive | #D8AD9D | rgb(216,173,157) | 错误状态、删除操作 |
warning | #F8F8F1 | rgb(248,248,241) | 警告状态、注意提示 |
Inter 作为主要字体系列93px / 700 作为主标题23px / 500 作为正文文本text-balance,对正文使用 text-prettytabular-nums| 样式 | 字体 | 大小 | 粗细 | 颜色 | 数量 |
|---|---|---|---|---|---|
heading-1 | Inter | 93px | 700 | #F4F4F4 | 1 |
body | Inter | 23px | 500 | #737373 | 1 |
body-secondary | Inter | 22px | 700 | #DCB8B8 | 1 |
body-secondary | Inter | 22px | 400 | #B2B2B1 | 1 |
text-20px | Inter | 20px | 300 | #777777 | 1 |
text-18px | Inter | 18px | 400 | #6D635E | 1 |
text-16px | Inter | 16px | 400 | #929290 | 1 |
text-14px | Inter | 14px | 400 | #949493 | 1 |
text-14px | Inter | 14px | 300 | #DFDBD7 | 1 |
text-14px | Inter | 14px | 300 | #2F2F31 | 1 |
字体系列:
Inter (使用了 62 次)字体大小: 3px, 4px, 5px, 6px, 7px, 8px, 9px, 11px, 13px, 14px, 16px, 18px, 20px, 22px, 23px, 93px
比例尺: 1px, 2px, 3px, 4px, 7px, 8px, 15px, 17px
h-screen,使用 h-dvh 表示完整视口高度safe-area-insetsize-* 而不是 w-* + h-*| 变体 | 背景 | 文本 | 边框 | 高度 | 半径 |
|---|---|---|---|---|---|
| 幽灵按钮 | transparent | #4D4E4C | none | - | - |
2px 轮廓线和强调色 (#5E6AD2)2px 的轮廓偏移量#141415 背景#141415 背景opacity: 0.5cursor: not-allowedAlertDialog 来处理破坏性或不可逆的操作input 或 textarea 元素中阻止粘贴aria-labeltransform, opacity)width, height, top, left, margin, padding)ease-out200msprefers-reduced-motion 设置blur() 或 backdrop-filter 表面进行动画处理will-changeuseEffect 用于任何可以通过渲染逻辑表达的内容每周安装量
47
代码仓库
GitHub 星标数
18
首次出现
2026年2月6日
安全审计
已安装于
gemini-cli45
opencode44
codex41
github-copilot41
cursor40
kimi-cli39
Opinionated constraints for building Framer-style interfaces with AI agents.
Reference these guidelines when:
#000000 as page background (surface-base)| Token | HEX | RGB | Usage |
|---|---|---|---|
surface-base | #000000 | rgb(0,0,0) | Page background |
surface-raised | #141415 | rgb(20,20,21) | Cards, modals, raised surfaces |
surface-overlay | #F8F8F1 | rgb(248,248,241) | Overlays, tooltips, dropdowns |
text-primary | #89786E | rgb(137,120,110) | Headings, body text |
text-2 | #D8AD9D | rgb(216,173,157) | Additional text |
text-tertiary | #D1CFD0 | rgb(209,207,208) | Additional text |
border-default | #494453 | rgb(73,68,83) | Subtle borders, dividers |
destructive | #D8AD9D | rgb(216,173,157) | Error states, delete actions |
warning | #F8F8F1 | rgb(248,248,241) | Warning states, cautions |
Inter as primary font family93px / 700 for primary headings23px / 500 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 | 93px | 700 | #F4F4F4 | 1 |
body | Inter | 23px | 500 | #737373 | 1 |
body-secondary | Inter | 22px | 700 | #DCB8B8 | 1 |
Font Families:
Inter (used 62x)Font Sizes: 3px, 4px, 5px, 6px, 7px, 8px, 9px, 11px, 13px, 14px, 16px, 18px, 20px, 22px, 23px, 93px
Scale: 1px, 2px, 3px, 4px, 7px, 8px, 15px, 17px
h-screen, use h-dvh for full viewport heightsafe-area-inset for fixed elementssize-* for square elements instead of w-* + h-*| Variant | Background | Text | Border | Height | Radius |
|---|---|---|---|---|---|
| Ghost | transparent | #4D4E4C | none | - | - |
2px outline with accent color (#5E6AD2)2px outline-offset#141415 background#141415 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
47
Repository
GitHub Stars
18
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli45
opencode44
codex41
github-copilot41
cursor40
kimi-cli39
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
127,000 周安装
TYPO3 Rector 升级指南:自动化迁移 TYPO3 v14 PHP 代码,告别弃用 API
46 周安装
weapp-vite最佳实践:微信小程序Vite项目配置、分包与AI工作流优化指南
46 周安装
测试报告自动分类技能 - 智能分析失败原因,推荐修复方案
46 周安装
Logo管理技能:品牌Logo自动化获取、存储与规范化处理解决方案
46 周安装
移动开发技能指南:React Native、Flutter、iOS与Android原生开发选择与最佳实践
46 周安装
Claude技能allowed-tools自动更新工具:智能分析并补全技能所需工具权限
46 周安装
body-secondary| Inter |
| 22px |
| 400 |
| #B2B2B1 |
| 1 |
text-20px | Inter | 20px | 300 | #777777 | 1 |
text-18px | Inter | 18px | 400 | #6D635E | 1 |
text-16px | Inter | 16px | 400 | #929290 | 1 |
text-14px | Inter | 14px | 400 | #949493 | 1 |
text-14px | Inter | 14px | 300 | #DFDBD7 | 1 |
text-14px | Inter | 14px | 300 | #2F2F31 | 1 |