# AI use cases for Design How (arla6ka/design.how)

Repo: [arla6ka/design.how](https://github.com/arla6ka/design.how) | Use cases: 4 | Page: https://dedupedai.com/use-cases/arla6ka-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.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Build a design system from your existing app UI: https://dedupedai.com/use-cases/arla6ka-design-how/build-design-system-from-app/
- Move every app screen onto a design system safely: https://dedupedai.com/use-cases/arla6ka-design-how/migrate-screens-to-design-system/
- Block new UI drift in CI with a design system check: https://dedupedai.com/use-cases/arla6ka-design-how/add-ci-check-for-ui-drift/
- Find what is actually broken on a screen or flow: https://dedupedai.com/use-cases/arla6ka-design-how/review-screen-for-broken-states/

## How to build a design system from your existing app UI with Design How

Repo: [arla6ka/design.how](https://github.com/arla6ka/design.how) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README

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

**Who it is for:** A frontend developer whose app has three buttons, dozens of grays and a token file that half the code ignores, and who wants one system an agent can follow.

**The problem:** Agents copy whatever is in the repo, so every new screen picks a different button, gray or spacing value.

**The outcome:** A tokenized system with one canonical component per family, docs, checks, and one real flow moved onto it, on a new run branch.

### Steps

1. Run `npx skills@latest add arla6ka/design.how` in your app repository to install the six skills.
2. Open your coding agent in the repo and describe what is wrong in plain words, then ask it to run design-system-boss.
3. Let the agent build tokens, components and docs with build-design-system, and review the flow it proves the system on.
4. Check the CI check it adds, and read the migration size it offers before deciding on a full migration.

### Prompt to paste into your agent

```text
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.
```

### Caveat

The README says merging is your call and the skills never commit to your default branch, so you still review and merge the run branch yourself.

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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/arla6ka-design-how/build-design-system-from-app/

## How to move every app screen onto a design system safely with Design How

Repo: [arla6ka/design.how](https://github.com/arla6ka/design.how) | Difficulty: Advanced | Time: 2 hours | Basis: From the README

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

**Who it is for:** A team lead with an established app who has already built or picked a design system and needs every screen moved onto it without manual restyling.

**The problem:** Restyling dozens of screens by hand is slow, and visual regressions are easy to miss.

**The outcome:** An audit of what needs to change, then a migration where each screen is compared with its before screenshot on a new run branch.

### Steps

1. Install the skills with `npx skills@latest add arla6ka/design.how`.
2. Ask your agent to run migrate-design-system in audit mode first, so it writes only its own notes under `.design-system/` and commits nothing.
3. Read the audit notes and confirm the mapping of hex codes and pixel values to tokens made by token-mapping.
4. Run the full migration, then review each screen against its before screenshot on the run branch.
5. Merge the run branch yourself once you accept the results.

### Prompt to paste into your agent

```text
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.
```

### Caveat

Browser-driven checks need Playwright and a Chromium, so the migration will not run its screenshot comparisons without them.

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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/arla6ka-design-how/migrate-screens-to-design-system/

## How to block new UI drift in CI with a design system check with Design How

Repo: [arla6ka/design.how](https://github.com/arla6ka/design.how) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README

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

**Who it is for:** A developer on a team whose new screens keep adding one-off colors and spacing after the design system is in place.

**The problem:** Without an automatic check, every new screen can quietly pick a different gray, radius or button.

**The outcome:** A check script that fails when a screen drifts from the system, run locally and in CI.

### Steps

1. Install the skills with `npx skills@latest add arla6ka/design.how --skill build-design-system`.
2. Locate `check-system.mjs` in the installed build-design-system skill folder and run it with `--help` to read its options. (inferred, check the README)
3. Run `check-system.mjs --self-test` to confirm the script works in your environment. (inferred, check the README)
4. Add the same check command as a step in your CI configuration so it runs on each pull request. (inferred, check the README)

### Prompt to paste into your agent

```text
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.
```

### Caveat

The README names check-system.mjs and says the system can be enforced in CI, but it does not show the CI configuration, so the exact wiring is up to you.

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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/arla6ka-design-how/add-ci-check-for-ui-drift/

## How to find what is actually broken on a screen or flow with Design How

Repo: [arla6ka/design.how](https://github.com/arla6ka/design.how) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

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

**Who it is for:** A product designer or developer about to release a flow who wants a review of real problems, not a list of style opinions.

**The problem:** Screenshots hide loading, error and empty states, so visual review alone misses real breakage.

**The outcome:** A ranked list of the issues that matter in a screen or flow, including states beyond the default view.

### Steps

1. Install the skills with `npx skills@latest add arla6ka/design.how --skill ui-review`. (inferred, check the README)
2. Ask your agent to review the screen or flow you name.
3. Read the ranked findings and fix the top items first.

### Prompt to paste into your agent

```text
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.
```

### Caveat

The README says ui-review ranks what is actually broken, but a review still depends on the screen and states your agent can reach in the app.

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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/arla6ka-design-how/review-screen-for-broken-states/