Taste Skill

Design from the project, then inspect the real page

Give an AI a design process grounded in brand material or product data, with working frontend code and browser checks for websites and app screens.

By Leonxlnx

Setup & first taskView on GitHub
Author example of a coffee-shop page with a dark storefront illustration, large title, opening information and directions button.View original screenshot

The shopfront, twenty seats and opening status shape the hero around details of the coffee shop.

Image credits

These are the author’s v2 example screenshots, not builds reproduced by Atlasnote. They show design choices, not a guarantee of identical output. Image credits are linked below.

What it runs with

  • A coding agent with Skill support
  • Node.js 22+
  • Chrome / Edge / Chromium
GitHub stars
105,064
Version
2.1.5
Checked
Categories
Design & VideoEngineering

Decide whether people are reading or doing a job.

A website starts with the brand’s distinctive material. An app screen starts with data and the work someone needs to do. Both routes live in design-taste-frontend. Complete and inspect one screen before expanding to the rest of the project.

Pick a task and get started

Install the skill and check the project environment, then choose a task. Replace the example material with your own and have the agent follow the complete workflow.

What are you working on?

For a website, product page, portfolio or event. Bring real content and assets, plus the one action a visitor should take.

  1. Install and confirm the skill is available

    Run the author’s command in a terminal and select your AI client. It installs the full design-taste-frontend skill; the same command updates that installation. If you installed a plugin instead, follow the author’s plugin update path rather than adding another copy.

    npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
    Read the author’s setup guide

    Check the complete environment in your project

    Open your coding agent in the target project. Have it confirm that the full design-taste-frontend folder is available, then check the Node version, browser and ability to read screenshots. Run an existing page before changing it; for a new project, name the framework. Supply brand constraints and the URL to inspect.

    Read the environment requirements

  2. Give your AI this first task

    Atlasnote wrote these prompts from the documented workflows. Attach the required material. The results below are acceptance targets, not outputs generated in this review.

    Use design-taste-frontend to build a homepage from my coffee-shop brief. I will provide the name, address, opening hours, full menu, prices and photographs. The goal is to help customers decide to visit and find directions. Identify details specific to this shop, then choose and explain a suitable direction from the candidates. Keep the established brand colours and fonts. Give the menu, roasting process and visiting information their full content. Credit archive images and do not present them as photographs of the shop. Deliver a working page, test the directions link and navigation, and inspect the final build at 1440, 768 and 390 pixels. Include screenshots and a record of the fixes.

  3. Check what you receive

    • A working homepage whose menu, prices, hours and directions can be checked against the supplied material.
    • A short rationale for the direction, plus image creators, sources and licence records.
    • Screenshots and findings from the final build at three widths, with working navigation and any remaining issues stated.
    Read the relevant author guide
More about this skill

Taste Skill turns design into a sequence that can be inspected: understand the content and its purpose, choose structure and art direction, build with appropriate assets, then examine the result in a real browser. The current repository contains one main skill, design-taste-frontend, rather than the former collection of separate styles.

For a public page, the agent inventories details that belong to the project—its name, place, product or way of working—and compares directions from the author’s library. Type, colour, the hero and later sections serve the same idea. Each section needs real information or evidence; a distinctive first screen alone is insufficient.

The handoff matters as much as the direction: sourceable images, working code, checks at several widths and revisions grounded in screenshots. Scores in the author’s review process are internal judgements, not independent design certification.

Sources and verification

Sources checked

Checked against the author’s v2.1.5 documentation. The images are author examples; Atlasnote has not run these sample prompts.

Author documentationOriginal skillCurrent release notesExample image credits

Continue improving the page

Explore Impeccable for focused work on clarity and interaction, or shadcn/ui for concrete interface components.

ImpeccableReview one page or component for usability and quality, handle hard states and finish the details.shadcn/uiGive your AI your project's shadcn/ui context to build forms, dashboards and themes from checked docs.Remotion SkillsTwelve official entry points for projects, animation, Studio editing, captions, maps and export.Stitch SkillsThree plugins connect local design docs, Stitch generation and imports, and frontend conversion.