docs: make Chinese README the default
This commit is contained in:
@@ -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** 或类似生成器配合使用,再将设计稿交给 Codex、Cursor 或 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` | 编辑型产品 UI(Notion/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 Images、Codex 图像模式或任何能生成图像的 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`**,说明所需帧,然后将渲染结果交给 Codex、Cursor 或 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.
|
||||
**是否适用于 React、Vue、Svelte?**
|
||||
是的。规则针对设计意图,而非单一框架 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
|
||||
|
||||
Reference in New Issue
Block a user