菜单
Awwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Sheshiyer/skill-clusters --skill awwwards-ui-skills命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | awwwards-ui-skills |
| description | Awwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid. |
| license | MIT |
| metadata | {"author":"design-skills","version":"1.0.0","source":"https://awwwards.com"} |
| cluster | creative-frontend |
| version | 1.0.0 |
| origin | ihlamury/design-skills |
Opinionated constraints for building Awwwards-style interfaces with AI agents.
Reference these guidelines when:
#E4E4E4 as page background (surface-base)| Token | HEX | RGB | Usage |
|---|---|---|---|
surface-base | #E4E4E4 | rgb(228,228,228) | Page background |
surface-raised | #2F2E30 | rgb(47,46,48) | Cards, modals, raised surfaces |
surface-overlay | #191919 | rgb(25,25,25) | Overlays, tooltips, dropdowns |
text-primary | #565656 | rgb(86,86,86) | Headings, body text |
text-secondary | #939393 | rgb(147,147,147) | Secondary, muted text |
text-tertiary | #B5B5B5 | rgb(181,181,181) | Additional text |
border-default | #3A3A3A | rgb(58,58,58) | Subtle borders, dividers |
Inter as primary font family127px / 700 for primary headings16px / 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 | 127px | 700 | #1C1C1C | 1 |
text-28px | Inter | 28px | 700 | #ECEEE4 | 1 |
text-18px | Inter | 18px | 500 | #3C3C3C | 1 |
text-17px | Inter | 17px | semi_bold | #3D3D3D | 1 |
body | Inter | 16px | 500 | #B5B5B5 | 1 |
body-secondary | Inter | 16px | 500 | #B0B3A3 | 1 |
body-secondary | Inter | 15px | 400 | #4A4A4A | 1 |
body-secondary | Inter | 15px | 400 | #4D4D4D | 1 |
body-secondary | Inter | 15px | 400 | #646464 | 1 |
body-secondary | Inter | 14px | 400 | #5C5C5C | 2 |
Font Families:
Inter (used 31x)Font Sizes: 7px, 8px, 9px, 10px, 11px, 12px, 14px, 15px, 16px, 17px, 18px, 28px, 127px
Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px
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 | #565656 | none | - | - |
0px2px outline with accent color (#5E6AD2)2px outline-offset#2F2E30 background#2F2E30 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 logicArcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.