设计必装技能：taste-skill 使用教程

一键安装 13 个前端设计 Skill，让 AtomCode 生成的高级感页面脱胎换骨

🎯 课程目标

完成这节课后，你会掌握：

安装 AtomCode
用 AtomCode 一键安装 taste-skill 全部 13 个设计技能
使用 use_skill 调用不同风格的设计技能
用 taste-skill 改造现有项目，输出高级感前端页面

注意：本地终端用户先安装

第一步：安装并唤醒 AtomCode

1.1 终端安装 AtomCode

macOS ：

curl -fsSL https://raw.atomgit.com/atomgit_atomcode/atomcode/raw/main/scripts/install.sh | sh

Windows PowerShell：

irm https://raw.atomgit.com/atomgit_atomcode/atomcode/raw/main/scripts/install.ps1 | iex

1.2 启动 AtomCode

设置路径（本地存储的位置）

Cd /user/ xx

启动AtomCode

atomcode

1.3 登录并查看内置模型及用量

在 AtomCode 中输入：

/login

你会看到：

✔️ 已登录账号
✔️ CodingPlan Lite 已领取
● DeepSeek-v4-flash（默认模型）
● Qwen3.6-35B-A3B
● Qwen3-VL-8B-Instruct（视觉预处理器）
当前时间窗口用量

💡 CodingPlan 免费额度，5 小时自动重置，无限续杯。

注意：本地终端用户在终端执行，学习平台用户在右侧云端直接执行体验；

第二步：安装 taste-skill

2.1 让 AtomCode 帮你一键安装

在 AtomCode 中输入以下提示词：

帮我安装 taste-skill 设计技能包，步骤如下：
1. 从 https://gitcode.com/GitHub_Trending/ta/taste-skill?source_module=search_project 克隆仓库到临时目录
2. 读取所有 skills/ 子目录下的 SKILL.md 文件，了解完整结构
3. 将所有 skill 安装到 ~/.atomcode/skills/ 目录下
4. 安装完成后列出所有已安装的 skill 名称和描述
5. 清理临时文件

2.2 观察 AtomCode 的安装过程

AtomCode 会自动完成以下操作：

① 读取所有 Skill 文件：

└ Read(soft-skill/SKILL.md)
└ Read(output-skill/SKILL.md)
└ Read(minimalist-skill/SKILL.md)
└ Read(brutalist-skill/SKILL.md)
└ Read(stitch-skill/SKILL.md)
└ Read(imagegen-frontend-web/SKILL.md)
└ Read(imagegen-frontend-mobile/SKILL.md)
└ Read(brandkit/SKILL.md)

② 创建 skills 目录并批量安装：

● Bash(mkdir -p ~/.atomcode/skills 2>&1 && ls ~/.atomcode/skills/ 2>&1)

● Bash(cd /Users/lin/taste-skill-tmp && for dir in skills/*/; do
    name=$(basename "$dir")
    mkdir -p ~/.atomcode/skills/"$name"
    cp "$dir"SKILL.md ~/.atomcode/skills/"$name"/SKILL.md 2>/dev/null
    echo "Installed: $name"
  done)

③ 列出安装结果：

● Bash(cd ~/.atomcode/skills && find . -name "SKILL.md" | sort | while read f; do
    name=$(dirname "$f" | sed 's/\.///')
    desc=$(head -5 "$f" | grep "^description:" | sed 's/description: //')
    echo "● $name"
    echo "  ├ $desc"
    echo "  └ install-name: $(head -3 "$f" | grep "^name:" | sed 's/name: //')"
  done)

④ 清理临时文件：

● Bash(rm -rf /Users/lin/taste-skill-tmp)

2.3 安装完成

AtomCode 会输出确认信息：

✅ Taste Skill 全部 13 个 skill 已安装完成！

安装位置：~/.atomcode/skills/

第三步：了解已安装的 13 个 Skill

安装完成后，你有以下 Skill 可以直接使用：

调用方式	效果
`use_skill taste-skill`	🎨 主 skill — 默认 anti-slop 前端（v2 实验版）
`use_skill taste-skill-v1`	↪ v1 原版（兼容旧项目）
`use_skill gpt-tasteskill`	🤖 GPT/Codex 专用严格版
`use_skill image-to-code-skill`	🖼 图片→分析→代码流程
`use_skill redesign-skill`	🔄 改造现有项目 UI
`use_skill soft-skill`	✨ 高端/奢华设计风格
`use_skill minimalist-skill`	📄 极简编辑风（Notion/Linear 风格）
`use_skill brutalist-skill`	🏗 工业粗野主义风格
`use_skill output-skill`	📝 强制完整输出（防截断）
`use_skill stitch-skill`	🧵 Google Stitch 版
`use_skill imagegen-frontend-web`	🌐 生成网页设计参考图
`use_skill imagegen-frontend-mobile`	📱 生成移动端设计参考图
`use_skill brandkit`	🏷 品牌视觉系统生成

文件保存位置

所有 skill 文件保存在 ~/.atomcode/skills/ 下，每个 skill 一个文件夹：

~/.atomcode/skills/
├── taste-skill/            SKILL.md   ← 主 skill（v2）
├── taste-skill-v1/         SKILL.md   ← 原版 v1
├── gpt-tasteskill/         SKILL.md
├── image-to-code-skill/    SKILL.md
├── imagegen-frontend-web/  SKILL.md
├── imagegen-frontend-mobile/ SKILL.md
├── brandkit/               SKILL.md
├── redesign-skill/         SKILL.md
├── soft-skill/             SKILL.md
├── output-skill/           SKILL.md
├── minimalist-skill/       SKILL.md
├── brutalist-skill/        SKILL.md
└── stitch-skill/           SKILL.md

第四步：如何使用 Skill

在 AtomCode 对话中，直接说"使用 xxx-skill"或"加载 xxx-skill"即可。AtomCode 会自动加载 skill 内容并按照它的规则来执行。

支持的几种调用方式

你说	效果
使用 taste-skill 帮我设计一个落地页	加载主 skill，按 anti-slop 规则生成前端
加载 redesign-skill 改造这个项目	先审计现有 UI，再优化
使用 soft-skill，做个高端品牌官网	走奢华/高价设计风格
用 brutalist-skill 做个数据看板	工业粗野主义风格
用 output-skill 输出完整代码	强制完整输出，不加 ...
用 imagegen-frontend-web 生成参考图	生成网页设计参考图片

核心 skill（最常用）

taste-skill 是主 skill，内置三档调节旋钮：

DESIGN_VARIANCE — 布局实验性（1 对称 → 10 艺术化）
MOTION_INTENSITY — 动效深度（1 静态 → 10 电影级）
VISUAL_DENSITY — 信息密度（1 空旷 → 10 密集仪表盘）

AtomCode 加载后会自动根据你的需求（落地页/作品集/改造等）推断合适的值。

第五步：实战案例 — 用 taste-skill 改造大赛平台

5.1 让 taste-skill 重新设计大赛平台页面

在 AtomCode 中输入：

使用 taste-skill，帮我重新设计大赛平台的页面
使用/skills notebook-preview-url拼接访问地址。注意：relative_path 一定要使用 HTML 页面相对于 /opt/atomgit 的相对路径

AtomCode 会：

自动调用 UseSkill(taste-skill) 加载设计规则
读取现有项目文件
按照 taste-skill 的设计原则重新生成页面

5.2 改造效果对比

taste-skill 会输出详细的变更总结：

项目	原版	新版 (taste-skill)
字体	Inter（AI 默认）	Plus Jakarta Sans（高级感）
配色	蓝紫色渐变 + 白色	深色科技风 + Indigo 主色 + 柔和灰阶
Emoji	🏆 📋 🏅 🔥 等	全部替换为 SVG 图标
Hero	蓝渐变 + 科技网格	深色沉浸式 + 径向光照 + 数据统计
Header	普通白色导航	毛玻璃半透明粘性导航
卡片	白底 + box-shadow	白底 + hover 浮动阴影 + 平滑动画
奖金	红色金额 + 🏅 图标	灰底标签 + 星级 SVG
状态徽章	圆角标签	胶囊形 + 适中颜色
间距	标准间距	更充裕的呼吸空间
动画	fadeUp	staggered card-in + pulse-dot

三档旋钮设定：

DESIGN_VARIANCE: 7 — 现代 SaaS 布局，轻度不对称
MOTION_INTENSITY: 6 — hover 浮动 + 入场动画 + 呼吸光点
VISUAL_DENSITY: 4 — 空气感，信息清晰不拥挤

5.3 继续追问，增加更多动效

我希望主页面增加更多的动效，画面更加灵动、高级一些；用户在大赛平台报名时，能有更多的互动性和惊喜感；另外请把赛事卡片、荣誉墙的页面全部重新优化后输出给我。

AtomCode 会一次性重写三个页面，新增大量动效和互动：

🏠 首页新增动效：

自动优化了以下设计：

特性	说明
鼠标光晕跟随	全屏径向渐变在鼠标位置微光流动
数字递增动画	Hero 区奖金/报名数从 0 滚到目标值
跑马灯	横向无缝滚动新闻条，hover 暂停
按钮涟漪	按钮跟随鼠标位置显示径向光晕
浮动装饰元素	✦ ◇ ○ △ 在背景缓慢漂浮
Hero 呼吸光晕	背景径向光晕慢速缩放动画
报名弹窗 → 庆祝 🎉	填写表单 → 提交后触发全屏庆祝 + 80 个彩色纸屑飘落 + 参赛编号生成

📄 赛事详情页新增动效：

特性	说明
Hero 数字动画	报名数、队伍数递减动画
Tab 切换动画	面板 content 淡入 + 上浮
时间线进度流	已完成/进行中/未开始三态视觉
获奖名单悬停	列表项 hover 背景高亮
赛道卡片	hover 时边框高亮 + 阴影浮动
报名庆祝动效	与首页一致的弹窗 + 纸屑 + 参赛编号 🎉

🏆 荣誉墙新增动效：

特性	说明
Hero 大数字动画	赛事/选手/项目数动态增长
奖杯浮动动画	🏆 图标 3s 上下呼吸
背景光晕环绕	径向光晕 15s 慢速旋转
卡片入场交错	12 位获奖者卡片依次淡入上浮
卡片 hover 顶部彩条	金银铜对应不同色彩的进度条展开
分类/等级/搜索过滤	三种筛选实时联动，无刷新
加载更多	每次 +6 张卡片
详情弹窗	点击卡片弹出完整获奖信息

5.4 报名互动流程（惊喜感）

taste-skill 为大赛平台设计了完整的报名惊喜体验：

点击"立即报名" → 弹出 Modal 表单
  → 填写姓名/邮箱/方向/人数/同意协议
  → 点击"确认报名"
    → ✅ 全屏庆祝弹窗（弹性缩放入场）
    → 🎊 80 个彩色纸屑飘落
    → 🔖 生成参赛编号 AI-2026-XXXX
    → "进入赛事详情" 按钮

根据他的路径去寻找该文件，打开预览：

看看优化后的效果： 优化前，AI感很重：

优化后，设计感，动效拉满：

温馨提示：使用中可以指定给它特定的设计风格、动效等，越详细，出来的设计效果越好。

💡 提示词模板汇总

安装 taste-skill

帮我安装 taste-skill 设计技能包，步骤如下：
1. 从 https://github.com/Leonxlnx/taste-skill 克隆仓库到临时目录
2. 读取所有 skills/ 子目录下的 SKILL.md 文件，了解完整结构
3. 将所有 skill 安装到 ~/.atomcode/skills/ 目录下
4. 安装完成后列出所有已安装的 skill 名称和描述
5. 清理临时文件

使用主 skill 设计新页面

使用 taste-skill 帮我设计一个 AI 产品落地页

改造现有项目

使用 taste-skill，帮我重新设计这个项目的页面

指定风格设计

使用 soft-skill，帮我做一个高端品牌官网

使用 minimalist-skill，帮我做一个极简风格的待办应用

使用 brutalist-skill，帮我做一个数据看板

防止代码截断

使用 output-skill 输出完整代码，不要用 ... 省略

🧠 课程小结

今天你完成了：

✅ 安装 AtomCode 并登录 /login
✅ 一键安装 taste-skill 全部 13 个设计技能
✅ 学会用 use_skill 调用不同风格的设计技能
✅ 用 taste-skill 改造大赛平台，输出高级感前端页面
✅ 通过追问增加动效和互动惊喜感

核心要点：taste-skill 不是简单的模板，而是一套完整的设计系统——它会根据你的需求自动调节布局实验性、动效深度和信息密度，输出真正有设计感的前端代码。

❓ 常见问题

Q：安装 taste-skill 后，每次使用都要重新安装吗？ A：不用。skill 安装到 ~/.atomcode/skills/ 后是持久化的，以后每次启动 AtomCode 都可以直接调用。

Q：taste-skill 和 AtomCode 自带的代码生成有什么区别？ A：AtomCode 默认生成的前端代码偏"AI 风"（蓝紫渐变、emoji、圆角卡片），taste-skill 会让它按照专业设计系统来输出——更高级的字体、更精致的动画、更统一的配色。

Q：三档旋钮需要我手动设置吗？ A：不需要。AtomCode 加载 taste-skill 后会根据你的需求自动推断合适的值。如果你有特殊要求，可以说"动效调到最高"或"信息密度大一点"。

Q：可以同时使用多个 skill 吗？ A：可以。比如先 use_skill taste-skill 生成页面，再用 use_skill output-skill 确保代码不被截断。

Q：如何查看已安装了哪些 skill？ A：在 AtomCode 中输入 ls ~/.atomcode/skills/ 即可查看。

参考：taste-skill 项目地址： https://gitcode.com/GitHub_Trending/ta/taste-skill?source_module=search_project

设计必装技能：taste-skill 使用教程

一键安装 13 个前端设计 Skill，让 AtomCode 生成的高级感页面脱胎换骨

🎯 课程目标

完成这节课后，你会掌握：

安装 AtomCode
用 AtomCode 一键安装 taste-skill 全部 13 个设计技能
使用 use_skill 调用不同风格的设计技能
用 taste-skill 改造现有项目，输出高级感前端页面

注意：本地终端用户先安装

第一步：安装并唤醒 AtomCode

1.1 终端安装 AtomCode

macOS ：

curl -fsSL https://raw.atomgit.com/atomgit_atomcode/atomcode/raw/main/scripts/install.sh | sh

Windows PowerShell：

irm https://raw.atomgit.com/atomgit_atomcode/atomcode/raw/main/scripts/install.ps1 | iex

1.2 启动 AtomCode

设置路径（本地存储的位置）

Cd /user/ xx

启动AtomCode

atomcode

1.3 登录并查看内置模型及用量

在 AtomCode 中输入：

/login

你会看到：

✔️ 已登录账号
✔️ CodingPlan Lite 已领取
● DeepSeek-v4-flash（默认模型）
● Qwen3.6-35B-A3B
● Qwen3-VL-8B-Instruct（视觉预处理器）
当前时间窗口用量

💡 CodingPlan 免费额度，5 小时自动重置，无限续杯。

注意：本地终端用户在终端执行，学习平台用户在右侧云端直接执行体验；

第二步：安装 taste-skill

2.1 让 AtomCode 帮你一键安装

在 AtomCode 中输入以下提示词：

帮我安装 taste-skill 设计技能包，步骤如下：
1. 从 https://gitcode.com/GitHub_Trending/ta/taste-skill?source_module=search_project 克隆仓库到临时目录
2. 读取所有 skills/ 子目录下的 SKILL.md 文件，了解完整结构
3. 将所有 skill 安装到 ~/.atomcode/skills/ 目录下
4. 安装完成后列出所有已安装的 skill 名称和描述
5. 清理临时文件

2.2 观察 AtomCode 的安装过程

AtomCode 会自动完成以下操作：

① 读取所有 Skill 文件：

└ Read(soft-skill/SKILL.md)
└ Read(output-skill/SKILL.md)
└ Read(minimalist-skill/SKILL.md)
└ Read(brutalist-skill/SKILL.md)
└ Read(stitch-skill/SKILL.md)
└ Read(imagegen-frontend-web/SKILL.md)
└ Read(imagegen-frontend-mobile/SKILL.md)
└ Read(brandkit/SKILL.md)

② 创建 skills 目录并批量安装：

● Bash(mkdir -p ~/.atomcode/skills 2>&1 && ls ~/.atomcode/skills/ 2>&1)

● Bash(cd /Users/lin/taste-skill-tmp && for dir in skills/*/; do
    name=$(basename "$dir")
    mkdir -p ~/.atomcode/skills/"$name"
    cp "$dir"SKILL.md ~/.atomcode/skills/"$name"/SKILL.md 2>/dev/null
    echo "Installed: $name"
  done)

③ 列出安装结果：

● Bash(cd ~/.atomcode/skills && find . -name "SKILL.md" | sort | while read f; do
    name=$(dirname "$f" | sed 's/\.///')
    desc=$(head -5 "$f" | grep "^description:" | sed 's/description: //')
    echo "● $name"
    echo "  ├ $desc"
    echo "  └ install-name: $(head -3 "$f" | grep "^name:" | sed 's/name: //')"
  done)

④ 清理临时文件：

● Bash(rm -rf /Users/lin/taste-skill-tmp)

2.3 安装完成

AtomCode 会输出确认信息：

✅ Taste Skill 全部 13 个 skill 已安装完成！

安装位置：~/.atomcode/skills/

第三步：了解已安装的 13 个 Skill

安装完成后，你有以下 Skill 可以直接使用：

调用方式	效果
`use_skill taste-skill`	🎨 主 skill — 默认 anti-slop 前端（v2 实验版）
`use_skill taste-skill-v1`	↪ v1 原版（兼容旧项目）
`use_skill gpt-tasteskill`	🤖 GPT/Codex 专用严格版
`use_skill image-to-code-skill`	🖼 图片→分析→代码流程
`use_skill redesign-skill`	🔄 改造现有项目 UI
`use_skill soft-skill`	✨ 高端/奢华设计风格
`use_skill minimalist-skill`	📄 极简编辑风（Notion/Linear 风格）
`use_skill brutalist-skill`	🏗 工业粗野主义风格
`use_skill output-skill`	📝 强制完整输出（防截断）
`use_skill stitch-skill`	🧵 Google Stitch 版
`use_skill imagegen-frontend-web`	🌐 生成网页设计参考图
`use_skill imagegen-frontend-mobile`	📱 生成移动端设计参考图
`use_skill brandkit`	🏷 品牌视觉系统生成

文件保存位置

所有 skill 文件保存在 ~/.atomcode/skills/ 下，每个 skill 一个文件夹：

~/.atomcode/skills/
├── taste-skill/            SKILL.md   ← 主 skill（v2）
├── taste-skill-v1/         SKILL.md   ← 原版 v1
├── gpt-tasteskill/         SKILL.md
├── image-to-code-skill/    SKILL.md
├── imagegen-frontend-web/  SKILL.md
├── imagegen-frontend-mobile/ SKILL.md
├── brandkit/               SKILL.md
├── redesign-skill/         SKILL.md
├── soft-skill/             SKILL.md
├── output-skill/           SKILL.md
├── minimalist-skill/       SKILL.md
├── brutalist-skill/        SKILL.md
└── stitch-skill/           SKILL.md

第四步：如何使用 Skill

在 AtomCode 对话中，直接说"使用 xxx-skill"或"加载 xxx-skill"即可。AtomCode 会自动加载 skill 内容并按照它的规则来执行。

支持的几种调用方式

你说	效果
使用 taste-skill 帮我设计一个落地页	加载主 skill，按 anti-slop 规则生成前端
加载 redesign-skill 改造这个项目	先审计现有 UI，再优化
使用 soft-skill，做个高端品牌官网	走奢华/高价设计风格
用 brutalist-skill 做个数据看板	工业粗野主义风格
用 output-skill 输出完整代码	强制完整输出，不加 ...
用 imagegen-frontend-web 生成参考图	生成网页设计参考图片

核心 skill（最常用）

taste-skill 是主 skill，内置三档调节旋钮：

DESIGN_VARIANCE — 布局实验性（1 对称 → 10 艺术化）
MOTION_INTENSITY — 动效深度（1 静态 → 10 电影级）
VISUAL_DENSITY — 信息密度（1 空旷 → 10 密集仪表盘）

AtomCode 加载后会自动根据你的需求（落地页/作品集/改造等）推断合适的值。

第五步：实战案例 — 用 taste-skill 改造大赛平台

5.1 让 taste-skill 重新设计大赛平台页面

在 AtomCode 中输入：

使用 taste-skill，帮我重新设计大赛平台的页面
使用/skills notebook-preview-url拼接访问地址。注意：relative_path 一定要使用 HTML 页面相对于 /opt/atomgit 的相对路径

AtomCode 会：

自动调用 UseSkill(taste-skill) 加载设计规则
读取现有项目文件
按照 taste-skill 的设计原则重新生成页面

5.2 改造效果对比

taste-skill 会输出详细的变更总结：

项目	原版	新版 (taste-skill)
字体	Inter（AI 默认）	Plus Jakarta Sans（高级感）
配色	蓝紫色渐变 + 白色	深色科技风 + Indigo 主色 + 柔和灰阶
Emoji	🏆 📋 🏅 🔥 等	全部替换为 SVG 图标
Hero	蓝渐变 + 科技网格	深色沉浸式 + 径向光照 + 数据统计
Header	普通白色导航	毛玻璃半透明粘性导航
卡片	白底 + box-shadow	白底 + hover 浮动阴影 + 平滑动画
奖金	红色金额 + 🏅 图标	灰底标签 + 星级 SVG
状态徽章	圆角标签	胶囊形 + 适中颜色
间距	标准间距	更充裕的呼吸空间
动画	fadeUp	staggered card-in + pulse-dot

三档旋钮设定：

DESIGN_VARIANCE: 7 — 现代 SaaS 布局，轻度不对称
MOTION_INTENSITY: 6 — hover 浮动 + 入场动画 + 呼吸光点
VISUAL_DENSITY: 4 — 空气感，信息清晰不拥挤

5.3 继续追问，增加更多动效

我希望主页面增加更多的动效，画面更加灵动、高级一些；用户在大赛平台报名时，能有更多的互动性和惊喜感；另外请把赛事卡片、荣誉墙的页面全部重新优化后输出给我。

AtomCode 会一次性重写三个页面，新增大量动效和互动：

🏠 首页新增动效：

自动优化了以下设计：

特性	说明
鼠标光晕跟随	全屏径向渐变在鼠标位置微光流动
数字递增动画	Hero 区奖金/报名数从 0 滚到目标值
跑马灯	横向无缝滚动新闻条，hover 暂停
按钮涟漪	按钮跟随鼠标位置显示径向光晕
浮动装饰元素	✦ ◇ ○ △ 在背景缓慢漂浮
Hero 呼吸光晕	背景径向光晕慢速缩放动画
报名弹窗 → 庆祝 🎉	填写表单 → 提交后触发全屏庆祝 + 80 个彩色纸屑飘落 + 参赛编号生成

📄 赛事详情页新增动效：

特性	说明
Hero 数字动画	报名数、队伍数递减动画
Tab 切换动画	面板 content 淡入 + 上浮
时间线进度流	已完成/进行中/未开始三态视觉
获奖名单悬停	列表项 hover 背景高亮
赛道卡片	hover 时边框高亮 + 阴影浮动
报名庆祝动效	与首页一致的弹窗 + 纸屑 + 参赛编号 🎉

🏆 荣誉墙新增动效：

特性	说明
Hero 大数字动画	赛事/选手/项目数动态增长
奖杯浮动动画	🏆 图标 3s 上下呼吸
背景光晕环绕	径向光晕 15s 慢速旋转
卡片入场交错	12 位获奖者卡片依次淡入上浮
卡片 hover 顶部彩条	金银铜对应不同色彩的进度条展开
分类/等级/搜索过滤	三种筛选实时联动，无刷新
加载更多	每次 +6 张卡片
详情弹窗	点击卡片弹出完整获奖信息

5.4 报名互动流程（惊喜感）

taste-skill 为大赛平台设计了完整的报名惊喜体验：

点击"立即报名" → 弹出 Modal 表单
  → 填写姓名/邮箱/方向/人数/同意协议
  → 点击"确认报名"
    → ✅ 全屏庆祝弹窗（弹性缩放入场）
    → 🎊 80 个彩色纸屑飘落
    → 🔖 生成参赛编号 AI-2026-XXXX
    → "进入赛事详情" 按钮

根据他的路径去寻找该文件，打开预览：

看看优化后的效果： 优化前，AI感很重：

优化后，设计感，动效拉满：

温馨提示：使用中可以指定给它特定的设计风格、动效等，越详细，出来的设计效果越好。

💡 提示词模板汇总

安装 taste-skill

帮我安装 taste-skill 设计技能包，步骤如下：
1. 从 https://github.com/Leonxlnx/taste-skill 克隆仓库到临时目录
2. 读取所有 skills/ 子目录下的 SKILL.md 文件，了解完整结构
3. 将所有 skill 安装到 ~/.atomcode/skills/ 目录下
4. 安装完成后列出所有已安装的 skill 名称和描述
5. 清理临时文件

使用主 skill 设计新页面

使用 taste-skill 帮我设计一个 AI 产品落地页

改造现有项目

使用 taste-skill，帮我重新设计这个项目的页面

指定风格设计

使用 soft-skill，帮我做一个高端品牌官网

使用 minimalist-skill，帮我做一个极简风格的待办应用

使用 brutalist-skill，帮我做一个数据看板

防止代码截断

使用 output-skill 输出完整代码，不要用 ... 省略

🧠 课程小结

今天你完成了：

✅ 安装 AtomCode 并登录 /login
✅ 一键安装 taste-skill 全部 13 个设计技能
✅ 学会用 use_skill 调用不同风格的设计技能
✅ 用 taste-skill 改造大赛平台，输出高级感前端页面
✅ 通过追问增加动效和互动惊喜感

❓ 常见问题

Q：安装 taste-skill 后，每次使用都要重新安装吗？ A：不用。skill 安装到 ~/.atomcode/skills/ 后是持久化的，以后每次启动 AtomCode 都可以直接调用。

Q：可以同时使用多个 skill 吗？ A：可以。比如先 use_skill taste-skill 生成页面，再用 use_skill output-skill 确保代码不被截断。

Q：如何查看已安装了哪些 skill？ A：在 AtomCode 中输入 ls ~/.atomcode/skills/ 即可查看。

参考：taste-skill 项目地址： https://gitcode.com/GitHub_Trending/ta/taste-skill?source_module=search_project

设计必装技能：taste-skill 使用教程

🎯 课程目标

第一步：安装并唤醒 AtomCode

1.1 终端安装 AtomCode

1.2 启动 AtomCode

1.3 登录并查看内置模型及用量

第二步：安装 taste-skill

2.1 让 AtomCode 帮你一键安装

2.2 观察 AtomCode 的安装过程

2.3 安装完成

第三步：了解已安装的 13 个 Skill

文件保存位置

第四步：如何使用 Skill

支持的几种调用方式

核心 skill（最常用）

第五步：实战案例 — 用 taste-skill 改造大赛平台

5.1 让 taste-skill 重新设计大赛平台页面

5.2 改造效果对比

5.3 继续追问，增加更多动效

5.4 报名互动流程（惊喜感）

💡 提示词模板汇总

安装 taste-skill

使用主 skill 设计新页面

改造现有项目

指定风格设计

防止代码截断

🧠 课程小结

❓ 常见问题

需要登录后查看

设计必装技能：taste-skill 使用教程

🎯 课程目标

第一步：安装并唤醒 AtomCode

1.1 终端安装 AtomCode

1.2 启动 AtomCode

1.3 登录并查看内置模型及用量

第二步：安装 taste-skill

2.1 让 AtomCode 帮你一键安装

2.2 观察 AtomCode 的安装过程

2.3 安装完成

第三步：了解已安装的 13 个 Skill

文件保存位置

第四步：如何使用 Skill

支持的几种调用方式

核心 skill（最常用）

第五步：实战案例 — 用 taste-skill 改造大赛平台

5.1 让 taste-skill 重新设计大赛平台页面

5.2 改造效果对比

5.3 继续追问，增加更多动效

5.4 报名互动流程（惊喜感）

💡 提示词模板汇总

安装 taste-skill

使用主 skill 设计新页面

改造现有项目

指定风格设计

防止代码截断

🧠 课程小结

❓ 常见问题

需要登录后查看