Skip to content
Get packs

Taste Skill Frontend Design

Makes the agent design distinctive, non-generic websites and app screens using researched art directions and visual checks

Source Download skill
Repository
Leonxlnx/taste-skill
Stars
108,268
Licence
MIT
Files
14 files

What it does

When installed, the agent stops producing the typical templated AI-made web page and instead follows a structured process: it deals a few researched art directions from a bundled library, picks one tied to the client's real subject, sets type, colour and layout from the library, and then checks the result in a real browser by taking screenshots and reviewing them against a rubric. It also has a separate workflow for app screens such as dashboards and settings, with its own rules and chart helpers.

Great for

  • Developers who need a landing page or portfolio that does not look like a generic template
  • Designers who want a quick, structured set of art direction options to react to
  • Marketers building a product or event one-pager with a distinct look

Skip it if

  • Teams that already have a strict brand system, since the skill pushes its own house style and may override it
  • Sites that must work fully offline or without third-party scripts, because optional motion features load code from a CDN
  • Users who expect a finished design with no review, since the skill relies on the agent checking screenshots and the results still need human judgment

Try asking

  • “Design a landing page for my bakery's new sourdough subscription, make it feel specific to the place, not generic”
  • “Redesign this portfolio site so it looks premium and less like every other template”
  • “Build a dashboard screen for our billing admin view using the app-screen rules”
  • “Review this one-pager and fix anything that looks AI-made or sloppy”
Step-by-step guide: how to use Taste Skill Frontend DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 14 original files, the MIT licence and an attribution note.

    taste-skill.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip taste-skill.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip taste-skill.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State the product, audience and one call to action up front so the art direction has a real subject to work from
  • Provide real photos or product shots if you have them; the skill says it cannot plan around images that do not exist
  • Review the generated screenshots yourself before publishing, since the rubric is a guide and not a guarantee

What's inside

  • assets/app.css
  • assets/base.css
  • assets/base.js
  • assets/charts.js
  • assets/scenes/stage.css
  • assets/scenes/stage.js
  • evals/evals.json
  • library/motions.json
  • library/palettes.json
  • README.md
  • references/colour.md
  • references/copy.md
  • references/critique.md
  • SKILL.md

Redistributed unmodified from Leonxlnx/taste-skill under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.