How to use the Taste Skill Frontend Design agent skill

What the skill makes the agent do

Without the skill, a model tends to produce the average of the pages it has seen. The skill replaces those default choices with recorded decisions. A script deals three researched art directions from a bundled library; you or the agent pick the one that suits the client's subject, and the script then supplies type, palette, hero and section layouts from the same library.

The skill also asks the agent to write the page's argument before designing, to list what belongs to this client alone, and to inspect the built page in a real browser at several widths, reviewing the screenshots against a rubric and fixing problems. A separate workflow covers app screens such as dashboards and settings, with its own rules and chart helpers.

• Deals a few art directions and picks one tied to the subject
• Sets type, colour and layout from the bundled library
• Checks the rendered page in a browser with screenshots and a review rubric
• Has its own workflow for app screens such as dashboards and settings

Install the skill from the ZIP

Download the ZIP for skills/taste-skill from this page and unzip it. The folder must be named design-taste-frontend and contain SKILL.md at its top level. Then choose one of the two locations below.

For a personal install that works in every project, place the folder in your user skills directory. For a single project, place it inside that project's .claude/skills/ folder so it travels with the repository.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal: unzip into ~/.claude/skills/ so the result is ~/.claude/skills/design-taste-frontend/SKILL.md
• Project: unzip into <your project>/.claude/skills/ so the result is <your project>/.claude/skills/design-taste-frontend/SKILL.md
• Claude apps: Settings → Capabilities → Skills, then upload the skill

Check what you need before running it

The skill's scripts need Node.js 22 or newer and an installed copy of Chrome, Edge or Chromium, used for the inspection and screenshot steps. The scripts install nothing themselves. The asset search script needs network access but no API keys.

Some motion features load GSAP and Lenis from a CDN, so they are optional and only apply when those libraries are present in the page.

• Node.js 22 or newer
• Chrome, Edge or Chromium installed
• Network access for the asset search script (no API keys)
• Optional CDN-loaded GSAP and Lenis for scroll animation

Trigger the skill with a natural request

You do not need a special command. Ask for the page in ordinary words. The skill's description covers landing pages, marketing sites, portfolios, product pages, one-pagers and heroes in common stacks such as HTML/CSS, React, Next.js, Vue, Svelte, Astro and Tailwind. It also covers requests that say a page looks generic or templated, and app screens such as dashboards and settings.

Give the agent the subject, the audience and the one action the page should drive. The more concrete the subject (its name, street, materials, constraints), the more the direction selection has to work with.

• "Build a landing page for our three-room bakery in Lisbon. It should not look like a template."
• "Redesign this portfolio so it looks less like every other designer site."
• "Make a settings screen for our billing app in the same style."
• "Review this product one-pager; it looks generic and AI-made."

Understand the design run

For a page, the agent reads the brief, inventories the subject, writes the argument as one claim per section, runs the draw script to get three directions, chooses one, and then deals the full sheet. It builds the page and then looks at screenshots at three widths. For app screens, the skill's app-screen reference file and its own draw and inspect options apply instead.

The scripts run from your project root and write working files to a .taste-skill/ folder there.

• Read the brief and the project's existing imagery and brand
• Write one claim per section with its proof
• Choose among three dealt directions
• Build, screenshot at three widths, review, fix

Safety notes on scripts and network use

The skill runs scripts and uses the network. The asset search script contacts online sources to find pictures, and it needs network access. Review the scripts in the skill folder before running them if you need to know exactly what they do. Optional motion features load code from a CDN, so a page using them depends on those third-party scripts being reachable.

Do not use this skill where the site must work fully offline or without third-party scripts.

• asset search needs network access
• Optional GSAP and Lenis are loaded from a CDN
• Inspect the skill's scripts before running if your policy requires it

Tips for getting a better result

Supply real material where you have it: photographs, product shots or a live interface. The skill is designed around real imagery and warns against planning around pictures you do not have.

Expect to review the output. The skill relies on the agent checking screenshots, and the results still need human judgment. Treat the chosen direction as something to react to, not a finished design.

• Give the subject's name, place and one constraint
• Provide real photos or product shots if you have them
• Do not expect a finished design without a human review
• If you have a strict brand system, state it, since the skill pushes its own house style