From 4420cb46cf6c4460e70dfc7938c99fa32a026ee3 Mon Sep 17 00:00:00 2001 From: wehub-resource-sync Date: Mon, 13 Jul 2026 09:51:36 +0000 Subject: [PATCH] docs: make Chinese README the default --- README.md | 156 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 81 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 5407728..2951871 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ + +> [!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 文件为准。 +

Taste Skill - Anti-slop Agent Skills for premium frontends

@@ -5,14 +11,14 @@ # Taste Skill

- The Anti-Slop Frontend Framework for AI Agents + 面向 AI Agent 的反 Slop 前端框架

Visit tasteskill.dev

-

Sponsors

+

赞助商

@@ -25,9 +31,9 @@
-

Become a sponsor

+

成为赞助商

-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 实现。

MIT License @@ -39,126 +45,126 @@ Portable **Agent Skills** that upgrade AI-built interfaces: stronger layout, typ Changelog

-## 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 没有官方代币、币种或加密货币项目。任何使用我的名字、形象或项目名称的代币均与我无关，且未经我认可。 -

Disclaimer · Install · Skills · Settings · Examples · Sponsors · Research · FAQ · License

+

免责声明 · 安装 · 技能 · 设置 · 示例 · 赞助商 · 研究 · 常见问题 · 许可证

-## 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 创建：

-## 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 +### 当前赞助商 Emil Kowalski dnakov @@ -186,9 +192,9 @@ If Taste Skill helps you, consider sponsoring:

-## 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/). -## 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