DEDUPED Hot AI repos. Real use cases. What people build. Get the Monday 5

How to use Oa Design: what you can do with it

What is 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.

How do I use it? Open a terminal in your project folder; then run npx getopen-design list to see the available recipes; run npx getopen-design add tab-bar toast to copy those recipes into ./oa-design. Full steps below.

Trended earlier

View repo on GitHub

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer

What do you want to do?

4 use cases

  • Add tested UI recipes to a React project

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

    View prompt
    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.

  • Teach Claude Code the Open Analytics design rules

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

    View prompt
    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.

  • Make Cursor or Codex follow one design file

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

    View prompt
    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.

  • Port the token CSS and spring constants to your stack

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

    View prompt
    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.

Quick start with Oa Design

  1. Check you have what it needs: npm, for the npx commands; git, for cloning the repository; A React and Tailwind v4 project, which the values were written against (the README says the values are plain CSS and can be ported).
  2. Open OpenLabs-so/oa-design on GitHub and read the README and license.
  3. Open a terminal in your project folder.
  4. Run npx getopen-design list to see the available recipes.
  5. Run npx getopen-design add tab-bar toast to copy those recipes into ./oa-design.
  6. Ask your agent to import the copied components into one page and check the result in your dev server.

These steps come from our top use case, Add tested UI recipes to a React project, which also has a copy-paste agent prompt.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for OpenLabs-so/oa-design

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Best AI repos for Software and DevOps

About this repo

  • Who it is forFront-end developers and AI coding agents who need to build UI that matches the Open Analytics look and motion.
  • Why it is hot134 stars, launched 71 days ago
  • LanguageTypeScript
  • Sourcegithub.com/OpenLabs-so/oa-design ยท Back to Hot repos

Requirements

  • npm, for the npx commands
  • git, for cloning the repository
  • A React and Tailwind v4 project, which the values were written against (the README says the values are plain CSS and can be ported)
  • A coding agent such as Claude Code, Cursor, or Codex, if you want the agent to apply the design

Add this badge to your README

Maintain Oa Design? Show readers where to find these use cases. Use cases on Deduped

Markdown 

[![Use cases on Deduped](https://dedupedai.com/badge/OpenLabs-so/oa-design.svg)](https://dedupedai.com/use-cases/openlabs-so-oa-design/?utm_source=github&utm_medium=badge&utm_campaign=OpenLabs-so-oa-design)

HTML 

<a href="https://dedupedai.com/use-cases/openlabs-so-oa-design/?utm_source=github&amp;utm_medium=badge&amp;utm_campaign=OpenLabs-so-oa-design"><img src="https://dedupedai.com/badge/OpenLabs-so/oa-design.svg" alt="Use cases on Deduped" height="20"></a>

A static image, no tracking script. About the badge

Questions about Oa Design

What is 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. It is an open-source project on GitHub: https://github.com/OpenLabs-so/oa-design.

How do I use Oa Design?

Open a terminal in your project folder; then run npx getopen-design list to see the available recipes; run npx getopen-design add tab-bar toast to copy those recipes into ./oa-design. The use cases on this page give the full steps and a copy-paste agent prompt for each job.

Who is Oa Design for?

Front-end developers and AI coding agents who need to build UI that matches the Open Analytics look and motion.

What can I do with Oa Design?

4 use cases so far, for example: Add tested UI recipes to a React project; Teach Claude Code the Open Analytics design rules; Make Cursor or Codex follow one design file. Each has steps and a copy-paste agent prompt.

What do I need to run Oa Design?

npm, for the npx commands; git, for cloning the repository; A React and Tailwind v4 project, which the values were written against (the README says the values are plain CSS and can be ported); A coding agent such as Claude Code, Cursor, or Codex, if you want the agent to apply the design.

What are alternatives to Oa Design?

Other hot AI repos in Software and DevOps: Deep Infer, Harness2, Orca, Opencode, Graphify.

Is Oa Design safe to run?

Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.