Appearance
直接用 GPT Image 2 先生成高质量设计图，再让 Codex 分析图像、精准还原代码，这种"生成图片，Codex 分析，Codex 构建网站"的流程，能让 AI 生成的网站瞬间从"模板味"变成"产品级"。
这个完整高效的工作流，被完美封装成了一个开源神器 —— Taste-Skill。
GitHub 地址：https://github.com/Leonxlnx/taste-skill
解决什么问题
传统用法里，你可能会直接对 Codex 说：
给我做一个干净的猫咖网站。
Codex 往往能做出来。页面能打开，布局也完整，按钮、标题、图片区域都有。但问题是，它大概率看起来像"AI 默认模板"：能用，但不够有质感。
Taste-Skill 的新玩法，是把流程拆成三步：
- 先用 GPT Image 2 生成专业级网站设计图
- 再让 Codex 仔细分析图像里的布局、字体、间距、配色和交互
- 最后输出 HTML、CSS、JS，或者适配 React、Vue、Svelte 等框架
这套流程的价值在于：
- 页面不再完全依赖文字提示词想象
- 视觉目标更明确，减少"模板味"
- 布局、排版、色彩这些细节更容易被保留下来
- 最终结果更接近真实产品级界面
Skills 一览
这个仓库不是只有一个技能，而是一整套前端生成工具箱：
代码输出类
| Skill | 用途 |
|---|---|
taste-skill | 默认全能技能，适合大多数场景。不锁定单一风格，提供高端前端输出，平衡美观与实用性 |
gpt-taste | 针对 GPT / Codex 优化的激进版本，更偏现代视觉和动效。如果你想要更强的视觉冲击力，可以试这个 |
image-to-code-skill | 图像优先流水线技能。先让 AI 生成网站参考图像，分析图像后再精确实现匹配的前端代码。这是整个项目最核心的"图像转代码"技能 |
redesign-skill | 重构升级技能。适合改造已有项目，先审计当前 UI 的问题（布局、间距、层级、样式等），再针对性优化提升 |
设计风格类
| Skill | 用途 |
|---|---|
minimalism-skill | 极简主义风格技能。帮你打造干净利落、留白充足、重点突出的界面 |
neo-brutalism-skill | 新野兽派风格技能。适合追求大胆配色、粗犷边框、强烈视觉冲击的项目 |
glass-skill | 玻璃拟态风格技能。专注于毛玻璃、渐变、透明叠加等现代视觉效果 |
安装使用
环境要求
- Claude Code（用于代码生成）
- GPT Image 2（用于设计图生成）
- Node.js 环境（用于 Skill 管理）
安装命令
bash
# 克隆仓库
git clone https://github.com/Leonxlnx/taste-skill.git
# 进入目录
cd taste-skill
# 查看可用 Skills
ls skills/核心使用流程
方法一：使用 image-to-code-skill（推荐）
1. 用 GPT Image 2 生成网站设计图
提示词示例："A modern coffee shop website hero section, minimalist design, warm tones, professional photography"
2. 保存设计图
3. 在 Claude Code 中加载 image-to-code-skill
/skill image-to-code-skill
4. 把设计图作为上下文发给 Claude Code
5. Claude Code 分析图像并生成代码方法二：使用 taste-skill 直接生成
1. 在 Claude Code 中加载 taste-skill
/skill taste-skill
2. 描述你的需求
"帮我做一个现代感的作品集网站，包含首页、关于我和联系页面"
3. Claude Code 会生成完整的前端代码使用效果
官方给出的效果图很棒。用它生成了一个猫咖网站，出来的效果确实比普通一句话生成的网站舒服不少：
- 页面更有层次
- 视觉更统一
- 也更像一个真实品牌页面，而不是临时拼出来的 Demo
适用场景
| 场景 | 推荐 Skill |
|---|---|
| 快速原型开发 | taste-skill |
| 追求视觉冲击力 | gpt-taste |
| 有设计稿需要还原 | image-to-code-skill |
| 改造现有项目 | redesign-skill |
| 极简风格网站 | minimalism-skill |
| 大胆创意风格 | neo-brutalism-skill |
| 现代毛玻璃效果 | glass-skill |
一句话总结
Taste-Skill 把 GPT Image 2 的设计能力和 Codex 的代码能力串联起来，让 AI 生成网站从"能用"升级到"好看"。
