DEDUPED Hot AI repos, turned into use cases Get 5 a day

What you can do with Design How

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.

Trended earlier

arla6ka/design.how on GitHub

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.

What do you want to do?

4 use cases

  • Build a design system from your existing app UI

    Turn the screens your app already ships into tokens, components, docs and checks.

    View prompt
    In the arla6ka/design.how skills installed in this repo, run design-system-boss on <target app path>. Report the tokens, canonical components, docs and CI check it creates, plus the run branch name. Verify that no commit landed on the default branch.

  • Move every app screen onto a design system safely

    Migrate all routes with parallel workers, each checked against its before screenshot.

    View prompt
    Using migrate-design-system from the arla6ka/design.how skills in this repo, run audit mode on <target app path> and write the results under .design-system/. Expected output: a list of screens and values to change. Verify that no commits were made in audit mode.

  • Block new UI drift in CI with a design system check

    Fail the build when a screen stops following the design system's tokens and components.

    View prompt
    In the arla6ka/design.how repo's build-design-system skill, find check-system.mjs, run its --help and --self-test, then add a CI step in <target CI config path> that runs it. Expected output: a passing self-test and a CI step. Verify the step fails on a deliberately drifted screen.

  • Find what is actually broken on a screen or flow

    Get a ranked review of a screen, including states a screenshot misses.

    View prompt
    Using the ui-review skill from the arla6ka/design.how repo, review <target screen or flow> in this app. Expected output: a ranked list of broken items, including states a screenshot would miss. Verify that each item names a specific state or element you can reproduce.

How to use Design How

  1. Check you have what it needs: 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.
  2. Open arla6ka/design.how on GitHub and read the README and license.
  3. Run npx skills@latest add arla6ka/design.how in your app repository to install the six skills.
  4. Open your coding agent in the repo and describe what is wrong in plain words, then ask it to run design-system-boss.
  5. Let the agent build tokens, components and docs with build-design-system, and review the flow it proves the system on.
  6. Check the CI check it adds, and read the migration size it offers before deciding on a full migration.

These steps come from our top use case, Build a design system from your existing app UI, which also has a copy-paste agent prompt.

Design How alternatives · Best AI repos for Software and DevOps

About this repo

  • Who it is forFrontend developers and product teams with an existing app whose UI has grown inconsistent, who use a coding agent to build or change screens.
  • Why it is hot
  • LanguageTypeScript
  • Sourcegithub.com/arla6ka/design.how · Back to Hot repos

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
Maintain Design How? Add the Featured on Deduped badge

Paste this into your README:

[![Featured on Deduped](https://dedupedai.com/badge/arla6ka-design-how.svg)](https://dedupedai.com/use-cases/arla6ka-design-how/?ref=badge)

More badge styles and HTML

Questions about Design How

What is Design How?

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. It is an open-source project on GitHub: https://github.com/arla6ka/design.how.

Who is Design How for?

Frontend developers and product teams with an existing app whose UI has grown inconsistent, who use a coding agent to build or change screens.

What can I do with Design How?

4 use cases so far, for example: Build a design system from your existing app UI; Move every app screen onto a design system safely; Block new UI drift in CI with a design system check. Each has steps and a copy-paste agent prompt.

What do I need to run Design How?

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.

What are alternatives to Design How?

Other hot AI repos in Software and DevOps: Harness2, iFixAi, Orca, Diagram Design, AI Memory.

Is Design How 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.