DesignOct 30, 2026@donghyeok99Staff

Taste Skill: 에이전트가 짓는 웹페이지에 아트 디렉션을

프로젝트 사이트를 이 스킬로 다시 꾸민 개발자가 1440·768·390 세 너비 모두 0 FAIL 결과를 PR에 올렸어요

흔한 AI 페이지가 물러나고, 방향 카드 세 장 중 하나로 커피숍 페이지를 지은 뒤 1440·768·390 세 너비 검사를 0 FAIL로 마쳐요.

누가: Leon Lin(Leonxlnx)이 만든 오픈소스 스킬. 코딩 에이전트로 웹사이트, 랜딩 페이지, 대시보드를 만드는 사람을 위한 거예요.
언제: 2026년 2월 처음 공개, 10월에 v2로 새로 만들었고 최신은 v2.1.5(2026-10-24)예요.
어디서: Claude Code·Codex 플러그인이나 npx skills로 설치해요. Node 22 이상과 Chrome·Edge·Chromium이 있는 내 컴퓨터에서 돌아요.

이게 불편했어요

에이전트에게 랜딩 페이지를 맡기면 매번 비슷한 화면이 나와요. 가운데 정렬 제목, 그 위의 작은 라벨, 아이콘 카드 한 줄, 은은한 그라데이션. 틀린 데는 없는데 누구의 페이지인지 알 수 없어서, 결국 하나하나 다시 고쳐 달라고 해야 했어요.

그래서 이렇게 풀어요

Taste Skill은 생김새를 모델의 기본값에 맡기지 않아요. 스크립트가 방향 세 개를 나눠 주면 에이전트가 하나를 고르고, 고객 자신의 재료와 그 방향을 잇는 아이디어 한 문장에서 페이지를 지어요. 사진은 공개 아카이브에서 찾아 출처를 붙이고, 다 지은 뒤에는 실제 브라우저로 세 너비를 재고 스크린샷을 직접 보며 고쳐요.

테크노 파티 페이지: 날짜를 옛 기록 사진 속에 넣었어요 — 커피숍 페이지: 직접 그린 가게 정면이 첫 화면이에요

이걸로 만든 사람들

GitHub@Sai211120002026-10-16

자기 MCP 프로젝트의 소개 사이트(GitHub Pages)를 Cursor 에이전트와 이 스킬로 다시 꾸몄어요. 카드 줄을 짜인 섹션으로 바꾸고, 공개 컬렉션 사진 네 장을 출처와 함께 넣었어요.

Inspect: 0 FAIL across 1440/768/390; screenshots are attached above.

좋아요 0 · 댓글 0 (2026-10-30 기준)GitHub ↗

GitHub@xxreapingskaterxx2026-10-01

Claude Code로 이 스킬의 redesign 점검을 index.html에 돌리고, 포커스 링과 건너뛰기 링크, 버튼 반응, 폰에서 읽히는 히어로 문구처럼 위험이 적은 수정만 적용했어요.

After: Nav links glide (through Lenis) and stop right below the header

좋아요 0 · 댓글 1 (2026-10-30 기준)GitHub ↗

X@Voxyz_ai2026-10-15

새로 나온 v2를 Claude Code나 Codex에 넣고, 바이브 코딩으로 만든 사이트를 데스크톱·태블릿·폰 너비로 점검받아 보라고 권했어요.

It opens your pages at desktop, tablet and phone widths

좋아요 772 · 댓글 15 (2026-10-30 기준)X ↗

안에서는 이렇게 돌아가요

1
Claude Code · Codex → design-taste-frontend
브리프와 SKILL.md 읽기브리프를 읽고, 이 고객만 가진 것을 먼저 적어요.skills/taste-skill/SKILL.md
2
Claude Code · Codex → draw.mjs
draw.mjs --options 3연구된 방향 스무 개 가운데 세 개를 무작위로 나눠 주고, 에이전트가 주제의 아이디어를 담을 하나를 골라요.skills/taste-skill/scripts/draw.mjs
3
draw.mjs → Claude Code · Codex
--direction <id> → direction.json고른 방향의 서체, 팔레트, 히어로, 섹션 구성을 라이브러리에서 뽑아 .taste-skill/direction.json에 써요.skills/taste-skill/library/directions.json
4
Claude Code · Codex → assets.mjs
assets.mjs "<검색어>"Openverse, Wikimedia Commons, Met 같은 공개 컬렉션에서 사진을 찾아 받고, --credits로 출처를 뽑아요.skills/taste-skill/scripts/assets.mjs
5
Claude Code · Codex → inspect.mjs
inspect.mjs <페이지>실제 브라우저로 1440·768·390 폭에서 열어 재고 스크린샷을 남겨요. FAIL이 하나라도 있으면 끝난 게 아니에요.skills/taste-skill/scripts/inspect.mjs
6
Claude Code · Codex → 완성된 페이지와 스크린샷
스크린샷 보고 상위 3개 고치기스크린샷을 직접 보며 심사 기준표로 평가하고, 가장 큰 문제 세 개를 고쳐요. 최대 세 라운드예요.skills/taste-skill/references/critique.md

넣으면 이렇게 나와요

커피숍 브리프직접 그린 가게 정면이 히어로인 페이지 (README)

테크노 파티 브리프날짜를 옛 기록 사진 속에 넣은 페이지 (README)

이미 있는 index.html포커스 링, 건너뛰기 링크, 헤더 아래 멈추는 내비 (사용자 PR)

대시보드 요청앱 스타일로 지은 셸, 차트, 표 (README v2.1)

나한테 맞을까요

이럴 때 좋아요

가게, 행사, 포트폴리오 같은 원페이지를 에이전트로 지을 때
바이브 코딩으로 만든 사이트를 데스크톱·태블릿·폰 너비로 점검받고 싶을 때
대시보드, 관리자 화면, 설정 화면을 정돈하고 싶을 때
React, Vue, Svelte, 그냥 HTML 어느 쪽이든

이건 안 돼요

한 번 짓는 데 30~45분, 토큰 수십만 개가 들어요(README 기준).
사진은 공개 아카이브의 것이라 내 가게 사진이 아니에요. 가진 사진이 있으면 바꿔 넣으라고 README가 권해요.
사진을 찾을 때는 인터넷이 필요해요.
Node 22나 Chrome이 없으면 검사 스크립트가 돌지 않아, 다른 도구로 찍은 스크린샷으로 대신해요(SKILL.md).

발행 전에 Devalley 편집자가 검토했어요. 칼럼은 어떻게 만드나요

Taste Skill: art direction for the pages your agent builds

A developer redesigned a project site with it and posted 0 FAIL at 1440, 768 and 390 in the pull request

The average AI page steps aside, one of three dealt directions becomes a coffee shop page, and a check at 1440, 768 and 390 ends on 0 FAIL.

Who: An open-source skill by Leon Lin (Leonxlnx), for people who build websites, landing pages and dashboards with a coding agent.
When: First published in February 2026, rebuilt as v2 in October; the latest release is v2.1.5 (2026-10-24).
Where: Installs as a Claude Code or Codex plugin or with npx skills. Runs on your own machine with Node 22+ and Chrome, Edge or Chromium.

What was hard

Ask an agent for a landing page and you get the same screen every time: a centred headline, a little label above it, a row of icon cards, a soft gradient. Nothing in it is wrong, but nothing says whose page it is, so you end up asking for fixes one by one.

What it does about it

Taste Skill doesn't leave the look to the model's defaults. A script deals three directions, the agent picks one, and the page grows from one sentence tying the client's own material to that direction. Pictures come from open archives with their credits, and once it is built the agent measures the page in a real browser at three widths and fixes what it sees in the screenshots.

A coffee shop page with a drawn storefront as its hero

A techno night page with its dates set into an archive photograph — A coffee shop page with a drawn storefront as its hero

What people made with it

GitHub@Sai211120002026-10-16

Redesigned the GitHub Pages site of their MCP project with a Cursor agent and this skill: card rows became composed sections, and four open-collection images went in with credits.

Inspect: 0 FAIL across 1440/768/390; screenshots are attached above.

likes 0 · comments 0 (2026-10-30 as of)GitHub ↗

GitHub@xxreapingskaterxx2026-10-01

Ran the skill's redesign audit on index.html with Claude Code and applied only the low-risk fixes: a focus ring, a skip link, button feedback and hero copy readable on phones.

After: Nav links glide (through Lenis) and stop right below the header

likes 0 · comments 1 (2026-10-30 as of)GitHub ↗

X@Voxyz_ai2026-10-15

Recommends putting the new v2 into Claude Code or Codex and having it give a vibe-coded site a checkup at desktop, tablet and phone widths.

It opens your pages at desktop, tablet and phone widths

likes 772 · comments 15 (2026-10-30 as of)X ↗

How it runs inside

1
Claude Code · Codex → design-taste-frontend
Reads the brief and SKILL.mdIt reads the brief and first lists what only this client has.skills/taste-skill/SKILL.md
2
Claude Code · Codex → draw.mjs
draw.mjs --options 3Deals three of twenty researched directions at random; the agent picks the one that carries the subject's idea.skills/taste-skill/scripts/draw.mjs
3
draw.mjs → Claude Code · Codex
--direction <id> → direction.jsonDeals the chosen direction's type, palette, hero and sections from the library into .taste-skill/direction.json.skills/taste-skill/library/directions.json
4
Claude Code · Codex → assets.mjs
assets.mjs "<query>"Searches open collections such as Openverse, Wikimedia Commons and the Met, and keeps each picture's credit.skills/taste-skill/scripts/assets.mjs
5
Claude Code · Codex → inspect.mjs
inspect.mjs <page>Opens the page in a real browser at 1440, 768 and 390, measures it and saves screenshots. Any FAIL means not done.skills/taste-skill/scripts/inspect.mjs
6
Claude Code · Codex → The page and its screenshots
Looks, fixes the top threeReads its own screenshots, scores them against a juror's rubric and fixes the top three problems, up to three rounds.skills/taste-skill/references/critique.md

What goes in, what comes out

A coffee shop briefA page with a drawn storefront as its hero (README)

A techno night briefA page with its dates set into an archive photograph (README)

An existing index.htmlA focus ring, a skip link, nav that stops below the header (user PR)

A dashboard requestShell, charts and tables built to an app style (README, v2.1)

Is it for you

Good for

Building a one-pager for a shop, an event or a portfolio with an agent
Giving a vibe-coded site a checkup at desktop, tablet and phone widths
Tidying dashboards, admin views and settings screens
React, Vue, Svelte or plain HTML alike

Not for

A build takes roughly 30 to 45 minutes and a few hundred thousand tokens (per the README).
The pictures come from open archives, not from your business; the README suggests swapping in your own when you have them.
Finding pictures needs network access.
Without Node 22 or Chrome the inspector cannot run, and screenshots from another browser tool stand in (SKILL.md).

Reviewed by Devalley’s editor before publishing. How the column is made

RepositoryLeonxlnx/taste-skill ↗

Stars105k

LicenseMIT

SiteOpen ↗

바로 써 보기

필요한 것

Node 22+근거: README.md
Chrome, Edge or Chromium근거: README.md

API 키는 필요 없어요. 사진을 찾을 때만 인터넷이 필요해요.

있는지 확인하는 명령

node -v

설치

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

플러그인으로 설치

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

플러그인으로 설치

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

원본: github.com/Leonxlnx/taste-skill · ⭐ 105k, 2026-10-30 기준 · MIT · 사이트

에이전트에게 붙여 넣기

빈 폴더에서 Claude Code나 Codex를 열고 그대로 붙여 넣으세요.

처음 붙여 넣을 것

https://github.com/Leonxlnx/taste-skill 의 Taste Skill(design-taste-frontend)을 설치해 줘요.

1. 먼저 `node -v`로 Node가 22 이상인지 보고, Chrome·Edge·Chromium 중 하나가 깔려 있는지 확인해 주세요. 없으면 설치하지 말고 무엇이 없는지 알려 줘요.
2. README에 있는 대로 설치해요.
```bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```
3. 끝나면 스킬 목록에 design-taste-frontend가 보이는지 확인하고, 어느 폴더에 들어갔는지 알려 주세요. 새 세션을 열어야 불러온다면 그렇다고 말해 줘요.

설치가 끝나면

taste-skill로 {가게나 행사 이름}의 원페이지 사이트를 만들어 줘요. 어떤 곳이냐면 {한두 줄 소개}예요. 방향 세 개를 먼저 보여 주고 내가 고르게 해 주세요. 사진은 공개 자료에서 찾아 출처를 페이지에 남기고, 다 되면 1440·768·390 세 너비 스크린샷과 inspect 결과를 보여 줘요.

Try it

What it needs

Node 22+from: README.md
Chrome, Edge or Chromiumfrom: README.md

No API keys. It needs the internet only to find pictures.

Commands to check

node -v

Install

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

Install as a plugin

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

Install as a plugin

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

Source: github.com/Leonxlnx/taste-skill · ⭐ 105k as of 2026-10-30 · MIT · Website

Paste into your agent

Open Claude Code or Codex in an empty folder and paste this as it is.

Paste first

Please install Taste Skill (design-taste-frontend) from https://github.com/Leonxlnx/taste-skill.

1. First check with `node -v` that Node is 22 or newer, and that Chrome, Edge or Chromium is installed. If something is missing, don't install; tell me what is missing.
2. Install it as the README says:
```bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```
3. Then check that design-taste-frontend shows up in the skill list and tell me which folder it went into. If it only loads in a new session, say so.

Once it is installed

Use taste-skill to build a one-page site for {shop or event name}. It is {a line or two about it}. Show me three directions first and let me pick. Find pictures in open collections and credit them on the page, and when it is done show me the screenshots at 1440, 768 and 390 and the inspect result.

0 comments

Be the first to comment.