{
 "schema_version": 1,
 "generated": "2026-10-20",
 "repo": "arla6ka/design.how",
 "name": "design.how",
 "owner": "arla6ka",
 "slug": "arla6ka-design-how",
 "github": "https://github.com/arla6ka/design.how",
 "what": "A set of agent skills and three shadcn-compatible design systems (Glaze, Lime, Quartz) that help coding agents turn an app's existing UI into a design system, migrate screens onto it, and check for drift.",
 "why": "",
 "language": "TypeScript",
 "requirements": [
  "A coding agent that reads skills, such as Claude Code",
  "Node.js, since the install and scripts run through npx and node",
  "Your app in a git repository, since the skills commit to a run branch",
  "Playwright and a Chromium browser for the scripts that drive a browser"
 ],
 "audience_note": "Frontend developers and product teams with an existing app whose UI has grown inconsistent, who use a coding agent to build or change screens.",
 "risk": "none",
 "section": "earlier",
 "weekly_rank": null,
 "category": "Software and DevOps",
 "url": "https://dedupedai.com/use-cases/arla6ka-design-how/",
 "use_case_count": 4,
 "use_cases": [
  {
   "id": "arla6ka-design-how--build-design-system-from-app",
   "title": "Build a design system from your existing app UI",
   "best": true,
   "url": "https://dedupedai.com/use-cases/arla6ka-design-how/build-design-system-from-app/",
   "json": "https://dedupedai.com/use-cases/u/arla6ka-design-how/build-design-system-from-app.json"
  },
  {
   "id": "arla6ka-design-how--migrate-screens-to-design-system",
   "title": "Move every app screen onto a design system safely",
   "best": false,
   "url": "https://dedupedai.com/use-cases/arla6ka-design-how/migrate-screens-to-design-system/",
   "json": "https://dedupedai.com/use-cases/u/arla6ka-design-how/migrate-screens-to-design-system.json"
  },
  {
   "id": "arla6ka-design-how--add-ci-check-for-ui-drift",
   "title": "Block new UI drift in CI with a design system check",
   "best": false,
   "url": "https://dedupedai.com/use-cases/arla6ka-design-how/add-ci-check-for-ui-drift/",
   "json": "https://dedupedai.com/use-cases/u/arla6ka-design-how/add-ci-check-for-ui-drift.json"
  },
  {
   "id": "arla6ka-design-how--review-screen-for-broken-states",
   "title": "Find what is actually broken on a screen or flow",
   "best": false,
   "url": "https://dedupedai.com/use-cases/arla6ka-design-how/review-screen-for-broken-states/",
   "json": "https://dedupedai.com/use-cases/u/arla6ka-design-how/review-screen-for-broken-states.json"
  }
 ],
 "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."
}