# AI use cases for Oa Design (OpenLabs-so/oa-design)

Repo: [OpenLabs-so/oa-design](https://github.com/OpenLabs-so/oa-design) | Use cases: 4 | Page: https://dedupedai.com/use-cases/openlabs-so-oa-design/

A design language for Open Analytics packaged as an agent skill, type-checked React and Tailwind component recipes, token CSS, and a CLI.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Add tested UI recipes to a React project: https://dedupedai.com/use-cases/openlabs-so-oa-design/add-design-recipes-to-react-project/
- Teach Claude Code the Open Analytics design rules: https://dedupedai.com/use-cases/openlabs-so-oa-design/give-claude-code-open-analytics-design-skill/
- Make Cursor or Codex follow one design file: https://dedupedai.com/use-cases/openlabs-so-oa-design/apply-design-rules-in-cursor-or-codex/
- Port the token CSS and spring constants to your stack: https://dedupedai.com/use-cases/openlabs-so-oa-design/port-open-analytics-tokens-and-springs/

## How to add tested UI recipes to a React project with Oa Design

Repo: [OpenLabs-so/oa-design](https://github.com/OpenLabs-so/oa-design) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Copy type-checked Open Analytics components like tab bars and toasts into your app with one command.

**Who it is for:** A front-end developer building a React dashboard who wants polished navigation, dialogs and toasts without designing the motion from scratch.

**The problem:** Building tab bars, dialogs, toasts and skeleton loaders with matching spacing, springs and focus states takes days of tuning.

**The outcome:** Selected recipes land in ./oa-design as source you own, ready to import into your pages.

### Steps

1. Open a terminal in your project folder.
2. Run `npx getopen-design list` to see the available recipes.
3. Run `npx getopen-design add tab-bar toast` to copy those recipes into ./oa-design.
4. Ask your agent to import the copied components into one page and check the result in your dev server.
5. Replace any values that clash with your own design system, since the README says your system wins.

### Prompt to paste into your agent

```text
In the repo <project-path>, use the oa-design recipes from the getopen-design CLI (repo OpenLabs-so/oa-design) to add a tab bar and a toast to the page <page-file>. Expected output: the components are imported and the page renders with no type errors. Verify by running the project's typecheck script.
```

### Caveat

The README says the recipes were written against React, Tailwind v4 and motion, so other stacks need porting work.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/openlabs-so-oa-design/add-design-recipes-to-react-project/

## How to teach Claude Code the Open Analytics design rules with Oa Design

Repo: [OpenLabs-so/oa-design](https://github.com/OpenLabs-so/oa-design) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Install the Oa Design agent skill so Claude Code styles new UI with the same rules, springs and copy voice.

**Who it is for:** A developer using Claude Code who keeps getting generic-looking interfaces and wants the agent to follow a fixed design language.

**The problem:** Each new screen needs the same corner radii, ink colour, motion and focus rules, and an agent without them drifts.

**The outcome:** Claude Code loads the Oa Design skill from .claude/skills and applies its ten rules, spring table and recipes when building UI.

### Steps

1. Run `git clone https://github.com/OpenLabs-so/oa-design` in a folder outside your project.
2. Run `cp -r oa-design/skills/oa-design .claude/skills/oa-design` from the folder that contains both your project and the clone, or copy the folder by hand.
3. Alternatively, run `npx getopen-design skill` in your project to install the skill into .claude/skills.
4. Start Claude Code in the project and ask it to build one small card with a button.
5. Check that the card uses the skill's radius, ink and spring choices.

### Prompt to paste into your agent

```text
Install the oa-design skill from OpenLabs-so/oa-design into .claude/skills in <project-path>, then build a settings card in <target-file> following it. Expected output: a component that uses the skill's tokens and spring values. Verify that the skill folder exists and the file imports the token CSS.
```

### Caveat

The README describes the skill as a set of rules and recipes, so output quality depends on what the agent follows, and you should review its result.

Risk, reverse engineering: The values were taken from the shipped Open Analytics product, so reuse the approach and tokens for your own product and avoid copying their brand identity.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/openlabs-so-oa-design/give-claude-code-open-analytics-design-skill/

## How to make Cursor or Codex follow one design file with Oa Design

Repo: [OpenLabs-so/oa-design](https://github.com/OpenLabs-so/oa-design) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README

Point your agent rules at DESIGN-SKILL.md so every UI change follows the same design language.

**Who it is for:** A non-specialist builder using Cursor or Codex who styles a small website or app and wants consistent visuals without learning CSS.

**The problem:** Agent-built pages look different from one prompt to the next because the agent has no shared design reference.

**The outcome:** The agent reads the full design language in DESIGN-SKILL.md before it styles any UI.

### Steps

1. Open the repository page at https://github.com/OpenLabs-so/oa-design in your browser.
2. Download DESIGN-SKILL.md and save it in your project folder.
3. Open your Cursor or Codex rules settings and add this line: When building or styling UI, follow DESIGN-SKILL.md in full.
4. Ask the agent to restyle one page.
5. Compare the page with the rules in DESIGN-SKILL.md and ask the agent to fix any mismatch.

### Prompt to paste into your agent

```text
Read DESIGN-SKILL.md from OpenLabs-so/oa-design and restyle the page <page-file> to follow it in full. Expected output: the page uses white surfaces, the single ink colour and the listed spring motion. Verify by checking that each rule in the file is applied.
```

### Caveat

The README calls DESIGN-SKILL.md a compiled copy of the language, so check it against the repo when you update your project.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/openlabs-so-oa-design/apply-design-rules-in-cursor-or-codex/

## How to port the token CSS and spring constants to your stack with Oa Design

Repo: [OpenLabs-so/oa-design](https://github.com/OpenLabs-so/oa-design) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Reuse the colours, radii, easing and seven springs in a project that already has its own design system.

**Who it is for:** A team with an existing design system that wants the Open Analytics motion and surface values without adopting its components.

**The problem:** Matching the feel of a product means knowing exact radii, easing and spring values, which are often not written down.

**The outcome:** Your design system uses the token CSS and spring constants from Oa Design, with your own components kept as they are.

### Steps

1. Run `npx getopen-design tokens` in your project to get the token CSS.
2. Open components/_lib in the cloned repository to find the seven springs as constants.
3. Copy the spring values and token variables into your design system, mapping them to your own names.
4. Ask your agent to replace hard-coded radii and easing in one component with these tokens.
5. Check that existing components still render the same.

### Prompt to paste into your agent

```text
From the repo OpenLabs-so/oa-design, take the token CSS and spring constants and map them into the design system in <design-system-path> without changing its components. Expected output: a mapping file and updated values in one component. Verify that the component renders and the springs match the constants in components/_lib.
```

### Caveat

The README says the values are plain CSS numbers and spring constants written against motion, so non-React systems must translate the spring model themselves.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/openlabs-so-oa-design/port-open-analytics-tokens-and-springs/