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

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

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

Short answer: Run git clone https://github.com/OpenLabs-so/oa-design in a folder outside your project; then 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; Alternatively, run npx getopen-design skill in your project to install the skill into .claude/skills. All steps.

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.

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

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

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

What you need first

  • 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

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 for your agent

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.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for OpenLabs-so/oa-design and "Teach Claude Code the Open Analytics design rules"

Add Deduped to Claude Code once

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

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

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