编辑文档 - OpenCode + Taste Skill实战：AI前端代码终于有了「审美」

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

![051003.png](/uploads/eb12bc38777b4afead86a95710c82f0b.png)
用 OpenCode 和 Hermes 写前端代码，有一个共同痛点：AI 输出的界面总是带着一股「模板味」。

同样的圆角卡片，同样的渐变按钮，同样的 16px 间距，全世界的 AI 生成的 UI 看起来都差不多。不是不能用，是看完总有一种「哦这是 AI 写的」的感觉。

Taste Skill 就是来解决这个问题的。

## 什么是 Taste Skill

GitHub：Leonxlnx/taste-skill，目前 16.5K stars，MIT 协议。

官方给它的定位是：The Anti-Slop Frontend Framework for AI Agents——给 AI 代码注入设计品味的框架。

它本质上是一组 SKILL.md 提示词文件，安装到 OpenCode、Claude Code、Codex 或 Cursor 里之后，AI 在生成前端代码时会遵循一套系统的设计规范：字体层级、间距节奏、颜色搭配、动效设计。不是让它「写好看点」这种模糊指令，而是给出可以落地执行的设计规则。

安装方式：

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

单独安装某个 skill：

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

OpenCode 和 Hermes 用户可以直接将 SKILL.md 内容复制到对话中作为系统提示使用。

## 9 个 skill，总有一款适合你

项目里包含 9 个代码 skill 和 3 个图像生成 skill，按需取用。

**taste-skill（必选，默认款）**

通用型设计规则，适用于大多数前端项目，不会把界面锁定在某种固定风格，而是给出字体、间距、色彩、动效的整体把控。适合 OpenCode 和 Hermes 直接作为默认配置加载。

安装名：design-taste-frontend

**gpt-tasteskill（针对 GPT/Codex 优化）**

更严格的变体，针对 GPT 和 Codex 模型有更强的布局变化规则和 GSAP 动效指引，反「模板味」更激进。如果你主要用 Codex，选这个。

安装名：gpt-taste

**image-to-code-skill（图生代码流程）**

这个 workflow 是：先生成设计参考图 → AI 分析图像 → 再实现代码。配合 ChatGPT Images 或 Codex 的图像模式使用，先拿到设计稿，再让 AI 照着实现。

安装名：image-to-code

**redesign-skill（已有项目审计）**

不是从零开始，而是对现有项目做视觉审计，然后系统性修复布局、间距、层级、样式。适合接手一个代码已经跑起来但 UI 很糙的项目。

安装名：redesign-existing-projects

**soft-skill（高端感设计）**

柔和对比、留白充足、字体考究、弹簧动效。目标是做出「看起来很贵」的感觉，适合 SaaS 产品和品牌类项目。

安装名：high-end-visual-design

**minimalist-skill（编辑风 UI）**

Notion、Linear 那种克制色调、清晰结构、严谨层次的设计语言。适合做工具类产品。

安装名：minimalist-ui

**brutalist-skill（野兽派，Beta）**

瑞士字体、机械感排版、锐利对比、实验性布局。属于比较极端的风格，需要明确指定才用。

安装名：industrial-brutalist-ui

**output-skill（防截断输出）**

有时候 AI 生成大型项目会偷懒省略代码部分，这个 skill 强制要求完整输出，不允许占位注释和半成品。

安装名：full-output-enforcement

**stitch-skill（Google Stitch 兼容）**

如果你用 Google Stitch，这个 skill 额外输出 DESIGN.md 格式的设计规则。

安装名：stitch-design-taste

## 图像生成 skill

配合 AI 图像生成工具使用，生成的不是代码，而是设计参考图：

- imagegen-frontend-web：网站设计稿，Hero、Landing、多区块专题页
- imagegen-frontend-mobile：移动端屏幕和流程，iOS/Android/跨平台
- brandkit：品牌套件，Logo 方向、配色、字体、VI 应用

生成图像之后，丢给 OpenCode 或 Hermes 照着实现，设计师和程序员的活儿就串起来了。

## 三个可调参数

taste-skill 里内置了三个刻度盘（1-10），可以按项目需求微调：

- DESIGN_VARIANCE：布局实验度，越低越居中/干净，越高越不对称/现代
- MOTION_INTENSITY：动效强度，越低只有悬停反馈，越高包含滚动和磁性效果
- VISUAL_DENSITY：信息密度，越低越通透，越高越接近数据面板

这三个参数决定了 AI 最终输出的视觉走向，是目前同类项目中少有的精细化控制维度。

## 实际体验

用 OpenCode 加载 taste-skill 之后，生成的页面明显少了那股「AI 味」。之前 AI 默认生成的按钮永远是带 box-shadow 的蓝色卡片，现在会主动考虑间距节奏、字体层级、色彩对比这些更整体的设计决策。

尤其是 soft-skill，配合 OpenCode 的 GPT-image-2 模型，生成的 SaaS landing page 看起来真的有设计师参与过的质感，而不是一堆组件的简单堆砌。

当然，它不是银弹。AI 生成的设计代码依然需要人工审核和调整，但它把「下限」拉高了很多——至少不会再出现那种「我以为我设计得很好看」但实际上全是模板味的情况了。

摘要

标签多个标签用逗号分隔

分类