Taste Skill Frontend Design
Makes the agent design distinctive, non-generic websites and app screens using researched art directions and visual checks
- 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”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 14 original files, the MIT licence and an attribution note.
taste-skill.zip - 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
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.