Taste Skill

用于 AI 智能体的 Anti-Slop 前端框架

赞助商

Novamira · 为 AI 智能体提供完整的 WordPress 访问权限 Kimi 开源伙伴

	_{IMG.LY · CreativeEditor SDK}
	_{Emil Kowalski · animations.dev}
	_{Sent.dm · 用于 SMS、WhatsApp 以及 RCS 的消息传递 API}

_{成为赞助商}

这些可移植的 Agent Skills 能够升级由 AI 构建的界面：相比那些千篇一律的 UI，它们能带来更出色的布局、排版、动画效果以及间距控制。该仓库还包含了用于参考板（网页、移动端、品牌资料包）的 图像生成技能。您可以将它们与 ChatGPT Images 或类似的图像生成工具结合使用，随后将生成的框架交由 Codex、Cursor 或 Claude Code 来实现。

免责声明

Taste Skill 并没有官方发行的代币、硬币或加密货币项目。任何使用我的名字、形象或项目的代币，均与我无关，也未得到我的认可。

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

反馈与贡献

我们非常欢迎您的反馈。如有建议或错误报告：

在 GitHub 上创建 Pull Request 或 Issue
直接私信 @lexnlin 或 @blueemi99
发送邮件至 hello@tasteskill.dev

安装

npx skills add CLI 会扫描此仓库中的 skills/ 文件夹，因此以下所有的技能（代码类及图像生成类）都采用相同的方式安装。

npx skills add https://github.com/Leonxlnx/taste-skill

可以通过其 安装名称（即 SKILL 前置信息中的 name: 字段，而非文件夹名称）来安装单个技能：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

图像生成技能

这些插件仅能生成设计图片（不含代码）。可搭配 ChatGPT Images、Codex 的图片模式，或任何能够生成图片的智能体使用。

技能（文件夹）	安装名称	描述
imagegen-frontend-web	`imagegen-frontend-web`	网站构图：主视觉区、着陆页、多板块设计，注重排版、间距以及富有层次感的艺术导向。
imagegen-frontend-mobile	`imagegen-frontend-mobile`	移动端界面与流程设计：适用于 iOS/Android 及跨平台场景，包含界面原型、易读的字体以及连贯的视觉系列。
brandkit	`brandkit`	品牌工具包：涵盖标志设计方向、色彩方案、字体选择，以及各类场景下的品牌应用设计。

我该选择哪一个？

若希望获得最稳妥的通用默认选项，可从 taste-skill 开始。（目前为 v2 测试版——可查看 CHANGELOG 中的变更内容。）
如果你需要与原始 taste-skill 完全一致的功能表现，请安装 taste-skill-v1。
当你需要更严格的、以 GPT/Codex 为准则的规则以及更严格的动效/布局要求时，可使用 gpt-taste。
对于“图片 → 分析 → 生成代码构建网站”的工作流，可使用 image-to-code-skill。
若想改进现有的代码库而非从零开始进行样式设计，可使用 redesign-skill。
在视觉方向已经确定后，可添加 soft-skill、minimalist-skill 或 brutalist-skill。
如果智能体总是截断输出内容，可添加 output-skill。
当最终输出结果需要为图片（如构图图、界面流程图、品牌设计板）时，可使用 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，随后将生成的图片传递给你的编程智能体。

以图片优先的技巧

对于 image-to-code-skill，可在提示词中明确说明相应的处理流程，例如：follow the skill: generate images, then analyze, then code。

ChatGPT Images 与 Codex

附上或粘贴 imagegen-frontend-web、imagegen-frontend-mobile 或 brandkit，说明你需要的画面帧，然后将生成的图片输入到 Codex、Cursor 或 Claude Code 中。如果你希望通过一个工作流同时生成参考图片并直接将网站实现为代码，可使用 image-to-code-skill。