{
 "schema_version": 1,
 "generated": "2026-10-30",
 "id": "openlabs-so-oa-design--apply-design-rules-in-cursor-or-codex",
 "repo": "OpenLabs-so/oa-design",
 "repo_url": "https://github.com/OpenLabs-so/oa-design",
 "repo_slug": "openlabs-so-oa-design",
 "title": "Make Cursor or Codex follow one design file",
 "page_title": "How to make Cursor or Codex follow one design file with Oa Design",
 "summary": "Point your agent rules at DESIGN-SKILL.md so every UI change follows the same design language.",
 "who": "A non-specialist builder using Cursor or Codex who styles a small website or app and wants consistent visuals without learning CSS.",
 "problem": "Agent-built pages look different from one prompt to the next because the agent has no shared design reference.",
 "outcome": "The agent reads the full design language in DESIGN-SKILL.md before it styles any UI.",
 "steps": [
  "Open the repository page at https://github.com/OpenLabs-so/oa-design in your browser.",
  "Download DESIGN-SKILL.md and save it in your project folder.",
  "Open your Cursor or Codex rules settings and add this line: When building or styling UI, follow DESIGN-SKILL.md in full.",
  "Ask the agent to restyle one page.",
  "Compare the page with the rules in DESIGN-SKILL.md and ask the agent to fix any mismatch."
 ],
 "agent_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.",
 "agents": [
  "cursor",
  "codex"
 ],
 "difficulty": "Beginner",
 "time": "15 minutes",
 "basis": "readme",
 "caveat": "The README calls DESIGN-SKILL.md a compiled copy of the language, so check it against the repo when you update your project.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "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"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": false,
 "score": 0.8,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/openlabs-so-oa-design/apply-design-rules-in-cursor-or-codex/",
 "md": "https://dedupedai.com/use-cases/openlabs-so-oa-design/apply-design-rules-in-cursor-or-codex/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/openlabs-so-oa-design--apply-design-rules-in-cursor-or-codex.json",
 "api_version": "v1"
}