docs: make Chinese README the default

This commit is contained in:
wehub-resource-sync
2026-07-13 09:51:36 +00:00
parent 11b575a74c
commit 4420cb46cf
+81 -75
View File
@@ -1,3 +1,9 @@
<!-- WEHUB_ZH_README -->
> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理,属于社区翻译,非官方中文文档。
> [English](./README.en.md) · [原始项目](https://github.com/Leonxlnx/taste-skill) · [上游 README](https://github.com/Leonxlnx/taste-skill/blob/HEAD/README.md)
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
<p align="center">
<img src="assets/readme-banner.webp" alt="Taste Skill - Anti-slop Agent Skills for premium frontends" width="100%" />
</p>
@@ -5,14 +11,14 @@
# Taste Skill
<p align="center">
<em>The Anti-Slop Frontend Framework for AI Agents</em>
<em>面向 AI Agent 的反 Slop 前端框架</em>
</p>
<p align="center" style="margin-bottom: 8px;">
<a href="https://tasteskill.dev" title="Visit tasteskill.dev"><img src="assets/readme-buttons/btn-site.webp" alt="Visit tasteskill.dev" height="56" /></a>
</p>
<h3 align="center">Sponsors</h3>
<h3 align="center">赞助商</h3>
<table align="center">
<tr>
@@ -25,9 +31,9 @@
</tr>
</table>
<p align="center"><sub><a href="https://github.com/sponsors/Leonxlnx">Become a sponsor</a></sub></p>
<p align="center"><sub><a href="https://github.com/sponsors/Leonxlnx">成为赞助商</a></sub></p>
Portable **Agent Skills** that upgrade AI-built interfaces: stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. This repo also includes **image-generation skills** for reference boards (web, mobile, brand kits). Pair them with **ChatGPT Images** or similar generators, then hand the frames to Codex, Cursor, or Claude Code for implementation.
可移植的 **Agent Skills**,用于提升 AI 构建的界面:更强的布局、排版、动效与间距,告别千篇一律的模板感 UI。本仓库还包含用于参考板(Web、移动端、品牌套件)的 **图像生成技能(image-generation skills**。可与 **ChatGPT Images** 或类似生成器配合使用,再将设计稿交给 CodexCursor Claude Code 实现。
<p align="center">
<a href="LICENSE"><img src="assets/readme-buttons/btn-mit.webp" alt="MIT License" height="45" valign="middle" /></a>
@@ -39,126 +45,126 @@ Portable **Agent Skills** that upgrade AI-built interfaces: stronger layout, typ
<a href="https://www.tasteskill.dev/changelog"><img src="assets/readme-buttons/btn-changelog.webp" alt="Changelog" height="45" valign="middle" /></a>
</p>
## Disclaimer
## 免责声明
Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me.
Taste Skill 没有官方代币、币种或加密货币项目。任何使用我的名字、形象或项目名称的代币均与我无关,且未经我认可。
<p align="center"><sub><a href="#disclaimer">Disclaimer</a> · <a href="#installing">Install</a> · <a href="#skills">Skills</a> · <a href="#settings-taste-skill-only">Settings</a> · <a href="#examples">Examples</a> · <a href="#sponsors">Sponsors</a> · <a href="#research">Research</a> · <a href="#common-questions">FAQ</a> · <a href="#license">License</a></sub></p>
<p align="center"><sub><a href="#disclaimer">免责声明</a> · <a href="#installing">安装</a> · <a href="#skills">技能</a> · <a href="#settings-taste-skill-only">设置</a> · <a href="#examples">示例</a> · <a href="#sponsors">赞助商</a> · <a href="#research">研究</a> · <a href="#common-questions">常见问题</a> · <a href="#license">许可证</a></sub></p>
## Feedback & Contributions
## 反馈与贡献
We would love your feedback. Suggestions and bug reports:
我们欢迎你的反馈。建议与 Bug 报告:
- Open a Pull Request or Issue on GitHub
- DM [@lexnlin](https://x.com/lexnlin) or [@blueemi99](https://x.com/blueemi99)
- Email us at [hello@tasteskill.dev](mailto:hello@tasteskill.dev)
- 在 GitHub 上提交 Pull Request Issue
- 私信 [@lexnlin](https://x.com/lexnlin) or [@blueemi99](https://x.com/blueemi99)
- 发送邮件至 [hello@tasteskill.dev](mailto:hello@tasteskill.dev)
## Installing
## 安装
The [`npx skills add`](https://github.com/vercel-labs/agent-skills) CLI scans the `skills/` folder in this repo, so **all skills below (code and image-generation) install the same way.**
[`npx skills add`](https://github.com/vercel-labs/agent-skills) CLI 会扫描本仓库中的 `skills/` 文件夹,因此**下方所有技能(代码类与图像生成类)安装方式相同。**
```bash
npx skills add https://github.com/Leonxlnx/taste-skill
```
Install a single skill by its **install name** (the `name:` field inside the SKILL frontmatter, not the folder name):
**安装名称(install name** 安装单个技能(即 SKILL 前置元数据中的 `name:` 字段,而非文件夹名):
```bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```
You can also copy any `SKILL.md` into your project or paste it into ChatGPT / Codex conversations.
你也可以将任意 `SKILL.md` 复制到项目中,或粘贴到 ChatGPT / Codex 对话里。
### Updating from the previous version
### 从旧版本更新
The default `taste-skill` (install name `design-taste-frontend`) is now **v2 (experimental)**, a substantial rewrite of the original v1. If you already have v1 installed, just re-run the install command and you will be upgraded:
默认的 `taste-skill`(安装名称 `design-taste-frontend`)现为 **v2(实验性)**,是对原版 v1 的大幅重写。若你已安装 v1,重新运行安装命令即可升级:
```bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```
The install name did not change, so no script updates are needed. The newer SKILL.md replaces the older one in place.
安装名称未变,因此无需更新脚本。新版 SKILL.md 会直接替换旧版。
If you depend on the exact behavior of v1 and want to pin to it explicitly:
若你依赖 v1 的精确行为,并希望显式固定到 v1:
```bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
```
See [CHANGELOG.md](CHANGELOG.md) for the full v1 to v2 diff and the rationale.
完整 v1 v2 差异及设计理由见 [CHANGELOG.md](CHANGELOG.md)。
## Skills
## 技能
Each skill does one job; you do not need all of them at once. **Implementation skills** output code. **Image-generation skills** output reference images only.
每个技能只做一件事;你不必一次性安装全部。**实现类技能(Implementation skills** 输出代码。**图像生成技能(Image-generation skills** 仅输出参考图像。
The `Install name` column is the exact value you pass to `--skill`.
`Install name` 列是传给 `--skill` 的精确值。
| Skill (folder) | Install name | Description |
| --- | --- | --- |
| **taste-skill** | `design-taste-frontend` | 🆕 **v2 (experimental)** - substantial rewrite of the default skill. Reads the brief, infers the design language, tunes three dials (VARIANCE / MOTION / DENSITY). Brief inference, design-system map, hard em-dash ban, canonical GSAP code skeletons, redesign-audit protocol, strict pre-flight check. Actively iterating toward v2.0.0 stable. |
| **taste-skill-v1** | `design-taste-frontend-v1` | The original v1 of taste-skill, preserved for projects depending on its exact behavior. Use only if the v2 default breaks something specific in your workflow. |
| **gpt-tasteskill** | `gpt-taste` | Stricter variant for GPT/Codex: higher layout variance, stronger GSAP direction, aggressive anti-slop. |
| **image-to-code-skill** | `image-to-code` | Image-first pipeline: generate site references, analyze them, then implement the frontend to match. |
| **redesign-skill** | `redesign-existing-projects` | Existing projects: audit the UI first, then fix layout, spacing, hierarchy, styling. |
| **soft-skill** | `high-end-visual-design` | Polished, calm, expensive UI with softer contrast, whitespace, premium fonts, spring motion. |
| **output-skill** | `full-output-enforcement` | When the model ships half-finished work: full output, no placeholder comments. |
| **minimalist-skill** | `minimalist-ui` | Editorial product UI (Notion/Linear vibes), restrained palette, crisp structure. |
| **brutalist-skill** | `industrial-brutalist-ui` | Hard mechanical language: Swiss type, sharp contrast, experimental layout. |
| **stitch-skill** | `stitch-design-taste` | Google Stitch-compatible rules, including optional `DESIGN.md` export format. |
| **taste-skill** | `design-taste-frontend` | 🆕 **v2(实验性)** — 默认技能的大幅重写。读取需求简报,推断设计语言,调节三个旋钮(VARIANCE / MOTION / DENSITY)。简报推断、设计系统映射、严格禁用 em dash、规范 GSAP 代码骨架、重设计审计协议、严格预检。正积极迭代,目标 v2.0.0 稳定版。 |
| **taste-skill-v1** | `design-taste-frontend-v1` | taste-skill 原版 v1,为依赖其精确行为的项目保留。仅当 v2 默认版破坏你工作流中的特定环节时使用。 |
| **gpt-tasteskill** | `gpt-taste` | 面向 GPT/Codex 的更严格变体:更高布局方差、更强 GSAP 导向、激进反 slop |
| **image-to-code-skill** | `image-to-code` | 图像优先流水线:生成站点参考图、分析后实现匹配的前端。 |
| **redesign-skill** | `redesign-existing-projects` | 既有项目:先审计 UI,再修复布局、间距、层级与样式。 |
| **soft-skill** | `high-end-visual-design` | 精致、沉静、高级感 UI:更柔和对比、留白、优质字体、弹簧动效。 |
| **output-skill** | `full-output-enforcement` | 当模型交付半成品时:完整输出,无占位注释。 |
| **minimalist-skill** | `minimalist-ui` | 编辑型产品 UINotion/Linear 风格),克制配色,结构清晰。 |
| **brutalist-skill** | `industrial-brutalist-ui` | 硬朗机械语言:瑞士字体、锐利对比、实验性布局。 |
| **stitch-skill** | `stitch-design-taste` | 兼容 Google Stitch 的规则,含可选 `DESIGN.md` 导出格式。 |
### Image generation skills
### 图像生成技能
These produce design images only (no code). Use with ChatGPT Images, Codex image mode, or any agent that generates images.
这些技能仅产出设计图像(无代码)。可与 ChatGPT ImagesCodex 图像模式或任何能生成图像的 Agent 配合使用。
| Skill (folder) | Install name | Description |
| --- | --- | --- |
| **imagegen-frontend-web** | `imagegen-frontend-web` | Website comps: hero, landing, multi-section with strong typography, spacing, anti-slop art direction. |
| **imagegen-frontend-mobile** | `imagegen-frontend-mobile` | Mobile screens and flows: iOS/Android/cross-platform, mockups, readable type, coherent sets. |
| **brandkit** | `brandkit` | Brand-kit boards: logo directions, palettes, type, identity applications across categories. |
| **imagegen-frontend-web** | `imagegen-frontend-web` | 网站稿:Hero、落地页、多区块,强排版与间距,反 slop 美术指导。 |
| **imagegen-frontend-mobile** | `imagegen-frontend-mobile` | 移动端界面与流程:iOS/Android/跨平台、模型图、可读字体、成套一致。 |
| **brandkit** | `brandkit` | 品牌套件板:Logo 方向、色板、字体、跨品类身份应用。 |
### Which one should I use?
### 我该用哪个?
- Start with **taste-skill** for the safest general default. (Now v2 experimental - see what changed in the [CHANGELOG](CHANGELOG.md).)
- If you depend on the exact behavior of the original taste-skill, install **taste-skill-v1** instead.
- Use **gpt-taste** when you want the stricter GPT/Codex-oriented rules and motion/layout enforcement.
- Use **image-to-code-skill** for image → analyze → code website workflows.
- Use **redesign-skill** to improve an existing codebase instead of greenfield styling.
- Add **soft-skill**, **minimalist-skill**, or **brutalist-skill** when the visual direction is already chosen.
- Add **output-skill** if the agent keeps truncating output.
- Use **imagegen-frontend-web**, **imagegen-frontend-mobile**, or **brandkit** when the deliverable is **images** (comps, flows, identity boards), then pass results to your coding agent.
- **taste-skill** 开始,作为最稳妥的通用默认。(现为 v2 实验版 — 变更见 [CHANGELOG](CHANGELOG.md)。)
- 若你依赖原版 taste-skill 的精确行为,请改装 **taste-skill-v1**
- 需要更严格的 GPT/Codex 导向规则及动效/布局约束时,使用 **gpt-taste**
- 图像 → 分析 → 代码的网站工作流,使用 **image-to-code-skill**
- 改进既有代码库而非从零设计样式时,使用 **redesign-skill**
- 视觉方向已定时,可叠加 **soft-skill****minimalist-skill** 或 **brutalist-skill**
- 若 Agent 经常截断输出,添加 **output-skill**
- 交付物为**图像**(稿图、流程图、身份板)时,使用 **imagegen-frontend-web****imagegen-frontend-mobile** 或 **brandkit**,再将结果交给编码 Agent
### Image-first tip
### 以图像为先的提示
For **image-to-code-skill**, state the pipeline in the prompt, e.g.: `follow the skill: generate images, then analyze, then code`.
使用 **image-to-code-skill** 时,请在 prompt 中说明流水线,例如:`follow the skill: generate images, then analyze, then code`
### ChatGPT Images and Codex
### ChatGPT Images Codex
Attach or paste **`imagegen-frontend-web`**, **`imagegen-frontend-mobile`**, or **`brandkit`** and ask for the frames you need, then feed the renders to Codex, Cursor, or Claude Code. Use **image-to-code-skill** when you want one workflow that both generates references and implements the site in code.
附加或粘贴 **`imagegen-frontend-web`**、**`imagegen-frontend-mobile`** **`brandkit`**,说明所需帧,然后将渲染结果交给 CodexCursor Claude Code。若希望单一工作流既生成参考图又落地站点代码,请使用 **image-to-code-skill**
## Settings (taste-skill only)
## 设置(仅 taste-skill
Numbers at the top of the file are 1-10 dials:
文件顶部的数字为 1-10 的调节旋钮:
- **DESIGN_VARIANCE**: Layout experimentation (lower: centered/clean · higher: asymmetric/modern).
- **MOTION_INTENSITY**: Animation depth (lower: hover · higher: scroll/magnetic).
- **VISUAL_DENSITY**: Information per viewport (lower: spacious · higher: dense dashboards).
- **DESIGN_VARIANCE**:布局实验程度(较低:居中/简洁 · 较高:不对称/现代)。
- **MOTION_INTENSITY**:动画深度(较低:悬停 · 较高:滚动/磁吸)。
- **VISUAL_DENSITY**:每个视口的信息量(较低:疏朗 · 较高:密集仪表盘)。
## Examples
## 示例
Created with taste-skill:
taste-skill 创建:
<p>
<img src="examples/floria-top.webp" width="400" />
<img src="examples/floria-bottom.webp" width="400" />
</p>
## Support the project
## 支持本项目
If Taste Skill helps you, consider sponsoring:
如果 Taste Skill 对你有帮助,欢迎考虑赞助:
[Sponsor on GitHub](https://github.com/sponsors/Leonxlnx)
[ GitHub 上赞助](https://github.com/sponsors/Leonxlnx)
### Current Sponsors
### 当前赞助商
<a href="https://animations.dev" title="Emil Kowalski · animations.dev"><img src="assets/sponsors/animations-dev.webp" width="62" height="62" alt="Emil Kowalski" title="Emil Kowalski · animations.dev" /></a>
<a href="https://github.com/dnakov"><img src="https://github.com/dnakov.png" width="40" height="40" style="border-radius:50%" alt="dnakov" title="dnakov" /></a>
@@ -186,9 +192,9 @@ If Taste Skill helps you, consider sponsoring:
</a>
</p>
## Research
## 研究
Background writing that shaped these skills lives in [`research/`](research/).
塑造这些技能的背景性写作见 [`research/`](research/)
## Star History
@@ -200,20 +206,20 @@ Background writing that shaped these skills lives in [`research/`](research/).
</picture>
</a>
## Common Questions
## 常见问题
**How is this different from other AI design skills?**
Multiple specialized variants, adjustable dials in key skills, anti-repetition rules informed by dedicated research. All are framework agnostic across major coding agents.
**与其他 AI 设计技能有何不同?**
多种专门变体、关键技能中的可调旋钮、基于专门研究的防重复规则。全部可在主流编码智能体(coding agents)之间通用,与框架无关。
**Does it work with React, Vue, Svelte?**
Yes. Rules target design intent, not a single framework API.
**是否适用于 ReactVueSvelte**
是的。规则针对设计意图,而非单一框架 API
**What is SKILL.md?**
A portable instruction file agents can load automatically; install via `npx skills add` or by copying into a repo or conversation.
**SKILL.md 是什么?**
智能体可自动加载的便携式指令文件;可通过 `npx skills add` 安装,或复制到仓库或对话中。
**Do image-generation skills install with `npx skills add`?**
Yes. They live under `skills/` alongside the code skills so the same CLI discovers them.
**图像生成技能是否随 `npx skills add` 一同安装?**
是的。它们与代码技能一起位于 `skills/` 下,以便同一 CLI 发现它们。
## License
## 许可证
[MIT License](LICENSE) · Copyright (c) 2026 Leonxlnx