Making a website feel less AI-generated: 10 frontend design skills to try

Cover up the brand name on the homepage. Can you still tell whose site it is? If a bookshop, a hotel and a software company could swap homepages just by changing the hero image, start with the layout. At a book launch the cover might take centre stage. A conversation between two writers might open with their faces and the question they will discuss. When the event changes, the page should change with it.

A frontend design skill gives an AI assistant instructions for working on a website. Some help it interpret a brief and sketch a layout. Others examine a page that already works. What do you have in front of you: copy and pictures, a mock-up, or a working site with a few awkward interactions?

The three selections below cover established tools, recent developments and cumulative installs. There are five entries per group and ten distinct skills or packages across them. This editorial selection has no worldwide quality ranking. Figures and announcements were checked on 12 November 2026 at 10:27 Taiwan time. The examples illustrate possible uses. We have not tested each one.

Five frontend skills with an adoption history

1. Anthropic Frontend Design — let the subject shape the page

Anthropic’s official skill starts with the product, its audience and the purpose of the page. The assistant proposes a short design brief before choosing type, colour, layout and motion. It suits a company site, brand page or portfolio when the copy and assets are ready but the visual direction is still open.

For the bookshop event, give it the cover, talk description and registration details. Ask for two treatments and what readers would see first in each. Once you pick one, put in the real title and speakers’ names. Check where the title wraps on a phone and whether the registration button is easy to find. A layout you liked in a sketch has to work with your own content. Anthropic Frontend Design

2. Vercel Web Design Guidelines — find the file and line to review

Point the assistant at a file or directory. It fetches the current Vercel Web Interface Guidelines and reviews the code for interaction, accessibility and interface copy, reporting findings by file and line. You will get the most out of it once there is a page to inspect.

Suppose checkout works, but entering an invalid value produces only “Something went wrong.” Ask it to review the form’s field labels, errors and keyboard flow. Open the reported lines, then deliberately enter the wrong value. Does the message identify the field and explain how to fix it? Vercel Web Design Guidelines

3. UI UX Pro Max — carry design decisions across pages

Search by product type, palette, typography, visual style or UX guideline, including guidance for specific frameworks. This is useful for SaaS products, admin screens and multipage sites. A booking flow may have separate screens for dates, guest details and confirmation. People still rely on consistent buttons to recognise the next step and distinct text styles to tell instructions from errors.

Tell it what is settled before asking for two layouts: “Keep our brand colour and form components. Most bookings happen on phones.” You can then compare readability on narrow screens and see which layout reuses the components you have. An attractive palette in isolation can look out of place on the rest of the site. UI UX Pro Max

4. Impeccable — diagnose a screen and change one thing

A site may already have a recognisable style while its headings, notices and buttons all compete for attention. Impeccable gives you separate commands: critique reviews the experience, audit checks technical quality, typeset adjusts text hierarchy and layout works on composition.

If every paragraph on a settings page is bold and every section boxed, run critique to locate the bit readers are likely to misread. Try typeset on that area. Compare the rendered screens side by side: is the setting easier to find? Install the current skill as impeccable. This project’s old frontend-design name has been retired. Impeccable

5. Emil Design Engineering — inspect what a screenshot misses

Some controls look fine in a screenshot but feel a beat behind under your finger. This skill covers press feedback, entrance and exit timing, interrupted transitions and how hover effects should behave on touch devices.

Start with a menu. Open it and close it immediately: does the animation catch? With reduced motion enabled, can you still tell whether it is open? If the structure is settled and you can name an awkward action, this is a more focused task than redesigning the page. Try it a few times on the actual device after making the change. Emil Design Engineering

Five recent developments to follow

1. Impeccable 4.8.2 — installation, updates and configuration

Released on 9 November, 4.8.2 updates the Impeccable skill described above. It improves installation, updates and setup. Existing users can review the new setup instructions. First-time users can try critique on a single screen. Both entries refer to the same toolkit. Impeccable

2. Aesthetic Frontend Skills — describe what you like about a style

The author introduced this experimental package on 5 November. It has two parts: aesthetic-literacy identifies and clarifies a style, and aesthetic-application turns the chosen direction into palettes, typography, CSS variables and component guidance.

“Make it Y2K” can conjure up different pictures for two people. Look at a reference together: is it the lettering, the colour or the surface texture you want? Then apply those choices to buttons, backgrounds and headings. This suits an exploratory brand brief. Component architecture and full accessibility testing are separate work. Aesthetic Frontend Skills

3. RC’s Frontend Skill — keep working features through a redesign

Introduced by its author on 3 November, this skill connects project research, visual design, implementation and delivery checks. For a live product the first step matters: read the project, trace how components get their data, inspect form validation and identify states that the redesign must preserve.

When refreshing a service dashboard, ask it to keep the API and validation logic and list the states it actually tested. Alongside before-and-after screenshots, inspect what appears while data loads, when a query returns nothing and when submission fails. The assistant needs access to the source and an environment that can run those checks. RC’s Frontend Skill

4. Form & Force — compare sketches before building

Introduced on 3 November, Form & Force reads the project and its subject, draws several sketches and lets you compare them before settling type, colour, images and motion. For a coffee brand, a homepage led by product photography needs different assets from one that opens with the grower’s story. Sketches let you choose while switching direction is still cheap.

The workflow includes functional, responsive, accessibility and performance checks. Rendering sketches and running browser reviews require Playwright and Chromium. The author reports no formal controlled evaluation of outcomes. Try a single product page and see whether the sketches help you choose. Form & Force

5. taste-skill-v3 — plan structure, style and assets separately

Publicly introduced on 30 October, this is an independent third-party branch by growing7696-cmyk, inspired by Taste Skill and not endorsed by its original author. The v3 name belongs to this project. The original is covered in the next section.

It separates the design engine, styles, workflows and assets. For a product homepage, choose a structure, set an asset budget, then check the result for visual quality, accessibility and performance. This gives you control at each step and takes some setup: the engine expects taste-core, and some checks need a browser and supporting tools. Review the log to see which ones ran. taste-skill-v3

Five skills with high cumulative install counts

These are the cumulative installs for each individual skill shown by skills.sh at the time of the check. They change over time and indicate adoption. They do not measure unique users, community discussion or design quality.

Taste Skill — take the design into a real browser

The table lists Leonxlnx’s design-taste-frontend. It plans colour, type, composition, photography and motion according to the kind of site, then uses bundled scripts to check layout, assets, copy and performance at several screen widths.

For a brand site that feels too much like an AI template, it offers repeatable checks. Take a small hotel: which photo would guests recognise as this particular property? Where should room details and reservations appear? After building the desktop page, check the mobile crop and whether the booking button is still easy to find. You need to confirm that the photos represent the hotel and that you may use them. The checks require Node.js 22 or later and Chrome, Edge or Chromium. Taste Skill

Where to start depends on what you have today

Only copy and pictures? Try Anthropic Frontend Design. Pick one page and give it real material, an audience and a desired action. “This weekend’s book talk will mostly be viewed on phones. Use this cover and speaker bio to propose two homepages where readers can find registration.” Your first decision is simply which one feels right for that event. Anthropic Frontend Design

Have a page that looks wrong but can’t say why? Start with Impeccable. Pick the area that bothers you. Use critique to explain it and fix one issue you can see for yourself. If every line reads like a heading, try only typeset. Compare the two versions and time how quickly you find the important information. That tells you more than counting commands learned. Impeccable

Have a working site and can read basic code? Try Vercel Web Design Guidelines. Start with one form and ask about labels, errors and keyboard operation. Reproduce one reported issue on the page, make the fix and walk through it again. Completing the form by keyboard or spotting the invalid field at a glance gives you a result you can verify yourself. Vercel Web Design Guidelines