What do you want to do?
4 use cases
-
Build a landing page that does not look AI-generated
Load Design Taste and one genre pack so your agent builds a distinct page instead of the default template.
View prompt
Using the design-taste repo, build a landing page for <product brief> in the <genre pack name, for example editorial-minimal> 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.
-
Audit an existing UI with a structured design review
Use the taste-design-review skill to get severity-ranked findings on a page you already have.
View prompt
Using the taste-design-review skill from the design-taste repo, review <target page path or URL> 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.
-
Add scroll animation with GSAP and reduced-motion fallbacks
Use taste-gsap and taste-motion so an agent adds GSAP motion with gating and accessibility built in.
View prompt
Using the taste-gsap and taste-motion skills in the design-taste repo, add a scroll animation to the <section name> of <project path>, with context and matchMedia gating and a reduced-motion fallback. Output the changed files and verify that animation runs only through transform properties.
-
Set up a three-tier design token system for a project
Use taste-design-system so an agent builds primitive, semantic, and component tokens in DTCG format.
View prompt
Using the taste-design-system and taste-code-craft skills from the design-taste repo, create a three-tier DTCG token file for <product brief> and update <stylesheet path> to use only token references. Verify that no hardcoded color, spacing, or type values remain in the stylesheet.
Quick start with Design Taste
- Check you have what it needs: git and a terminal to clone the repo; An AI coding agent such as Claude Code, Codex, Cursor, or opencode; A web browser to open the before and after HTML examples.
- Open madebymustafa/design-taste on GitHub and read the README and license.
- Run
git clone https://github.com/madebymustafa/design-taste.gitand thencd design-taste. - Run
./scripts/install.shto install all 24 skills to the agents it finds, or copy theskills/design-tasteand one genre pack folder into your agent's skills directory. - Open
examples/before.htmlandexamples/after.htmlin a browser to see the difference the skills make. - Pick one genre pack from the catalog, such as
editorial-minimal, and write your brief with the product, copy, and sections.
These steps come from our top use case, Build a landing page that does not look AI-generated, which also has a copy-paste agent prompt.
Use this in your AI agent
Ask your agent
Using the Deduped MCP, get the setup steps for madebymustafa/design-taste
Add Deduped to Claude Code once
claude mcp add --transport http deduped https://dedupedai.com/mcp
Every Monday: the 5 hottest repos and exactly how to use them. Free, one email a week, unsubscribe anytime.
Get them freeAbout this repo
- Who it is forFrontend developers and designers who use Claude Code, Codex, or Cursor to generate web UI and want output that does not follow the default AI look.
- Why it is hot206 stars, launched 76 days ago
- LanguageJavaScript
- Sourcegithub.com/madebymustafa/design-taste · Back to Hot repos
Requirements
- git and a terminal to clone the repo
- An AI coding agent such as Claude Code, Codex, Cursor, or opencode
- A web browser to open the before and after HTML examples
- A brief for the page or interface you want to build
Add this badge to your README
Maintain Design Taste? Show readers where to find these use cases.
Markdown
[](https://dedupedai.com/use-cases/madebymustafa-design-taste/?utm_source=github&utm_medium=badge&utm_campaign=madebymustafa-design-taste)
HTML
<a href="https://dedupedai.com/use-cases/madebymustafa-design-taste/?utm_source=github&utm_medium=badge&utm_campaign=madebymustafa-design-taste"><img src="https://dedupedai.com/badge/madebymustafa/design-taste.svg" alt="Use cases on Deduped" height="20"></a>
A static image, no tracking script. About the badge
Questions about Design Taste
What is 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. It is an open-source project on GitHub: https://github.com/madebymustafa/design-taste.
How do I use Design Taste?
Run git clone https://github.com/madebymustafa/design-taste.git and then cd design-taste; then 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; open examples/before.html and examples/after.html in a browser to see the difference the skills make. The use cases on this page give the full steps and a copy-paste agent prompt for each job.
Who is Design Taste for?
Frontend developers and designers who use Claude Code, Codex, or Cursor to generate web UI and want output that does not follow the default AI look.
What can I do with Design Taste?
4 use cases so far, for example: Build a landing page that does not look AI-generated; Audit an existing UI with a structured design review; Add scroll animation with GSAP and reduced-motion fallbacks. Each has steps and a copy-paste agent prompt.
What do I need to run Design Taste?
git and a terminal to clone the repo; An AI coding agent such as Claude Code, Codex, Cursor, or opencode; A web browser to open the before and after HTML examples; A brief for the page or interface you want to build.
What are alternatives to Design Taste?
Other hot AI repos in Software and DevOps: Deep Infer, Harness2, Orca, Opencode, Graphify.
Is Design Taste 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.