Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.
Same prompt, different result
Prompt — Design a SaaS homepage for an analytics product called Signal.
Skill markdown
# 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: 1. **A script deals the directions, you choose among them.** Asked to invent a look, a model picks the category default every time. `scripts/draw.mjs` deals 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. 2. **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. 3. **A house style with no ornaments,** measured in a real browser by `scripts/inspect.mjs`, so the rules are checked rather than hoped for. 4. **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 ```bash node <skill>/scripts/draw.mjs --sector <sector> --brief "<one line about the subject>" \ --sections <roles in the order of your argument> [--tone <tone>] [--have <assets>] [--keep palette,type] \ --options 3 ``` This deals three directions and prints a short summary of each. Hold each one against your inventory: which way of composing can carry something only this client has? Choose that one, not the most familiar, and write one line in your notes on why. In testing, a single random direction that did not suit the subject was the commonest cause of a weak page. Then deal the full sheet: ```bash node <skill>/scripts/draw.mjs <the same arguments, without --options> …
More from Leonxlnx
- Design Taste Frontend V1Original v1 taste-skill preserved for backward compatibility; prefer design-taste-frontend (v2) by default.
- BrandkitPremium brand-kit image generation for identity boards, logo systems, and visual-world presentations.
- Industrial Brutalist UIRaw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
- Gpt TasteHigh-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
- Image To CodeImage-first website design-to-code: generate readable section references, then implement to match them closely.
- Imagegen Frontend MobilePremium mobile app image-generation for readable, app-native screen concepts and flows. Images only — no code.