如何用 Taste Skill 讓 Claude Code 按美術指導建立登陸頁面

Ask a coding agent for a landing page and you usually get the same page: a gradient hero, three feature cards, a stock-looking footer. Taste Skill is an Agent Skill that tries to fix that. Per its README, it gives the agent an art direction, real credited pictures, and a way to check its own work in a real browser. Here is the Claude Code route, using the commands from the README. The short version lives on the Deduped use-case page.

What it does

The README describes a build that runs in steps. The skill reads your brief and lists what only your client has (product, story, materials). A script then deals three art directions, you pick one, and the agent builds with real photographs found in open archives. The skill credits those photos. Finally it checks the result in a real browser at three widths and fixes the top problems for up to three rounds.

The point is that the page is built from your specifics, not an average of every landing page the model has seen.

Requirements

Per the README, the skill runs its scripts with Node 22 or newer and needs an installed Chrome, Edge or Chromium. It installs nothing else and needs no API keys. Finding pictures needs network access.

Install in Claude Code

Run these inside Claude Code:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

The skill is namespaced under taste-skill:, so it will not collide with your other skills. /plugin update upgrades it later.

If you prefer the skills CLI, the README gives this instead:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Codex users have a plugin route too:

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

Start a new Codex session afterwards so the skill loads.

Write a brief that has something in it

The skill works best when the brief lists what only this client has. Compare:

• Weak: "A landing page for a coffee roaster."
• Better: "A landing page for a two-person roaster in Lisbon. They roast on a 1970s Probat, sell only single-origin beans from three farms, and ship on Mondays. Customers are mostly returning subscribers."

The second brief gives the skill real material for the art direction step and for choosing pictures.

Run it

Prompt Claude Code something like:

Use the taste-skill design-taste-frontend skill to build a landing page for from this brief: . Pick one of the dealt directions, credit every photo, and show me the screenshots from each check round.

Then do three things:

1. Look at the three directions it deals and choose one on purpose rather than accepting the first.
2. Open the credits file it produces and confirm the photos have open licenses.
3. Read the screenshots from each check round, so you see what it found and fixed.

Things to know

• A build takes roughly 30 to 45 minutes and a few hundred thousand tokens, so check your plan limits before starting.
• It builds from a brief, so vague input gives vague output.
• You still review the page. A browser check at three widths catches layout problems, not whether the copy is true.
• Pin to a version you trust if you rely on it for client work, and run /plugin update deliberately.

If your agent keeps handing you generic pages, this is a 45 minute experiment: install the plugin, write one specific brief, and compare the result with what you got before. For other ways to steer Claude Code, see the Deduped page on stopping Claude Code from overengineering.

Want the setup commands for 50 AI repos people actually ship with? Get the free AI Repos That Actually Ship pack: https://dedupedai.com/ship-pack/?utm_source=devto&utm_medium=article&utm_campaign=shippack