官方改造过程的八张分帧图：仪表盘从紫色渐变和发光装饰变为克制的设计，过程中标注间距。

技能 · 代码仓库

把 AI 模板界面改出产品自己的风格

围绕产品用途改造已有 AI 界面。unslop 先检查页面、与你确认设计方向，再按九轮流程调整间距、配色、文案、布局等，让界面形成自己的特点。

@heydamir unslop

查看仓库 ↗ 阅读教程 ↓

网页设计
设计评审
前端

可用于 Claude Code

概览

你会得到什么

修改前的问题清单，以及需要你确认的产品设计方向。
按顺序进行的九轮调整；问题较少时，只做针对性的细化。
两个示例页面、视觉参考，以及按需保存在线页面或渲染改造视频的脚本。

适用场景

保留产品用途，改进已有仪表盘、应用界面或落地页。
按需用一段改造过程短视频展示设计变化。

教程

看懂界面怎样改出自己的风格

如果页面功能已经有了，却充满渐变、发光、表情图标和随意的间距，可以用 unslop 从现有界面开始改。它先找出具体问题，再从产品用途和受众确定方向，依次修改间距、颜色、图标、文案、字体、布局、细节、主视觉和动效。

官方财务仪表盘示例把导航与背景收敛为深色中性色，把彩色留给付款卡片和收入图表。过程分帧里还能看到间距测量、图标替换和标题变化。观察重点不是把自己的页面也改成黑色，而是让背景退后，让产品内容成为主角。

与其他网页设计技能怎么选

让 AI 做的网页，少点模板味提供 48 种主题，支持从首屏开始制作新页面，也有检查和改版模式。unslop 更集中于现有单屏的逐层调整。
用视频与三维素材，搭出电影感首屏围绕素材和设计规格制作首屏。unslop 先处理已有界面的基础问题，再判断是否需要新的主视觉。

安装并打开练习页面

在 Claude Code 中安装完整技能包

在你存放练习项目的目录打开终端，运行官方安装命令：

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills
cp -r unslop/skills/unslop ~/.claude/skills/

复制的是完整 skills/unslop 目录，包含 SKILL.md、references/ 和 scripts/。只给一个项目使用时，也可把该目录复制到项目内的 .claude/skills/。下文的识别检查和脚本命令按全局安装编写；若采用项目安装，把 ~/.claude/skills/unslop/ 换成 .claude/skills/unslop/，并在该项目根目录执行。

进入克隆的仓库，把自带仪表盘另存为练习副本，再在这个目录启动 Claude Code：

cd unslop
cp examples/dashboard.html dashboard-practice.html
claude

在 Claude Code 中发送下面的练习请求。以下练习由本站编辑编写，使用仓库示例作为输入。

/unslop dashboard-practice.html
这是财务仪表盘练习，受众是每天查看收款与收入趋势的小团队
先打开页面，列出问题所在位置，再提出设计方向
保留页面已有功能和区块顺序，不新增统计或产品能力
先给我看问题清单和方向，等我确认后再修改

Claude 应先给出问题清单和方向，而不是立即重写文件。若它没有识别 /unslop，先确认 ~/.claude/skills/unslop/SKILL.md 存在，再在新会话中重试。

用产品用途确定改造方向

unslop 用五项内容说明方向。你要检查这些判断是否符合产品，而不只是挑一个喜欢的颜色。

项目	你要确认什么
产品	服务谁，帮助他们完成什么任务
性格	用两三个具体词描述感受，例如沉稳、精确、略有温度
视觉来源	从业务中寻找材料和联想，例如财务记录、账本、仪表
视觉重点	哪一两处值得突出，例如收入趋势与付款卡片
标志细节	哪个小细节能持续表达产品特点

如果页面只是少数细节不齐，技能会保留现有品牌、配色和布局做局部细化；已经设计成熟时，只提出少量建议，等你同意后再处理。

阅读问题清单，核对它是否真的出现在页面上。
修正不符合业务的方向。例如你希望收入趋势优先于付款卡片，就明确说明。
如果需要改造过程短视频，先要求 Claude 保存原始状态和每轮变化，再批准改造。
认可方向后，再让 Claude 开始九轮修改。

可以这样反馈：

方向采用沉稳、精确、易扫读
收入趋势是第一视觉重点，付款卡片只作辅助
保留现有产品名称和数据，先让导航与内容的层级清楚
按这个方向继续九轮调整

这里确认的是判断依据。即使换成另一个产品，也应先说清用户要看什么，再确定颜色、字体和细节。

逐轮检查，再做一次局部修改

九轮顺序是：间距 → 配色 → 图标 → 文案 → 字体 → 布局 → 细节 → 主视觉 → 动效。先理顺间距和文字，后面的字号和布局才有稳定依据。

查看改后的完整页面。先找原问题是否消失，例如导航行是否对齐、正文是否清楚、图表是否成为主要内容。
检查关键按钮、链接与原有交互，分别看桌面与手机尺寸。
选择一处继续修改，而不是笼统要求“再高级一点”。例如：

只调整左侧导航
把同级项目的行高和图标占位统一，组内间距小于组间间距
保留已经确认的颜色、字体、图表与正文布局
给我修改前后的导航截图，说明改了哪些尺寸

局部反馈写清“改哪里、要看到什么、保留什么”，便于你判断调整是否达到目标。需要生成新主视觉时，技能会先展示图像提示词；付费生成前要由你确认。

把自己的页面交给它

有源码时，在项目中提供具体组件、页面路径或运行地址；仅有截图时，技能会先重建静态页面。仅有网址时，它会保存网页并在副本上改造，交付可供后续接入的页面代码；若原页含脚本动画，把在线页面的截图交给 Claude，指出需要保留的动态效果，再逐项核对本地副本中的效果。

把方括号内容替换成自己的信息后，发给 Claude Code：

/unslop [页面文件或网址]
产品：[做什么，面向谁]
本页主要任务：[用户要完成的一个动作]
必须保留：[功能、区块顺序、真实数据和品牌素材]
目前最影响使用的问题：[一个具体观察]
先检查页面并提出方向，等我确认后再改

按需制作改造过程短视频

若想展示改版过程，在开始改造前就告诉 Claude。这样它可以在修改时记录每一轮变化，整理成 unslop-story/story.html。视频把原样式和三到五组修改放在同一个页面中，逐步改变 CSS，并配上间距测量或圆角标注。

请 Claude 根据练习页面制作过程文件：

为这次改造制作过程短视频
以原始页面为第 0 步，把变化合并成三到五组
重点展示间距、颜色与图标、文字与细节的变化
生成 unslop-story/story.html，先让我看预览，再导出

这一项需要 Node.js、Playwright、可用的 Chromium 和 FFmpeg。让 Claude 检查依赖；若项目缺少 Playwright，在项目终端安装包和浏览器：

npm install -D playwright
npx playwright install chromium

FFmpeg 使用系统对应的安装方式。回到 Claude 后，要求它先完成过程文件，再运行脚本；仅靠静态示例文件不能直接导出改造过程。

在包含 unslop-story/ 的项目根目录预览，关闭浏览器窗口后再导出：

node ~/.claude/skills/unslop/scripts/story.mjs unslop-story/story.html --play
node ~/.claude/skills/unslop/scripts/story.mjs unslop-story/story.html unslop-story.mp4

默认导出方形画面，--wide 可导出 16:9。当前脚本以 60fps 渲染，实际输出为 2160×2160 或 3840×2160；时长随步骤安排变化。它展示界面自身的变化，正式交付的页面仍使用正常项目代码。

查看成片：变化是否连续、手机上能否看清重点、结尾是否展示最终状态。脚本自带 unslop by @heydamir 署名。复制或改编技能需按 CC BY 4.0 署名 Damir Sokolovsky，并链接回原仓库。

概览