Taste Skill: Installation, Prompts, and Real Website Examples

An AI coding agent can build a working website that still looks familiar: a centered headline, a gradient background, and three matching feature cards. Taste Skill gives the agent more specific guidance on layout, typography, color, motion, and spacing.

Maintained by Leonxlnx, the project packages design instructions in SKILL.md files that compatible coding agents can read. You can use it in workflows with Claude Code, Codex, or Cursor. Official repository

Website examples

Brandon Melville's walkthrough shows a service website for independent pharmacies and clinics. A light background, green accent, and large industry image keep attention on the service offer and its main action.

Source: Brandon Melville's walkthrough at 9:05.

Griffin Wooldridge demonstrates a different direction: a dark CRM landing page with a bold headline, action buttons, and a product display beside the copy.

Source: Griffin Wooldridge's walkthrough at 2:45. Figures shown in the screenshot are part of the demo page.

These are examples from the creators' demonstrations. The brief and the model still shape the finished page; the skill supplies design instructions for that work.

Choose a skill for the task

Start with the core frontend skill for a product landing page, portfolio, or service website. The repository also includes separate workflows for improving an existing site and implementing image references.

Task	Install name
Build a landing page or portfolio	design-taste-frontend
Improve an existing interface	redesign-existing-projects
Implement a page from image references	image-to-code
Apply stricter GPT/Codex-oriented guidance	gpt-taste

Pick the one that matches your immediate task. Official skill list

Installation

Open a terminal in your project directory. With npx available, run:

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

Follow the installer's prompts to select your agent and installation scope.

Use the exact install name. Passing --skill "taste" does not select the core skill, as a user reported in issue #28.

As of September 11, 2026, the default installs v2 experimental. The official documentation tracks the current installation and version details.

Example prompts

After installation, give your agent a concrete brief. Adapt this example with your own product information and reference images:

Use design-taste-frontend to build an English landing page for a personal expense tracker.

Audience:
People who want to record everyday spending without complicated reports.

Page goal:
Help visitors understand the product and click "Start tracking".

Content:
A one-sentence introduction, product screenshots, three main features,
frequently asked questions, and a start button.
Use my supplied facts. Do not invent user counts, testimonials, or partner brands.

Visual direction:
Light, clear, and restrained. Prioritize readable text.
Use the attached reference for its information hierarchy and whitespace.

Project requirements:
Keep the existing stack and components.
Support mobile and desktop. Buttons and links must work.

A specific audience and action give the agent something to design around. When attaching a reference, say whether you like its typography, color palette, or image-to-text proportions. The v2 workflow uses the brief to infer a design direction. Official documentation

For an existing site, use the redesign skill with a narrower request:

Use redesign-existing-projects to improve the current homepage.

Inspect the page first, then improve typography, section spacing, and button styling.
Preserve brand colors, copy, links, and business functionality.
Make the page cleaner, prioritizing crowded areas on mobile.

Layout, motion, and density

The core skill exposes three 1–10 settings:

Setting	Direction
DESIGN_VARIANCE	Layout variation and experimentation
MOTION_INTENSITY	Richness of animation
VISUAL_DENSITY	Amount of information within the page layout

These values describe a direction, rather than a quality score. Official settings

Plain-language feedback works too:

Keep the current colors and content.
Reduce hero animation and increase body-text line spacing.
Make "Start tracking" visible on mobile without scrolling.

Describe both what should stay and what should change so the next version is easy to compare.

Community feedback

Several published examples report a stronger first draft. In a seven-option comparison using the same product-page brief, Xmsumi described Taste Skill as balanced overall. The scoring included AI review and covered a single task, so it is best read as a case study. Comparison article

Griffin Wooldridge shows the installation and generated result, describing it as substantially better than the default output while also showing an icon problem and acknowledging some remaining AI-generated feel. Video, starting at 0:49

Reddit accounts vary. One commenter liked the image-to-Codex workflow but needed three iterations to closely match the reference. Another user still found a Taste-assisted informational website too templated. Image workflow discussion, informational website feedback

The models, prompts, and assets differ across these examples. For everyday website work, a practical role for Taste Skill is to help establish the first design, then refine it around your own content.

Official links

• Taste Skill website
• GitHub repository
• Installation and documentation
• Changelog