unslop

把AI味界面一键改成有设计感的成品UI

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署设计创意 🍴 复刻 150 🐛 待处理 7 👀 关注 2

GitHub ↗

GitHub 星标 ★ 3058

维护状态活跃

是否开源开源

定价模式 🏷️完全免费开源免费使用

项目预览

项目数据

分类设计创意

开发团队heydamir

GitHubhttps://github.com/heydamir/unslop

定价模式🏷️完全免费

价格说明开源免费使用

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议CC-BY-4.0

主要语言JavaScript

GitHub 星标★ 3058

上线时间2026-10-29 00:00:00

代码更新2026-10-29

仓库体积2.3 MB

本站数据更新2026-11-01

维护状态活跃

收录时间2026-11-01

浏览次数0

项目介绍

unslop 是一个面向 Claude 的技能（skill），专门把「vibecoded」那种一眼AI生成、模板感强烈的界面，改造成有设计感的成品界面。它解决的是当前 AI 辅助编码常见的通病：生成的 UI 布局呆板、间距混乱、配色俗套、组件堆砌，缺乏视觉层次与品牌感。核心能力包括识别 AI 味界面的典型特征（如过度圆角、默认阴影、千篇一律的卡片网格），并按设计原则重写样式与结构，输出更克制、更有节奏感的界面。项目以 JavaScript 实现，可作为 Claude 的扩展技能在工作流中调用，让开发者在保留功能逻辑的前提下快速提升界面质感，减少手工调样式的时间。适合独立开发者、产品原型快速打磨，以及希望统一设计语言的前端团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-11-01 · 当前星标 ★ 3058

使用教程

难度：入门约 5 分钟部署方式：本地安装 4 步

环境要求

已安装并可正常使用 Claude Code
本机可执行 git 命令
准备一个待改造的界面项目（Next.js、React、Vue、Svelte、Tailwind 或纯 HTML/CSS 均可）
如需改造线上页面，需能提供页面链接

安装与启动步骤

1克隆仓库

把 unslop 仓库下载到本地，后续从中复制技能文件。
```
git clone https://github.com/heydamir/unslop
```
2安装到用户级技能目录

创建 Claude Code 的用户级 skills 目录，并把 unslop 技能复制进去，对所有项目生效。
```
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
```
3或安装到单项目

只想在某个项目内使用时，改为在该项目根目录创建 .claude/skills 并复制技能。
```
mkdir -p .claude/skills && cp -r unslop/skills/unslop .claude/skills/
```
4调用技能改造界面

在 Claude Code 中输入 /unslop 加上目标，或用自然语言描述，Claude 会自动识别该技能。先审计并给出方向，再逐步修改。
```
/unslop this dashboard
```

关键配置

配置项	必填	说明	示例
`技能安装路径（用户级）`	是	放在此目录下，所有项目的 Claude Code 会话都能调用该技能	`~/.claude/skills/unslop`
`技能安装路径（项目级）`	否	放在项目内只对该项目生效，适合团队内共享或单项目试用	`.claude/skills/unslop`