Taste Skill
The Anti-Slop Frontend Framework for AI Agents - implementation skills と image-generation skills を同梱する配布リポジトリ。
Taste Skill は、AI が量産しがちな「それっぽいけど薄い UI」を避けるための anti-slop frontend framework。いまの主語は単なる 4 本の `SKILL.md` ではなく、実装スキル + 画像生成スキル + install 名付きの配布パッケージ に広がっている。
リポジトリの中心は `taste-skill` だけではない。`redesign-skill`、`gpt-tasteskill`、`image-to-code-skill` に加えて、`imagegen-frontend-web`、`imagegen-frontend-mobile`、`brandkit` まで揃い、ChatGPT Images や Codex も含む複数エージェントの前段設計に使える。
design-taste-frontend として配布される v2 experimental。旧挙動は taste-skill-v1 に退避され、別 install 名で pin する形になった。
README の導線は、`SKILL.md` を手でコピーする方法よりも npx skills add を使った導入が中心になっている。リポジトリ全体を入れるか、frontmatter の `name:` を指定して 1 本だけ入れる。
npx skills add https://github.com/Leonxlnx/taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"--skill に渡すのはフォルダ名ではなく install name。`taste-skill/` をそのまま指定するのではなく、`name: design-taste-frontend` の値を使う。
| Folder | Install name | 役割 |
|---|---|---|
| taste-skill | design-taste-frontend | 新しい既定。brief inference、3 dials、design-system map、redesign protocol、pre-flight を含む v2 experimental。 |
| taste-skill-v1 | design-taste-frontend-v1 | 旧デフォルトの互換維持版。v2 で崩したくない既存運用向け。 |
| gpt-tasteskill | gpt-taste | GPT / Codex 寄りの厳しめ variant。レイアウト変化と motion 指示が強い。 |
| image-to-code-skill | image-to-code | 画像生成 → 解析 → 実装までを 1 本でつなぐ橋渡し。 |
| redesign-skill | redesign-existing-projects | 既存 UI の監査と重点修正。いきなり作り直さず audit-first で進める。 |
| soft-skill | high-end-visual-design | やわらかい高級感、余白、質感、穏やかな motion に寄せる。 |
| output-skill | full-output-enforcement | 省略コメントや未完成出力を禁止し、最後まで書き切らせる。 |
| minimalist-skill | minimalist-ui | Notion / Linear 系の抑制された editorial product UI。 |
| brutalist-skill | industrial-brutalist-ui | Swiss type、強いコントラスト、機械的な brutalist 方向。 |
| stitch-skill | stitch-design-taste | Google Stitch 互換の運用規約と `DESIGN.md` 出力フォーマット。 |
| Folder | Install name | 役割 |
|---|---|---|
| imagegen-frontend-web | imagegen-frontend-web | ウェブ用コンプ。hero、landing、multi-section を画像として設計する。 |
| imagegen-frontend-mobile | imagegen-frontend-mobile | モバイル画面とフローの参照画像をまとめて作る。 |
| brandkit | brandkit | ロゴ、配色、タイポ、適用例を含むブランドボード生成。 |
この 3 本はコードを返さない。まず参照画像を作り、そのフレームを Codex / Cursor / Claude Code に渡して実装する前提だ。
- Brief Inference: いきなり見た目を決めず、ページ種別・対象読者・vibe を 1 行で読む。
- Design System Map: Material、Fluent、Carbon、Primer、GOV.UK、shadcn などに寄せる条件を明文化。
- Redesign Protocol: greenfield と preserve / overhaul を分け、監査から入る。
- Dark Mode Protocol: dual-mode 前提でトークン戦略と contrast を扱う。
- Final Pre-Flight Check: 出荷前の hard checklist を持つ。
今回の更新でいちばん大きいのは、`taste-skill` が「3 つの数字を回すスキル」から、「設計判断の手順と禁止パターンを持つ skill」へ変わったこと。とくに em-dash 完全禁止、section-number eyebrow 禁止、fake screenshot 禁止、`motion/react` 推奨、Tailwind v4 既定は v2 の象徴になっている。
| Dial | 意味 |
|---|---|
DESIGN_VARIANCE | レイアウトの非対称さや実験度を決める。 |
MOTION_INTENSITY | hover から scroll choreography まで motion の強さを決める。 |
VISUAL_DENSITY | 1 画面に載せる情報量を調整する。 |
v2 は既定だが experimental。旧 behavior をそのまま使いたいときは、README と CHANGELOG にある通り `taste-skill-v1` を install name で pin する。
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"- landing pages
- portfolios
- redesigns
- 画像から方向性を固めてから実装したい案件
README とメイン skill の両方が、Taste Skill を「見た目の設計」と「anti-slop な前段づくり」に寄せている。
- dashboards
- data tables
- multi-step forms / wizards
- code editors
- native mobile UI そのもの
- realtime collaboration UI
つまり「フロントエンド全般を何でもよくする万能 skill」として読むより、マーケ、ポートフォリオ、リデザインの見た目を引き上げる系統として捉える方が実態に近い。
- まずは `taste-skill`: 汎用の既定。今は v2 experimental。
- 互換性優先なら `taste-skill-v1`: 既存運用を崩したくないとき。
- 既存 UI を直すなら `redesign-skill`: 作り直し前提ではなく audit-first。
- 画像から始めるなら `imagegen-*` + `image-to-code`: 先に参照フレームを作りたいとき。
- 方向性を固定したいなら variant skills: `soft-skill`、`minimalist-skill`、`brutalist-skill` を追加する。
- 出力が途中で切れるなら `output-skill`: placeholder comment や省略コード対策。
- GitHub: Leonxlnx/taste-skill - README、CHANGELOG、各 skill 本体。
- tasteskill.dev - プロジェクトの公開サイト。
- Taste Skill Changelog - v2 experimental の更新ログ。
- vercel-labs/agent-skills - `npx skills add` の導入元。