How to install Taste Skill into Claude Code and Codex: SKILL.md placement, calling and front-end design examples

Place the Taste Skill into a Claude Code or Codex discoverable Skills directory, verify SKILL.md metadata and calling scope, and iterate on design constraints with minipages.

The function of Taste Skill is to add aesthetic constraints on layout, font, density and interaction to AI front-end generation. When installing it, the most important thing is to make SKILL.md discoverable by the client and have the project task actually trigger the Skill, rather than just downloading the file to an arbitrary directory.

Read SKILL.md before installation

Start by reviewing the skill’s name, description, applicable tasks, and referenced resources. Think of it as a workflow description, not a prompt word that can be copied randomly onto the page. For the complete background, see How to use Taste Skill.

Principles of placement

Claude Code, Codex and Skills discovery directories may differ between desktop/CLI versions, so the documentation and settings of the client you are using should prevail. Generally there are two ranges:

  • User-level directory: Can be reused in multiple projects, suitable for common design constraints.
  • Project-level directory: Only effective for the current warehouse, suitable for constraints related to brand, component library and design system.

The complete Skill directory structure is preserved when copying, including SKILL.md and the references, templates, or scripts it references. Copying only one Markdown file may result in the referenced resource not being found.

How to verify that it has been discovered

After restarting or reopening the client, check its list of available Skills, startup log, or task description. Then test with a small page, such as “Adjust information level and spacing for existing forms” and explicitly ask to follow the Taste Skill. If the output still completely ignores the design constraints, first check the name, directory, and preconditions instead of immediately expanding the prompt word.

A safe way to iterate

  1. Experiment with existing pages or widgets without directly rewriting the entire site UI.
  2. First constrain a dimension, such as typography density or button hierarchy.
  3. Acceptance results via screenshots, design specifications, or existing components.
  4. Confirm stability before expanding to animation, color, and responsive details.

Taste Skills are not a substitute for product needs, accessibility requirements, and real design reviews. It is responsible for reducing the “template feel” and does not guarantee that the page automatically matches the brand or business goals.

If you are ready to write your own team skills, you can combine [Codex Skills workflow writing method] (/en/2026/07/10/codex-skills-custom-workflow-guide/) to organize reusable trigger conditions and acceptance lists.

Summary

The key to installing the Taste Skill is the correct directory, complete resources, and verifiable calls. Trial it on a small scale first, and then settle stable design constraints into the project-level workflow. The effect is usually more reliable.

Pre-installation checklist

Before copying, confirm that the source of the skill is trustworthy, the license meets project requirements, and the referenced resources can be read. A usable Skill should at least have a clear name and purpose; if it requires images, templates, or scripts, the directory structure must be preserved together. Don’t just copy the README content into the project and assume that clients can find it.

For user-level installation, it is suitable for the general constraint of “all front-end projects want to reduce the sense of templates”; for project-level installation, it is suitable for binding existing design systems, color tokens, component directories and acceptance methods. Team projects prefer to use project-level versions and review changes through Git.

Let the task actually trigger the Taste Skill

Just because a skill is discovered does not mean that it will be used in every task. When writing a task, you should also give the page goal, retention scope, and visual constraints, such as “Keep the existing component API and only adjust the information level, spacing, and mobile density.” If you only say “it looks good”, the model lacks verifiable standards, and it will be difficult for any skill to perform stably.

You can also write acceptance conditions into the task:

  • Key interactions and form fields are not changed;
  • The levels of title, text, and auxiliary information can be distinguished;
  • No horizontal overflow occurs on narrow screens;
  • Color contrast, focus state and button text are still accessible;
  • Do not add large, uncensored dependencies.

An example of front-end transformation

Let’s say the page has a title, two paragraphs of description, a search box, and a set of results cards. The first round only requires adjusting the reading order and white space; the second round will deal with card density and status color; the third round will check 320px to the desktop width. Only change a small piece each round, and use actual content instead of blank placeholders for screenshots for acceptance.

This approach is more suitable for production projects than “redoing the entire page into a high-level design”: the differences are small, rollback is easy, and you can see if the Taste Skill’s rules conflict with the existing component library.

Common reasons for failure

Phenomenon Possible causes Solutions
Skill not visible to client Catalog or metadata does not comply with discovery rules Check client settings and SKILL.md
The output changes very little The task has no trigger conditions or the constraints are unclear The Skill and acceptance items are clearly required to be adopted
Output destroyed components Skill conflicts with project specifications Added “Keep API/Only change style” restriction
Different style every time Missing design tokens and references Supplementary specifications in project-level resources

FAQ: Can Taste Skill replace a designer?

cannot. It allows AI to better adhere to aesthetic and typographic constraints, but brand strategy, content prioritization, accessibility, and user research still need to be judged by the team.

FAQ: Can it be used with other Skills?

Yes, but with separate responsibilities: one responsible for design constraints and one responsible for testing, accessibility, or framework specifications. Avoid multiple Skills from rewriting the same layer of rules at the same time.

记录并分享
Built with Hugo
Theme Stack designed by Jimmy