design-taste-frontend
Helps your agent create modern, 'lean' website designs. It analyzes award-winning sites to define styles, typography, and layouts, ensuring a professional look.
What it does
This tool helps create the look of a website. It suggests design styles based on real websites and helps choose the best one for your project, ensuring the design is unique and suitable for the subject matter.
When to use it
- ✓When you want a website to have a unique and memorable look.
- ✓When creating a website for a specific business or project and want the design to reflect its identity.
- ✓If you are unsatisfied with the generic designs that AI tools often create.
Example of what to ask your AI
“Create a design for a website for an artisanal coffee shop located on a historic street.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool analyzes many successful websites and offers several style options. You choose the one that best represents your project's idea. Then, it helps define colors, fonts, and how to organize the website's sections.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add Leonxlnx/taste-skill --skill design-taste-frontendOr download just the file:
curl -L https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
tasteskill v2
A page built by a model usually looks like the average of every page the model has seen: a centred headline over three lines, a little label above it, a row of icon cards, a soft gradient, a few thin rules and a monospace caption. Nothing in it is wrong and nothing in it was decided.
This skill replaces those defaults with decisions, in four ways:
- A script deals the directions, you choose among them. Asked to invent a look, a model picks
the category default every time.
scripts/draw.mjsdeals three of twenty researched directions; you choose the one that carries the subject's idea, and the script then deals its type system, palette, hero and section compositions from a library distilled from 247 real sites. - The idea comes from the subject. In the study, what separated the best sites from the forgettable ones was a concept taken from the thing itself, not the styling.
- A house style with no ornaments, measured in a real browser by
scripts/inspect.mjs, so the rules are checked rather than hoped for. - You look at what you made. Screenshots at three widths, a juror's rubric, fix, look again.
One warning learned in testing. Taking the ornaments away is only half the job; a page that has lost its labels, rules and cards and gained nothing in their place reads as thin, and blind jurors rightly prefer a richer page with tells over an empty page without them. The other half is substance: type set larger, whole fields of colour, real pictures of this subject's world (found or drawn), and every section carrying its full content. The skill is built to give you that; do not trade it for restraint.
In the commands below <skill> is this skill's folder. Run them from the project's root, so the
working files land in .taste-skill/ there. The scripts need Node 22+ and an installed Chrome, Edge
or Chromium, and install nothing. assets.mjs also needs network access; it uses no API keys.
The run
Do these in order. Steps 1–5 take a few minutes and decide whether the page is any good.
1. Read the brief and the project
Find out what is real: the subject, the audience, the one thing the page must get someone to do, the
stack, any existing brand (colours, fonts, logo), and above all what imagery truly exists: the
project's own photographs or product shots, a real interface that can be shown, an image generation
tool you can call, or nothing. Do not plan around pictures you do not have. Nothing of its own is
rarely nothing at all: the subject's city, street, materials and history are in open archives and
museums, free to use with a credit (step 6, scripts/assets.mjs).
If the request is vague, decide and state your reading in one line instead of asking. Ask only when a missing fact blocks the work (for example, no product name).
Then inventory the subject in your notes: eight to twelve things that belong to this client and to no competitor. Look for its name and what the name means; its address, door number, street and neighbourhood, and what that place looks like (its tiles, signs, paint colours, typefaces on its shop fronts, its light, its weather); the numbers in the brief (seats, rooms, minutes to the sea, the price, the year); the constraint it lives with (only one batch a month, closed in winter, by appointment); its materials and colours; its rituals and hours (the oven lit at five, the ferry at seven); the printed things of its world (a timetable, a label, a ticket, a sign). This list is where the idea comes from in step 4. In blind tests, the page that won each brief was built from an item on such a list (the client's name and what it means, the street it stands in, the one constraint that makes it what it is), and the pages that lost had a good composition with a category idea. The list is also your picture search: each place, material and printed thing on it is a query for step 6.
2. Write the argument
Before any design, list the page as claims with their proof, one line per section, the way
references/copy.md §1 shows. The claims decide which sections exist and in what order. Delete any
section that has no claim. This is how you avoid the stock sequence of hero, logos, three features,
testimonial, pricing, call to action.
3. Draw the direction
node <skill>/scripts/draw.mjs --sector <sector> --brief "<one line about the subject>" \
…
FAQ
What does 'no jargon' or 'anti-slop' mean?
It means the generated design will not have unnecessary or generic elements, focusing on a clean, direct, and purposeful style, avoiding the 'common' look that many tools create.
Do I need to know how to code to use this?
No, this tool is designed for non-programmers. It uses simple language for you to choose your website's style.
How does it ensure the design is unique?
It is based on award-winning website examples and allows you to choose options that reflect your project's identity, rather than using a generic template.
Details
Original description by the author
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use t
repo: Leonxlnx/taste-skill
Popularity
- GitHub stars
- 97k
- Ranking position
- #839
- License
- MIT
- Updated
- 10/14/2026
Comments
- …
More skills from this repository
brandkit
Creates high-quality images for brand kits. It helps develop logos, visual identity systems, and brand presentations.
Leonxlnx/taste-skill
industrial-brutalist-ui
Develops interfaces with an industrial and brutalist style. It's perfect for data-heavy dashboards or sites that need a technical look.
Leonxlnx/taste-skill
gpt-taste
Improves user experience and website animation. It ensures varied layouts, readable typography, and smooth animations for pleasant navigation.
Leonxlnx/taste-skill
image-to-code
Transforms images into website code. It creates the design, analyzes it, and builds the website to match the image as closely as possible.
Leonxlnx/taste-skill
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC