# Taste Skill 前端设计 (design-taste-frontend)

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

- 分类: [UI 与交互](https://www.myskills.tools/zh/categories/ui-interaction/)
- 来源: 社区 · Leon Lin
- 代码仓库: https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill (commit af8a897)
- SKILL.md: https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
- 安装命令: `npx skills add Leonxlnx/taste-skill --skill design-taste-frontend`
- 许可证: MIT
- 兼容工具: Claude Code, Codex
- 权限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。
- ⚠ 脚本需要 Node 22+ 和已安装的 Chrome、Edge 或 Chromium。

## 核心规则

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

## 执行阶段

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

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

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

## SKILL.md 头部信息（YAML）

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

首页: https://www.myskills.tools/zh/ · URL: https://www.myskills.tools/zh/skills/design-taste-frontend/