design-taste-frontendcommit af8a897SKILL.md · UI 与交互

Taste Skill 前端设计

基于 247 个精选站点研究的网页美术指导，抽取设计方向，在真实浏览器里检查并看图修正。

脚本需要 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 与交互
代码仓库: github.com/Leonxlnx/taste-skill/skills/taste-skill

核心规则

设计方向从素材库中抽取并从主题本身提炼创意，不编造客户、评价或数据。

执行阶段

阶段 01读需求与项目
先判断是可滚动的网页还是应用界面，再读项目和可用的图片来源。
阶段 02抽取方向
用 draw.mjs 从 20 个研究过的方向中抽出 3 个，选定后再分配字体、配色、首屏和版块构图。
阶段 03按蓝图搭建
先做设计令牌和首屏，再逐个按蓝图实现版块，配上真实的主题图片和可交互元素。
阶段 04检查与查看
用 inspect.mjs 在真实浏览器中按规则检查，三种宽度截图对照评审标准修正，直到没有 FAIL。
阶段 05加动效并报告
加入一个标志性动效、版块入场和控件反馈，只报告实际运行过的检查。

权限说明（据 SKILL.md 整理）

能力	是否需要	说明
文件写入	需要	修改项目中的页面代码，工作文件写入项目根目录的 .taste-skill/。
命令执行	部分需要	运行技能自带的 Node 脚本（draw、inspect、assets 等），并通过本地 Chrome/Edge/Chromium 截图；不安装依赖。
网络外发	部分需要	只有 assets.mjs 需要联网获取公开图片素材，不使用 API 密钥。

SKILL.md 头部信息（YAML）commit af8a897

---
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.
---

核心规则

执行阶段

阶段 01读需求与项目

阶段 02抽取方向

阶段 03按蓝图搭建

阶段 04检查与查看

阶段 05加动效并报告

权限说明（据 SKILL.md 整理）

SKILL.md 头部信息（YAML）

相关技能