Taste Skill 首页：前端设计框架介绍、安装命令与网页示例。
项目截图关于这个 Skill
Taste Skill 是 Leonxlnx 维护的前端设计 Skill。主仓库目前只保留 design-taste-frontend 一个入口。v2.1 系列区分公开网页与应用界面，按研究参考选择视觉方向，结合业务特有内容和图片完成实现，再在真实浏览器中检查结果。旧风格和图片生成 Skills 已迁至独立仓库。
为什么推荐
适合改善生成页面过于模板化的问题。先提供受众、业务特有的内容和品牌素材，再按流程选择视觉方向并检查真实截图。主仓库目前只保留一个 Skill，旧风格与图片工作流已迁至其他仓库。
适合用来做什么
- 需要明确视觉方向的营销网站与落地页。
- 开发者、设计师与创意工作室的作品集。
- 需要保留品牌素材、内容与导航的网站改版。
- 需要独立交互和布局规则的仪表盘、分析页、管理界面与设置页。
先理解需求，再确定设计
理解需求与内容论证
识别主题、受众、目标、素材和约束，根据真实主张与证据组织内容段落。
从研究方向中选择
draw 脚本提供研究过的视觉方向，Agent 选择符合主题的方案，再确定构图、字体与配色。当前主入口已采用这一流程。
检查并改进实际结果
使用真实浏览器检查桌面、平板与手机宽度，查看截图并修正影响最大的问题；自动检查通过后仍需视觉复核。
应用界面使用独立流程
仪表盘、设置和管理界面使用独立的视觉方向、数据、图表、表格与导航规则，对应 draw.mjs --app 和 inspect.mjs --app。
改版前先审查
改版能力已合并进 design-taste-frontend，修改前先在真实浏览器中审查已有页面。请说明需要保留的品牌、内容、URL 与交互，再按相关屏幕宽度检查改版结果。
当前入口与旧 Skills 去向
主入口：design-taste-frontend
安装名保持不变。当前变更记录列出 2026 年 10 月 20 日的 v2.1.4，不再将默认入口描述为旧的 v2 实验变体。
经典风格与早期版本
gpt-taste、high-end-visual-design、minimalist-ui、industrial-brutalist-ui、stitch-design-taste、design-taste-frontend-v1 与 design-taste-frontend-v2-experimental 已迁往 Leonxlnx/taste-skill-classics，安装名保留。
图片生成工作流
imagegen-frontend-web、imagegen-frontend-mobile、brandkit 与 image-to-code 已迁往 Leonxlnx/imagegen-skills，图片任务从该仓库安装。
改版能力与已移除入口
redesign-existing-projects 已并入主 Skill。full-output-enforcement 已移除，作者将相关需求指向 Leonxlnx/unlazy。
安装或更新
Claude Code：项目 Skills 根目录为 .claude/skills/；安装到该根目录后的主入口为 .claude/skills/design-taste-frontend/SKILL.md。通过安装器选择项目或全局范围。
Codex CLI：项目 Skills 根目录为 .agents/skills/；安装到该根目录后的主入口为 .agents/skills/design-taste-frontend/SKILL.md。通过安装器选择项目或全局范围。
Cursor：项目 Skills 根目录为 .cursor/skills/；安装到该根目录后的主入口为 .cursor/skills/design-taste-frontend/SKILL.md。通过安装器选择项目或全局范围。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "design-taste-frontend-v1" | 从新仓库安装早期 v1 入口。 |
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "gpt-taste" | 从新仓库安装偏 GPT 的经典入口。 |
npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "imagegen-frontend-web" | 从新仓库安装网页图片生成入口。 |
安装主 Skill
在终端执行作者提供的命令并选择编码 Agent。--skill 使用 frontmatter 中的名称 design-taste-frontend，而非文件夹名 taste-skill。再次执行同一命令即可更新。
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Claude Code 插件方式
Claude Code 也可以将仓库作为插件安装。在 Claude Code 内执行以下命令，插件 Skills 使用 taste-skill: 命名空间。普通 npx 安装仍可使用。
| 命令 | 用途与使用时机 |
|---|---|
/plugin marketplace add Leonxlnx/taste-skill | 添加作者的插件市场。 |
/plugin install taste-skill@taste-skill | 安装仓库插件。 |
/plugin update | 后续更新已安装插件。 |
Codex 插件方式
在终端运行以下命令，添加作者插件市场并安装插件，完成后启动新的 Codex 会话以加载 Skill。
| 命令 | 用途与使用时机 |
|---|---|
codex plugin marketplace add Leonxlnx/taste-skill | 添加作者的 Codex 插件市场。 |
codex plugin add taste-skill@taste-skill | 安装 Taste Skill 主插件。 |
第一次可以这样提需求
用 design-taste-frontend 改版这个面向招聘方的作品集。保留现有 logo、文案和 URL，先审查网站，再采用编辑式排版、克制动效和中等布局变化。实现前说明设计判断，并检查手机布局、键盘操作和减少动效偏好。
使用前需要了解
- 准备能够访问项目的编码 Agent，在安装器中选择对应集成，安装后重新加载工具。
- 内置脚本与真实浏览器检查需要 Node.js 22 或更新版本，以及已安装的 Chrome、Edge 或 Chromium。图片检索需要联网；主 Skill 不要求 API Key。
- Skill 使用 MIT 许可证；Agent 使用和托管可能产生独立费用。交付前检查图片署名、生成代码、交互与实际截图。
支持的 Agent
常见问题
现在应安装哪个入口？
从 Leonxlnx/taste-skill 安装 design-taste-frontend。这是主仓库当前唯一的 Skill，再次运行相同安装命令即可更新。
旧版与变体迁到哪里了？
经典风格与早期版本迁到 taste-skill-classics，图片生成工作流迁到 imagegen-skills。安装名保留，安装命令中的来源仓库需要更换。
支持应用界面吗？
支持。v2.1 系列为仪表盘、管理、分析和设置界面提供独立流程，包括应用布局和浏览器检查。
需要什么运行环境？
内置脚本需要 Node.js 22+ 与 Chrome、Edge 或 Chromium，图片检索需要网络。主 Skill 不要求 API Key。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
