# AI use cases for Design Taste (madebymustafa/design-taste) Repo: [madebymustafa/design-taste](https://github.com/madebymustafa/design-taste) | Use cases: 4 | Page: https://dedupedai.com/use-cases/madebymustafa-design-taste/ design-taste is a set of 24 open-source agent skills that give AI coding agents design rules, genre identities, and code and review checklists so the interfaces they generate look deliberately designed. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Build a landing page that does not look AI-generated: https://dedupedai.com/use-cases/madebymustafa-design-taste/generate-non-generic-landing-page/ - Audit an existing UI with a structured design review: https://dedupedai.com/use-cases/madebymustafa-design-taste/audit-existing-ui-for-design-issues/ - Add scroll animation with GSAP and reduced-motion fallbacks: https://dedupedai.com/use-cases/madebymustafa-design-taste/add-gsap-motion-with-reduced-motion-safety/ - Set up a three-tier design token system for a project: https://dedupedai.com/use-cases/madebymustafa-design-taste/build-token-based-design-system/ ## How to build a landing page that does not look AI-generated with Design Taste Repo: [madebymustafa/design-taste](https://github.com/madebymustafa/design-taste) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Load Design Taste and one genre pack so your agent builds a distinct page instead of the default template. **Who it is for:** A founder or frontend developer who asks an AI agent for a landing page and gets the same indigo gradient, centered hero, and three feature cards every time. **The problem:** Default agent output follows one recognizable template, so the page looks generated and not designed. **The outcome:** A landing page built in one chosen genre identity, such as editorial-minimal or cinematic-motion, following the core Design Taste rules. ### Steps 1. Run `git clone https://github.com/madebymustafa/design-taste.git` and then `cd design-taste`. 2. Run `./scripts/install.sh` to install all 24 skills to the agents it finds, or copy the `skills/design-taste` and one genre pack folder into your agent's skills directory. 3. Open `examples/before.html` and `examples/after.html` in a browser to see the difference the skills make. 4. Pick one genre pack from the catalog, such as `editorial-minimal`, and write your brief with the product, copy, and sections. 5. Ask your agent to build the page with the core skill and the chosen genre pack loaded, then open the result in a browser and compare it with the default example. ### Prompt to paste into your agent ```text Using the design-taste repo, build a landing page for in the identity, applying the design-taste core skill. Output one HTML file and confirm it avoids the default indigo gradient, centered hero, and three feature cards pattern. ``` ### Caveat The README shows before and after examples but does not promise a specific result for your own brief, so check the output against your own needs. 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/madebymustafa-design-taste/generate-non-generic-landing-page/ ## How to audit an existing UI with a structured design review with Design Taste Repo: [madebymustafa/design-taste](https://github.com/madebymustafa/design-taste) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Use the taste-design-review skill to get severity-ranked findings on a page you already have. **Who it is for:** A product designer or developer who inherits a page or prototype and needs a clear list of design, usability, and accessibility problems before a release. **The problem:** Reviewing a UI by eye misses heuristic and accessibility issues, and findings are hard to prioritize. **The outcome:** A written review that moves through capture, taste pass, Nielsen heuristics, accessibility pass, and severity-ranked findings. ### Steps 1. Run `git clone https://github.com/madebymustafa/design-taste.git` and then `cd design-taste`. 2. Run `./scripts/install.sh` or copy the `skills/taste-design-review` folder into your agent's skills directory. 3. Point your agent at the page or running build you want reviewed, using the local path or URL. 4. Ask the agent to run the taste-design-review skill and to return findings in severity order. 5. Read each finding, fix the highest severity items first, and rerun the review to confirm they are resolved. ### Prompt to paste into your agent ```text Using the taste-design-review skill from the design-taste repo, review and return severity-ranked findings covering the taste pass, Nielsen heuristics, and the accessibility pass. Verify that each finding names the element it refers to. ``` ### Caveat The skill defines the review order, but the README does not say how the agent should load or render your page, so confirm the agent can access it. 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/madebymustafa-design-taste/audit-existing-ui-for-design-issues/ ## How to add scroll animation with GSAP and reduced-motion fallbacks with Design Taste Repo: [madebymustafa/design-taste](https://github.com/madebymustafa/design-taste) | Difficulty: Advanced | Time: 60 minutes | Basis: From the README Use taste-gsap and taste-motion so an agent adds GSAP motion with gating and accessibility built in. **Who it is for:** A frontend developer building a marketing or product page who wants scroll-driven motion without janky pins or ignored reduced-motion settings. **The problem:** Agent-written GSAP code often skips context gating, pin and scrub hygiene, and reduced-motion handling. **The outcome:** A page section with GSAP animation that uses context and matchMedia gating, transform-only motion, and a reduced-motion fallback. ### Steps 1. Run `git clone https://github.com/madebymustafa/design-taste.git` and then `cd design-taste`. 2. Run `./scripts/install.sh` or copy the `skills/taste-gsap` and `skills/taste-motion` folders into your agent's skills directory. 3. Install the GSAP library in your project following the GSAP documentation, since the README does not describe how to add it. (inferred, check the README) 4. Ask your agent to add the animation to one section and to apply the taste-gsap and taste-motion rules. 5. Test the page with the operating system reduced-motion setting turned on and confirm the fallback appears. ### Prompt to paste into your agent ```text Using the taste-gsap and taste-motion skills in the design-taste repo, add a scroll animation to the
of , with context and matchMedia gating and a reduced-motion fallback. Output the changed files and verify that animation runs only through transform properties. ``` ### Caveat The README lists GSAP craft rules but does not say which GSAP version or setup the skill expects, so check your project's GSAP setup first. 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/madebymustafa-design-taste/add-gsap-motion-with-reduced-motion-safety/ ## How to set up a three-tier design token system for a project with Design Taste Repo: [madebymustafa/design-taste](https://github.com/madebymustafa/design-taste) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Use taste-design-system so an agent builds primitive, semantic, and component tokens in DTCG format. **Who it is for:** A design system lead or frontend developer starting a new product who wants consistent colors, spacing, and type tokens across agent-built screens. **The problem:** Agents hardcode values inline, so styles drift and no single source controls the look. **The outcome:** A token file in DTCG format with primitive, semantic, and component tiers, plus spacing and type scales. ### Steps 1. Run `git clone https://github.com/madebymustafa/design-taste.git` and then `cd design-taste`. 2. Run `./scripts/install.sh` or copy the `skills/taste-design-system` and `skills/taste-code-craft` folders into your agent's skills directory. 3. Ask your agent to create the three token tiers with the taste-design-system skill for your product brief. 4. Ask the agent to make the CSS use only token references, following taste-code-craft. 5. Run `./scripts/validate.sh` from the repo to check the skill files, then review the token output. ### Prompt to paste into your agent ```text Using the taste-design-system and taste-code-craft skills from the design-taste repo, create a three-tier DTCG token file for and update to use only token references. Verify that no hardcoded color, spacing, or type values remain in the stylesheet. ``` ### Caveat The README says validate.sh checks skills before a release, not the tokens your agent produces, so review the token file 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/madebymustafa-design-taste/build-token-based-design-system/