UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken…
Install Oa Design
$ npx skills add OpenLabs-so/oa-design --skill oa-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install OpenLabs-so/oa-design oa-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/OpenLabs-so/oa-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/oa-design .claude/skills/oa-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "oa-design" agent skill from https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-design into .claude/skills/oa-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oa-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add OpenLabs-so/oa-design --skill oa-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install OpenLabs-so/oa-design oa-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OpenLabs-so/oa-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/oa-design .agents/skills/oa-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "oa-design" agent skill from https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-design into .agents/skills/oa-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oa-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add OpenLabs-so/oa-design --skill oa-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install OpenLabs-so/oa-design oa-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OpenLabs-so/oa-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/oa-design .cursor/skills/oa-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "oa-design" agent skill from https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-design into .cursor/skills/oa-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oa-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/OpenLabs-so/oa-design.git --path skills/oa-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add OpenLabs-so/oa-design --skill oa-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install OpenLabs-so/oa-design oa-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OpenLabs-so/oa-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/oa-design .gemini/skills/oa-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "oa-design" agent skill from https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-design into .gemini/skills/oa-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oa-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install OpenLabs-so/oa-design oa-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add OpenLabs-so/oa-design --skill oa-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/OpenLabs-so/oa-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/oa-design .github/skills/oa-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "oa-design" agent skill from https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-design into .github/skills/oa-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oa-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add OpenLabs-so/oa-design --skill oa-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install OpenLabs-so/oa-design oa-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OpenLabs-so/oa-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/oa-design .opencode/skills/oa-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "oa-design" agent skill from https://github.com/OpenLabs-so/oa-design/tree/main/skills/oa-design into .opencode/skills/oa-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oa-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
oa-design- GitHub stars
- 134
- Token cost
- ~1.3k tokens
- SKILL.md length
- 622 words
- Files
- 20
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken…
- Works in 10 steps: One ink, everything derived. The entire… → Two layers, and the gap is the page.… → Squircles for surfaces, pills for… → …
- Mentions Open Analytics look
- SKILL.md covers The ten rules, The springs, Component recipes and Guides
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Oa Design is an agent skill from OpenLabs-so/oa-design. Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes. Use this whenever you build or restyle a dashboard, SaaS app, analytics UI, settings screen, onboarding flow, or marketing/landing page that should feel calm, dense and native, and whenever the user mentions Open Analytics' look, 'clean SaaS design', cards, dropdowns…
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files (for example `01-squircle-card.md`, `02-button.md` and `03-dropdown.md`).
It sits in Frontend & Design, covering Design systems and Landing pages. It works with React and Tailwind CSS. The repository describes itself as: The Open Analytics design language as an agent skill: component recipes with type-checked source, token CSS, and a CLI. Works with Claude Code, Cursor, or any agent. The licence is MIT.
When your agent uses it
- Mentions Open Analytics look
- Clean SaaS design
- UI animation quality
- Even if they never say the words design system
Example prompts
- “look,”
- “design system”
- “/oa-design”
Workflow steps
10 steps, taken from the first numbered list in SKILL.md.
- One ink, everything derived. The entire neutral system is one color,
- Two layers, and the gap is the page. Surfaces are a white frame
- Squircles for surfaces, pills for actions. Cards get
- One spring family. Seven named springs cover the entire product (table
- Chrome never waits. Layout and titles render instantly; only data
- Weight stops at 500. Inter Tight 300 to 500; no bold anywhere.
- One accent, spent in one place. A single blue for primary actions and
- States get pills, events end themselves. Standing conditions render
- Copy is part of the design. Sentence case; buttons say what happens;
- Quality floor, always. Focus rings, role="status", aria-hidden
What it can do on your machine
Read from SKILL.md and the folder at commit bd200da. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
getopen.so
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Oa Design loads about 1.3k tokens when it runs. Until then it costs about 159 tokens; SKILL.md has 622 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from OpenLabs-so/oa-design at commit bd200da, republished under its MIT licence (© OpenLabs-so). 622 words, ~1,302 tokens.
Download SKILL.mdSave it as
.claude/skills/oa-design/SKILL.md (or your agent's skills folder). This skill also uses 19 other files; get the full folder from GitHub.- name
- oa-design
- description
- Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes. Use this whenever you build or restyle a dashboard, SaaS app, analytics UI, settings screen, onboarding flow, or marketing/landing page that should feel calm, dense and native, and whenever the user mentions Open Analytics' look, 'clean SaaS design', cards, dropdowns, tab bars, empty states, skeletons, or UI animation quality, even if they never say the words 'design system'.
OA Design
The design language of Open Analytics, written down so an agent can reproduce it. Nothing here is aspirational: every value is lifted from the shipped product, springs and hex codes included.
The look in one sentence: white surfaces with continuous-curvature corners, resting on a quiet grey stage, drawn in a single ink, moved by a single spring.
Start by dropping _root.css into the project's global stylesheet: every
recipe reads from those token names. Then read the recipe for what you are
building. Build with real content, never lorem.
The ten rules
- One ink, everything derived. The entire neutral system is one color,
--ink, mixed into transparency at fixed percentages: borders 12%, hover washes 5%, inputs 14%. Never introduce a second grey; when you need a new neutral, mix ink. - Two layers, and the gap is the page. Surfaces are a white frame holding a recessed grey inset; sections are plates and the page background between them is the only divider. No horizontal rules.
- Squircles for surfaces, pills for actions. Cards get
continuous-curvature corners; everything clickable that is not a card is a
pill. A
rounded-lgrectangle is the smell of a foreign component. - One spring family. Seven named springs cover the entire product (table below). Do not invent an eighth.
- Chrome never waits. Layout and titles render instantly; only data swaps from a pixel-matched skeleton, arriving by blur, not by pop.
- Weight stops at 500. Inter Tight 300 to 500; no bold anywhere.
Hierarchy comes from size, color and spacing. Data aligns with
tabular-nums; code is Geist Mono. - One accent, spent in one place. A single blue for primary actions and the primary chart line; semantic colors are text tints, never fills.
- States get pills, events end themselves. Standing conditions render non-dismissable strips or pills that live exactly as long as the state; one-off outcomes are toasts that retire alone.
- Copy is part of the design. Sentence case; buttons say what happens;
errors name the cause and the way out, without blame. Read
_copy.md. - Quality floor, always. Focus rings,
role="status",aria-hiddendecorations,prefers-reduced-motion, no horizontal page scroll.
Show full SKILL.md (263 more words)Show less
The springs
| Name | Value | Used for |
|---|---|---|
| PANEL | 550 / 38 | dropdowns, menus, boards, toggles |
| LAYOUT | 550 / 40 | measured height/width, traveling pills |
| POP | 400 / 26 | modal entrance |
| POP_EXIT | 380 / 28 | modal exit |
| BANNER | 400 / 30 | floating pills, page banners |
| FLICK | 900 / 50 | icon micro-moves |
| CHART | 300 / 28 | chart tooltips, crosshair |
Micro fades: 0.1s out, 0.16s in, easeOut; nothing in app chrome tweens past
0.2s. The constants ship as code in components/_lib/springs.ts.
Component recipes
Each recipe is self-contained: when to use it, the load-bearing details, and the full type-checked source embedded.
| File | What |
|---|---|
01-squircle-card.md | the surface system and the fixed-height mini card |
02-button.md | pills that press, the bevel, honest loading |
03-dropdown.md | menus, selects, switchers; one anchored-panel pattern |
04-tab-bar.md | the traveling highlight and the label mask |
05-modal.md | pop in, softer pop out |
06-multi-step-dialog.md | the measured-height choreography |
07-skeleton.md | pixel-matched waits and the blur arrival |
08-notice-strip.md | explaining a standing state |
09-floating-pill.md | the app chrome's one word |
10-toast.md | success pulses, error shakes |
11-header-morph.md | the landing glass pill |
12-reveal.md | scroll reveals in 80ms beats |
Guides
| File | What |
|---|---|
_tokens.md | the full palette, dark theme, type, radius, shadows |
_layout.md | plates, widths, page anatomy, settings screens |
_components.md | the component patterns in prose, cross-referenced |
_motion.md | the vocabulary and the signature moves, with rules |
_landing.md | marketing pages: hero, reveals, furniture |
_copy.md | voice, buttons, errors, states, numbers |
_root.css | the installable token block every recipe reads from |
Stack assumptions: React + Tailwind v4 + the motion package; but every
value is plain CSS numbers and spring constants, so port freely. If the
project already has a design system, theirs wins; use this to fill gaps, not
to overwrite their identity.
© OpenLabs-so, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 19 other files in skills/oa-design of OpenLabs-so/oa-design.
- SKILL.md
- 01-squircle-card.md
- 02-button.md
- 03-dropdown.md
- 04-tab-bar.md
- 05-modal.md
- 06-multi-step-dialog.md
- 07-skeleton.md
- 08-notice-strip.md
- 09-floating-pill.md
- 10-toast.md
- 11-header-morph.md
- 12-reveal.md
- _components.md
- _copy.md
- _landing.md
- _layout.md
- _motion.md
- _root.css
- _tokens.md
Open the folder on GitHubat commit bd200da
Compare with similar skills
Oa Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Oa Design this skillOpenLabs-so/oa-design | 134 | — | ~1.3k | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 264 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Atlaspacifio/ui | 154 | — | ~2.5k | Automated safety check: Pass | MIT | |
| Bryl Minimal Designbryllim/bryl-minimal-design | 115 | — | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Atlas
pacifio/ui
Atlas — a design language and UI guide system for agent interfaces.
Bryl Minimal Design
bryllim/bryl-minimal-design
Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…
Redesign My Landingpage
instructa/agent-skills
Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify.
Related
Works with
Categories
Questions about Oa Design
What does Oa Design do?
Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken…. Oa Design is an agent skill from OpenLabs-so/oa-design. Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes.
When should I use Oa Design?
Oa Design fits situations like: mentions Open Analytics look; clean SaaS design; UI animation quality; even if they never say the words design system.
How do I install Oa Design in Claude Code?
Run `npx skills add OpenLabs-so/oa-design --skill oa-design -a claude-code`. Or copy the skill folder (skills/oa-design in OpenLabs-so/oa-design) into .claude/skills/oa-design in your project. Claude Code loads it when a task matches its description.
How do I install Oa Design in Codex?
Run `npx skills add OpenLabs-so/oa-design --skill oa-design -a codex`. Or copy the skill folder (skills/oa-design in OpenLabs-so/oa-design) into .agents/skills/oa-design in your project. Codex loads it when a task matches its description.
Can I use Oa Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add OpenLabs-so/oa-design --skill oa-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/oa-design, .gemini/skills/oa-design, .github/skills/oa-design and .opencode/skills/oa-design in your project.
What does Oa Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Oa Design is instructions for the agent only.
Does Oa Design access the network?
SKILL.md names 1 domain. As links in the text: getopen.so. This is read from the text; nothing was executed.
Is Oa Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Oa Design use?
Oa Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Oa Design use?
About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Oa Design?
Skills that share tags, products or a category with Oa Design: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Design Style (Castor6/tactus, 376 stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars) and Atlas (pacifio/ui, 154 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Oa Design?
OpenLabs-so (a GitHub organization) maintains it in OpenLabs-so/oa-design, which has 134 GitHub stars. The repository was last updated on August 20, 2026.
Source: OpenLabs-so/oa-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.