design-taste-frontendcommit af8a897SKILL.md · UI・インタラクション
Taste Skill フロントエンド
厳選247サイトの研究に基づくWebのアートディレクション。方向性を抽選し、実ブラウザで検査して画面を見ながら直します。
スクリプトには Node 22 以上と、Chrome・Edge・Chromium のいずれかが必要です。
npx skills add Leonxlnx/taste-skill --skill design-taste-frontendコマンドを選択しました。手動でコピーしてください。
- 権限
- read-repo
- write-files
- shell
- network
- 対応ツール
- Claude Code, Codex
- GitHub
- 107.3k
- 提供元
- コミュニティ · Leon Lin
- 状態
- スキャン済み
- ライセンス
- MIT
- カテゴリ
- UI・インタラクション
基本ルール
方向性はライブラリから抽選し、アイデアは題材そのものから得て、顧客・レビュー・数値は捏造しません。
実行フェーズ
フェーズ 01要件とプロジェクトを読む
スクロールして読むページかアプリ画面かを判断し、プロジェクトと使える画像の入手先を確認します。
フェーズ 02方向性を抽選
draw.mjs で調査済みの20方向から3つを引き、選んだものに書体、配色、ヒーロー、セクション構成を割り当てます。
フェーズ 03設計図どおりに構築
トークンとヒーローから作り、各セクションを設計図どおりに実装し、題材の実写画像と動く要素を入れます。
フェーズ 04検査と目視
inspect.mjs で実ブラウザ上のルールを検査し、3つの幅のスクリーンショットを評価基準で見直し、FAILがなくなるまで直します。
フェーズ 05動きを加えて報告
象徴的な動き、セクションの登場、操作フィードバックを加え、実際に実行した検査だけを報告します。
権限の説明(SKILL.md より)
| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | プロジェクトのページコードを編集し、作業ファイルはプロジェクト直下の .taste-skill/ に書き出します。 |
| コマンド実行 | 一部で必要 | スキル付属のNodeスクリプト(draw、inspect、assets など)を実行し、ローカルのChrome/Edge/Chromiumで撮影します。依存関係はインストールしません。 |
| 外部通信 | 一部で必要 | ネットワークを使うのは公開画像素材を取得する assets.mjs だけで、APIキーは使いません。 |
SKILL.md のフロントマター(YAML)
---
name: design-taste-frontend
description: >-
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of
247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions
(idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict
no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use
this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site,
portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React,
Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated,
"AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other
site. Also for app screens: dashboards, admin and analytics views, settings, inboxes and other screens
people work in, with their own run and rules.
---関連スキル
ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。