弈韬 Vibecoding
灵感与提示词库

玻璃面板浮起

BACKDROP BLUR + SHEET

背景先模糊，半透明玻璃面板从底部浮上来，用户始终知道自己原来在哪一页。

怎么做的：点开后先让后面的页面慢慢模糊，一块半透明的玻璃面板从底下浮上来。12 个月份格子按已经用掉的比例一格一格填满，背景没有被完全挡住。

点开面板，后面的页面慢慢模糊，一块半透明的玻璃面板从底下浮上来，12 个月份格子再按照已经用掉的比例一格一格填满。背景没有被完全挡住，还能知道自己原来在哪一页。

圆环进度弹出

RING + NUMBER SYNC

面板升起的同时外圈圆环画到剩余天数，数字同步变化，最重要的信息打开即给。

怎么做的：面板从底部升上来，外圈圆环顺着画到剩余天数，中间的数字也跟着一起变化。打开的这一刻，最重要的信息就直接反馈给用户。

面板从底部升上来，外圈圆环顺着画到剩余天数，中间的数字也跟着一起变化。打开的这一刻，最重要的信息就直接给你反馈。

刻度尺扫到今天

SCALE SWEEP

面板像一张纸质凭证滑出来，时间刻度从头扫到今天这一格再停住。

怎么做的：面板像一张纸质凭证滑出来，下方时间刻度从头扫到今天这一格，然后停住。点一下显示按钮，完整编号原地展开。用了多久、还剩多少，打开就能感受到。

面板向一张纸质凭证划出来，下面的时间刻度从头扫到今天这一格，然后停住，再点一下显示按钮，完整编号原地展开。用了多久还剩多少，打开就能感动。

照片抽屉贴合

PHOTO + DRAWER

照片先放大铺满，抽屉从下面推上来压住下沿，有画面感也不丢信息。

怎么做的：先显示一张照片放大铺满，接着抽屉从下面推上来，刚好压住照片的下沿。数字、进度和按钮都收进抽屉里，有画面感，信息也照样清楚。

显示一张照片放大铺满，接着抽屉从下面推上来，刚好压住照片的下沿。数字、进度和按钮都收进抽屉里，有画面感，信息也照样清楚。

点击翻面凭证

FLIP IN PLACE

不用跳新页面，整块面板原地翻过去，正反两面固定在同一位置。

怎么做的：点"查看凭证"不用跳到新页面，整块面板直接在原地翻过去。正面是凭证信息，翻到背面就是需要出示的信息。正反两面都在同一个位置，整个过程不会丢掉上下文。

点查看凭证，不用跳到新页面，整块面板直接在原地翻过去。正面是凭证信息，翻到背面，就是需要出示的信息。正反两面都在同一个位置，整个过程不会丢掉上下文。

下拉展开面板

DRAG HANDLE

面板底部留可拖动把手，往下一拉下半张面板跟着展开。

怎么做的：面板从底部弹出来，最下面留一个可以拖动的把手，手指往下一拉，下半张面板跟着展开，完整信息直接露出来。需要出示的时候，拉一下就能看到。

面板从底部弹出来，最下面留一个可以拖动的把手，手指往下一拉，下半张面板跟着展开，完整信息直接露出来。

滚动钉住主图

SCROLL PIN + NARRATIVE

产品介绍页专用：主图固定居中，旁侧文案分段切换，主图随段落推进并点亮重点。

怎么做的：页面往下滚的时候，主图固定在中间，旁边的文字一段段切换，每换一段主图就跟着推进到对应位置，再把重点区域亮出来。原本很长的一段介绍，变成了一个跟着滚动发生的视觉叙事。

页面往下滚的时候，主图固定在中间，旁边的文字一段段切换，每换一段主图就跟着推进对应的位置，再把重点区域亮出来。原本很长的一段介绍，变成了一个跟着滚动发生的视觉叙事。

光标即可操作提示

CURSOR AS AFFORDANCE

小圆点放大成橙色圆并显示"查看"，光标本身就在告诉用户这里可以操作。

怎么做的：鼠标移到大图上，小圆点直接放大成一个橙色圆，中间出现"查看"二字；移到按钮上又缩回小点。这样用户不用看额外的提示，光标本身就在告诉它这里可以操作。

鼠标移到大图上，小圆点直接放大成一个橙色圆，中间出现查看。移到按钮上又缩回小点。这样用户不用看额外的提示，光标本身就在告诉它，这里可以操作。

磁吸按钮

MAGNETIC BUTTON

鼠标未碰到按钮就被轻轻吸过来，松开按同一力度回弹——Skill 统一了力度。

怎么做的：鼠标还没碰到按钮，按钮就会被光标轻轻吸过来，跟着移动一点，松开之后再弹回原来的位置。这种很小的位移就能让普通按钮多一点互动感。回弹的力度后面每个交互都是同一种，这就是 Skill 统一出来的。

鼠标还没碰到按钮，按钮就会给光标轻轻吸过来，跟着移动一点，松开之后再弹回原来的位置。这种很小的位移，就能让普通按钮多一点互动感。这个回弹的力度，后面每个交互都是同一种，这就是 Skill 统一出来的。

图标按钮展开标签

ICON → LABEL

平时只显示一排圆形图标保持页面干净，悬停向右展开文字标签。

怎么做的：平时只显示一排圆形图标，保持页面干净。鼠标停在哪一个，它就向右展开，把对应的文字标签带出来，移开之后又恢复成圆形。不用把所有信息都一直摆出来，需要的时候再告诉用户。

平时只显示一排圆形图标，保持页面干净，鼠标停在哪一个，它就向右展开，把对应的文字标签带出来，移开之后又恢复成圆形。不用把所有信息都一直摆出来，需要的时候再告诉用户。

导航底色跟随

NAV PILL SLIDE

圆角底色跟着鼠标滑过去，宽度随文字长度自动变化，导航产生连续互动感。

怎么做的：鼠标在顶部导航移动的时候，后面的圆角底色也跟着划过去。每个导航文字长度不同，底色的宽度也会自动变化。比简单的换个文字颜色，更能让导航产生连续的互动感。

鼠标在顶部导航移动的时候，后面的圆角底色也跟着划过去。每个导航文字长度不同，底色的宽度也会自动变化。比简单的换个文字颜色，更能让导航产生连续的互动感。

功能块悬停翻色

HOVER SWEEP

橙色从右上角箭头开始向外扩散覆盖整块，文字同步反转，箭头跟着转向。

怎么做的：鼠标移上去之后，橙色从右上角的箭头开始一点点向外扩散，最后覆盖整个功能块，文字同步反转，箭头也跟着转向。一个很简单的悬停，就能让一整排功能块有了层次。全页只有当前这一块是橙色——这条用色的规矩也是 Skill 定的。

鼠标移上去之后，橙色从右上角的箭头开始，一点点向外扩散，最后覆盖整个功能块，文字同步反转，箭头也跟着转向。一个很简单的悬停，就能让一整排功能块有了层次。全页只有当前这一块是橙色，这条用色的规矩也是 Skill 定的。

分档拖动条

SNAPPING SLIDER

拖动圆钮数字一格一格变化，走过的区域变橙，松手自动吸附到最近档位。

怎么做的：有些参数如果直接用下拉框选择，操作起来会比较费劲。换成拖动条之后，拖动圆钮数字一格一格变化，走过的区域同步变成橙色，松手之后还会自动吸附到最新的档位。调到多少，不用猜，一眼就能看到。

有些参数如果直接用下拉框选择，操作起来会比较激泄。换成这种拖动条之后，拖动圆扭数字一格一格变化，走过的区域同步变成橙色，松手之后还会自动吸附到最新的档位。调到多少，不用猜，一眼就能看到。

图表跟随鼠标

CHART CROSSHAIR

鼠标横向移动带出一条竖线，左边柱子亮起右边压暗，顶部数字实时变化。

怎么做的：鼠标在柱状图上横向移动，一条竖线跟着走，左边的柱子亮起来、右边压暗，顶部数字也实时变化。不用一根根停下来找数据，扫过去就能快速读完整张图。

鼠标在柱状图上横向移动，一条竖线跟着走，左边的柱子亮起来右边压按，顶部数字也实时变化。不用一根根停下来找数据，扫过去就能快速读完整张图。

悬停预览图片

LIST → FLOAT IMAGE

文字列表划到哪一行，对应图片就跟着浮出来，列表本身保持整齐。

怎么做的：一列文字列表，鼠标划到哪一行，对应的图片就跟着浮出来，换一行图片也跟着换。列表本身保持整齐，图片只在需要的时候出现。这种交互特别适合案例展示、作品集和产品介绍页。

一列文字列表，鼠标划到哪一行，对应的图片就跟着浮出来，换一行，图片也跟着换。列表本身保持整齐，图片只在需要的时候出现。这种交互特别适合案例展示、作品集和产品介绍页。

圆形扩散换肤

VIEW TRANSITIONS THEME

深浅色从按钮位置圆形扩散覆盖全页，图标同时变形，再次点击原路收回。

怎么做的：点击右上角的太阳，深色从按钮的位置一点点向外扩散，直到覆盖整个页面，图标同时变成月亮；再次点击，又从原来的位置收回来。连一个简单的深浅色切换，都可以变成页面的一部分。深浅两条配色不用自己调，Skill 里本来就有。

点击右上角的太阳，深色从按钮的位置一点点向外扩散，直到覆盖整个页面，图标同时变成月亮。再次点击，又从原来的位置收回来。连一个简单的深浅色切换，都可以变成页面的一部分。深浅两条配色，不用自己调，Skill 里本来就有。

第一步：需求 Skill

DEFINE BEFORE DESIGN

不急着画页面，先把目标用户、传达内容、区块任务拆成一份页面定义。

怎么做的：做线上挑战活动落地页时，第一步先把需求交给需求 Skill，只告诉它"做一个线上挑战活动的落地页，给想报名参加的人看"。它不急着画页面，先把这件事拆清楚：目标用户是谁、页面要传达什么、需要哪些内容、每个区块解决什么问题，最后整理成一份页面定义，后面的设计都基于这份定义往下做。

我不会一上来就让 AI 写页面。第一步，先把需求交给需求 Skill，只告诉他，做一个线上挑战活动的落地页，给想报名参加的人看。他不急着画页面，先把这件事拆清楚：目标用户是谁、页面要传达什么、页面需要哪些内容、每个区块解决什么问题。最后整理成一份页面定义。

第二步：UI Skill 定方向

VISUAL DIRECTION

只给视觉目标不给风格，让 UI Skill 自己决定版式、字体与用色。

怎么做的：接着让 UI Skill 接手，只告诉它"根据这份页面定义，设计页面，要有视觉冲击力，但不要做成模板"。这时候它才开始决定页面长什么样——这一版它选择了海报字体风，大标题用高条的粗体字，其中一个词做成空心描边，整体冷白配墨黑，打一只亮黄做点缀。方向确定之后，页面才真正搭起来。

根据这份页面定义，设计页面，要有视觉冲击力，但不要做成模板。这时候，他才开始决定页面长什么样。这一版他选择了海报字体风，大标题用高条的粗体字，其中一个词做成空心描边，整体冷白配墨黑，打一只亮黄做点缀。方向确定之后，页面才真正搭起来。

落地页的滚动叙事

SCROLL STORYTELLING

卡片沿弧线依次进入，曲线跟着滚动画出，数字从零滚到目标值。

怎么做的：页面左边是大标题，右边一张横幅，下面的卡片错落排开，打开页面时沿着一条弧线依次进入。继续往下滚，页面会停住，一条曲线跟着滚动慢慢画出来，下面的刻度同步点亮。再往下，数字从零滚到目标值，柱子从底部长出来。最后一面卡片墙斜着进入，未解锁的内容保持灰色。到这里，AI 做的已经不只是网页排版，它有了自己的视觉节奏和交互方式。

页面左边是大标题，右边一张横幅，下面的卡片错落排开，打开页面时沿着一条弧线依次进入。继续往下滚，页面会停住，一条曲线跟着滚动慢慢画出来，下面的刻度同步点亮。再往下，数字从零滚到目标值，柱子从底部长出来。最后一面，卡片墙斜着进入，未解锁的内容保持灰色。

只给视觉目标

GOAL NOT STYLE

内容社区不指定风格，只给"让作品成为主角、浏览要有探索感"。

怎么做的：第二个案例故意不给他太多视觉要求，需求只写一句："这是一个展示创作者作品的社区页面，希望用户可以快速浏览、发现和进入作品。"需求 Skill 照样先把页面结构和内容关系整理出来，交给 UI Skill 的时候不指定做成什么风格，只给它一个目标：让作品成为页面的主角，浏览过程要有探索感。它会根据这个目标自己建立视觉语言。

我故意不给他太多视觉要求，需求只写一句：这是一个展示创作者作品的社区页面，希望用户可以快速浏览、发现和进入作品。交给 UI Skill 的时候，我不指定做成什么风格，只给他一个目标：让作品成为页面的主角，浏览过程，要有探索感。他会根据这个目标，自己建立视觉语言。

社区页的视觉规则

CONTENT-FIRST LAYOUT

作品沿弧线排列、页面几乎不抢颜色，同一批内容换一种布局就是新的一屏。

怎么做的：首页不做规则的卡片，让作品沿着弧线排列，页面几乎不抢颜色，把视觉重点全部留给作品。确认之后，先打骨架再填图、填字、上样式，一整页就长出来了。鼠标靠近某张卡片，当前作品抬起放大，周围的卡片跟着联动。想换一种气质也不用重新设计，只告诉 AI 加一个夜间主题、作品也换一批、用色更收敛一点，整页就翻成夜间。继续往下，卡片不会一板一眼地切换，它们随着滚动重新组合：这一屏排成斜向的阶梯，再往后连成一条作品长廊。同一批内容，换一种布局，就是新的一屏。

首页不做规则的卡片，让作品沿着弧线排列，页面几乎不抢颜色，把视觉重点全部留给作品。鼠标靠近某张卡片，当前作品抬起、放大，周围的卡片跟着联动。想换一种气质，也不用重新设计，我只告诉 AI 加一个夜间主题，作品也换一批，用色更收敛一点，整页就翻成夜间。继续往下，卡片不会一板一眼地切换，它们随着滚动重新组合。

第三步：术语 Skill

PLAIN WORDS → SPEC

把"卡片一张张往前倒、左边的字跟着换"翻译成可执行的设计描述。

怎么做的：第三个案例品牌官网，流程还是一样：需求 Skill 先定义页面，UI Skill 再把视觉和交互搭起来。页面搭起来之后有一段交互想重新调整，脑子里有画面，却根本不知道这个效果叫什么，只会说"卡片一张张往前倒，左边的字跟着换"。这句话人能听懂，AI 却不一定知道该怎么实现。这时候就轮到术语 Skill，把这句大白话交给它，它会换成更准确的设计描述："滚动时固定内容区域，卡片逐张向前翻转，左侧文案同步切换"。

有一段交互，我想重新调整。脑子里有画面，可我根本不知道这个效果叫什么。我只会说，卡片一张张往前倒，左边的字跟着换。这句话人能听懂，AI 却不一定知道该怎么实现。这时候就轮到术语 Skill，把这句大白话交给它，它会换成更准确的设计描述：滚动时固定内容区域，卡片逐张向前翻转，左侧文案同步切换。

术语 Skill 的产出

EXECUTABLE SPEC

原本说不清的效果变成可以执行的设计语言，页面被准确地做出来。

怎么做的：再把这段描述交给 AI，原本说不清的效果就变成了可以执行的设计语言，页面也准确地做了出来：每滚一格就有一张卡片往前翻，左边的文字跟着换；再往下一条线顺着步骤一路画出来；最后是一面可以筛选的网格，点一个分类，不相关的内容缩小淡出，剩下的重新排列。

每滚一格就有一张卡片往前翻，左边的文字跟着换。再往下一条线，顺着步骤一路画出来。最后是一面可以筛选的网格，点一个分类，不相关的内容缩小、淡出，剩下的重新排列。

大字标题加整宽大图

BIG TYPE + FULL-WIDTH

顶部两行宽体大写字母当标题，一进来就知道这是干什么的。

怎么做的：顶部两行宽体大写字母当标题，字号极大，一进来就知道这是干什么的。下面一条搜索栏，右边一个黑色圆按钮管筛选，再下面一排分类，选中的那个变成黑底。每一项都是一整张大图，名字、参数和箭头按钮排在图下面一行，往下划一张接一张。

顶部两行宽体大写字母当标题，字号极大，一进来就知道这是干什么的。下面一条搜索栏，右边一个黑色圆按钮管筛选，再下面一排分类，选中的那个变成黑底。每一项都是一整张大图，名字、参数和箭头按钮排在图下面一行。

大图头块叠信息

HERO OVERLAY

大图占掉三分之一屏，目的地倒计时和按钮全部压在图上，不单独占地方。

怎么做的：最上面一块大图占掉三分之一屏，目的地、倒计时和按钮全部压在图上，不用再单独占地方。下面一块白底天气，一排日期块，当天那一块用深色顶出来，底下一条曲线把温度连起来，一眼就知道今天在哪、要带什么。

最上面一块大图占掉三分之一屏，目的地倒计时和按钮，全部压在图上，不用再单独占地方。下面一块白底天气，一排日期块，当天那一块用深色顶出来，底下一条曲线把温度连起来，一眼就知道今天在哪，要带什么。

黑白两档主次

TWO-TONE HIERARCHY

最想点的模块直接黑底白字，其余全白，不用第三种颜色也分得清主次。

怎么做的：整页浅灰打底，最想让你点的那一块直接做成黑色、白字压在上面，其余全是白色。上面的分类也一样，选中哪个哪个变黑。再往下一块黑色横幅跟主角呼应。不用第三种颜色，也分得清主次。

整页浅灰打底，最想让你点的那一块，直接做成黑色，白字压在上面，其余全是白色。上面的分类也一样，选中哪个哪个变黑。再往下一块黑色横幅，跟主角呼应。不用第三种颜色，也分得清主次。

大色块网格

COLOR BLOCK GRID

一块亮黄大色块托住今天最重要的数字，四列小格一格一个，点一下就打卡。

怎么做的：一块亮黄大色块棒住今天最重要的数字，周围全是浅灰底，右边一个圆环把完成度画出来。标题用超粗的中英两行，下面四列小格一格一个，颜色压成浅浅的一层，点一下就打卡，主次一眼分开。

一块亮黄大块棒，今天最重要的数字，周围全是浅灰底，右边一个圆环把完成度画出来。标题用超粗的中英两行，下面四列小格一格一个，颜色压成浅浅的一层，点一下就打卡，主次一眼分开。

海报大字加半圆转盘

POSTER + DIAL

方块大字配半圆转盘，选中项停在正上方，一屏只做一件事。

怎么做的：顶部用方块大字当标题，黑白两色叠在紫色底上。中间一段半圆转盘，选中的那一项停在正上方。下面一个超大的数字配一个黑色按钮，最底下一排紫色底图标，一屏只做一件事。

顶部用方块大字当标题，黑白两色叠在紫色底上。中间一段半圆转盘，选中的那一项停在正上方。下面一个超大的数字配一个黑色按钮，最底下一排紫色底图标，一屏只做一件事。

叠放堆栈

STACKED CARDS

一张大图立在正中、后面两张只露一条边，往上拖最前面那张飞走。

怎么做的：顶部两行细长的宽体字当标题，一排分类跟在下面。一张大图立在正中，后面两张只露出一条边，看得出后面还有。往上一拖，最前面那张飞走，后面的补上来，底下的页码跟着走。

顶部两行细长的宽体字当标题，一排分类跟在下面。一张大图立在正中，后面两张只露出一条边，看得出后面还有。往上一拖，最前面那张飞走，后面的补上来，底下的页码跟着走。

可拖动模块网格

BENTO GRID DRAG

模块可拖拽重排，其他模块顺势让位，松手自动吸附进网格。

怎么做的：页面按大小不同的格子排好，按着任意一块拖动，其他模块会顺势让出位置，松手自动吸附进网格。每个人都能把最常看的数据挪到左上角。

页面按大小不同的格子排好，按着任意一块拖动，其他模块会顺势让出位置，松手自动吸附进网格。每个人都能把最常看的数据挪到左上角。

模块原位放大

ZOOM TO DETAIL

点击图表从原位放大铺满主区，其余缩成底部缩略图，全程不离开这一页。

怎么做的：点击任意一块图表，它从原来的位置直接放大铺满主区，其他模块缩成一排缩略图留在底部，看完点缩略图就能切回来，全程不离开这一页。

点击任意一块图表，它从原来的位置直接放大铺满主区，其他模块缩成一排缩略图留在底部，看完点缩略图就能切回来，全程不离开这一页。

顶部筛选全局联动

GLOBAL FILTER

筛选只放一处，切换后所有数字滚动过渡、图表平滑变形，不整页重载。

怎么做的：时间范围和分类筛选统一放在页面顶部，切换一下，下面所有数字滚动到新值，图表线条平滑变过去，页面不整体刷新。筛选只放一处，用的人不用到处找。

时间范围和分类筛选，统一放在页面顶部，切换一下，下面所有数字滚动到新值，图表线条平滑变过去，页面不整体刷新。筛选只放一处，用的人不用到处找。

多图表悬停联动

SYNCED CROSSHAIR

共用一条时间参考线，悬停某天时各图同一点一起高亮，其余数据变淡。

怎么做的：鼠标停在某一天的柱子上，页面里其他图表同一天的位置一起亮起来，别的数据自动变淡。几张图放在一起，终于能对着看了。

鼠标停在某一天的柱子上，页面里其他图表同一天的位置，一起亮起来，别的数据自动变淡。几张图放在一起，终于能对着看了。

指标区滚动吸顶

STICKY COMPACT

大号指标往下滚时缩成一行小字贴顶栏，往回滚又展开成原来的大小。

怎么做的：页面顶部是几个大号指标，往下滚动时它们缩成一行小字贴在顶栏上，数字一直看得见，往回滚又展开成原来的大小。长页面也不会看着看着就丢了重点。

页面顶部是几个大号指标，往下滚动时，它们缩成一行小字，贴在顶栏上，数字一直看得见，往回滚又展开成原来的大小。长页面也不会看着看着就丢了重点。

列表加右侧详情抽屉

MASTER-DETAIL DRAWER

点击行后详情从右侧滑出，列表压扁留在左边，键盘上下切换只刷新面板。

怎么做的：点击表格里的一行，详情面板从右边滑出来，列表自动压扁留在左边，当前行保持高亮。上下切换记录时只换面板里的内容，前后对比特别快。

点击表格里的一行，详情面板从右边滑出来，列表自动压扁留在左边，当前行保持高亮。上下切换记录时，只换面板里的内容，前后对比特别快。

面板分层浮起

EXPLODED LAYERS

长按面板侧立，背景图与文字分层浮开，松手合回一整块。

怎么做的：按住面板它会侧过身立起来，背景、图片、文字一层一层往外浮开，松手所有层再合回一整块。平的界面一下有了纵深，里面有什么也一眼看明白。

按住面板它会侧过身立起来，背景、图片、文字一层一层往外浮开，松手所有层再合回一整块。平的界面一下有了纵深，里面有什么也一眼看明白。

堆叠滑动切换

SWIPE STACK

手指左右一甩，最上面那张跟着手倾斜飞走，下一张从后面顶上来。

怎么做的：一叠内容落在一起，手指往左右一甩，最上面那张跟着手倾斜飞走，下一张从后面顶上来。一只手就能连续跳下去。

一叠内容落在一起，手指往左右一甩，最上面那张，跟着手倾斜飞走，下一张从后面顶上来。一只手就能连续跳下去。

多选聚成一叠

MULTI-SELECT STACK

长按进入多选，勾选项从原位飞聚成一叠，拖着就能一次挪走多个。

怎么做的：长按进入多选，勾中的几项从各自的位置飞过来，叠成一落、角上标着数量，拖着这一落就能一次挪走好几个。

长按进入多选，勾中的几项从各自的位置飞过来，跌成一落，角上标着数量，拖着这一落就能一次挪走好几个。

按钮一分为二

SPLIT BUTTON

按下开始计时，一个按钮从中间裂开变成暂停和结束，结束后合回。

怎么做的：按下开始计时，一个按钮从中间裂开，变成暂停和结束两个；按下结束，两个又合回原来那一个。要用的操作刚好在手边。

按下开始计时，一个按钮从中间裂开，变成暂停和结束两个。按下结束两个又合回原来那一个。要用的操作刚好在手边。

滚动变小窗

SCROLL TO MINI

看视频时往下翻，视频缩成小窗停在角落接着播，点一下放大回原位。

怎么做的：看视频的时候往下翻，视频缩成一个小窗停在角落接着播，点一下小窗又放大回原来的位置。

看视频的时候往下翻，评论视频缩成一个小窗，停在角落接着播，点一下小窗，又放大回原来的位置。

分类连动滚动

LINKED SCROLL

右侧列表往下滑，左侧分类高亮自动跟到对应位置，双向联动。

怎么做的：右边列表往下滑，左边分类的高亮自动跟到对应位置；点左边分类，右边直接滚过去。东西再多也找得到。

右边列表往下滑，左边分类的高亮自动跟到对应位置。点左边分类，右边直接滚过去。东西再多也找得到。

MorphIcons：状态切换

MORPHICONS

两个图标状态自然衔接，原来的线条会移动、旋转、重组成下一个状态。

怎么做的：它最大的特点是让两个图标状态自然衔接。切换时图标不会突然消失再换成新的，原来的线条会移动、旋转、重组，顺着变成下一个状态。比如彩蛋变成关闭、播放变成暂停、太阳变成月亮；完成一条任务时，空心圆也可以自然收成对勾。

它最大的特点，是让两个图标状态自然衔接。切换时就图标不会突然消失，再换成新的，原来的线条会移动旋转重组，顺着变成下一个状态。比如彩蛋变成关闭，播放变成暂停，太阳变成月亮。

MorphIcons 用在哪

TOGGLE POSITIONS

适合按钮、导航栏、播放控件、深浅色开关这类需要反复切换状态的地方。

怎么做的：它很适合放在按钮、导航栏、播放控件、深浅色开关这类需要反复切换状态的地方。用户每点一次，都能清楚看到状态是怎么变化的，页面也不会显得生硬琐碎。

它很适合放在按钮，导航栏，播放控件，深浅色开关，这类需要反复切换状态的地方。用户每点一次，都能清楚看到状态是怎么变化的，页面也不会显得生硬琐碎。

LordIcon：操作反馈

LORDICON

用户完成某个操作之后，用一小段动画给出明确反馈。

怎么做的：它更适合在用户完成某个操作之后，用一小段动画给出明确反馈。比如点击发送，纸飞机直接飞出去；内容正在加载，图标开始循环运动；任务全部清空后，空状态图标轻轻晃动一下，让用户马上知道操作已经完成。

它更适合在用户完成某个操作之后，用一小段动画给出明确反馈。比如点击发送，纸飞机直接飞出去。内容正在加载，图标开始循环运动。任务全部清空后，空状态图标轻轻晃动一下，让用户马上知道操作已经完成。

LordIcon 用在哪

FEEDBACK POSITIONS

颜色和线条可按页面风格调整，适合发送、加载、完成提示、空状态与功能介绍。

怎么做的：它的颜色和线条都可以根据页面风格调整，很适合用在发送、加载、完成提示、空状态页，以及产品功能介绍这些场景里。

它的颜色和线条，都可以根据页面风格调整，很适合用在发送，加载，完成提示，空状态页，以及产品功能介绍这些场景里。

两个库怎么选

CHOOSE BY INTENT

来回切换用 MorphIcons，一次性反馈用 LordIcon。

怎么做的：如果图标需要在两种状态之间反复切换，就用 MorphIcons；如果需要在一次操作之后用动画告诉用户已经发生了什么，就用 LordIcon。

如果图标需要在两种状态之间反复切换，就用 MorphIcons。如果需要在一次操作之后，用动画告诉用户已经发生了什么，就用 LordIcon。

克制使用动态图标

USE SPARINGLY

动态图标只留给最常点击、最需要反馈的几个位置，反而更显精致。

怎么做的：不过动态图标也不要放得太多，把它们留给最常点击、最需要反馈的几个位置，反而更容易突出页面的精致感。这些图标的使用场景和搭配规则，也已经整理进 UI 设计 Skill 里，让 AI 做页面时不只是把图标放上去，还能根据不同的交互场景选择合适的动效。

不过动态图标也不要放得太多，把它们留给最常点击、最需要反馈的几个位置，反而更容易突出页面的精致感。这些图标的使用场景和搭配规则，我也整理进了 UI 设计 Skill 里。

搜索框展开

ICON → INPUT

点击搜索按钮直接展开成输入框，光标自动定位，不跳新页面。

怎么做的：点击右上角的搜索按钮，它会直接展开成输入框，光标自动定位，不需要再跳到新的搜索页面。

点击右上角的搜索按钮，它会直接展开成输入框，光标自动定位，不需要再挑到新的搜索页面。

加号展开面板

FAB TO SHEET

悬浮加号从原位展开成操作面板，关闭时自然收回加号。

怎么做的：点击悬浮加号，按钮会从原位展开成操作面板，关闭时再自然收回到加号。

点击悬浮加号，按钮会从原位展开成操作面板，关闭时，再自然收回到加号。

提交状态反馈

BUTTON STATE MACHINE

点击提交后按钮依次显示加载、完成和结果，全过程在同一位置完成。

怎么做的：点击提交后，按钮依次显示加载、完成和结果状态，整个过程都在同一个位置完成。

点击提交后，按钮依次显示加载、完成和结果状态，整个过程都在同一个位置完成。

图标变形

MORPH ICON

三条横线自然变成关闭图标，播放按钮同样方式变暂停。

怎么做的：点击菜单时三条横线自然变成关闭图标；播放按钮也可以用同样的方式变成暂停，切换更加连贯。

点击菜单时三条横线自然变成关闭图标，播放按钮也可以用同样的方式变成暂停，切换为更加连贯。

标签指示条

TAB INDICATOR STRETCH

切换标签时底部指示条先拉向新位置再自然收回，切换有跟随感。

怎么做的：切换顶部标签时，底部指示条会先拉向新的位置，再自然收回，让切换过程更有跟随感。

切换顶部标签时，底部指示条会先拉向新的位置，再自然收回，让切换过程更有跟随感。

按钮变步进器

BUTTON → STEPPER

点击加入后按钮展开成数量选择器，数量归零自动恢复原按钮。

怎么做的：点击加入后，按钮直接展开成数量选择器；数量回到零时，再自动恢复成原来的按钮。

点击加入后，按钮直接展开成数量选择器，数量回到零时，再自动恢复成原来的按钮。

列表展开详情

IN-PLACE EXPAND

详情在当前列表里原地展开，其他内容顺势下移，不跳页面。

怎么做的：点击其中一项，详情直接在当前列表里展开，其他内容顺势下移，不需要调整页面。

点击其中一项，详情直接在当前列表里展开，其他内容顺势下移，不需要调整页面。

列表切换网格

LIST ⇄ GRID

视图切换时列表重新排列成网格，保留移动过程，中间不重新加载。

怎么做的：切换视图时，列表会重新排列成网格，并保留自然的移动过程，中间不重新加载。

切换试图时，列表向会重新排列成网格，并保留自然的移动过程，中间不重新加载。

顶栏随滚动收起

COLLAPSING APP BAR

下滚时搜索栏收成图标，上滑重新展开，既省空间也不影响使用。

怎么做的：页面向下滚动时，顶部搜索栏逐渐收成一个图标，向上返回时再重新展开，既节省空间也不影响使用。

页面向下滚动时，顶部搜索栏逐渐收成一个图标，向上返回时再重新展开，季节整空间也不影响使用。

菜单铺满全屏

CIRCULAR REVEAL MENU

背景从按钮位置向外展开覆盖整页，菜单内容随后出现，关闭原路收回。

怎么做的：点击菜单按钮，背景从按钮位置向外展开覆盖整个页面，菜单内容再一次出现，关闭时原路收回。

点击菜单按钮，背景从按钮位置向外展开，覆盖整个页面，菜单内容再一次出现，关闭时远路收回。

配图 01

配图说明

图文封面，“AI 做设计 2 个 Skill”

配图 02

配图说明

两个 Skill 分工（一个翻译术语、一个立规范）

配图 03

配图说明

主操作全部下沉到拇指安全区规则

配图 04

配图说明

间距按 8 的倍数走的规则

配图 05

配图说明

九个词汇总，“直接抄给 AI”

第一步：说准名字

NAME THE EFFECT

说不出专业名称，AI 就只会给你最熟的紫色渐变加发光卡片。

怎么做的：真正困难的不是 AI 不会做，是你知道自己想要什么效果，却说不出它的专业名称，也不知道该怎么准确地描述给 AI。说不出名字，AI 就按它最熟的那套给你，永远是紫色渐变配一排发光卡片。

真正困难的不是 AI 不会做，是你知道自己想要什么效果，却说不出它的专业名称，也不知道该怎么准确地描述给 AI。说不出名字，AI 就按它最熟的那套给你，永远是紫色渐变，配一排发光卡片。

第二步：选最轻实现

LIGHTEST IMPLEMENTATION

同一个效果四行 CSS 能做完，也可能堆一整个库——让 Skill 挑够用又轻的那条路。

怎么做的：就算说对了名字，还有第二件事：同一个效果做法不止一种。四行 CSS 能做完的，也能用一整个库去做，出来一模一样，页面白白重一倍。

同一个效果做法不止一种，四行 CSS 能做完的，也能用一整个库去做，出来一模一样，页面白白重一倍。

案例一：悬停抬起让位

HOVER LIFT + RECEDE

鼠标碰到哪张卡片哪张扶起来，旁边两张同时往外让出位置。

怎么做的：一排卡片摊在中间，鼠标碰到哪一张，那张就扶起来，旁边两张同时往外让一点给它腾地方。你大概只会说成"鼠标放上去那张大一点"，真正好看的地方在旁边——整排重新站了一次位。它叫悬停抬起加零位让位。

一排卡片摊在中间，鼠标碰到哪一张，那张就扶起来，旁边两张同时往外让一点，给它腾地方。你大概只会说成鼠标放上去那张大一点，真正好看的地方在旁边，整排重新站了一次位。它叫旋停抬起，加零位让位。

案例二：扇形排列

COVER FLOW

同行正扇形摊开，中间正对、越往两边越后仰越暗，切换时整排转过去。

怎么做的：一排同行正扇形摊开，中间那张正对着你，越往两边越往后仰越暗。切下一张的时候，整排跟着转过去。这个叫扇形排列，也叫封面流。名字说对了，AI 一次就能给对；说不准，它多半给你一排一样大的卡片横着滑，纵深全没了。

一排同行正扇形摊开，中间那张正对着你，越往两边越往后仰越按。切下一张的时候，整排跟着转过去。这个叫扇形排列，也叫封面流。名字说对了，AI 一次就能给对；说不准，它多半给你一排一样大的卡片，横着滑，纵深全美了。

案例三：圆柱轮播

CYLINDRICAL CAROUSEL

胶片带扭成一个环，照片贴着环转，一个库都不用装。

怎么做的：一条胶片带在空中扭成一个环，照片贴在上面，可以拖着它转，点一下某一格那一格就抬起来。这个看着最该上 3D 引擎，但页面自己在角落标了一行说它一个库都没装——它靠的是原本就有的 3D 能力，每张照片算好自己在环上的位置跟着手指转。

一条胶片带在空中扭成一个环，照片贴在上面，可以拖着它转，点一下某一格，那一格就抬起来。这个看着最该上 3D 引擎，但页面自己在夜角标了一行，说它一个裤都没装，它靠的是原本就有的 3D 能力。

Skill 顺手定完整页

FULL-PAGE CONSISTENCY

UI Skill 做的不只是那个动向，还把整页配色、间距、卡片样式一起定下来。

怎么做的：UI 设计 Skill 拿到这句话，做的不止是那个动向，它顺手把整页的配色、间距和卡片样式一起定下来，让这一下让位长在页面里。要不要上更重的技术，让 UI 设计 Skill 自己判断——你把效果和限制说清楚，它会挑一条够用又轻的路，再把整页的层级和质感一起做完。

UI 设计 Scale 拿到这句话，做的不止是那个动向，它顺手把整页的配色，间距和卡片样式一起定下来，让这一下让位长在页面里。

配图 01

配图说明

图文封面，“Codex 实用技巧 网页制作”

主角独占颜色

根据内容提炼

配图 03

配图说明

“卡片整块上色”运营后台页，附 finesse UI 提示词

照片上压大字

根据内容提炼

配图 05

配图说明

八种排法一览，总提示词截图

飞出翻面

FLY + FLIP

封面飞到屏幕中间一边放大一边翻面，带回弹，关闭原路翻回。

怎么做的：点一下一张封面，它一边飞到屏幕中间一边放大翻面，翻过来带一点回弹；关掉的时候再原路翻回原位。

点一下一张封面，它一边飞到屏幕中间一边放大翻面，翻过来带一点回弹，关掉的时候再原路翻回原位。

按住蓄力确认

HOLD TO CONFIRM

删除这类撤不回的操作，按住进度沿边缘走满才执行，松手进度退回。

怎么做的：删除这类撤不回的操作，按住时间度缓慢，沿着边缘走满才执行，中途松手进度会退回去。

删除这类撤不回的操作，按住时间度缓，沿着边缘走满才执行，中途松手，缓会退回去。

旋扭转盘

ROTARY DIAL

手指绕圆心转，刻度一格一格吸住，中间数字跟着滚。

怎么做的：手指绕着圆心转，刻度一格一格吸住，中间的数字跟着滚，比滑杆更像实物。

手指绕着原心转，刻度一格一格吸住，中间的数字跟着滚，比滑杆更像实物。

前后对比滑块

COMPARE SLIDER

一张图分左右两半，拖动中间分割线，改前改后跟着手指切换。

怎么做的：一张图分成左右两半，后中间那条分割线，改之前和改之后，跟着手指来回切。

一张图分成左右两半，后中间那条分割线，改之前和改之后，跟着手指来回切。

弧形快捷菜单

ARC MENU

按住加号，按钮沿圆弧依次弹出，手指划到哪个哪个放大，松手执行。

怎么做的：按住加号，按钮沿着圆弧依次弹出，手指划到哪个哪个就放大，松手就执行。

按住加号，按钮沿着圆弧依次弹出，手指划到哪个哪个就放大，松手就执行。

滑动确认

SLIDE TO CONFIRM

滑块跟着手走，提示文字扫过一道光，拖过头才算数，没到弹回起点。

怎么做的：划块跟着手走，提示文字上扫过一道光，透过八成才算数，没到就弹回起点。

划块跟着手走，提示蚊子上扫过一道光，透过八成才算数，没到就弹回七点。

长按浮起预览

PRESS TO PEEK

背景压暗虚化，该项放大浮起，下面弹开一排操作，不用进详情页。

怎么做的：背景压暗虚化，这一项放大浮起来，下面弹开一排操作，不用进详情页。

背景压按虚化，这一项放大浮起来，下面弹开一排操作，不用进行行业。

拖到目标吸入

DRAG TO ABSORB

拖近文件夹时文件夹张开迎上来，松手就被吸进去。

怎么做的：把一项拖向文件夹，靠近的时候文件夹张开迎上来，松手它就被吸进去了。

把一项拖向文件夹，靠近的时候文件夹张开营上来，松手它就被吸进去了。

分段进度条

SEGMENTED PROGRESS

看图时顶部进度一段一段往前走，按住暂停，点左右两边切上下张。

怎么做的：看图片的时候，顶部进度一段一段往前走，按住就暂停，点左右两边切上一张和下一张。

看图题的时候，顶部进度一段一段往前走，按住就暂停，点左右两边切上一张和下一张。

轮播随图换背景

CAROUSEL AMBIENT

中间那张最大最亮，两边往后压暗，换图时整屏背景和标题跟着换。

怎么做的：中间那张最大最亮，两边往后轻压暗，换一张，整屏背景和标题跟着换过去。

中间那张最大最亮，两边往后轻压按，换一张，整屏背景和标题跟着换过去。

液态玻璃栏

LIQUID GLASS BAR

顶栏做成有厚度的玻璃，内容透上来被放大折射，滚过深色大图玻璃自己变暗。

怎么做的：把顶栏做成一块有厚度的玻璃，底下的内容透上来会被轻微放大和折射，边缘留一条跟着滚动走的亮边。滚过深色大图，玻璃自己变暗，上面的字跟着反过来。一整屏立刻有了前后两层。

把顶栏做成一块有厚度的玻璃，底下的内容透上来会被轻微放大和折射，边缘留意到跟着滚动走的亮边。滚过深色大图，玻璃自己变暗，上面的字跟着反过来。

封面取色氛围光

AMBIENT GLOW

从大图取出主色铺一层大半径柔光，换图时颜色连续过渡不跳色。

怎么做的：从大图里取出主色，让它从图的四周溢出来，在背景上铺一层大半径的柔光。图片一换，光韵的颜色连续过渡过去，中间不跳色。一整屏的颜色都是从内容里长出来的。

从大图里取出主色，让它从图的四周一出来，在背景上铺一层大半径的柔光。图片一换，光韵的颜色连续过渡过去，中间不跳色。

景深分层滚动

PARALLAX DEPTH

内容分三层，越远的走得越慢、糊得越多，平面立刻有纵深。

怎么做的：把一屏内容分成三层：正在看的那层完全清晰，往后一层轻微模糊压暗，最远的背景糊得更厉害。手指一滚，越远的走得越慢、糊得越多。本来平的一屏立刻有了纵深。

把一瓶内容分成三层，正在看的那层完全清晰，往后一层轻微模糊压按，最远的背景糊得更厉害。手指一滚，越远的走得越慢，糊得越多。

圆柱卷收列表

CYLINDER LIST

列表卷在圆柱面上，正中间最大最亮，越往上下越后仰越小越暗。

怎么做的：让列表卷在一个圆柱面上，正中间那几项对着你，最大也最亮；越往上下两边越往后仰，越小越暗，滚出屏幕之前先躺平淡出。视线一下就被收到中间那一项上。

让列表向卷在一个圆柱面上，正中间那几项对着你，最大也最亮，越往上下两边越往后仰，越小越暗，滚出屏幕之前先躺平淡出。

底部粘连拖转

STICKY DRAG

拖动元素与原位之间拉出一条会变细的液体桥，超过距离才断开，两端回弹成圆。

怎么做的：拖动一个浮标的时候，别让它一离手就整块飞走。在它和原来的位置之间拉出一条会变细的液体桥，拖得越远桥越细，超过一段距离才真的断开，断的那一下两头各自弹成圆。拖动这件事一下就有了粘性。

拖动一个浮标的时候，别让它一离手就整块飞走。在它和原来的位置之间，拉出一条会变细的液体桥，拖的越远，桥越细，超过一段距离才真的断开，断的那一下两头各自弹成圆。

悬浮导师侧边栏

FLOATING SIDEBAR

栏体脱离屏幕边缘，四周留等距空白，大圆角浮在页面上。

怎么做的：让栏体脱离屏幕边缘，四周流出等距的空白，整条做成大圆角浮在页面上，底下衬一层很淡的阴影，页面底色从四周透出来。后台那种呆板感一下就散了。

让篮体脱离屏幕边缘，四周流出等距的空白，整条做成大圆角浮在页面上，底下称一层很淡的阴影，页面底色从四周透出来。

深色重底侧边栏

DARK ANCHOR BAR

整页保持浅色，把全页唯一的深色都给这一条栏，整页重量被收住。

怎么做的：整页保持浅色，把全页唯一的深色都给这一条栏。导航文字用低饱和的浅灰，只有当前项才亮起来。整页的重量被这一条收住，主区反而更干净。

整页保持浅色，把全页唯一的深色都给这一条篮。导航文字用低饱和的浅灰，只有当前向才亮起来。整页的重量被这一条收住，主区反而更干净。

磨砂玻璃侧边栏

FROSTED GLASS

栏体只上半透明白，背景模糊让底下渐变隐约透上来，边缘补一条亮边。

怎么做的：栏体只上一层半透明的白，打开背景模糊，让底下的渐变或者照片隐约透上来，边缘再补一条很素的亮边。栏和页面之间立刻有了真实的前后层次。

蓝体只上一层半透明的白，打开背景模糊，让底下的渐变或者照片隐约透上来，边缘再补一条一向素的亮边。

双层图标轨

TWO-TIER NAV

最左窄轨放大模块，右边二级栏放当前模块下的具体页面，层级再多也不堆成长串。

怎么做的：最左边留一条很窄的图标轨，只放模块；右边再接一条二级栏，放当前模块下面的具体页面。层级一多就靠这个拆，导航再深也不会堆成一长串。

最左边留一条很窄的图标轨，只放大模块，右边再接一条二级篮，放当前模块下面的具体页面。层级一多就靠这个柴，导航再深也不会堆成一长串。

折叠展开式

HOVER EXPAND

默认只留图标窄轨，悬停整条平滑展开出文字，窄屏特别好用。

怎么做的：默认只留图标那条窄轨，鼠标移上去整条平滑展开出文字，宽度变化带一点缓动，文字缓一拍再带进来。屏幕窄的时候特别好用，主区还能多出一大片地方。

默认只留图标那条窄轨，鼠标移上去，整条平滑展开出文字，宽度变化带一点缓动，文字缓一拍再带进来。屏幕窄的时候特别好用。

分组留白加底部收口

GROUPED + FOOTER

导航按业务分组、组间留大段空白，底部固定头像和用量，列表单独滚动。

怎么做的：把导航按业务分成两三组，组之间留一大段空白，组名用很小的灰字标在上面。栏体底部固定放头像和用量这些信息，中间的列表单独滚动。十几个入口也能排得不挤。

把导航按业务分成两三组，组之间留一大段空白，组名用很小的灰字标在上面，篮体底部固定放头像和用量这些信息，中间的列表单独滚动。

3D 倾斜光影面板

3D TILT + SPECULAR

按压面板随触点 3D 倾斜，表面掠过跟随手指的镜面高光，松手阻尼回正。

怎么做的：手指按压面板时，面板随触点做 3D 轻微倾斜，表面掠过一道跟随手指流转的镜面高光，松手阻尼弹性复位。平面的界面立刻有了实体材质感。

手指按压面板时，面板随触点做 3D 轻微倾斜，表面略过一道跟随手指流转的镜面高光，松手阻尼弹性复位。平面的界面立刻有了实体材质感。

流体胶囊形变

FLUID MORPH

按钮触发加载时没有生硬弹窗，像水滴一样平滑流动延展成新面板。

怎么做的：按钮在触发加载或展示状态时，没有生硬的弹窗，像水滴一样平滑流动延展成新的面板，圆角与尺寸无缝过渡。

按钮在触发加载或展示状态时，没有声音的弹窗，像水滴一样平滑流动，延展成新的面板，圆脚与尺寸无缝过渡。

共享元素无缝展开

SHARED ELEMENT

列表条目原地平滑放大膨胀成详情页，返回原路收缩，没有白屏或推屏感。

怎么做的：点击列表里的条目，条目原地平滑放大，直接膨胀展开成详情页；返回时反向收缩回原位，完全没有生硬的白屏或推屏感。

点击列表里的条目，条目原地平滑放大，直接膨胀展开成详情页，返回时返向收缩回原位，完全没有声音的白屏或推屏感。

磁吸油标与滚动马表

MAGNETIC + ODOMETER

图表滑动自动磁吸最近数据点，顶部数字像机械马表一样丝滑翻滚。

怎么做的：手指在图表滑动时，自动磁吸吸附到最近的数据点，焦点光环呼吸放大，顶部数据像机械马表一样丝滑翻滚切换。

手指在图表滑动时，只实现自动磁吸吸附最近的数据点，焦点光运呼吸放大，顶部数据像机械马表一样丝滑翻滚挑遍。

阻尼弹性抽屉

RUBBER BAND SHEET

抽屉拉到底或拽到底有真实橡皮筋阻尼，松手按手势速度自动吸附。

怎么做的：底部弹出的面板向上拉到底或下拉到底时，带有真实的橡皮筋阻尼拉伸效果；松手时根据拖拽的速度，自动判断吸附到对应高度。

底部弹出的面板向上拉到底或下拉到底时，带有真实的橡皮筋阻尼拉伸效果，松手时根据拖拽的速度，自动判断吸附到对应高度。

动态迷散光运边框

AURORA BORDER

核心模块加一圈缓慢旋转的渐变流光微边框，背后映出毛玻璃迷散光。

怎么做的：给 AI 功能区或核心模块加一圈缓慢旋转的渐变流光微边框，并在模块背后映射出柔和的毛玻璃迷散光运。整个模块的层次一下就出来了。

给 AI 功能区获核心模块，加一圈缓慢旋转的渐变流光微边框，并在模块背后，映射出柔和的毛玻璃迷散光运。整个模块的层次一下就出来了。

物理弹簧交错流

STAGGERED SPRING IN

内容加入时设微小时间差，每项从下往上带弹性依次弹入。

怎么做的：列表或瀑布流内容加入时，别让它们整体死板地弹入。设置极微小的时间差，每一项从下往上带一点物理弹性依次弹入视野。

列表或铺布流，内容加在时，别让他们整体死板地弹入。设置极微小的时间差，每一项从下网上，带一点物理弹性依次弹入视野。

弹性微缩触觉反馈

PRESS MICRO-SCALE

按压瞬间 0.96 微缩并加深内阴影，松手微冲过头再回弹，按起来很扎实。

怎么做的：按钮按下去，别只做透明度变化：按压瞬间产生 0.96 的微缩压缩，并伴随细微的内阴影加深，松手瞬间微冲过头再回弹，按起来很扎实。

按钮按下去，别只做透明度变化，按压瞬间产生 0.96 的微缩压缩，并伴随细微的内阴影加深，松手瞬间微冲过头再回弹，按起来很扎实。

两步核心逻辑

TRANSLATE THEN STANDARDIZE

不用死记专业名词：直觉扔给术语 Skill，规范交给设计规范 Skill。

怎么做的：核心逻辑就两步，你完全不用死记专业名词。第一步，把你的直觉和感受扔给术语 Skill，它帮你把模糊的描述翻译成专业设计术语；第二步，交给设计规范 Skill，它会把术语细化成 AI 能严格执行的参数级设计规则。一个找准问题，一个建立标准。

第一步把你的直觉和感受扔给数语 Skill，它帮你把模糊的描述翻译成专业设计数语。第二步交给设计规范 Skill，它会把数语细化成 AI 能严格执行的参数级设计规则。一个找准问题，一个建立标准。

Web：首页没有重点

VISUAL FLOW

术语 Skill 提炼视觉动线、信息层级、图片加载三个词，规范 Skill 给落地规则。

怎么做的：你可能只会跟 AI 说"首页东西太多了，一眼不知道先看哪，图片夹在的时候还一块一块往外蹦"。术语 Skill 帮你提炼出三个词：视觉动线、信息层级和图片加载。设计规范 Skill 接着给出落地规则。

首页东西太多了，一眼不知道先看哪，图片夹在的时候还一块一块往外蹦。数语 Skill 帮你提练出三个词，视觉动线、信息层级和股价平。

Web 落地规则

WEB RULES

首屏只留一个主角，其他模块字号降一档颜色减弱，图片先用浅色占位块站位。

怎么做的：设计规范 Skill 给出规则：首屏只留一个主角，主内容做成横滑大图卡，搜索和筛选收成一行，其他次要模块字号统一降一档、颜色减弱。图片加载前先用同尺寸的浅色占位块把位置站住，图到了再弹入。这样发给 AI，一眼就知道先看哪，图片到了也不会把下面的内容顶走。

首评只留一个主角，主内容做成横滑大图卡，搜索和筛选收成一行，其他刺激模块字号统一降一档，颜色减弱。图片夹在前，先用同尺寸的浅色站位块把位置站住，图到了再弹入。

App：拇指安全区

THUMB ZONE

术语 Skill 识别拇指安全操作区与底部悬浮按钮，规范 Skill 注入参数。

怎么做的：如果你对 AI 说"核心按钮放在上面，单手很难点到，整体显得死板"，术语 Skill 快速识别关键：这是拇指安全操作区和底部悬浮按钮的问题。设计规范 Skill 接着注入规范标准。

核心按钮放在上面，单手很难点到，整体显得死板。数语 Skill 快速识别关键，这是拇指安全操作区，和底部悬浮按钮的问题。

App 落地规则

APP RULES

主操作下沉到下三分之一拇指舒适区，48pt 全圆角胶囊，毛玻璃底栏。

怎么做的：主操作全面下沉到屏幕下三分之一的拇指舒适区，主按钮设为 48pt 高度、全圆角胶囊形态，底部栏加 20px 高斯模糊的毛玻璃背景，上滑时内容通透，操作也更聚焦。AI 拿到的不是抽象的"做好用一点"，而是一套单手就能顺手操作的专业规范。

主操作全面下沉到屏幕下三分之一的拇指舒适区，主按钮设为 48 点高度、全圆角胶囊形态，底部蓝加 20 向速的高丝模糊毛玻璃背景，上滑时内容通透，操作也更聚焦。

后台：间距与层级

SPACING SYSTEM

术语 Skill 拆出 8 倍数间距系统、字节层级差、零数据空状态三个问题。

怎么做的：最考验功底的是外部界面。如果说"看着头晕"，术语 Skill 会把它拆解成以 8 为倍数的间距系统、字节层级差，以及零数据空状态。

看着头晕。数与 Skill 会把它拆解成，以 8 为倍数的间距系统，字节层集差，以及零数据空状态。

后台落地规则

DASHBOARD RULES

四级字号、24/32 网格基准、表格行高 56、零数据换引导式空状态。

怎么做的：设计规范 Skill 给出具体参数：建立四级字节 24/18/14/12px，模块外边距严格按 24 和 32px 的网格基准，表格行高 56px 配浅色斑马纹。遇到零数据时，别再放一句干巴巴的"暂无数据"，换成带轻量插画的引导式空状态，再配一个立即创建按钮。这样生成的后台页面，专业软件的通透感和严谨度立刻就出来了。

建立四级字节，24、18、14、12 向速。模块外边据严格按 24 和 32 向速的网格基准，表格行高 56 向速，配浅色斑马纹。遇到零数据时，别再放一句干点的暂无数据，换成带轻量插画的，引导式空状态，再配一个立即创建按钮。

从触发点展开

ORIGIN ANCHORED

点一下红点，提示内容就从红点那个位置展开，交互才连贯。

怎么做的：点一下红点，提示内容就从红点那个位置展开，交互才连贯，不会凭空跳出来一块新东西。

点一下红点，提示内容就从红点那个位置展开，交互才连贯，不会凭空跳出来一块新东西。

位移淡入进场

SOFT ENTER

提示别突然弹出来，用位移加透明度进场，停留后平滑自己退走。

怎么做的：提示别突然弹出来，用一点位移加透明度变化进场，停留时间再平滑自己退走。

提示别突然弹出来，用一点位移加透明度变化进场，停购时间再平滑自己退走。

多条排队

QUEUED TOASTS

连着来好几条提示，前一条先移开让位，下一条再进来，过程才看得清。

怎么做的：连着来好几条提示，别让它们挤在一起。新的来了，前一条先移开让位，下一条再进来，过程才看得清。

连着来好几条提示，别让它们挤在一起，新的来了，前一条先移开绕位，下一条再进来，过程才看得清。

倒计时进度化

TIMED PROGRESS

撤销除了写剩余时间，把倒计时做成进度动画，走完提示才消失。

怎么做的：撤销这条，除了写剩余时间，把倒计时直接做成进度动画，走完提示才消失，还剩多少时间可以撤销一眼就看得出。

撤销这条，除了写剩余时间，把倒计时直接做成进度动画，走完提示才消失，还剩多少时间可以撤销，一眼就看得出。

红点原位消散

BADGE DISSOLVE

处理完一条通知，红点沿着原来的位置缩回去再散掉，才知道处理的是哪一条。

怎么做的：处理完一条通知，红点别趴地就没了，让它沿着原来的位置缩回去再散掉，你才清楚被处理的是哪一条。

处理完一条通知，红点别趴的就没了，让它沿着原来的位置，缩回去再散掉，你才清楚被处理的是哪一条。

角标数字翻动

NUMBER FLIP

角标数字变了别直接替换，让它带位移翻过去，九变十那一下才感受得到。

怎么做的：角标上的数字变了，别直接替换，让它带位移翻过去，九变十那一下才感受得到，数量变过才感受得到。

脚标上的数字变了，别直接提换，让它带位移翻过去，九变十那一下不及外旁边，数量变过才感受得到。

横幅挤压页面

BANNER PUSH

顶部横幅从状态栏挤下来，页面跟着往下让一段，它才像真的压在上面。

怎么做的：顶部横幅，从状态栏挤下来，页面跟着往下让一段，它才像真的压在上面。

顶部横幅，从状态栏挤下来，页面跟着往下让一段，它才像真的压在上面。

未读线淡出与红点联动

UNREAD LINE + BADGE SYNC

未读分割线停在原地等滚过再淡掉；处理一条，分组和顶部数字一起减。

怎么做的：未读分割线停在原地不动，等你滚过去再淡掉，位置才不会在眼皮底下变。红点连锁：处理掉一条，分组和顶部的数字一起跟着减，三层对不上就没人信。

未读分割线停在原地不动，等你滚过去再淡掉，位置才不会在眼皮底下避。红点连锁，处理掉一条，分组和顶部的数字一起跟着剪，三层对不上就没人写。

为什么需要远程改

WHY REMOTE

代码还在跑、页面还要调，人一离开电脑进度就停。

怎么做的：像我们用 AI 编程经常会遇到这种情况：代码还在跑，页面还要继续调整，人一旦离开电脑，进度就很容易停下来。所以这次尝试把后续修改交给手机遥控电脑功能。

像我们用 AI 编程经常会遇到这种情况，代码还在跑，页面还要继续调整，人一旦离开电脑，进度就很容易停下来。

连接前确认两件事

PRE-CHECK

同账号手机能控这台电脑；电脑在执行任务时不会中途休眠。

怎么做的：第一次用，要先在电脑端打开"手机遥控电脑"，这里主要确认两件事：同账号手机能控制这台电脑，电脑在任务执行时不会中途休眠。然后在手机端登录同一个账号，把手稿切到工作，在工作设备里选择这台在线的电脑就可以连接上。

第一次用，要先在电脑端打开手机遥控电脑，这里主要确认两件事，同帐号手机能控制这台电脑，电脑在任务执行时不会中途熊棉。

手机上发需求

MOBILE PROMPT

直接在手机上发需求，办公室电脑立即开始执行，任务卡同步记录过程。

怎么做的：接下来直接在手机上发需求，比如这次让它调整手稿卡片间距、把底部导航改成三个 tab，改完之后再运行预览。指令发出后办公室的电脑就会开始执行，手机任务卡顶部会显示正在连接的电脑，下面也会同步记录执行过程。

接下来直接在手机上发需求，比如我这次让它调整手液卡片间距，把底部导航改成三个 tab，改完之后再运行预兰。指令发出后办公室的电脑就会开始执行。

同一任务里补需求

APPEND IN THREAD

看完结果想继续调整，不用重开任务，同一任务里补一句就继续改。

怎么做的：看完结果还想继续调整，也不用重新开任务，直接在同一个任务里补一句需求，它就会在电脑端继续修改。

看完结果还想继续调整，也不用重新开任务，直接在同一个任务里补一句需求，它就会在电脑端继续修改。

挂上 UI 规范技能

ATTACH SKILL

发任务前挂上自己的 UI 规范技能，让它按同一套规则改，减少返工。

怎么做的：像我平时有固定的 UI 规范，就在发任务前挂上技能，让它按同一套规则来改，减少返工。这个技能大家自己根据要做什么去选就行，它里面内置了百来个。

像我平时有固定的 UI 规范，就在发任务前挂上技能，让它按同一套规则来改，减少反攻。这个技能大家自己根据自己要做什么去选就行，它里面内置了百来个。

云电脑模式

CLOUD MODE

批量生成统计页、详情页交给云端跑，不占本地资源，手机继续看进度。

怎么做的：这个工作模式里比较吸引我注意的是有个云电脑选项。像批量生成统计页、详情页、设置页这类页面，就可以交给这个模式去做，任务会在云端环境里运行，不依赖本地电脑，也不会占用你自己的电脑资源。你可以用手机继续查看进度、补充指令和查看结果。

有个云电脑的选项，像批量生成统计页、详情页、设置页这类页面，就可以交给这个模式去做，任务会在云端环境里运行，不依赖本地电脑，也不会占用你自己的电脑资源。

两个模式怎么选

CHOOSE MODE

要改本地项目用双端互通；项目已上云或任务重、需持续运行用云电脑。

怎么做的：这两个功能怎么选，其实看任务需不需要操作本地文件：要改本地项目就用双端互通；如果项目已经放到云端，或者任务更重、需要持续运行，就更适合用云电脑。想试的话去 PC 端豆包体验"豆包工作"，现在送 30 天，新老用户都可以。

其实看任务需不需要操作本级文件，要改本地项目就用双端互通，如果项目已经放到云端或者任务更重，需要持续运行就更适合用云电脑。

MotionSites 定方向

MOTION SITES

新手迷路时直接看它，里面有大量极具设计感的落地页案例。

怎么做的：前期不知道怎么写 Prompt，直接对标它的结构和布局，AI 出来的页面框架一步到位，绝不跑偏。

第一个 MotionSites，新手迷路直接看它，里面有大量极具设计感的落地页案例。前期不知道怎么写 Prompt，直接对标它的结构和布局，AI 出来的页面框架一步到位，绝不跑偏。

SoReal Design 提审美

SO REAL DESIGN

汇集各家设计工作室的动态案例，专拉审美上限。

怎么做的：看到心动的直接截图给 AI，让它拆解配色、留白、字体和节奏，全页面高级调性瞬间拉满。

第二个 SoReal Design，专拉审美上限，汇集了各家设计工作室的动态案例。看到心动的直接截图给 AI，让它拆解配色、留白、字体和节奏，全页面高级调性瞬间拉满。

GSAP 升华动效

GSAP

解决动效生硬卡顿的终极解法，让 AI 用 GSAP 重构动效逻辑。

怎么做的：不管是视差滚动还是平滑转场，找个对标案例让 AI 直接用 GSAP 重构动效逻辑，立马有大厂官网既视感。

第五个 GSAP，解决动效生硬卡顿的终极解法。不管是视差滚动还是平滑转场，找个对标案例让 AI 直接用 GSAP 重构动效逻辑，立马有大厂官网既视感。

按钮反馈要配得上动作

BUTTON FEEDBACK

点击之后不要只是缩一下再弹回来，让高亮沿着按钮边缘跑一圈。

怎么做的：点击之后让高亮沿着按钮边缘跑一圈，或者在加载的时候持续循环，用户会明显感觉到"我刚刚的操作真的被接收到了"。重点是让反馈跟当前状态对上。

按钮点击之后，不要只是缩一下再弹回来，可以让它有一个更完整的反馈。比如点击之后，让高亮沿着按钮边缘跑一圈，或者在加载的时候持续循环。这样用户会明显感觉到，我刚刚的操作真的被接收到了。重点是让反馈跟当前状态对上。

让文字参与交互

TEXT MOTION

文字发生变化时别直接替换，让它自己动一下，界面立刻精致很多。

怎么做的：数字变化可以做成滚动切换，状态变化可以让新文字自然替换进来。让文字也参与交互，别让它永远是静态信息。

很多时候文字发生变化，直接替换就结束了。但如果让它自己动一下，整个界面就会精致很多。比如数字变化可以做成滚动切换，状态变化可以让新文字自然替换进来。让文字也参与交互，别让它永远是静态信息。

让文字参与交互

TEXT IN INTERACTION

文字不只是静态信息，它本身也可以是交互的一部分。

怎么做的：把数字和状态的变化做成动效，文字就参与了交互，整个界面会精致很多。

让文字也参与交互，别让它永远是静态信息。

一枚按钮三种状态

BUTTON STATE CHAIN

宽按钮收成圆、圆环转两圈再撑开、对勾从中间画出，全过程不跳页不弹窗。

怎么做的：提交按钮点下去以后自己会变：一条宽按钮先收成一个圆，圆环转两圈再撑开成一条，结果条勾从中间画出来。整个过程没跳页也没弹窗，它一直是同一枚按钮，位置都没挪，你的眼睛不用跟着跑。

这枚提交按钮点下去以后自己会变，一条宽按钮先收成一个圆，圆环转两圈再撑开成一条，结果条勾从中间画出来。整个过程没跳液也没弹窗，它一直是同一枚按钮，位置都没挪，你的眼睛不用跟着跑。

筛选走三条曲线

FILTER CURVES

被筛掉的原地缩小弹出，留下的走弹簧滑到新位置，新进来的从空槽里长出来。

怎么做的：筛选器一次要处理三种卡片：一个标签被筛掉的原地缩小弹出，留下的各自走一条弹簧滑到新位置，新进来的从空槽里长出来。三种卡走三条不一样的曲线，你才分得清谁是走了、谁只是挪了个位置。

筛选难在一次要处理三种卡点，一个标签被筛掉的原地缩小弹出，留下的各自走一条弹簧滑到新位置，新进来的从空槽里长出来。三种卡走三条不一样的曲线，你才分得清，谁是走了，谁只是挪了个位置。

长按手势三种结局

PEEK & DECIDE

长按卡片浮起、背景后退，松手落下、拖到操作项执行、拖出范围取消。

怎么做的：长按 400ms 卡片扶起来，背后的内容推到后面。接下来有三条路：直接松手，它落回去；往上拖到操作项上，选中执行；拖出范围再松手就是取消。一个手势按下去，中途你随时能改主意。

长按住 400 毫秒，卡片扶起来，背后的内容推到后面。接下来你有三条路，直接松手，它落回去，网上拖到操作项上，选中执行，拖出范围再松手就是取消。一个手势按下去，中途你随时能改注意。

卡片回到触发点

ORIGIN ANCHORED CARD

卡片从按钮那一点上长出来，关掉时原路收回那一个点。

怎么做的：点下面这枚按钮，卡片就从按钮那一点上长出来，一边放大一边走到位，最后冲过头一点点再收回来。改点右上角那枚，它就从右上角长出来；关掉的时候，原路收回还是收回那一个点。

点下面这枚按钮，卡片就从按钮那一点上长出来，一边放大一边走到位，最后冲过头一点点再收回来。改点右上角那枚，它就从右上角长出来，关掉的时候，原路收回还是收回那一个点。

极简商务风

MINIMAL BUSINESS

不用自己搭布局找组件，重点靠留白和卡片层级让页面更像成熟产品。

怎么做的：调用 UI Skill 输入商务风提示词，不用自己搭布局找组件，顶部导航、数据卡片、趋势图表直接生成，适合企业后台业务系统。重点靠留白和卡片层级，让页面更像成熟产品。

第一种 极简商务风，调用 UI Skill 输入商务风提示词，不用自己搭布局找组件，顶部导航、数据卡片、趋势图表直接生成，适合企业后台业务系统。重点靠留白和卡片层级，让页面更像成熟产品。

高饱和撞色风

HIGH-SATURATION

超大标题压住版面，荧光色和纯黑硬碰硬，图表做成圆角色块。

怎么做的：再换一组提示词让它大胆一点：超大标题，压住版面，荧光色和纯黑硬碰硬，图表也做成圆角色块，适合作品级、创意团队、自动化工具后台。撞色不等于花，关键是只让一个颜色亮，其他全部收成黑白。

第四种 高饱和撞色风，让它大胆一点，超大标题，压住版面，荧光色和纯黑硬碰硬，图表也做成圆角色块。适合作品级、创意团队、自动化工具后台。撞色不等于花，关键是只让一个颜色亮，其他全部收成黑白。

一套 Skill 四种风格

ONE SKILL, FOUR STYLES

只是换了方向，同一个 Skill 就能生成完全不同的气质。

怎么做的：暗黑科技风再换一组提示词，切换成暗色视觉，搭配高亮数据和动态网格，适合 AI 监控、数据分析运营系统。只是换了方向，同一个 Skill，就能生成完全不同的气质。

第三种 暗黑科技风，再换一组提示词，切换成暗色视觉，搭配高亮数据和动态网格，适合 AI 监控、数据分析运营系统。只是换了方向，同一个 Skill，就能生成完全不同的气质。

先说清业务约束

STATE CONSTRAINTS

别只告诉 AI 你要什么风格，还要说清楚布局、组件、层级和场景。

怎么做的：提示词里最好说清楚响应式布局、完整业务组件、信息层级和使用场景。比如要企业数据后台，就告诉他需要哪些数据、哪些图表、什么布局。这样 Skill 才能真正参与到设计规范里。

不要只告诉 AI 你要什么风格，提示词里最好说清楚，响应式布局，完整业务组件，信息层级和使用场景。比如要企业数据后台，就告诉他需要哪些数据，哪些图表，什么布局。这样，Skill 才能真正参与到设计规范里。

清爽清亮风

FRESH & AIRY

浅色底大圆角卡片，整页只留一个高亮色，信息很密但看着不挤。

怎么做的：同一个 Skill 把提示词换成更清更透气的方向：浅色底大圆角卡片，整页只留一个高亮色，适合个人工具、学习和记录类产品。信息其实很密，但看着一点不挤，靠的是留白和统一的圆角。

第二种 清爽清亮风，同一个 Skill 把提示词换成更清更透气的方向，浅色底大圆角卡片，整页只留一个高亮色，适合个人工具、学习和记录类产品。信息其实很密，但看着一点不挤，靠的是留白和统一的圆角。

有规律的卡片错位

OFFSET GRID

三张卡一样宽一样高，整页只有一条对齐轴，页面就只剩整齐、没有层次。

怎么做的：三张卡一样宽一样高，连里面的图和字都对着同一条线，量一下就知道问题在哪：整页只有一条对齐轴，三张卡的左边全压在同一条线上，页面就只剩整齐、没有层次。现在把它重排一次，卡片之间错开一点位置，宽度也不再一样，标题各自另起一条中轴。错位不是乱，是让错位有规律，层次一下就出来了。

三张卡一样宽一样高，连里面的图和字都对着同一条线，量一下就知道问题在哪，整页只有一条对期中，三张卡的左边全压在同一条线上，页面就只剩整期，没有层次。现在把它重排一次，卡片之间错开一点位置，宽度也不再一样，标题各自另起一条中。错位不是乱，是让错位有规律，层次一下就出来了。

让大图成为主角

HERO IMAGE

标题、图片、说明、按钮几乎平分整屏，最大的那块也只有 1/6，页面上没有主角。

怎么做的：标题、图片、说明按钮几乎平分掉了整屏，把每一块占的面积量出来，最大的那块也只有 1/6，页面上没有主角，每个元素都在抢注意力。现在把主图一口气放大到半屏，直接顶到两边，其他信息全部退成辅助。该大的足够大，该小的足够小，页面自然就有了重点。

标题、图片、说明按钮几乎平真分掉了整平，把每一块站的面积凉出来，最大的那块也只有 1x6，页面上没有主角，每个元素都在抢出一粒。现在把主图一口气放大到半平，直接顶到两边，其他信息全部退成辅助。该大的足够大，该小的足够小，页面自然就有了重点。

删出更大留白

WHITESPACE

一屏塞了 14 块东西，留白连两成都不到；反过来把空的地方涂出来，只留几条缝隙。

怎么做的：一屏塞了 14 块东西，每一块空间都不想浪费，留白连两成都不到。反过来把空的地方涂出来，只剩下几条缝隙，现在只留下五块，空出来的地方反而成了页面上最大的一块。真正高级的设计一直在想"这里还能删什么"，少一点信息，多一点空间，反而更有设计感。

一平塞了 14 块东西，每一块空间都不想浪费，反过来把空的地方图出来，只剩下几条斩缝，留白连两成都不到。现在只留下五块，空出来的地方，反而成了页面上最大的一块。真正高级的设计一直在想，这里还能删什么。少一点信息，多一点空间，反而更有设计感。

检查对齐轴

ALIGNMENT AXES

量一下每块的左边压在哪，对齐轴少于 3 条就加一条错位中轴。

怎么做的：做布局前先量对齐轴：把每个块和图的左边线压在哪数出来，只有一条就是模板感来源。重排后让标题、卡片、图片各自落在不同中轴上，层次才出来。

量一下就知道问题在哪，整页只有一条对中期，三张卡的左边全压在同一条线上。标题各自另起一条中。

改成七三开

ASYMMETRY 7:3

四张卡两行两列量出来是 1:1:1:1，这种排法没有错，但 AI 最喜欢，代价就是模板感。

怎么做的：四张卡两行两列，一样宽一样高，量出来就是 1:1:1:1，四块正好各占四分之一。这种排法没有错，但 AI 最喜欢这么排，因为最安全，代价就是模板感。现在把左边那块放大到七成，右边收成两块小的，七三开往往比五五开更有张力，主题立刻就出来了。

四张卡两行两烈，一样宽一样高，凉出来就是 1x1x1x1，四块正好搁占四分之一。这种牌法没有错，但 AI 最喜欢这么牌，因为最安全，代价就是模板感。现在把左边那块放大到七成，右边收成两块小的，七三开往往比五五开更有张力，主刺立刻就出来了。

只用遮挡做纵深

OVERLAP DEPTH

图片、卡片、标签谁也不挨着谁，把层数标出来全都是同一层，页面是平的。

怎么做的：图片一块、卡片一块、标签又一块，谁也不挨着谁，把层数标出来全都是同一层，页面是平的，看多久都不会有纵深。现在让图片压住卡片，卡片压住标签，三层叠起来。而且这个纵深不需要复杂阴影，光靠遮挡和明度差就够了。

图片一块，卡片一块，标签又一块，谁也不挨着谁，把层数标出来全都是同一层，页面是平的，看多久都不会有纵深。现在让图片压住卡片，卡片压住标签，三层叠起来，而且这个纵深不需要复杂阴影，光靠遮挡和明度差就够了。

横滑卡片全程跟手

FOLLOW FINGER

有的横滑等你松手才跳过去，有的从头到尾跟着你的手指。

怎么做的：横滑时让卡片全程跟手：手指移动卡片实时跟随，松手后再按速度决定吸附到哪一张。跟手与预判同时做，滑动才既即时又稳定。

同样横滑一张卡，有的等你松手才跳过去，有的从头到尾跟着你的手指。差别就在三个字，跟随、预值和吸附。

惯性后再吸附

INERTIA + SNAP

滚轮选择难的不是拖，是松手之后速度先一帧一帧衰减，快停住了才吸附。

怎么做的：滚轮选择器难的不是拖，是松手之后：速度先一帧一帧衰减，快停住了才吸附到格。衰减和吸附一起做就会抖，要分开处理。

滚轮选择难的不是拖，是松手之后，速度先一针一针衰减，快停住了才吸附到哥，一起做就会抖。

双层合成抛物线

DUAL-LAYER ARC

点一下归档，划一道弧飞进角标——这条弧一条变换写不出来，得拆两层。

怎么做的：点一下归档，划一道弧飞进角标，这条弧一条变换写不出来，得拆两层：横向匀素、纵向缓出，两层合成才是抛物线。

点一下规档，划一道狐飞进脚标，这条狐一条变换写不出来，得拆两层横向云素，纵向缓出。

位移与甩速双阈值

DUAL THRESHOLD

半屏浮层松手关不关，别只看拖了多远——位移或速度满足一个就关。

怎么做的：半屏浮层要能被手拖回去，松手关不关，别只看拖了多远。轻轻一甩，位移很小，也是想关；位移或速度满足一个就关。

半屏淡层要能被手拖回去，松手关不关，别只看拖了多远。轻轻易甩，位移很小，也是想关位移或速度满足一个就关。

先钉住再展开

PIN THEN EXPAND

点开小图变大图，做法很反直觉：先把大图硬钉在小图身上，下一帧再放开。

怎么做的：点开小图变大图，做法很反直觉：先把大图硬钉在小图身上，下一帧再放开。少了这一下，动画根本不会发生。

点开小图变大图，做法很反直觉，先把大图硬钉在小图身上，下一针再放开，少了这一下，动画根本不会发生。

反向图带

COUNTER-SCROLL ROWS

两行图一行往左一行往右，就这一下，页面立刻就不平了。

怎么做的：两行图，一行往左，一行往右，就这一下，页面立刻就不平了。因为人眼会去比两行的速度差，而速度差就是深度。再给中间那组叠着的图加一个悬停，鼠标一靠近三张就张开，图在页面上就不只是躺着，它会回应你。

两行图，一行网左，一行网右，就这一下，页面立刻就不平了。因为人眼会去比两行的速度差，而速度差就是深度。再给中间那组叠着的图加一个旋停，鼠标一靠近，三招就张开，图在页面上就不只是躺着，它会回应你。

环形画廊

RING GALLERY

还是一圈，但这次镜头在圈外面，开场画从深处飞进来自己合成一个环。

怎么做的：环形画廊还是一圈，但这次镜头在圈外面：开场画从深处飞进来，自己合成一个环，拖动能转，点到其中一张，那张会转到正前方来。留意它的收尾——往下滚，环会摊成一面，双行反向的归档墙。

第四个 环形画廊还是一圈，但这次镜头在圈外面，开场话从深处飞进来，自己合成一个环，拖动能转点，其中一张，那张会转到正前方来。留意它的收尾，往下滚，环会摊成一面，双行反向的归档墙。

纵深隧道

Z-DEPTH TUNNEL

前面五个都是绕着你转，这一个是朝你来；滚动不再是上下，而是前后。

怎么做的：纵身隧道，前面五个都是绕着你转，这一个是朝你来。图沿着视线一张张排开，滚动不再是上下，而是前后：往下滚是往前走，反过来就是倒着走。它用到的东西最少，只有一根 Z 轴，冲击力却最强。

最后一个纵身隧道，前面五个都是绕着你转，这一个是朝你来，图延着视线，一张张排开，滚动不再是上下，而是前后，往下滚是往前走，反过来就是倒着走。它用到的东西最少，只有一根 Z 轴，冲击力却最强。

圆柱卡带

CYLINDER STRIP

把一列图卷成一个圆桶，镜头放进桶里面，拖它它就转。

怎么做的：把这一列图卷成一个圆桶，再把镜头放进桶里面，你拖它，它就转。这里有个很聪明的做法：拖的速度不只驱动带子，还同时驱动标题的字距，拖得越快，字被吹得越散，松手它自己走回来。一个输入，两个地方再想用，页面就活了。

第三个圆柱卡带，把这一列图，卷成一个圆桶，再把镜头放进桶里面，你拖它，它就转。这里有一个很聪明的做法，拖的速度不只驱动带子，还同时驱动标题的字句，拖得越快，字被吹得越散，松手它自己走回来。一个输入，两个地方再想用，页面就活了。

扇形牌阵

FAN DECK

同样一批图排成一扇，每张只差几度，边缘各露出来一点点。

怎么做的：扇形排阵，同样一批图，不排成网格，排成一扇，每张只差几度，边缘各露出来一点点，人一眼就知道后面还有很多张。点一下可以翻面，背面用来放文字，最妙的是它能整个摊成一面墙，再收回来，同一批图两种形态，中间是连着动的。

第二个 扇形排阵，同样一批图，不排成网格，排成一手排，每张只差几度奖，边缘各露出来一点点，人一眼就知道，后面还有很多掌。点一下可以翻面，背面又来放文字，最妙的是，它能整个摊成一面墙，再收回来，同一批图两种形态，中间是连着动的。

从手指方向出现

ORIGIN SHEET

抽屉要从你手指来的方向出现，从屏幕中间放大的那是弹窗，不是抽屉。

怎么做的：底部抽屉要从你手指来的方向出现；从屏幕中间放大的，那是弹窗，不是抽屉。出现的方向对了，用户才知道这东西是自己拉出来的。

第一种 底部抽体，它要从你手指来的方向出现，从屏幕中间放大的，那是弹窗，不是抽体。

慢拖弹回，一甩即关

DRAG TO DISMISS

松手别只看拖了多远，还要看拖得多快——慢慢拖弹回来，一甩就该关。

怎么做的：拖拽关闭时，松手别只看拖了多远，还要看拖得多快。慢慢拖弹回来，一甩就该关，两个条件满足其一就关闭。

第六种 拖拽关闭，松手别只看拖了多远，还要看拖的多快。慢慢拖弹回来，一甩就该关。

嵌套层级后退

NESTED RECEDE

第二层压上来，第一层要后退、缩小、变暗，人才知道又多了一层。

怎么做的：嵌套抽屉：第二层压上来时，第一层要后退、缩小、变暗，人才知道又多了一层。层级变化必须让用户看见，否则只是叠了个框。

第八种 嵌套抽体，第二层压上来，第一层要后退缩小变按，人才知道又多了一层。

让背景真正后退

BACKGROUND RECEDE

底下那一页不能只是变暗，加点模糊再轻微缩小，它才算退到后面。

怎么做的：背景退后：底下那一页不能只是变暗，加点模糊再轻微缩小，它才算退到后面。只加遮罩的话，背景还浮在原位。

第四种 背景退后，底下那一页不能只是变按，加点模糊再轻微缩小，它才算退到后面。

把大白话翻准

TERM LIBRARY

你不用学术语，照大白话说就行，它当场给你两条，还画出来告诉你做错了会是什么样。

怎么做的：第一步说准：你不用学术语，照大白话说就行。比如你说"窗底底下还能滑"，它当场给你两条——滚动穿透和毛玻璃，还画出来告诉你做错了会是什么样。这句话就能直接发过去。

第一步说准，你不用学数语照大白话说就行，比如你说，寒窗底下还能滑，它当场给你两条，稳动穿透和磨太矿，还画出来告诉你，做错了会是什么样。这句话就能直接发过去。

在真页面里选样

TEMPLATE WALL

没灵感的时候就打开模板墙，配色当场能换，字号也能调，换的都是真页面。

怎么做的：第二步选样：没灵感的时候就打开模板墙，按形态和风格摘一遍，看中哪张就点开，配色当场能换，字号也能调，换的都是真页面。定下来，复制这行规格，返回去。风格这件事，就不用再靠形容词去猜了。

第二步 选样，没灵感的时候就打开模板墙，按形态和风格摘一遍，看中哪张就点开，配色当场能换，字号也能调，换的都是真页面。定下来，复制着气行规格，绵回去，风格这件事，就不用再靠形容词去猜了。

按规格完整生成

SPEC-DRIVEN

这时候它手里已经有两样东西：一句准确的需求，一份视觉规格，你只要说一句"帮我把首页做出来"。

怎么做的：第三步生成：这时候它手里已经有两样东西，一句准确的需求，一份视觉规格。你只要说一句"帮我把首页做出来"，剩下的它自己做完。落地页、后台、商品页、App 和小程序，四条路线走四套完全不同的设计语言，所以后台不会长得像落地页。

第三步 生成，这时候，它手里已经有两样东西，一句准确的需求，也分视觉规格，你只要说一句，帮我把手也做出来，剩下的，它自己做完。落地液，后台商品液，App和小程序，四条路线走四套完全不同的设计语言，所以后台不会长得像落地液。

大色块只管一段

COLOR ZONING

机身黑占整页四成，四块高饱和大色浮在上面，加起来正好五成，每一块只管一段内容。

怎么做的：大色块分区：底是一整块机身黑，占了整页四成一，四块高饱和的大色浮在上面，珊瑚、冰蓝、长春花、鼠尾草绿各占一块，加起来正好五成，每一块只管一段内容。颜色本身就是分区，你不用读标题，扫一眼颜色就知道在看哪一块。不过颜色一旦超过 4 块，就从分区变成调色盘。

第一个大色块分区，底是一整块机身黑，占了整页 4×1，4 块高宝盒的大色浮在上面，珊瑚 1×8，冰蓝 1×3，长春花 1×1，属为草葡刀 1×1，加起来正好 5 成，每一块只管一段内容。颜色本身就是分区，你不用独标题，扫艳颜色就知道在看哪一块。不过颜色一旦超过 4 块，就从分区变成调色盘。

让密度服从秩序

DENSITY ORDER

淡紫的底、白卡浮在上面，第一屏能横着排下四张数据卡，靠的是统一圆角和卡间留白。

怎么做的：高密度卡片墙：淡紫的底，白卡浮在上面，紫色只用在当前态，状态另起一套小色标，绿黄红各管各的，不跟主色混。导航挪到顶上，左边的宽度就全部还给了内容，第一瓶立刻能横着排下四张数据卡。数据密度这么高还不乱，靠的是统一的圆角，和卡与卡之间那点留白。

第四个高密度卡片墙，淡紫的底，白卡浮在上面，紫色只用在当前态，状态另起一套小色标，绿黄红各管各的，不跟主色墙。导航挪到顶上，左边的宽度就全部还给了内容，第一瓶立刻能横着排下四张数据卡。数据密度这么高还不乱，靠的是统一的圆角，和卡与卡之间那点留白。

暗色后台只留一支彩色

DARK CONSOLE

底色占整页九成五，橙色只剩 1.4%，全给了要你动手的地方。

怎么做的：暗色控制台：这一页是深色的，底色占了整页九成五，橙色只剩 1.4%，全给了要你动手的地方。深色后台的规矩正好反过来——底是重的，亮起来的那一处才是重点。深色页最难的是层次，底、卡、描边一共三档，亮度只差十几个点，全靠这一点点把面拉开。

最后一个暗色控制台，这一页是深色的，底色占了整页九成五，橙色只剩 1.4%，全给了要你动手的地方。深色后台的规矩正好反过来，底是重的，亮起来的那一处才是重点。深色页最难的是层次，底卡描边一共三档，亮度只差十几个点，全靠这一点点插把面拉开。

先做三问评审

THREE-QUESTION REVIEW

重色落在哪儿、首屏给了谁、剪掉了什么——让 AI 每次动手之前先过一遍。

怎么做的：八个页面八种做法，但问的是同样三个问题：重色落在哪儿，首屏给了谁，剪掉了什么。这三问我已经写进了一个 Skill，让 AI 每次动手之前先过一遍。

八个页面八种做法，但问的是同样三个问题，重色落在哪儿，第一瓶给了谁，剪掉了什么。这三问我已经写进了一个 skill，让 AI 每次动手之前先过一遍。

先定产品主线

PRODUCT NARRATIVE

让 AI 拆出用户痛点和适合画面表达的卖点，视频主线就成了"从杂乱到被看见"。

怎么做的：第一步在 Work 模式里做产品分析：把心情日记 App 的信息给到 Trae，面向想记录情绪变化的用户，核心场景是记录心情、整理情绪标签、生成心情回顾，然后让它拆出用户痛点和适合画面表达的卖点。比如 Trae 会把视频主线拆成"从杂乱的情绪到被记录、被整理、被看见"。这样视频就不是单纯介绍功能，而是先理解问题，再看到产品怎么解决。

第一步 现在 Work mode 里做产品分析，我把新情日记 App 的信息给到 Traywork，面向想记录情绪变化的用户，核心场景是记录心情，整理情绪标签，生成心情回顾，然后让它拆出用户痛点，和适合画面表达的卖点。比如 Traywork 会把视频主线拆成，从杂乱的情绪到被记录，被整理，被看见，这样视频就不是单纯介绍功能，而是先理解问题，再看到产品怎么解决。

把脚本写到秒

SECOND-LEVEL SCRIPT

细化到每一段画面出现什么、字幕写什么、素材放在哪几秒、哪个界面需要特写。

怎么做的：第二步继续在 Work 模式里生成视频结构和脚本分镜：开头展示情绪混乱，中间展示 App 记录心情、整理标签，后面展示月度回顾和情绪趋势，最后收束产品名称。接着让它细化到每一段画面出现什么、字幕写什么、素材放在哪几秒、哪个界面需要特写。到这一步，素材就有了一张清楚的制作路线图。

第二步 继续在 Work mode 里生成视频结构和脚本分镜，比如开头展示情绪混乱，中间展示 App，记录心情，整理标签，后面展示越度回顾和情绪趋势，最后收束产品名称。接着让它细化到每一段画面出现什么，字幕写什么，素材放在哪几秒，哪个界面需要特写。到这一步，素材就有了一张清楚的制作路线图。

明确视觉重点

VISUAL PRIORITY

整体风格要温柔、有呼吸感，界面展示不能太满，情绪标签、日历、趋势图要成为视觉重点。

怎么做的：第三步切到 Design 模式，规划这支视频的视觉表达：比如整体风格要温柔、有呼吸感，界面展示不能太满，情绪标签、日历、趋势图要成为视觉重点。

第三步 切到 Design mode，规划这支视频的视觉表达，比如整体风格要温柔，有呼吸感，界面展示不能太满，情绪标签，日历，趋势图，要成为视觉重点。

整理成可执行结构

REMOTION READY

把脚本、分镜和素材顺序整理成 Remotion 可以执行的视频结构。

怎么做的：第四步进入 Code 模式，让它把脚本、分镜和素材顺序整理成 Remotion 可以执行的视频结构：图片进入哪个镜头、字幕什么时候出现、转场和动效怎么安排。所以 Trae 的价值不是只帮你生成一段文案，而是用 Work 模式做分析和脚本，用 Design 模式做视觉规划，再用 Code 模式衔接视频实现，把复杂任务拆成完整工作流。

第四步 进入 Code mode，我会让它把脚本，分静和素材顺序，整理成 Remotion 可以执行的视频结构，图片进入哪个镜头，字幕什么时候出现，转场和动效怎么安排。所以 Traywork 的价值不是只帮你生成一段文案，而是用 Work mode 做分析和脚本，用 Design mode 做视觉规划，再用 Code mode 显接视频实现，把复杂任务拆成完整工作流。

先拆产品逻辑

PM SKILL FIRST

先用 PM Skill 把产品逻辑和 UI 方向一起拆出来，输出目标用户、核心场景、页面结构。

怎么做的：第一步，先让 PM Skill 把产品逻辑和 UI 方向一起拆出来。它会输出目标用户、核心场景、页面结构，也会顺手定好大图比例、卡片层级、颜色变亮、字体层级和组件状态。

第一步，我先让 PM Scale 把产品逻辑和 UI 方向一起拆出来，它会输出目标用户，核心场景，页面结构，也会顺手定好大图比例，卡片层级，颜色变亮，字体层级和组件状态。

要可编辑设计稿

EDITABLE DESIGN

我不要一张 UI 图片，而是要一套可以继续编辑、复用、协作的设计源文件。

怎么做的：第二步直接进入 Pixel，把 PM Skill 生成的产品结构和 UI 规范给到 Pixel，让它生成一套高保真的 App 设计稿。这里的关键是：我不要一张 UI 图片，而是要一套可以继续编辑、复用、协作的设计源文件。生成之后，文字、图层、形成卡片都可以继续改，这才是它和普通 AI 出图最大的区别。

第二步，直接进入 Pixel，把 PM Scale 生成的产品结构和 UI 规范给到 Pixel，让它生成一套高保质的 App 设计稿。这里的关键是，我不要一张 UI 图片，而是要一套可以继续编辑，附用，协作的设计员文件。生成之后，文字，图层，形成卡片都可以继续改，这才是它和普通 AI 出途最大的区别。

先统一再出图

CONSISTENCY PASS

做 App UI 不是单页好看就行，整套页面要统一，所以先整理变量、字体层级、卡片样式。

怎么做的：如果这一版还不够精致，可以直接对话修改：整体更像高端旅行产品，减少杂乱装饰，提高图片和信息层级。做 App UI 不是单页好看就行，整套页面要统一，所以我会继续整理变量、字体层级、卡片样式和组件。

如果这一版还不够精致，可以直接对话修改，整体更像高端旅行产品，减少杂乱装饰，提高图片和信息层级。做 App UI 不是单页好看就行，整套页面要统一，所以我会继续整理变亮，字体层级，卡片样式和组件。

读取设计稿继续开发

MCP TO CODEX

通过 MCP 获取设计稿信息，结合生成的项目代码，继续完成页面、交互和功能开发。

怎么做的：接下来进入 Codex，通过 MCP 获取设计稿信息，并结合生成的项目代码，继续完成页面、交互和功能开发。所以 AI 做 App UI 不只是画得好看，而是把想法推进到可编辑、可复用、可开发，最后真正落地。

接下来进入 Codex，通过 MCP 获取设计稿信息，并结合生成的项目代码，继续完成页面，交互和功能开发。所以 AI 做 App UI 不只是画得好看，而是把想法推进到可编辑，可复用，可开发，最后真正落地的流程里。

按压回弹要压过头

PRESS OVERSHOOT

点下去不是缩一下就回来，是压过头再弹回来，手感才有重量。

怎么做的：按压回弹的关键在过冲：点下去先压过目标尺寸，再弹回来，中间留一段阻尼。只做 scale 0.95 再回 1 会觉得发飘，压过头再回弹才像实体被按下去了。

按压回弹，点下去不是缩一下就回来，是压过头再弹回来，手感才有重要。

数字要慢慢停下来

EASE-OUT COUNT

数字要慢慢停下来，不是滚到一半突然杀住。

怎么做的：数字滚动用 ease-out 曲线，快到目标时自动减速；匀速滚到底会突然刹住，加一段缓出才像物理停下。

数字滚动，数字要慢慢停下来，不是滚到一半突然杀住。

让成功有过程

DRAWN CHECKMARK

状态不是"啪"地出现，是一笔一笔划出来的，成功这件事才有过程。

怎么做的：成功勾选用 SVG stroke-dashoffset 动画，让对勾一笔一笔描出来；直接显示完整图标，用户会漏掉状态变化。

成功勾选，状态不是趴的出现，是一笔一笔划出来的，成功这件事才有过程。

旧页也要回应

STACK REACTION

卡片抽走时后面压着的卡片必须看得见，堆叠这件事才成立。

怎么做的：抽走一张卡片时，让后面被压住的卡片露出边缘并轻微上移，堆叠关系保持可见；如果直接消失，用户看不出后面还有内容。

卡片抽走，后面压着的卡片必须看得见，堆叠这件事才成立。

编辑分栏型

EDITORIAL SPLIT

别把标题和图上下堆着，左文右图立刻有了编辑感。

怎么做的：左边一栏 600 宽放标题和正文，右边图墙 460，中间 450 全是空的。上下堆叠是最常见的默认排法，改成左右分栏，页面立刻像杂志而不是落地页模板。

第一种 编辑分篮形 别把标题和图上下堆着，左边一篮子600宽，右边图墙460，中间450全是空的。

叠影显影型

STACK REVEAL

同一个位置放两张照片，滑过的那一圈把另一张亮出来。

怎么做的：同一个位置叠两张照片，底下那张压暗；鼠标滑过的那一圈做遮罩，把另一张亮出来。悬停即换图，比左右滑动更省空间也更有趣。

第二种 跌影 闲影形，同一个位置放两张照片，底下那张压岸，鼠标滑过的那一圈，把另一张亮出来。

纵深长廊型

PERSPECTIVE CORRIDOR

作品别摆成网格，摆成一条路，透视给到 1500。

怎么做的：作品沿透视纵深排成一条长廊，透视给到 1500px；滚得越快，两边的图推得越远、也越暗。同样的图，排成网格是陈列，排成路是空间。

第五种 纵深长廊形，作品别摆成网格，摆成一条路，透视给到1500，滚得越快，两边的话推的越远，也越暗。

竖切分栏型

VERTICAL SLICES

整屏切成几条竖栏，轮到哪一条，哪一条才张开、才回到彩色。

怎么做的：把整屏切成几条等宽竖栏，默认压暗降饱和；轮到哪一条才张开、才回到彩色，其余保持暗调。栏与栏之间依次激活，比整屏切换更有节奏。

第三种 竖切分篮形，整瓶切成几条竖篮，轮到哪一条，哪一条才张开，才回到彩色，其余的压岸降薄荷。

图片主导型

IMAGE FIRST

别拿一堆小图凑数，放一张大图当主角，一个元素占掉半屏。

怎么做的：首屏放一张大图当主角，一个元素占掉半屏，剩下的内容往两边收。小图网格是默认产物，改成单张大图，主张立刻就出来了。

第一种 图片主导型，手瓶别拿一堆小图凑数放一张大图卡当主角，这一个元素就占掉半瓶，剩下的往两边收，主刺一下就出来了。

卡片节奏型

CARD RHYTHM

别让所有卡片一样宽，宽窄交替着来，手指划过去才有节奏。

怎么做的：卡片宽度交替：大图卡片、一排小标签、再接列表。全部等宽是 AI 默认写法，宽窄有了变化，横向滑动时才有节奏感。

第二种 卡片节奏型，别让所有卡片一样宽，大图卡片一排小标签再接列表，宽窄交替着来，手指划过去才有节奏。

大字留白型

BIG TYPE

一屏不要塞满，一屏只讲一件事，把标题放到最大，其余全部留白。

怎么做的：一屏只讲一件事，标题放到最大，其余地方全部留白。信息越少，重点自己就跳出来；移动端屏幕小，塞满等于没有重点。

第三种大字留白型，手瓶不要塞满，一瓶只讲一件事，把标题放到最大，其余的地方全部留白，重点自己就跳出来。

极简编辑型

MINIMAL EDIT

颜色越少越高级，整页只留一个红作重点，其余交给字号、间距和一根细线。

怎么做的：整页只保留一个红色作重点色，其余全部黑白灰；质感交给字号、间距和一根细线去撑。加颜色容易，敢减颜色才见水平。

第五种极减编辑型，颜色越少越高级，整页只留一个红作重点，剩下的交给字号间距和一根细线，质感就出来了。

暖调留白型

WARM MINIMAL

底色别用纯白，换成带一点暖的奶油色，整页只用一个黄色做重点。

怎么做的：底色从纯白换成带一点暖的奶油色，整页只用一个黄色做重点色，立刻就干净了。纯白加蓝是默认后台配色，换成暖底加单色重点，模板感立刻下降。

第一种 暖调留白型，底色别用纯白换成带一点暖的奶油色，整页只用一个黄色做重点，立刻就干净了。

强对比视觉型

HIGH CONTRAST

别让所有卡片一样大，一张主卡占住视觉中心，再用高饱和撞色拉开层次。

怎么做的：卡片分主次：一张主卡占住视觉中心，其余卡片小一圈；用高饱和撞色拉开层次。全部等大等权，页面就没有视线入口。

第二种 强对比视觉型，别让所有卡片一样大，一张主卡站住视觉中心，再用高饱和撞色拉开层次。

图卡内容型

IMAGE CARDS

后台不一定都在看数字，让真实图片当主角，只留一个强调色做交互。

怎么做的：让真实图片当主角，卡片以图为主、数据为辅；只留一个强调色做交互提示。全是数字的后台像报表，加了图片立刻有温度。

第五种 图卡内容型，后台不一定都在看数字，让真实图片当主角，只留一个强调色做交互，页面立刻就有温度。

极简数据型

MINIMAL DATA

颜色越少重点越明显，图表也可以重新设计，比如把柱状图换成胶囊。

怎么做的：减少颜色数量让重点更突出，图表也可以重新设计：把柱状图换成胶囊条。图表形式不是固定的，换一种形态同样能表达数据。

第三种 极简数据型，颜色越少 重点越明显，图表也可以重新设计，比如 把注装图换成胶囊。

氛围沉浸型

ATMOSPHERIC

Dashboard 不必规规矩矩，打破网格加上雾面和玻璃，页面就有了自己的气质。

怎么做的：打破规整网格，加入雾面背景与玻璃质感卡片。后台不一定只能方方正正，网格松动一点、材质丰富一点，页面就有自己的气质。

第四种 分为沉浸型，Dashboard不必规规矩矩，打破网格加上雾面和玻璃，页面就有了自己的气质。

先判断页面用途

WHAT IT IS FOR

拿到 AI 生成的 HTML，不要先问能不能直接用，该问的是我准备拿它做什么。

怎么做的：先判断页面用途：只是做展示页，HTML + CSS + JavaScript 直接部署；已经有 React 或 Vue 项目，不能直接塞进去，要拆成组件、接入原来的状态和路由；要做成真正的产品，页面只是前端一部分，还需要 API、数据库、用户系统和完整业务逻辑；想做成 App，Web 部分能复用逻辑，但原生界面和系统能力通常要重新实现。

所以拿到AI生成的HTML，不要先问能不能直接用，该问的是我准备拿它做什么。只是做展示页，HTML CSS JavaScript直接部署。已经有React或View项目，不能直接塞进去，要拆成组件，接入原来的状态和路由。要做成真正的产品，页面只是前端一部分，还需要API 数据库，用户系统和完整业务逻辑。想做成APP Web部分能复用逻辑，但原生界面和系统能力，通常要重新实现。

接进已有工程

INTO EXISTING PROJECT

已经有 React 或 Vue 项目，不能直接塞进去，要拆成组件，接入原来的状态和路由。

怎么做的：AI 给出的通常是单文件页面，接进已有工程时要拆成组件，接入原来的状态管理和路由，样式也要并入现有体系；直接塞进去会破坏项目结构。

已经有React或View项目，不能直接塞进去，要拆成组件，接入原来的状态和路由。

页面之外还有系统

BEYOND THE PAGE

要做成真正的产品，页面只是前端一部分，还需要 API、数据库、用户系统和完整业务逻辑。

怎么做的：产品化时页面只是冰山一角：还需要 API、数据库、用户系统和完整业务逻辑。看到页面跑起来只是开始，能不能存数据、管用户、处理业务才是产品。

要做成真正的产品，页面只是前端一部分，还需要API 数据库，用户系统和完整业务逻辑。

先备齐四样资料

PREP FOUR THINGS

先把个人介绍、项目经历、作品截图，还有想要的风格准备好。

怎么做的：第一步先备齐四样资料：个人介绍、项目经历、作品截图，还有想要的风格。设计师就准备视觉作品和项目说明，开发就准备项目功能、技术栈和上线作品。资料越具体，生成越准。

第一步，先把个人介绍，项目经历，作品截图，还有想要的风格准备好。比如你是设计师，就准备视觉作品和项目说明，如果你是开发，就准备项目功能技术站和上线作品。

统一交给 Agent 读取

ONE FOLDER FOR AGENT

把资料统一整理到一个文件夹里，然后在 Codex 里调用 Skill，让它自己去读。

怎么做的：第二步把资料统一整理到一个文件夹里，然后在 Codex 里调用 Skill，让它自己去读这些内容。它会根据资料自动生成个人站的结构和内容，包括个人介绍、项目案例、作品展示这些模块，还会根据你的职业方向调整展示重点。

第二步，把资料统一整理到一个文件家里，然后在Codex里调用这个skill，让它自己去读这些内容。它会根据你整理好的资料，自动生成个人站的结构和内容，包括个人介绍，项目案例 作品展示 这些模块，还会根据你的职业方向，调整展示重点。

生成后去掉模板味

DE-TEMPLATE IT

继续修改主题、颜色、文案，还有项目顺序，让网站看起来更像你自己的风格。

怎么做的：第三步继续修改主题、颜色、文案，还有项目顺序，让网站看起来更像你自己的风格，而不是一个普通模板。设计师可以突出视觉风格，开发可以突出项目功能和技术栈，运营或自媒体可以突出案例成果和数据。

第三步，继续修改主题，颜色 文案 还有项目顺序，让这个网站看起来，更像你自己的风格，而不是一个普通模板。设计师可以突出视觉风格，开发可以突出项目功能和技术站，运营或者自媒体，可以突出案例成果和数据。

先拆五层设计语言

FIVE LAYERS

把说不清的那部分拆成五层：版面、字体、颜色、动效、留白。

怎么做的：Skill 会先把页面拆成五层：版面十二栏、左对齐，首屏只留一件事；字体无衬线加细体衬线，大字和小字拉开阶梯；颜色黑白灰加红，红只占 3%，只落在一条线和一个按钮上；动效图片漂浮加指针视差，位移很克制；留白标题上方空出约三分之一屏。它给你的不是代码，是一份能读懂的说明书。

所以这个skill，会先把页面拆成五层，板面 字体 颜色 动效 留白，再让AI按这套规则重做。板面十二栏，左对齐 手平只留一件事，字体无尘线里，差一段鞋体趁线，大字和小字拉开阶梯，颜色 黑白灰 红，只占3%，只落在一条线和一个洞磁上，动效图片漂浮加指针视差，位移很克制，留白 标题上方空调三分之一平。它给你的不是代码，是一份能读懂的说明书。

复制规则不复制页面

RULES NOT PIXELS

它不是把代码复制过来，是按同一套规则重新写了一遍。

怎么做的：拿着这份说明书再让 AI 写页面，出来的东西就不一样了：字阶对得上，红色的用量也对得上，图片漂浮和视差也在。它不是把代码复制过来，是按同一套规则重新写了一遍。

拿着这份说明书，再让AI写页面出来的东西就不一样了，字接对得上，红色的用量也对得上，图片漂浮和视差也在，它不是把代码复制过来，是按同一套规则重新写了一遍。

换方向验证规则

REUSE ON NEW BRIEFS

同一种气质，完全不同的网站——共用的不是代码，是同一套设计语言。

怎么做的：把拆出来的设计语言交给自己的 UI Skill，只说一句"按这个感觉做一个 AI 产品的落地页"，它不会照着原页面排，而是按产品重新想一遍。换了三个方向各跑一遍：作品集用最大留白，工具站把红色让给数据，品牌页把标题推到两倍大。你能看出它们是一家的，但没有一张是原来那个网站。

我把拆出来的设计语言，交给我自己那套UI Scale，只说一句，按这个感觉，做一个AI产品的落地液，它不会照着原页面牌，而是按我的产品重新想一遍。同样的做法，我换了三个方向，各跑了一遍，一个作品级用的是最大的留白，一个工具站，把红色让给了数据，但配色比例没变，一个品牌页把标题推到了两倍大，漂浮的幅度还是那个幅度。你能看出它们是一家的，但没有一张是原来那个网站，共用的不是代码，是同一套设计语言。

追问到任务清晰

ASK BEFORE ACTING

很多时候不是 AI 不会写，而是你自己还没想清楚，它不会马上执行，而是先不断追问。

怎么做的：第一个是 Matt Pocock 的工程 Skill。它解决的问题是：很多时候不是 AI 不会写，而是你自己还没有想清楚。它不会马上开始执行，而是先不断追问：这个东西给谁用、想解决什么问题、有没有特殊限制。把模糊想法整理成清晰计划之后，再让 AI 开始工作。

第一个 Matt Pocock 的工程skill，它解决的问题是 很多时候不是ai不会写，而是你自己还没有想清楚，它不会马上开始执行 而是先不断追问，这个东西给谁用 想解决什么问题，有没有特殊限制，把模糊想法整理成清晰计划之后，再让ai开始工作。

先压缩资料再输入

COMPRESS INPUT

网页、视频、播客、PDF 都可以快速整理成重点，四十分钟的内容几十秒抓住核心。

怎么做的：第二个 Samurais：AI 做事情之前，最重要的是给它足够的信息。网页、视频、播客、PDF 都可以快速整理成重点，原本需要花四十分钟消化的内容，现在几十秒就能抓住核心。

第二个 Samurais，ai做事情之前 最重要的是给它足够的信息，网页 视频 撥客 Pdf 都可以快速整理成重点，原本需要花40分钟消化的内容，现在几十秒就能抓住核心。

优化第一句话

PROMPT OPTIMIZER

很多人觉得 AI 不稳定，其实问题可能出在第一句话，它会直接对比优化前后的结果。

怎么做的：第三个 Prompt Optimizer：很多人觉得 AI 不稳定，其实问题可能出在第一句话。它会帮你优化原始提示词，把模糊表达变成更清晰的任务，而且不是靠感觉——会直接对比优化前后的结果。

第三个 Prompt Optimizer，很多人觉得ai不稳定，其实问题可能出在第一句话，它会帮你优化原始提示词，把模糊表达变成更清晰的任务，而且不是靠感觉，会直接对比优化前后的结果。

设计前先判断场景

ASK THE SCENE

它不会直接画页面，而是先问给谁看、什么设备、什么场景，判断清楚再交给后面的 Skill 执行。

怎么做的：最后是我自己整理的 UI Skill 前置。做网页的时候，最大的问题不是不会生成，而是不知道应该往哪个方向设计。它后面接的是五个 UI Skill，分别负责定方向、管落地页和视觉审美、管产品页面一致性、负责最后的规则检查，最后由我自己的 UI Skill 把页面真正做出来。所以我在前面加了一个判断流程：它不会直接画页面，而是先问给谁看、什么设备、什么场景、想快速完成还是做成作品，判断清楚之后，再交给后面的 UI Skill 执行。

最后一个是我自己整理的 UiSkill 前置，做网页的时候，最大的问题不是不会生成，而是不知道应该往哪个方向设计。所以我在前面加了一个判断流程，它不会直接画页面，而是先问给谁看，什么设备 什么场景，想快速完成还是做成作品，判断清楚之后，再交给后面的 UiSkill 执行。

先建立资料入口

BUILD THE VAULT

第一样 Obsidian 负责装，第二样两个 Skill 负责教 AI 怎么读怎么记，第三样一个 Agent 负责真正去用它。

怎么做的：搭这个知识库其实只要三样东西：第一样 Obsidian 负责装，第二样两个 Skill 负责教 AI 怎么读怎么记，第三样一个 Agent 负责真正去用它。三样凑齐，你就有了一个真正属于自己的 AI 大脑。它分三层：第一层原始资料（设计稿、代码片段、截图、导出的对话记录），只管往里丢不用先整理；第二层知识网络，AI 读完之后自动提炼，把散着的东西连成一张网；第三层规则文件，你在这里跟 AI 约定好进了这个知识库该怎么干活。三层缺哪一层都不行。

而这个地方，其实只要三样东西就能搭起来，第一样Obsidian 负责装，第二样两个Scale，负责交AI怎么读怎么计，第三样一个Agent，负责真正去用它，三样凑齐，你就有了一个，真正属于自己的AI大脑。这个知识库其实分三层，第一层是原始资料，设计稿代码片段，截图导出的对话记录，只管往里丢，不用先整理好，第二层是知识网络，AI读完之后自动体验，把散着的东西互相连成一张网，第三层是规则文件，你在这里跟AI约定好，进了这个知识库该怎么干活。

用规则文件约定工作方式

RULES FILE

新的东西该放哪个文件夹、笔记开头要带哪几个字段，Agent 每次进库第一件事就是读它。

怎么做的：在知识库的根目录写一份规则文件，把规矩写清楚：新的东西该放哪个文件夹，笔记开头要带哪几个字段，做完一件事要不要回写到索引，还有你长期想做成的是什么。写完之后 Agent 每次进这个知识库，第一件事就是读它，你不用每次重新交代一遍。这份文件写得越具体，它做出来的东西就越像你自己整理的。

在知识库的根木路写一份规则文件，把规矩写清楚，新的东西该放哪个文件夹，笔记开头，要带哪几个字段，做完一件事，要不要回写到所引领，还有你长期想做成的是什么，写完之后，Agent每次进这个知识库，第一件事就是读它，你不用每次重新交代一遍。

让资料持续进入系统

KEEP FEEDING IT

平时刷到有用的文章截图直接扔进文件夹，或者发给 Agent 让它归好类再写进去。

怎么做的：三个动作让它越用越准：第一随手丢，平时刷到有用的文章截图，直接扔进那个文件夹，或者发给 Agent 让它归好类再写进去；第二设定时任务，比如每天早上八点让它自动把最新的行业资讯收一遍，整理成一篇日报，放进指定文件夹；第三也是最容易被漏掉的——你每次跟它的对话、你的判断、你说它哪里做得不对，这些也会被写回知识库里。

第一 随手丢，平时刷到有用的文章截图，直接扔进那个文件夹，或者发给Agent，让它归好类 再写进去，第二 设定时任务，比如每天早上八点，让它自动把最新的行业资讯收一遍，整理成一篇日报，放进指定的文件夹，第三个 也是最容易被漏掉的，你每次跟它的对话，你的判断你说它哪里做得不对，这些也会被写回知识库里。

把纠错沉淀为记忆

FEEDBACK LOOP

用的越久，它越知道你要什么——别人问完就把窗口关掉了，你的每一次它都记得。

怎么做的：真正换不掉的是这个越用越懂你的知识库。你存进去的每一篇、想明白的每一件事都在里面留着，而且随时能被调出来用。模型大家用的都一样，而且几个月就换一代，差距是从这里开始拉开的。

模型大家用的都一样，而且几个月就换一袋，真正换不掉的，是这个越用越懂你的知识库，你存进去的每一篇，想明白的每一件事，都在里面留着，而且随时能被调出来用，别人问完就把窗口关掉了，你的每一次它都记得，这就是差距开始拉开的地方。

先整理需求清单

REQUIREMENTS FIRST

不要急着直接生成页面，先用第一个 Skill 把整个工作台的需求整理出来。

怎么做的：打开 WorkBuddy，新建一个工作空间，在输入框打一个斜杠调用第一个 Skill，它负责整理需求。我只说一句话"帮我做一个宠物日常记录的工作台"，剩下的它自己会问：每天要记什么、首页应该先看到什么、第一天还没有数据的时候显示什么、哪些内容以后每天都会用到。这些都想清楚了，后面生成的页面才会稳定很多。

不要急着直接生成页面，我会先用第一个scale，把整个工作台的需求整理出来，我只说一句话，帮我做一个宠物日常记录的工作台，剩下的他自己会问，你看他没有直接化界面，而是在整理，每天要记什么，首页应该先看到什么，第一天还没有数据的时候显示什么，哪些内容以后每天都会用到。

按内容密度挑模板

DENSITY MATCH

点开模板墙，左边分类右边模板，每一张都是真页面不是示意图，配色和字号都能当场调。

怎么做的：第二个 Skill 负责挑模板。点完之后它会开一面模板墙：左边是分类，右边是模板，每一张都是一个真页面，不是示意图，你就照着演挑。看中哪一张点开，左边是这个模板的真页面，右边可以挑三样东西：配色（每张都配了几套，点一下左边当场就变）、强调色（不满意可以自己捡一个）、字号（整页放大缩小）。调到你满意，点最下面这个复制，把这段规格复制给 AI，它就照着做。

第二个Scale负责挑模板，点完之后，它会开一面模板墙，左边是分类，右边是模板，每一张都是一个真页面，不是适一图，你就照着演员挑，看中哪一张，点开它，左边是这个模板的真页面，右边可以挑三样东西，第一 放配色，每张都配了几套，点一下左边当场就变，第二 强调色不满意，可以自己捡一个，第三 字号呢，整页放大缩小，调到你满意点最下面这个复制，把这段规格复制给AI，它就照着做。

按成本顺序修改

CHEAPEST FIRST

三种改法从上到下越来越费劲，所以出来不满意先换模板，别上来就一句一句描述。

怎么做的：出来了不满意，有三种改法，按费不费劲排一下：第一种整张换，回到模板墙挑另外一张，重新生成一次就行，需求不用重写，这个最快，几秒钟的事；第二种只换配色，同一张模板换一套颜色，版式、间距、每一块的位置全都不动，只有颜色变；第三种指着某一块说改，比如这块太紧了，把这三个数放大一点，它就只敢框里这一块，框外面一个像素都不动。所以出来不满意，先用第一种，一上来就一句一句描述是最慢的一条路。

出来了，不满意，有三种改法，我按费不费劲排一下，第一种 整张换，回到模板墙，挑另外一张，重新生成一次就行，需求不用重写，这个最快，几秒钟的事，第二种 只换配色，同一张模板，换一套颜色，补架 间距，每一块的位置，全都不动，只有颜色变，第三种 指着某一块说，比如这块太紧了，把这三个数放大一点，它就只敢框里这一块，这三种，从上到下越来越费劲。

先数首屏信息量

COUNT FIRST SCREEN

别挑最好看的那一张，要挑和你内容对得上的那一张。

怎么做的：挑模板最容易踩的坑：别挑最好看的那一张，要挑和你内容对得上的那一张。你的工作台如果每天要看十几个数字，选了柔和圆的那一档，字大图大，一屏只放得下三个数，每天翻五屏；反过来，一个只寄三件事的页面套上数据密集十二个格子，九个是空的，看着也很空。方法就一句话：先数一下你第一屏要放多少东西，再去挑对应的那一档。

别挑最好看的那一张，要挑和你内容，对得上的那一张，你的工作台，如果每天要看十几个数字，选了柔和圆的那一档，字大 图大，一瓶只放的下三个数，每天翻五瓶，反过来，一个只寄三件式的页面，套上数据密集，十二个格子，九个是空的，看着也很空，方法就一句话，先数一下你第一瓶，要放多少东西，再去挑对应的那一档。

需求与规范一起输入

BRIEF + SPEC

真正决定页面质量的并不是一句 Prompt，而是一套完整的设计规范。

怎么做的：先把客户需求交给它分析，再把自己的网页设计规范一起放进去。因为真正决定页面质量的并不是一句 Prompt，而是一套完整的设计规范。打开千问办公，模型选千问 3.8，把整理好的需求填进输入框，回车页面生成。

我会先把客户需求交给它分析，再把自己的网页设计规范一起放进去，因为真正决定页面质量的，并不是一句prompt，而是一套完整的设计规范，打开签问办公，模型选签问3.8，把整理好的需求填进输入框，回車页面生成。

逐条对规范优化

AGAINST THE SPEC

继续让千问办公按照我的设计规范优化：页面节奏、视觉层级、留白、响应式布局，以及整体风格统一。

怎么做的：页面生成之后，我会继续让它按照我的设计规范优化：比如页面节奏、视觉层级、留白、响应式布局，以及整体风格统一。这个过程更像是在和一个设计助手一起完成项目，而不是简单让 AI 聊天生成网页。

回車页面生成之后，我会继续让签问办公，按照我的设计规范优化，比如页面节走，视觉层级，留白响众式布佈，以及整体风格统一，这个过程更像是在和一个设计助手，一起完成项目，而不是简单让AI聊天生成网页。

一版一版磨一致性

ITERATE VERSIONS

同一个页面可以出 V1、V2、V3，每一版都在上一版基础上继续调。

怎么做的：复杂项目还是需要设计师继续把关，好在这件事也能在同一个地方做：同一个页面可以出 V1、V2、V3，每一版都在上一版基础上继续调，设计一致性、交互动效、组件、细节，就是这样一版一版磨出来的。千问办公对我已经不是一个普通聊天工具，而是整个网页工作流里的一个 AI Agent——我的设计规范负责设计标准，它负责理解需求、执行流程，把想法一步一步变成真正可以交付的网页。

同一个页面可以出，V1 V2 V3，每一板都在上一板基础上继续调，设计一致性，交互动效组件，细节就是这岸，一板一板磨出来的，我的设计规范 负责设计标准，千萬辦公负责理解需求 执行流程，把想法一步一步变成真正可以交付的网页。

先聊清楚再写规范

CHAT THEN SPEC

我不会直接甩一句"做一个 AI SaaS 产品"就让它开工，我会先跟它把这件事聊一遍。

怎么做的：第一步需求分析。我不会直接甩一句话就让它开工，而是先跟它把这件事聊一遍：谁在用、要解决什么问题、一共有哪些页面、用什么技术栈。这一段就是正常聊天，不用什么格式，想到哪儿说到哪儿；聊到差不多了敲一条命令 to spec，它就把刚才聊的这些整理成一份规范。注意它不会反过来问你问题，它只负责把已经聊过的东西写清楚——所以聊得越清楚，这份规范就越准。

第一步 需求分析，注意，我不是直接甩一句，做一个AISARS产品，就让它开工，我会先跟它把这件事聊一遍，谁在用，要解决什么问题，一共有哪些页面，用什么技术站，这一段，就是正常聊天，不用什么格式，想到哪儿说到哪儿，聊到我觉得差不多了，我敲一条命令，to spec，它只负责把已经聊过的东西写清楚，所以聊得越清楚，这份规范就越准。

明确这一版不做什么

SCOPE OUT

后面还有实现上的决定、怎么测，以及这一版明确不做什么——写清楚哪些不做，AI 后面就不会自己加戏。

怎么做的：规范第一段是问题是什么，第二段是打算怎么解决，第三段是一条一条的用户故事（作为什么人、我想要什么、这样我就能做到什么），这一段会写得非常细；后面还有实现上的决定、怎么测，以及这一版明确不做什么。最后这一段特别重要：写清楚哪些不做，AI 后面就不会自己加戏。这份东西不短，但它是后面每一步的依据。很多人觉得这一步浪费时间，其实真正浪费时间的是改到第三次才发现方向错。

这就是它整理出来的规范，第一段，问题是什么，第二段，打算怎么解决，第三段，最常是一条一条的用户故事，作为什么人，我想要什么，这样我就能做到什么，这一段会写得非常细，后面还有实现上的决定，怎么测，以及这一版明确不做什么，你看最后这一段特别重要，写清楚哪些不做，AI后面就不会自己加细。

页面类型各走各的规范

PER-TYPE SPECS

落地页首评它判断这是品牌页走落地页规范，控制台切到产品规范，移动端切到移动端规范。

怎么做的：第二步前置 Skill 判断这一页该按哪套设计规范来做。落地页首评，它判断这是品牌页，走落地页那条规范：大留白、剧情标题，一屏一个主张；控制台，它判断这是产品后台，切到产品规范，这一下规矩全变了：剧情标题收起来，换成信息密度、栅格，还有一整套统一的组件；移动端，它切到移动端规范，因为手机从来不是把桌面板缩小，而是完全不同的一套逻辑：拇指够得着的地方放操作，一屏只说一件事。它自己不画任何页面，只决定这一页按谁的规矩。

第二步是这套流程里，我最想讲的一步，以前我要自己决定，这一页到底该用哪一套设计规范，现在不用了，页面进来，它自己判断，第一个，落地页首评，它判断这是品牌页，走落地页那条规范，大流白剧情标题，一评一个主张，第二个，控制台，它判断这是产品后台，切到产品规范，这一下规矩全变了，剧情标题收起来，换成信息密度，炸革，还有一整套统一的组件，第三个，移动端，它切到移动端规范，因为手机从来不是把桌面板缩小，而是完全不同的一套逻辑。

修改前先看影响面

IMPACT FIRST

你再让它改那张卡片，它会先告诉你这张卡片被三个页面用到，改之前你就知道会影响哪里。

怎么做的：最后一步代码理解。项目做到两百多个组件时，AI 最容易出的问题是不知道哪里能改、哪里不能改——你让它改一个控制台的卡片，它可能顺手把别的地方也改了。所以我会让它先把整个项目理解一遍，建立起代码之间的关系。建完之后你再让它改那张卡片，它会先告诉你这张卡片被三个页面用到，里面的图表还关联着主题配色，改之前你就知道会影响哪里，而且以后每次修改它不用再重新扫一遍整个项目。这一步做完，这个项目才算真的能长期维护下去。

最后一步，项目做到这里，已经两百多个组件了，这时候，AI最容易出的问题是，不知道哪里能改，哪里不能改，你让它改一个控制台的卡片，它可能顺手把别的地方也改了，所以，我会让它先把整个项目理解一遍，建立起代码之间的关系，建完之后，你再让它改那张卡片，它会先告诉你，这张卡片被三个页面用到，里面的图表，还关联着主题配色，改之前你就知道会影响哪里。

先把需求问清楚

ASK FIRST

他没有直接画界面，而是在整理：每天要记什么、首页先看到什么、没数据时显示什么。

怎么做的：不要急着直接生成页面，先用第一个 Skill 把整个工作台的需求整理出来。我只说一句话"帮我做一个宠物日常记录的工作台"，剩下的它自己会问：每天要记什么、首页应该先看到什么、第一天还没有数据的时候显示什么、哪些内容以后每天都会用到。这些都想清楚了，后面生成的页面才会稳定很多。

不要急着直接生成页面，我会先用第一个scale，把整个工作台的需求整理出来，我只说一句话，帮我做一个宠物日常记录的工作台，剩下的他自己会问，你看他没有直接化界面，而是在整理，每天要记什么，首页应该先看到什么，第一天还没有数据的时候显示什么，哪些内容以后每天都会用到。

每条需求都有落点

SPEC TRACEABLE

需求里写的每一条，在页面上都能找到对应的位置。

怎么做的：有了这份需求以后，再交给第二个 Skill。他不会去猜什么叫高级一点、什么叫极简一点，他直接按照这份需求生成完整的页面设计。你看，需求里写的每一条，在页面上都能找到对应的位置。

有了这份需求以后，再交给第二个usgo，他不会去猜什么叫高级一点，什么叫极简一点，他直接按照这份需求，生成完整的页面设计，你看，需求里写的每一条，在页面上都能找到对应的位置。

沿原结构继续加功能

EXTEND NOT REDO

直接告诉 AI 增加疫苗记录、成长相册，它就在原来的基础上继续改，不是推倒重做。

怎么做的：页面生成以后，后面的修改就很轻松了：比如增加疫苗记录、增加成长相册、增加饮水统计，直接告诉 AI，它就会在原来的基础上继续改，不是推倒重做。这一点很重要，因为需求已经在那份文档里了，它知道该往哪里加。

页面生成以后，后面的修改就很轻松了，比如增加疫苗记录，增加成长相册，增加银水统计，直接告诉AI，他就会在原来的基础上继续改，不是推导重做，这一点很重要，因为需求已经在那份文档里了，他知道该往哪里讲。

按顺序接手

HANDOFF ORDER

先由 UI UX Pro Max 把方向定下来，主力页面交给自己的 Skill，特殊情况才顶上。

怎么做的：五个 Skill 并不是一起工作的，真正跑起来的时候它们按顺序接手：先由 UI UX Pro Max 把方向定下来，然后是主力——落地页、产品后台、商品页、手机端，只要这一版要做出质感，都交给自己的 UI Skill。另外两个是特殊情况才顶上：时间特别紧、一个文件就要跑起来，那交给 Taste；一个后台要长期改下去、怕三个月后到处不一致，那交给 Interface Design。页面完成以后再交给 Impeccable 做最后一轮规则检查。

不过这五个SKILL并不是一起工作的，真正跑起来的时候，它们是按顺序接手，先由UI X Pro Max把方向定下来，然后是主力落地液产品后台商品页手机端，只要这一版要做出质感，都交给我自己做的那个UI SKILL，另外两个是特殊情况才顶上，时间特别紧，一个文件就要跑起来，那交给Taste，一个后台要长期改下去，怕三个月后到处不一致，那交给Interface Design，页面完成以后，再交给ImpactBow的做最后一轮规则检查。

把边界写进规则

WRITTEN BOUNDS

每个 Skill 谁擅长什么、明写着不接什么，我都是一句一句整理下来。

怎么做的：前置 Skill 的判断规则不是凭感觉写的，主要来自三个地方：一是长期使用这几个 Skill 总结出来的经验，哪些场景适合谁、哪些地方容易翻车，都是在真实项目里一点一点积累的；二是每个 Skill 自己的说明书，谁擅长什么、明写着不接什么，都一句一句整理下来，没有掺自己的判断；三是后来补进去的工作流经验，什么时候该分层、什么时候该切路线、什么时候该让另一个 Skill 接手。所以它不是在猜，而是在已有规则里替你做选择。

这套规则不是我凭感觉写的，它主要来自三个地方，第一是我长期使用这几个SKILL，总结出来的经验，哪些场景适合谁，哪些地方容易翻车，都是在真实项目里一点一点积累下来的，第二是每个SKILL自己的说明书，谁擅长什么，人明却写着不接什么，我都是一句一句整理下来，没有掺自己的判断，第三是我后来补进去的工作流经验，什么时候该分层，什么时候该切路线，什么时候该让另一个SKILL接手，这些没有标准答案只能不断实践，所以它不是在猜，而是在已有规则里替你作选。

只问改变路线的问题

ROUTE-CHANGING Q

五个问题每一个都直接排掉一批候选，不会改变最后交给谁的问题直接跳过。

怎么做的：真正厉害的不是它知道五个 Skill，而是它知道什么时候该问。五个问题每一个都直接排掉一批候选，如果一个问题不会改变最后交给谁，它就直接跳过，所以你不会被问一堆没用的。而且每个问题它都会先给出自己的猜测，你觉得对就直接确认，觉得不对再改，你从零回答轻松得过。

真正厉害的不是它知道五个SKILL，而是它知道什么时候该问，第一五个问题每一个都直接排掉一批候选，如果一个问题不会改变，最后交给谁，它就直接跳过，所以你不会被问一堆没用的，第二一张覆盖表，十二种页面对五个SKILL，谁接什么谁明确写着不接，一格一格填出来的，第三，问完落一份判读单，后面的UI SKILL只需要照着执行。

条件变了就重算路线

RECOMPUTE

如果他判断错了，也不用重新开始，改一个条件，路线就会重新计算。

怎么做的：举三个真实的例子：做一个摄影工作室的落地页，它问了两句——给谁看、要快还是要当门面，判读单落下来是落地页要当门面、要活很久；做一个商家后台，它只问了一句这个后台是不是要长期维护，答案是要，于是切到产品后台那条路，但规矩完全变了，大留白和剧情标题全收起来，换成信息密度、栅格，还有一整套统一的组件规范；做一个活动 H5 只在手机上看、明天上线，它几乎没有继续问，直接切到移动端那条路线。同一个 Skill 跑三次，走了三条不同的路，出来三套完全不同的页面。想回头查它当初凭什么这么判，翻出来看一眼，它会把撑不住结论的那几个字段挑出来。

举三个真实的例子，第一个，做一个摄影工作室的落地页，它问了两句，一句是给谁看，一句是要快，还是要当门面，判读单落下来，落地页要当门面，要活很久，第二个，做一个商家后台，他只问了一句，这个后台是不是要长期维护，答案是要，于是他切到产品后台那条路，还是我那个UI SKILL，但规矩完全变了，大流白和剧情标题全收起来，换成信息密度炸戈，还有一整套统一的组件规范，第三个，做一个活动H5，只在手机上看，明天上线，他几乎没有继续问，直接切到移动端那条路线，同一个UI SKILL跑三次，走了三条不同的路，出来三套完全不同的页面。

三幕空间叙事

THREE-ACT SPACE

页面像一条被拉开的空间叙事线，三幕各有各的任务，不是平铺一堆图。

怎么做的：用三幕结构组织页面：第一幕交代场景、第二幕推进、第三幕收束。每一幕在屏幕上占一个明确的空间区间，滚动就是翻页，叙事节奏由留白和分区控制。

三幕空间叙事，把页面拆成三幕，每一幕有明确的空间与任务。

把照片收拢成球

PHOTO SPHERE

照片不是排成网格，而是收拢成一个可以转动的球。

怎么做的：把照片按球面坐标分布，整体收拢成一个可拖拽旋转的球体。同一批图，从平面阵列变成球体之后，空间的纵深感立刻出来了。

把照片收拢成球，同一批图，排成球体之后纵深感立刻出来。

一屏只讲一个动作

ONE ACTION PER SCREEN

一屏只讲一个动作，用户的注意力不用被切成几份。

怎么做的：每一屏只保留一个主动作和一条信息，其余元素降为背景。信息越多，用户越不知道点哪里；一屏一件事，转化路径反而更短。

一屏只讲一个动作，用户的注意力不用被切成几份。

无尽走廊画廊

ENDLESS CORRIDOR

作品沿纵深排成一条走不完的走廊，滚动就是往前走。

怎么做的：把作品沿 Z 轴排成一条长廊，两侧无限延伸；滚动映射为前进后退，越深的图越小越暗。陈列变成空间，用户是走进去的，不是划过去的。

无尽走廊画廊，作品沿纵深排成一条走不完的走廊，滚动就是往前走。

用节奏制造纵深

RHYTHM DEPTH

不靠阴影，只用大小和疏密的变化，就能让页面有纵深。

怎么做的：用元素的尺寸梯度与疏密节奏制造纵深：近大远小、近疏远密。纵深不一定非要透视和阴影，节奏本身就能拉开层次。

用节奏制造纵深，大小与疏密的变化就能让页面有层次。

单图聚焦不断流

SINGLE FOCUS FLOW

一次只看一张大图，但滚动始终不断，翻页像流水。

怎么做的：一次只展示一张大图占据视觉中心，滚动时图片连续流动切换，中间不出现空白断点。聚焦与连续同时成立，用户既看得清也停不下来。

单图聚焦不断流，一次只看一张，但滚动始终不断。

先问清楚再动手

CLARIFY FIRST

它不写代码，只问问题，先摸清你的底子再决定问多狠。

怎么做的：Grealme 不写代码，它只问问题。先摸清你的底子再决定问多狠：新手不会被问蒙，一次只问一个，每个问题都先给出推荐答案；能查到的它自己去查，只把要你拍板的决定丢给你。

依据需求丢过去，AI立刻开始生成页面，做到一半才发现方向全错。Grealme 不写代码，它只问问题，先摸清你的底子再决定问多狠，新手不会被问蒙，一次只问一个，每个问题都先给出推荐答案，能查到的它自己去查，只把要你拍板的决定丢给你。

砍掉客套保留结论

CONCLUSION ONLY

寒暄客套绕圈的解释全砍掉只留结论，实测输出少了 65%，一眼就能看完。

怎么做的：AI 写完代码还要附一篇小作文，开头一段铺垫、结尾一段总结，真正有用的就一句。Caveman 让它有话直说：寒暄客套绕圈的解释全砍掉只留结论，代码、命令、报错原样保留，一个字节都不动。实测输出少了 65%，一眼就能看完。

AI 写完代码，还要付一篇小作文，开头一段铺垫 结尾一段总结，真正有用的就一句，Caveman 让他有话直说，寒喧客套绕圈的解释，全砍掉 只留结论，代码命令 抱错原样，保留一个字节都不动，实测输出少了 65%，一眼就能看完。

四项职责串成工作流

FOUR ROLES

需求、设计、提效、排查各管一件事，组合起来 AI 的输出稳定得多。

怎么做的：这四个 Skill 就是一套完整的 AI Web 工作流：Grealme 管问需求，UI 设计 Skill 管订设计，Caveman 管提效，diagnose 管排查，各管一件事。组合起来，AI 的输出稳定得多。

这四个skill，就是我现在的 AI Web 工作流，需求设计提效 排查各管一件事，组合起来 AI 的输出稳定的多。

把设计规范写成 Skill

SPEC AS SKILL

它不只管好看，是把 Product Design 整套方法写进去了。

怎么做的：方向定了也别急着让 AI 生成页面，先让它学会设计。这套 UI 设计 Skill 是我自己整理的，它不只管好看，是把 Product Design 整套方法写进去了：配色、字体、间距、组件、动效全部写成一套规范，落地页、仪表盘、作品集出来的都是同一套设计基因。

方向定了，也别急着让 AI 生成页面，先让它学会设计，这套 UI 设计 skill 是我自己整理的，它不只管好看，是把 product design 整套方法写进去了，配色 字体 兼具 组件 动效，全部写成一套规范，落地页 仪表盘 作品级，出来的都是同一套设计基因。

不只看模型权重

MORE THAN WEIGHTS

放出来的不只是权重，技术报告加上 MoE、Flash KDA、Agent M5 三项基础设施一起开源。

怎么做的：这次开源的不只是模型权重，而是技术报告加三项基础设施一起放出：MoE 架构、Flash KDA、Agent M5。开源从"给个模型"变成"给一整套可复现的方案"，这才是真正的开源姿态。

放出来的不只是权重 技术报告加上摩溫EP Flash KDA，Agent M5三項基礎設施 一起開源。

看激活参数与上下文

ACTIVE PARAMS

MoE 架构 2.8 万亿总参数、激活 1040 亿，上下文 100 万 Token，规模化效率比 K2 提升两倍半。

怎么做的：看 MoE 模型别只盯总参数：2.8 万亿总参数、激活 1040 亿，意味着每次推理只用一小部分专家；上下文 100 万 Token，规模化效率比 K2 提升两倍半。总参数决定容量，激活参数决定单次推理成本。

摩溫液架構2.8萬億總參數 激活1040億，上下文100萬Token 規模化效率比K2提升兩倍半。

把问题留给应用

LEAVE IT TO APPS

在 Coding 榜单上它已经登顶或仅次第一，开源模型开始进入新的阶段。

怎么做的：在 Coding 榜单上它已经登顶或者仅次第一。更值得注意的是：闭源的领先正在被追平，开源模型开始进入新的阶段——接下来的问题不再是"开源差多少"，而是"你能用它做出什么"。

在Coding榜單上 它已經登頂 或者僅要第一，開源模型開始進入新的階段，避源的領先正在被追平。

一个光源讲故事

ONE LIGHT SOURCE

整套页面只设一个主光源，所有元素按同一个方向受光。

怎么做的：整套页面只设一个主光源，所有元素的高光、阴影、反射都按同一个方向推导。光源统一之后，画面自然有了空间逻辑，不需要额外装饰。

一个光源讲故事，整套页面只设一个主光源，所有元素按同一个方向受光。

三层动效同步推进

THREE-LAYER MOTION

背景、主体、前景三层动效按同一时间轴推进，快慢各不相同。

怎么做的：动效分三层：背景慢、主体中、前景快，共用一条时间轴。三层速度差形成视差，同步推进又保证整体不乱——这是纵深感最省事的做法。

三层动效同步推进，背景慢、主体中、前景快，共用一条时间轴。

用冷暖配色定情绪

WARM-COOL MOOD

用冷暖对比定情绪：暖色聚在主体，冷色铺在环境。

怎么做的：用冷暖对比定情绪：暖色集中在主体和需要被看见的地方，冷色铺在环境和背景。颜色分工明确，情绪不用文字说明就能传达到。

用冷暖配色定情绪，暖色聚在主体，冷色铺在环境。

按页面类型分规范

PER-TYPE RULES

品牌官网按品牌那套规矩来，后台系统换另一套，后台里面还得再分。

怎么做的：它不会拿同一套模板去做所有页面：品牌官网按品牌那套规矩来，后台系统换另一套；后台里面还得再分——给人看的数据页跟给人一步步操作的配置页不是一回事；再往下还有电商的商品页、结算页。你哪怕只让它做一个按钮，它也知道该使什么劲儿。

它不会拿同一套模板去做所有页面，品牌官网按品牌那套规矩来，后台系统换另一套，后台里面还得再分，给人看的数据页，跟给人一步步操作的配置页不是一回事，再往下还有电商的商品页 结算页，你哪怕只让它做一个按钮，它也知道该收拾来。

跨工具携带同一套规则

TOOL-AGNOSTIC

换哪个工具都不影响：Codex、Cursor、Trae、WorkBuddy 都能用，或者把规范整段贴进去。

怎么做的：换哪个工具都不影响：Codex 能用、Cursor 能用、Trae 能用、WorkBuddy 也能用，实在都不适配，把那份规范整段贴进去一样管用。所以新手真不用纠结该选哪个 AI 工具——这套判断写一次，你走到哪儿它跟到哪儿。

还有一点，换哪个工具都不影响，Codex能用，Cursor能用，Tray能用，Codebody，Codepilot也能用，换成Workbody照样能用，实在都不适，把那份规范整段贴进去，一样管用，所以新手真不用纠结，该选哪个AI工具，这套判断写一次，你走到哪儿 它跟到哪儿。

把审美变成判断规则

RULES NOT TASTE

页面是能抄走的，背后那些判断抄不走——把审美拆成五个维度各抽各的。

怎么做的：还有个更隐蔽的毛病：AI 做十个页面，十个都像一个模子刻出来的，因为它是在一份现成的风格清单里挑，挑来挑去就那么几种。所以干脆把这件事拆开：配色、字体、排版、动起来的方式、整体的质感，五个维度各抽各的，凑出来上千种可能。而且它每做完一个页面都会记忆一笔，下次动手之前先翻一遍，跟上次撞了就换掉。

所以我干脆把这件事拆开了，配色 字体 拍板，动起来的方式，整体的质感，五个维度，各抽各的，凑出来上千种可能，而且它每做完一个页面，都会记忆一笔，下次动手之前先翻一遍，跟上次撞了就换定。

先说清会看到什么

PREVIEW THE PROMISE

它动手之前会先跟你说清楚你待会会看到一个什么样的页面，做完了再拿这句话回头一条条对。

怎么做的：它还自带一份廉价感黑名单：那些烂大街的配色、备用烂的字体、一眼就吐的排版，它自己会躲开。而且它动手之前，会先跟你说清楚你待会会看到一个什么样的页面；做完了再拿这句话回头一条条对，说到的页面上就得有，没有一条黑名单被采，页面才长这样——你挑不出哪里俗，也挑不出哪里花。

而且它动手之前，会先跟你说清楚，你待会会看到一个什么样的页面，做完了再拿这句话回头一条条对，说到的页面上就得有，没有一条黑名单被采，页面才长这样，你挑不出哪里俗，也挑不出哪里花。

弧形阵列制造纵深

ARC ARRAY

作品沿弧线排布，中间突出、两侧后退，纵深自然就出来了。

怎么做的：把作品沿一条弧线排布：中间一件最大最靠前，两侧依次缩小后退。直线阵列是平的，弧线阵列自带纵深，不需要额外透视。

弧形阵列制造纵深，中间突出、两侧后退。

标题与作品分层

TITLE VS WORK

标题和作品不要抢同一层，一个压后一个靠前，各站各的位置。

怎么做的：标题与作品分层处理：标题压暗、缩小或后退，作品提亮、放大、靠前。两者不抢同一视觉层，用户先看什么完全由你决定。

标题与作品分层，一个压后一个靠前，各站各的位置。

把高潮留给一幕

SAVE THE CLIMAX

不要每屏都用力，把最强的一幕留给最后，情绪才有落点。

怎么做的：节奏上不要每屏都用力：前面保持克制，把最强的一幕留给最后。高潮之所以是高潮，是因为前面都在铺垫。

把高潮留给一幕，前面保持克制，情绪才有落点。

一句风格词定整片

ONE STYLE WORD

同样一份作品集，换一句风格词，它就排成完全另一种感觉。

怎么做的：同样一份作品集，只要换一句风格词，它就排成完全另一种感觉——风格、节奏、氛围全跟着你这句话变。你提供的是意图，不是参数。

同样一份作品集 换一句风格词，它就排成完全另一种感觉，风格 节奏 氛围，全跟着你这句话变。

换词就换整套编排

RE-ORCHESTRATE

换成数据报表也一样，你说一句"科技感、要节奏"，它立刻排好。

怎么做的：换成数据报表也一样：你说一句科技感、要节奏，它立刻排好——数字怎么跳、镜头怎么推，它全都替你算好；该突出哪个数据、该留多少空白，节奏和审美它都替你想好了。

换成数据报表也一样，你说一句科技感要节奏，它立刻排好，数字怎么跳 镜头怎么推，它全都替你算好，该突出哪个数据 该留多少空白，节奏和审美 它都替你想好了。

把镜头语言做成清单

SHOT CHECKLIST

把常用的镜头、转场和高光效果都列好了，说一句它就帮你做好一整套动效。

怎么做的：我还整理了一份视频动效清单，把常用的镜头、转场和高光效果都列好了。不用一针一针慢慢调，也不用写代码，说一句它就帮你做好一整套动效——从零感到视频，你只管把想法说出来。

我还整理了一份视频动效清单，把常用的镜头 转场和高光效果都立好了，不用一针针慢慢调 也不用写代码，说一句 它就帮你做好一整套动效，从零感到视频 你只管把想法说出来。

先禁掉默认廉价感

BLOCK THE SLOP

紫蓝渐变、Emoji 当图标、默认字体、永远居中三张卡，它把这些一条条列成黑名单。

怎么做的：AI 做网页有几个改不掉的毛病：紫蓝渐变、Emoji 当图标、轻怡色默认字体、永远居中三张卡。这套 UI Skill 把这些一条条列成黑名单，做之前先自查一遍。所以做出来的页面能直接看——不是套模板，是它自己定的风格。

第二个是我自己整理的一套UI Scale，AI做网页有几个改不掉的毛病，紫蓝渐变，Emoji当图标，轻衣色默认字体，永远举中三张卡，它把这些一条条列成黑名单，做之前先自查一遍。

后台用另一套设计语言

BACKEND LANGUAGE

它分得清落地页和后台是两种设计语言，配色也不会一律深蓝。

怎么做的：后台是完全另一套：它分得清落地页和后台是两种设计语言，不会把品牌页那一套直接搬到后台；配色也不会一律深蓝，信息密度、表格、图表、交互状态全按后台该有的样子来排。动效也有写死的规矩：滚动到哪一段才出现、什么时候入场、快慢怎么给，而且默认带降级方案——用户在系统里关了动效，页面也不会散架。

后台是完全另一套，它分的清落地页，和后台是两种设计语言，不会把品牌页那一套直接搬到后台，配色也不会一律深蓝，信息密度表格图表交互状态，全按后台该有的样子来排。而且默认在降级方案，用户在系统里关了动效，页面也不会散架。

只动该动的代码

MINIMAL DIFF

AI 会先把假设讲清楚，只做最小改动，改完自己验证。

怎么做的：第五个是按 Carpacity 观点整理的编码原则。AI 写代码最大的毛病是乱猜需求、瞎加抽象，还顺手改一堆没让它动的地方。装上它，AI 会先把假设讲清楚，只做最小改动，改完自己验证。说白了就是给 AI 订好边界，让它只做该做的事。

第五个一套，按Carpathic观点整理的编码原则，AI写代码最大的毛病是乱猜需求，瞎加抽象，还顺手改一堆没让它动的地方，装上它，AI会先把假设讲清楚，只做最小改动，改完自己验证。

让中文稿更像人话

DE-AI THE CHINESE

把声音套画、假大空的词，改成自然有节奏、像人说的话，一篇稿子过一遍 AI 味就没了。

怎么做的：第三个 Humanizer Skill：AI 写的中文总有一股翻译腔和机器味，念出来就出戏。这个 Skill 专治这个——把声音套画、假大空的词，改成自然有节奏、像人说的话。一篇稿子过一遍，AI 味就没了。

第三个Humanizer Jazz，AI写的中文总有一股翻译枪和机器味，念出来就出戏，这个skill专制这个，把声音套画假大空的词，改成自然有节奏，像人说的话，一篇稿子过一遍，AI味就没了。

审美与版本双保险

TASTE + VERSIONS

有了这套工作流，我才敢让 Agent 在真实项目里重构页面、开发功能。

怎么做的：用 UI Skill 能让 AI 做出挺高级的页面，但页面越高级、细节越多，AI 一改就越容易牵一发动全身，一下就改崩了——这时候没有 Git，你根本不敢让它大改。Git 可以理解成项目的存档系统：每完成一个阶段就存一个版本，改好了继续，改坏了随时回退到上一个存好的版本，一点不慌。

用UI Scale能让AI做出挺高级的页面，但页面越高级，细节越多，AI一改就越容易牵一发动全身，一下就改崩了，这时候没有Git，你根本不敢让它大改，Git可以理解成项目的存档系统，每完成一个阶段就存一个版本，改好了继续，改坏了随时回退，回到上一个存好的版本，一点不慌。

把命令清单交给 Agent

COMMAND CHEATSHEET

Git 命令不用一个一个去背，整理好一份清单直接交给 AI Agent。

怎么做的：这些 Git 命令不用一个一个去背，我已经整理好了一份 Git 命令清单，直接交给 AI Agent，它就知道什么时候该执行什么命令——你不用记命令，把想做的说清楚就行。真正常用的其实就几个：第一次进入项目 git init 建立仓库；改完代码 git add 保存修改、git commit 生成一个版本；万一改崩了 git restore 一键恢复；想看之前改过什么 git log 看眼历史。

不过这些Git命令你不用一个一个去背，我已经整理好了一份Git命令清单，直接交给AI Agent，他就知道什么时候该执行什么命令，你不用及命令，把想做的说清楚就行，真正常用的，其实就这几个，第一次进入项目，Git unit建立仓库，改完代码，Git add保存修改，Git commit生成一个版本，万一改崩了，Git restore一件恢复，想看之前改过什么，Git log看眼历史。

试错不污染主线

SAFE EXPERIMENTS

觉得不错就先存一个版本，再换个风格试试，一句 git restore 直接回到刚才那一版。

怎么做的：举个例子：先让 Agent 做一次初始化，仓库就建好了；接着让它配合 UI Skill 生成第一版页面，比如暗色摄影风，觉得不错就先存一个版本；然后再换个风格试试，改成浅色产品风，一对比还是第一版更耐看，这时候一句 git restore，直接回到刚才那一版，试错完全没有成本。老项目也一样：先存一个版本当安全网，再让 Agent 重构页面，想尝试不同方案直接开一个分支，不用担心影响主项目。

举个例子，一个项目实际怎么走，先让Agent做一次Git出实化，仓库就建好了，接着让它配合UI Scale生成第一版页面，比如这种暗色摄影风，觉得不错，就先存一个版本，然后再换个风格试试，改成浅色产品风，一对比还是第一版更耐看，这时候一句Git restore，直接回到刚才那一版，试错完全没有成本，老项目也一样，先存一个版本当安全网，再让Agent重构页面，想尝试不同方案，直接开一个分支，不用担心影响主项目。

先把编码规矩立住

CODING RULES

AI 会先把假设讲清楚，只做最小改动，改完自己验证。

怎么做的：第一个是一套按 Carpacity 观点整理的编码原则。AI 写代码最大的毛病是乱猜需求、瞎加抽象，还顺手改一堆没让它动的地方。装上它，AI 会先把假设讲清楚，只做最小改动，改完自己验证。说白了就是让 AI 写代码更靠谱。

第一个，一套按carpacy观点整理的编码原则，AI写代码最大的毛病，是乱猜需求 瞎加抽象，还顺手改一堆没让它动的地方，装上它，AI会先把假设讲清楚，只做最小改动 改完自己验证，说白了，就是让AI写代码更靠谱。

先理解，再画配图

UNDERSTAND THEN DRAW

它会先读懂你正文里的一个判断、一个比喻，再画成一张纯白手绘插画。

怎么做的：第四个小黑正文配图：写文章最头疼的是配图跟文字对不上。它会先读懂你正文里的一个判断、一个比喻，再画成一张纯白手绘插画。比如这张讲的两个断点：写之前素材断了，写完之后没承接，一看就懂。几分钟出一整套。

第四个 小黑正文配图，写文章最头疼的是，配图跟文字对不上，它会先读懂你正文里的一个判断，一个比喻，再划成一张纯白手维插画，比如这张讲的两个断点，写之前素材哭了，写完之后没承接，一看就懂，几分钟出一整套。

按交付形态选 Skill

BY DELIVERABLE

做 PPT 要原生对象，做视频要可渲染，做网页要有设计立场——各选各的。

怎么做的：按交付形态选 Skill：PPT Master 生成的是真正能在 PowerPoint 里继续改的原生对象，形状、图表、连接线全都能编辑；Remotion 让你用写网页的方式写视频，一段 React 代码就是一帧画面，AI 完全读得懂；Hyperframes 专为 AI Agent 造，写一段 HTML，AI 就能把它变成一条视频；最后我自己的 UI Skill 给 AI 的不是模板，是一整套设计立场——排版、留白、配色全有规范。

第三个PPT master，它生成的是真正能在powerpoint里，继续改的原生对象，形状 图表 连接线全都能编辑，第二个 remotion，它让你用写网页的方式写视频，一段react代码就是一真画面，AI完全读得懂，第五个hyperframes，同样是做视频，但它是专门为AI agent造的，你写一段html AI，就能把它变成一条视频，最后压咒，是我自己整理的一套UI scale，它给AI的不是模板，是一整套设计立场。

命令管流程，Skill 管审美

HAND VS EYE

命令负责流程，让它知道什么时候该干什么；页面好不好看是 Skill 管的。

怎么做的：很多人只把 Codex 当成一个聊天框，打开就说话。但它其实是个能自己动手的智能体，有自己的一套命令：命令负责流程，让它知道什么时候该干什么；而页面好不好看是另一回事，那是 Skill 管的。一个是手，一个是眼。所以为了让 Codex 做出来的页面好看，我自己整理了一套 UI Skill——整个页面的审美它全包了：怎么排版布局、怎么配色、动效怎么给、视觉层级怎么定，全是它替 AI 想好的。

很多人只把Codex当成一个聊天框，打开就说话，但它其实是个能自己动手的智能体，它有自己的一套命令，命令负责流程，让它知道什么时候该干什么，而页面好不好看是另一回事，那是Scale管的，一个是手，一个是眼，所以为了让Codex做出来的页面好看，我自己整理了一套UI Scale，整个页面的审美它全包了。

先说清需求与风格

SAY WHAT YOU WANT

项目是新的，就顺手用 init 让它先把整个项目读一遍，然后直接说需求。

怎么做的：先做一个落地页：第一步敲一个斜杠，它的命令就全列出来了，而且你自己的 Skill 也在同一个菜单里，一眼就能看见，选中它，从这开始它做的每一版都照着这套审美来。项目是新的，就顺手用 init 让它先把整个项目读一遍，然后直接说需求——一句话"做个品牌落地页"。想稳一点的话，还可以先开 Plan Mode，让它把怎么排先说一遍，你点头了它再动手，这一步不是必须的。

先做一个落地页，第一步你只要敲一个鞋杠，它的命令就全列出来了，而且你自己的Scale，也在同一个菜单里，一眼就能看见，选中它，从这开始，它做的每一版都照着这套审美来，项目是新的，就顺手用一腻的，让它先把整个项目读一遍，然后直接说需求就行，一句话做个品牌落地页，想稳一点的话，还可以先开Play Mode，让它把怎么排先说一遍，你点头了它在动手。

长对话及时压缩

COMPACT EARLY

聊到这对话已经很长了，用 status 看一眼，快满了就 compact 压一压。

怎么做的：最后做个作品集：聊到这对话已经很长了，用 status 看一眼，快满了就 compact 压一压。注意压掉的只是废话，Skill 的规矩还在。然后一句话"做个摄影作品集，安静、高级"，它立刻收得干干净净：照片给到最大，字收得很小，整页几乎不出声。要是哪一块你还不满意，用 side 开调直线随便试试，好了再拿回来，主线一点没脏。

最后做个作品级，聊到这对话已经很长了，用status看一眼，快满了就compact的压一压，注意压掉的只是废话，Scale的规矩还在，一句话，做个摄影作品级，安静 高级，它立刻收得干干净净，照片给到最大，自收得很小，整页几乎不出声，要是哪一块你还不满意，用side开调直线随便试试，好了再拿回来，主线一点没脏。

一句话先定方向

ONE-LINE DIRECTION

第一句"做一个暗主题风格的摄影作品集"，它直接给你一版能看的。

怎么做的：具体怎么用？你只要把想要什么讲清楚。第一句："做一个暗主题风格的摄影作品集"，它直接给你一版能看的；想换方向，再说一句"改成产品设计集，浅色一点"，整页的排版和配色它自己重排；再来一句"给它加点动效，滚起来有东西在动"，它照样接得住。你从头到尾只管说要什么。

具体怎么用，你只要把想要什么讲清楚，第一句，做一个暗主题风格的摄影作品级，它直接给你一板能看的，想换方向 再说一句，改成产品设计级 浅色一点，整页的排版和配色，它自己重排，再来一句，给它加点动效，滚起来有东西在动，它照样接得住，你从头到尾 只管说要什么。

四项能力按序协作

FOUR IN ORDER

审美、动效、记忆、自动测试——先订审美，再让动效跟上，接着建图谱，最后自测。

怎么做的：四个 Skill 装好之后，顺序其实很简单：先订好审美，让它知道页面该长什么样；再让动效跟上，该动的地方动起来；接着用 Graphify 把整个仓库编成一张知识图谱，页面、组件、样式全部串起来，以后改哪儿都不乱；最后让它自己测试、自己修，一遍一遍跑到没问题为止。顺序千万别翻过来——先让它闷头把代码写完，再回头补审美，那基本就是推倒重来。

这四个Scale装好之后，顺序其实很简单，先订好审美，让它知道页面该长什么样，再让动效根上该动的地方动起来，接着用Graphify把整占机楼改哪儿都不乱，最后让它自己测试，自己修一遍一遍跑到没问题为止，顺序千万别翻过来，先让它闷头把代码写完，再回头补审美，那基本就是推导重来。

最后自动验收

AUTO ACCEPTANCE

让 Agent 自己打开浏览器，自己运行、自己点击、自己截图检查，发现问题自己改。

怎么做的：第四个 Playwright MCP 负责自动测试和自动修 Bug：让 Agent 自己打开浏览器，自己运行、自己点击、自己截图检查，发现问题自己改，改完再验证一遍，一直循环，直到整页真的没问题。你现在看到的这一整套作品集页面，就是这么一遍遍自查过来的。

第四个 Playwright MCP，负责自动测试和自动修bug，让Agent 自己打开浏览器，自己运行 自己点击自己截图检查，发现问题自己改，改完再验证一遍，一直循环，直到整页真的没问题，你现在看到的这一整套作品级页面，就是这么一遍遍自查过来的。

先把能力准备好

PREP BEFORE TYPING

打开 AI 就直接说"帮我做一个官网"，代码是有了，页面却很普通——问题不在模型，是你少了准备这一步。

怎么做的：你是不是也这样：打开 AI 就直接说"帮我做一个官网"，结果代码是有了，页面却很普通。问题不在模型，是你少了准备这一步。动手之前，先把这套 Scale 工作流装好，按审美、动效、工程、自测这个顺序来。很多人觉得 AI 做网页比的是模型，其实现在真正拉开差距的早就不是模型，是工作流。模型决定下限，Scale 决定上限。

你是不是也这样，打开 AI 就直接说，帮我做一个官网，结果代码是有了，页面却很普通，问题不在模型，是你少了准备这一步，动手之前，先把这套 Scale 工作流装好，按审美动效工程自测这个顺序来，模型决定下线，Scale 决定上线。

审美之后再加动效

TASTE THEN MOTION

滚动触发、时间轴边排、错峰入场，什么时候出现、什么时候结束、快慢怎么给，它全管。

怎么做的：第一个是自己做的 UI Scale，负责整个网页的设计审美：怎么排版、怎么留白、怎么配色、怎么做层级，全是它替 AI 定好的规矩。第二个 GSAP 负责网页的高级动画：很多 AI 做的网页会动，但动得不好看；滚动触发、时间轴边排、错峰入场，什么时候出现、什么时候结束、快慢怎么给，它全管。它是配着第一个 Scale 一起用的——一个管页面好不好看，一个管它动得好不好看。

第二个 Scale GSAP，负责网页的高级动画，很多 AI 做的网页会动，但动得不好看，滚动触发，时间轴边排，错峰入场，什么时候出现，什么时候结束，快慢怎么给，它全管，它是配着第一个 Scale 一起用的，一个管页面好不好看，一个管它动得好不好看。

工程收尾做减法

LESS CODE

同样一个效果，AI 默认写两百行，装了它三十行就搞定。

怎么做的：第三个 Ponytail 负责代码质量和工程思维，它的哲学很简单：能不写代码就别写。让 AI 先想这个功能真的需要吗、现有代码里有没有标准库，实在不行才自己写。同样一个效果，AI 默认写两百行，装了它三十行就搞定。它也是配着第一个 Scale 用的——页面照样好看，代码却不雍重。最后 Playwright MCP 负责自动测试和自动修 Bug，让 Agent 自己打开浏览器，自己运行、自己点击、自己截图检查，一直循环到整页真的没问题。

第三个 Scale Ponytail，负责代码质量和工程思维，它的哲学很简单，能不写代码就别写，让 AI 先想，这个功能真的需要吗，现有代码里有没有标准库，有没有，实在不行才自己写，同样一个效果，AI 默认写两百行，装了它三十行就搞定。

页面类型先分轨

SPLIT BY PAGE TYPE

品牌落地页、产品后台、作品集，它都能照着那一类页面该有的样子来排。

怎么做的：这次升级最核心的一处是按页面类型分了轨：品牌落地页、产品后台、作品集，它都能照着那一类页面该有的样子来排，不再只擅长一种。我发现很多 UI Skill 最大的问题不是做不好，而是什么页面都用同一种思路——可落地页是一种节奏，仪表台是另一种，作品集又完全不一样。所以这次我没有继续加更多组件，而是重新定义了每一种页面该怎么思考、怎么布局、怎么表达。

这次做了一版比较大的升级，最核心的一处是我把它按页面类型分了轨，品牌落地页、产品后台、作品级，它都能照着那一类页面该有的样子来排，不再只擅长一种，我发现很多UiSkill最大的问题不是做不好，而是什么页面都用同一种思路，可落地页是一种节奏，仪表台是另一种，作品级又完全不一样。

后台先抓信息主次

DASHBOARD HIERARCHY

同样一堆图表和数字，排得好一眼就能看到最重要的那个，排不好就是一片让人头晕的色块。

怎么做的：就拿仪表台来说，以前 AI 很容易把数据页做得密密麻麻，卡片越放越多，什么都想突出。同样一堆图表和数字，排得好，一眼就能看到最重要的那个；排不好，就是一片让人头晕的色块。所以这次专门补了一套仪表台的设计规则：什么信息该突出、什么该弱化、什么时候留白、什么时候收紧，都有自己的逻辑。这样做出来的后台不只是能看，而是真的有产品感。

就拿仪表台来说，以前AI很容易把数据页做得秘密麻麻，卡片越放越多，什么都想突出，同样一堆图表和数字排得好，一眼就能看到最重要的那个，排不好，就是一片让人头晕的色块，所以这次我专门补了一套仪表台的设计规则，什么信息该突出，什么该弱化，什么时候留白，什么时候收紧，都有自己的逻辑。

整套页面锁住一致性

LOCK CONSISTENCY

从配色、字体到按钮、圆角、间距都会尽量保持统一，不会做到后面越来越跑偏。

怎么做的：还有一个我一直想解决的问题就是一致性：很多人让 AI 做三四个页面，第一页很好看，第二页开始换颜色，第三页字体又变了，最后完全不像一个产品。打个比方，你做一个品牌，官网、后台、作品集要是三种长相，用户根本不会觉得是同一家。所以这次它会把整套页面当成一个项目来看，从配色、字体到按钮、圆角、间距，都会尽量保持统一，不会做到后面越来越跑偏。

还有一个我一直想解决的问题，就是移制性，很多人让AI做三四个页面，第一页很好看，第二页开始换颜色，第三页字体又变了，最后完全不像一个产品，打个比方，你做一个品牌，官网 后台 作品级，要是三种长相，用户根本不会觉得是同一家，所以这次，它会把整套页面当成一个项目来看，从配色 字体 到按钮 圆角 间距，都会尽量保持统一。

一套规范管住高级感

ONE SPEC

它们的高级感其实都来自同一套设计规范，一半学审美判断，一半学反廉价。

怎么做的：你可能会想这些页面风格差这么远，真是同一套东西做的？是的，它们的高级感其实都来自同一套设计规范：这套规范里一半是跟 Taste 学的审美判断——怎么一眼看出什么好看；另一半是跟 Impeccable 学的反廉价——怎么把那种一眼假的塑料感挑出来去掉。但光有这两样还不够，真正做页面的时候，你还得知道什么时候该上真的动效引擎、页面骨架该怎么搭、导航标题内容按钮怎么排才顺。这些细活没人会专门教你，所以这一块是我自己一点点试出来补进去的。三样凑齐，才算一个能真正干活的 Skill。

你可能会想这些页面风格差这么远，真是同一套东西做的，是的 它们的高级感其实都来自同一套设计规范，这套规范里一半是跟TASTE的学的审美判断，怎么一眼看出什么好看，另一半是跟INPACKBALL学的反廉价，怎么把那种一眼假的塑料杆挑出来去掉，但光有这两样还不够，真正做页面的时候，你还得知道什么时候该上真的动效引擎，页面骨架该怎么搭，导航 标题 内容 按钮怎么排才顺，这些细活没人会专门教你，所以这一块是我自己一点点试出来补进去的，三样凑齐 才算一个能真正干活的SKILL。

三要素说清需求

THREE ELEMENTS

你要做什么、你想要什么感觉、有没有参照——三样一凑，一句话就够了。

怎么做的：真正卡住新手的从来不是这个 Skill，而是不知道该怎么跟它开口。其实特别简单，就像填空，把三样说清楚就行：第一你要做什么，是落地页、后台还是作品集；第二你想要什么感觉，用一两个词形容，够不够有冲击力、够不够安静高级；第三有没有参照，像哪个网站或者干脆说一句"别做得像模板"。三样一凑，一句话就够了。

真正卡住新手的从来不是这个SKILL，而是不知道该怎么跟它开口，其实特别简单就像填空，把三样说清楚就行，第一 你要做什么，是落地业 后台 还是作品级，第二 你想要什么感觉，用一两个次形容够不够有冲击力，够不够安静高级，第三 有没有参照，像哪个网站或者干脆说一句，别做的像模板，三样一凑 一句话就够了。

改版直接说大白话

PLAIN WORDS

嫌它太素就说"再大胆点"，嫌它太花就说"收一收"，你永远只用大白话。

怎么做的：那要是第一版出来你不满意怎么办？也不用重做：嫌它太素，就说一句"再大胆点"，它就给你加上更强的动效；嫌它太花，就说"收一收"；想换个气质，就说"换个风格"；觉得太空，就说"再充实点"。你永远只用大白话，它负责把话翻译成专业的改动。

那要是第一版出来，你不满意怎么办，也不用重做，嫌它太速，就说一句 再大胆点，它就给你加上更强的动效，嫌它太花，就说收一收，想换个气质，就说换个风格，觉得太空，就说再充实点，你永远只用大白画，它负责把画翻译成专业的改动。

先识别看不见的廉价感

NAME THE CHEAPNESS

AI 一碰现有项目，要么读不懂代码结构，要么界面还是那股廉价感——这些毛病 AI 自己看不出来。

怎么做的：为什么非要三个都装上？AI 一碰现有项目，要么读不懂代码结构，改一个地方牵出一串报错；要么结构读懂了，界面还是那股廉价感。这些毛病 AI 自己是看不出来的，所以需要三个 Skill 各管一层。

为什么非要三个都装上，AI一碰现有项目，要么读不懂代码结构，改一个地方签出一串爆错，要么结构读懂了，界面还是那股廉价感，这些毛病AI自己是看不出来的。

改之前先看影响图

IMPACT MAP

把整个项目解析成一张结构图，改哪个文件会牵动哪里，一眼看到。

怎么做的：第一个 CodeGraph，57000 星，专门帮 AI 在动手前把整个项目解析成一张结构图：改哪个文件会牵动哪里，一眼看到，不用每次通读全部代码，回答又快又准。先看懂，才不瞎改。

第一个CodeGraph57000星，专门帮AI在动手前，把整个项目解析成一张结构图，改哪个文件会牵动哪里，一眼看到不用每次通读全部代码，回答又快又准，先看懂，才不瞎改。

交付前逐条把关

FINAL CHECK

界面做完之后拿它逐条检查：字体、留白、层级、对比，46 种廉价感的写法一条条揪出来。

怎么做的：第三个 Impeccable，43000 星，是专门给 AI 用的设计语言：界面做完之后拿它逐条检查字体、留白、层级、对比，46 种廉价感的写法它一条条揪出来，还跟你说该往哪儿看。肯把关，才经得起细看。

第三个Inpackable 43000星，它是专门给AI用的设计语言，界面做完之后，拿它主条检查 字体 留白 层级对比，46种廉价感的写法，它一条条揪出来，跟你说该往哪儿看，肯把关，才经得起细看。

先交代页面类型

DECLARE THE TYPE

从参考到落地这一步没人替你做判断，Skill 补的就是这一环。

怎么做的：你手上大概率已经装了 Taste、Impeccable 这些设计规范类 Skill，参考图也存了一堆，但真正套到自己项目上，出来的东西还是差口气。不是模板不够多，是从参考到落地这一步，没人替你做判断。所以我把这些判断整理成了一套 UI Skill——不是重新发明一个设计规范，是把我平时做设计时真正会思考的东西，都装进了这套工作流。别人给 AI 100 张参考图，我的 Skill 自己知道参考啥；别人一直改 Prompt，这套工作流自己会决定；别人自己想配色，这套 Skill 早就整理好了。

你手上大概率已经装了TasteSkill，Impactable这些设计规范类Skill，参考图也存了一堆，但真正套到自己项目上，出来的东西还是差口气，不是模板不够多，是从参考到落地这一步，没人替你做判断，所以我把这些判断整理成了一套UI Scale，别人给AI100张参考图，我的Skill自己知道参考是吗，别人一直改Prompte，这套工作榴自己会决定，别人自己想配色，这套Skill早就整理好了。

四种判断写进 Skill

FOUR JUDGEMENTS

设计灵感、设计规范、视觉效果、页面结构——这四件事就是这套 Skill 真正负责的判断。

怎么做的：这套 Skill 到底管哪几件事？第一设计灵感：不用自己再去找参考图，这套 Skill 已经知道做科技公司品牌官网、做作品集还是后台工具，分别该参考哪一类设计语言。第二设计规范：配色、字体、间距、留白、圆角全部提前定好，不用一直提醒 AI，页面从头到尾是一套调整。第三视觉效果：什么时候上玻璃铃探、什么时候用 3D、什么时候可以用 AI 生成图，全部是这套 Skill 自己判断，动效层级也不用我每次现想。第四页面结构：Hero 区、功能区、行动号召、卡片排版，这套 Skill 早就整理好了一套章法，不用每次从零开始。

接下来说说这套Skill到底管哪几件事，第一件事 设计灵感，不用自己再去找参考图，这套Skill已经知道，做科技公司品牌官网，做品级还是后台工具，分别该参考哪一类设计语言，第二件事 设计规范，配色字体 间距 留白 圆角，全部提前定好，不用一直提醒AI，页面从头到尾是一套调整，第三件事 视觉效果，什么时候上玻璃铃探，什么时候用3D，什么时候可以用AI生成图，全部是这套Skill自己判断，第四件事 页面结构，Hero区 功能区 行动号照 卡片排版，这套Skill早就整理好了一套章法。

让 Skill 自主判断效果

LET IT DECIDE

这个案例我几乎没告诉 AI 怎么设计，只说了这是一个现场演出的控制后台。

怎么做的：接下来看它在三个案例里具体是怎么做的：第一个案例一台现场演出用的视觉回音台，我几乎没告诉 AI 怎么设计，只说了这是一个现场演出的控制后台，剩下的配色、页面结构、信息密度，还有实时频谱这些视觉效果，全部是这套 Skill 自动判断出来的。第二个案例一个花艺工作室的电商官网，我没告诉他留白要留多少、没告诉他图片放在哪、也没告诉他 Hero 该怎么排，这套 Skill 根据品牌官网这条路线自己完成了这些判断。第三个案例一个会自己重新排版的画廊，我没有要求他一定要做生成式排版，是这套 Skill 判断这个项目更适合这种表达，自己选择了这个视觉方案。

第一个案例，一台现场演出用的视觉回音台，这个案例我几乎没告诉AI怎么设计，只说了这是一个现场演出的控制后台，剩下的配色 页面结构 信息密度，还有实质评普这些视觉效果，全部是这套Skill自动判断出来的，第二个案例，一个花艺工作室的电商官网，我没告诉他留白要留多少，这套Skill根据品牌官网这条路线，自己完成了这些判断，第三个案例，一个会自己重新排版的画廊，是这套Skill判断这个项目，更适合这种表达，自己选择了这个视觉方案。

先补齐五种能力

FIVE CAPABILITIES

读懂代码、做好网页、自动出 PPT、操作浏览器、写得像真人——五个 Skill 五种能力。

怎么做的：五个 Skill 五种能力：Codegraph 57000 星读懂代码，UI UX Pro Max 10 万星做好网页，PPT Master 36000 星自动出 PPT，Playwright MCP 34000 星操作浏览器，Humanizer 27000 星写得像真人。Codex 和 Claude Code 从今天开始效率拉满。

五个skill，五种能力，Codex和Cloud Code，从今天开始，效率拉满。

网页先定风格系统

STYLE SYSTEM

57 种 UI 风格、95 套配色方案、56 组字体搭配，告诉它做什么产品就全配齐。

怎么做的：UI UX Pro Max 10 万星，做好网页：57 种 UI 风格、95 套配色方案、56 组字体搭配。你只要告诉它你在做什么产品，它直接给你一整套设计系统——颜色、字体、间距、WCAG 无障碍标准，一次输出。不是给你建议，是帮你做决策。

第二个，UI UX Pro Max10万星，做好网页57种，UI风格95套配色方案56组自体搭配。

PPT 保持原生可编辑

NATIVE PPT

原生形状与动画，不是图片拼贴，PowerPoint 里能直接改。

怎么做的：PPT Master 36000 星自动出 PPT：原生形状与动画，不是图片拼贴，PowerPoint 里能直接改，还有 21 套真实模板。Playwright MCP 34000 星操作浏览器：让 AI 自己打开网页、点按钮、填表单，网页自动化测试、抓数据都能干，不用截图，AI 直接看懂整个页面。

第三个，PPT Master，36000星自动出PPT，原生形状与动画不是图片拼贴，PowerPoint里能直接改，21套真实模板画了，第四个，playwright mcp，34000星，操作浏览器，让AI自己打开网页点按钮填表单，网页自动化测试抓数据都能干，不用截图，AI直接看懂整个页面。

同一套工作流

SAME WORKFLOW

不仅风格、配色、3D，还有排版、留白、动效怎么选，连廉价感它都会自己挑出来。

怎么做的：第一步装 Skill：我自己整理的这套 UI Skill，不仅风格、配色、3D，还有排版、留白、动效怎么选，连廉价感它都会自己挑出来。至于其他动效，可以用 React Bits 代码收尾；我们用 Carpetti 那套编码规范。从零开始只用三个 Skill 做三个高级网页。

第一步 装Scale，我自己整理的这套UI Scale，不仅风格 配色 3D 还有排版留白动效怎么选，连廉价感它都会自己挑出来，至于其他动效，可以用React Base 代码收尾，我们用Carpetti那套编码规范。

加 3D 与真动效

ADD 3D & ENGINE

我只加一句"加个轻量 3D"，按钮开始有倾斜、首屏有了层次；再一句"上真引擎"，整个首页直接换了质感。

怎么做的：同一句话换个说法就换一条路。第五步我只加一句"加个轻量 3D"，按钮开始有倾斜，首屏有了层次；要发布会级别，我再加一句"上真引擎"，整个首页直接换了质感。第六步加动效：我说"加个滚动动效和鼠标发光"，它直接去选对应的组件，比如这种距离的发光，映射到的是 Glair Hover，页面从静态变成了会呼吸的东西。

第五步 我只加一句，加个轻量 3D，按钮开始有倾斜，手平有了层次，要发布会级别，我再加一句，上真引擎，整个首页直接换了质感，第六步 加动效，我说加个滚动动效和鼠标发光，它直接去选对应的组件，比如这距离的发光，映射到的是Glair Hover，页面从静态变成了会呼吸的东西。

避开五个翻车点

FIVE PITFALLS

别把两种风格同时丢给它、确认它真的用上了 Skill、别让一个 Skill 干它管不了的事。

怎么做的：这条路上最容易翻车的五件事，提前说给你听：一，别把两种风格同时丢给它，立场会打架；二，确认它真的用上了 Skill，别以为装上就等于生效；三，别让一个 Skill 干它管不了的事；四，抄爆缓线，fork 成自己的，别原样照搬；五，流程别抄一半，结构对了，真实素材内部不能省，不然还是一张空壳。

这条路上最容易翻车的五件事，提前说给你听，一 别把两种风格同时散给它，立场会打架，二 确认它真的用上了skill，别以为装上就等于生效，三 别让一个skill干它管不了的事，四 抄爆缓线 fork成自己的，别原样照搬，五 流程别抄一半，结构对了，真是素材内部不能省，不然还是一张空壳。

先建立审美立场

A STANCE

没装 Skill 的 AI，审美是全人类的平均值——它学过所有风格，所以它没有风格。

怎么做的：没装 Skill 的 AI，审美是全人类的平均值：它学过所有风格，所以它没有风格。装上这套 Skill，你说一句话它就知道该做成什么样——品牌落地页、产品后台、精准迭代，我整理优化的这套 Skill 这些全都有。它做出来的页面怎么看都不廉价，反廉价不是嘴上说说，它真有个检测器，能把每处廉价都框出来，再铺上高级感的底子。

没装skill的AI，审美是全人类的平均值，它学过所有风格，所以它没有风格，品牌落地液 产品后台精准迭代，我整理优化的这套skill，这些全都有，反廉价不是嘴上说说，它真有个检测器，能把每处廉价都框出来，再铺上高级感的底子。

不满意只改局部

LOCAL EDITS

哪儿不满意，一句话就能单独改那块，不用重来。

怎么做的：一句话说清需求，从读懂到造引擎，它全程帮你走完。哪儿不满意，一句话就能单独改那块，不用重来。装到 Claude Code、Codex、Cursor 都行，还会记住项目风格。

一句话说清需求，从读懂到造引擎，它全程帮你走完，哪儿不满意，一句话就能单独改那块，不用重来，装到cloud code，codex cursor都行，还会记住项目风格。

门面与后台分路

TWO TRACKS

门面要惊艳，后台要清晰——同一套 Skill，仪表盘、数据后台照样不廉价。

怎么做的：你可能觉得它只是会做好看的落地页，但它分两条路：门面要惊艳，后台要清晰。同一套 Skill，仪表盘、数据后台照样不廉价。同一句"做个落地页"，给你五种完全不同的灵魂：沉浸交互（水面是真的实时渲染）、暖色编辑（衬线、配饰、插画、滚动）、纯净极简（靠大量留白和字体撑）、视觉冲击（敢用描边、撞色、大字）、界面秩序（数据再多也排得清清楚楚）。

你可能觉得，它只是会做好看的落地液，但它分两条路，门面要经验，后台要清晰，同一套skill，仪表盘 数据后台，照样不廉价，同一句做个落地液，给你五种完全不同的灵魂，沉浸交互，水面是真的实时渲染，暖色边际，衬线 配饰 插场 滚动，纯净极减，靠大量留白和句子成长，视觉冲击，敢用描边撞测大字，界面秩序，数据再多，也排得清清楚楚。

第一句话说对

FIRST SENTENCE

别只说"做个作品集"，那 AI 只能瞎猜——你得把四件事讲清楚。

怎么做的：第一步也是最关键的一步，把第一句话说对。别只说"做个作品集"，那 AI 只能瞎猜，你得把四件事讲清楚：给谁看、要哪几块、什么风格、先做哪一页。比如："帮我做一个给设计师看的作品集，要首屏、作品、关于、联系四块，暗色科技风，蓝青点缀，先做首屏页面，不接后台。"每多说一个要素，AI 就少猜一次。

第一步，也是最关键的一步，把第一句话说对，别只说做个作品级，那AI只能瞎猜，你得把四件事讲清楚，给谁看，要哪几块，什么风格，先做镜台，帮我做一个给设计师看的作品级，要手瓶，作品，关于联系四块，暗色科技风，蓝青点缀，先做镜台页面，不接后台，每多说一个要素，AI就少猜一次。

过反廉价清单

ANTI-CHEAP PASS

同一个页面过一遍反廉价那关：狐脸渐变、塑料阴影、居中堆叠的模板感全部滑掉。

怎么做的：把这句话发给 AI，它会先触发 Taste 定方向、出第一版，你能看着页面一块块长出来：先是首屏，然后导航、作品网格、关于和联系。但你也看出来了，它还是有点糙，这就是只有方向、还没压工艺的样子。接下来让我那块把工艺压上去——同一个页面过一遍反廉价那关：狐脸渐变滑掉、塑料阴影滑掉、居中堆叠那种模板感滑掉，再把高级感的底子铺上去：噪点、暗角、字的轻重、配色锁死。你看这个前后对比，左边是刚才那版，右边是压完工艺的，质感立刻就不是一个东西了。这一步就是廉价和高级的分水岭。

接下来，让我那块把工艺压上去，同一个页面，过一遍，反廉价那关，虎脸见变，滑掉，塑料阴影滑掉，居中堆叠那种模板感滑掉，再把高级感的底子铺上去，皂点，按角，字的轻重，配色锁死，你看这个前后对比，左边是刚才那版，右边是压完工艺的，质感立刻就不是一个东西了，这一步，就是廉价和高级的分水中。

逐条挑刺迭代

ITERATE ON POINTS

别慌，也别一次全改，挑最影响第一眼的先改——改一条看一眼，心里就有数了。

怎么做的：页面有样子了，再让 Impeccable 这块上来逐条挑刺。它会给你一串具体的毛病：首屏太空、作品该排三列、对比不够、这里间距太挤、那个标题该更大。别慌，也别一次全改，挑最影响第一眼的先改，比如作品改三列，你把这条丢回去，对应那块马上就变了。改一条看一眼，心里就有数了。然后就是来回迭代：第一轮改完再挑一遍，还有小问题；第二轮收掉大头；到第三轮基本就稳了。诀窍是每一轮指定一两个点，别贪多，两三轮下来，页面肉眼可见一轮比一轮顺。

页面有样子了，再让inpackboard这块上来，逐条挑刺，它会给你一串具体的毛病，手平太空，作品该排三列，对比不够，这里兼具太极，那个标题该更大，别慌，也别一次全改，挑最影响第一眼的先改，比如作品改三列，你把这条丢回去，对应那块马上就变了，改一条看一眼，心里就有数了，然后就是来回迭代，第一轮改完再挑一遍，还有小问题，第二轮收掉大头，到第三轮基本就稳了，绝效是每一轮指定一两个点，别贪多。

先看成片形态

SEE THE OUTPUT

产品演示、作品展示、界面动效——三种成片形态，全是 AI 做的。

怎么做的：先看成片形态：产品演示、作品展示、界面动效，这几个视频全是 AI 做出来的。放在以前，做一支这样的视频是十打十的专业活：你得在剪辑软件里一帧一帧地剪，调特效、对阴鬼、做调色和渲染，常常一摸就是好几天，对新手来说几乎没法上手。

这几个视频全是AI做出来的，产品演示 作品展示 界面动效，放在以前做一只这样的视频，是十打十的专业活，你得在剪辑软件里一真正的剪，调特效 对阴鬼，做调色和渲染，常常一模就是好几天，对新手来说几乎没法上手。

告别传统时间线

NO TIMELINE

全程不用你动手剪，内容写好，它自动逐帧抓拍，输出成视频，每次结果都一模一样。

怎么做的：Hyper Frames 到底好在哪儿？第一，全程不用你动手剪，内容写好，它自动逐帧抓拍，输出成视频，每次结果都一模一样。第二，不用从零写，转场、字幕、图表、地图都是现成的 block，拼起来就能用；还有一份 Frame MD，把网页的设计语言翻译成视频该有的样子。

第一 全程不用你动手剪 内容写好，它自动逐帧抓拍 输出成视频，每次结果都一模一样，第二 不用从零写，转场 字幕 图表 地图，都是现成的block，拼起来就能用，还有一份Frame MD，把网页的设计语言，翻译成视频该有的样子。

把流程做成 Skill

AS A SKILL

它自带一套 Cloud 的技能，把出片的套路直接交给 AI，一句话就让 AI 帮你出片。

怎么做的：但最关键的是这四个字——为 AI 而造。它自带一套 Cloud 的技能，把出片的套路直接交给 AI，一句话就让 AI 帮你出片。Cursor、Cloud Code 都在用。以前做视频得会剪辑会代码，现在用 Hyper Frames，一句话就能让 AI 帮你做出来。其实我自己也在用它做视频。

但最关键的是这四个字为AI而造，它自带一套Cloud的技能，把出片的套路直接交给AI，一句话就让AI帮你出片，to draw 10 stack都在用，以前做视频得会剪辑会代码，现在用Hyper Frames，一句话就能让AI帮你做出来。

审美与落地分层

TWO LAYERS

一层管审美让它好看，一层管落地让它改得动、不崩。

怎么做的：我把这些整合优化做成了自己的一个 Skill，这四个是基础，分两层：一层管审美，让它好看；一层管落地，让它改得动、不崩。一个一个来。

我把这些整合优化做成了自己的一个skill，这四个是基础，分两层，一层管审美，让它好看，一层管落地，让它改得动，不崩，一个一个来。

铺好设计系统

DESIGN SYSTEM

67 套现成设计系统，一句话就给 AI 铺好配色、排版和组件。

怎么做的：先说审美：第一个 Awesome Design Skills，67 套现成设计系统，一句话就给 AI 铺好配色、排版和组件，一行命令丢进项目就能用。第二个 Interface Design 把设计系统记下来，跨对话也不走样：init 建规范、audit 查一致、extract 抽 token，三步把设计系统固化下来。

第一个，awesome design skills，67套现成设计系统，一句话就给AI铺好配色，排板和组件，一行命令丢进项目就能，光好看还不够，改一把就跑偏，第二个，interface design，把设计系统记下来，跨对话也不走样，init见规范，audit查一致，extract抽token，借面对了。

三步跑出成品

THREE STEPS

先装审美这两个让它好看，再装落地这两个让它扛改，最后一句话 AI 就给你跑出一个能交付的成品。

怎么做的：那怎么上手？就三步：先装审美这两个，让它好看；再装落地这两个，让它扛改；最后一句话，AI 就给你跑出一个能交付的成品。代码也不能烂：第三个 Carpacity 编码规范，144 万星，专治 AI 把代码越写越厚，千行压回百行；第四个 Agent Rules Books 把 Clean Code 这些经典抽成规则，命名、函数长度、单一职责全帮你管住，实测架构判断力 74 比 46。

那怎么上手，就三步，先装审美这两个，让它好看，再装落地这两个，让它扛开，最后一句话，AI就给你跑出一个，能交付的成品，第三个，carpity编码规范，144万星，专制AI把代码越写越厚，千行压回百行，再给新手多个底，第四个，agent rules books，把clean code这些经典抽成规则，命名 函数长度，单一职责全帮你管住，实测架构判断力，74比46。

先整理数据出口

DATA OUTLET

同一份数据也能很高级——网页 PPT 是数据最好的出口。

怎么做的：你手里的 Excel 数字密密麻麻乱成一团，领导要 PPT，你却不知道从哪里下手。其实整套工作流核心就两个 Scale，把内容变成会动的网页幻灯片。拿一份真实的 AI 行业数据，两分钟看它变成什么样——数据本来就在那里，换一套工具它就能说话了。网页 PPT 是数据最好的出口。

你手里的XL数字秘密妈妈关系乱成一团，领导要PPT，你却不知道从哪里下手，其实整套工作榴 核心就两个Scale，Front and Slides，把内容变成汇动的网页换灯片，拿一份真实的AI行业数据，两分钟，看它变成什么样，数据本来就在那里，换一套工具它就能说话了，网页PPT是数据最好的出口。

两个 Skill 配合

TWO SKILLS

Front and Slides 把内容变成会动的网页幻灯片，Beautiful MDB Templates 34 套现成模板让 AI 自己挑。

怎么做的：整套工作流核心就两个 Scale：Front and Slides 把内容变成会动的网页幻灯片；Beautiful MDB Templates 34 套现成模板让 AI 自己挑着用。三步：第一步把数据粘进提示词，告诉 AI 主题和风格；第二步 Scale 文件给 AI 立规范，它就照着生成；第三步纯 HTML 在浏览器打开，翻页、改字、换风格都能做。

其实整套工作榴 核心就两个Scale，Front and Slides，把内容变成汇动的网页换灯片，Beautiful HDBail Templates，34套现成模板 让AI自己挑着它，怎么做到的，三步，第一步，把数据粘进提示词，告诉AI主题和风格，第二步，Scale文件给AI立规范，它就照着生成，第三步，纯HTML在浏览器打开，翻页改字换风格都能做。

同一数据跑三版

THREE STYLES

杂志风、数据大屏、建筑艺术——一套方法跑出三种高级感。

怎么做的：三种完全不同的风格，全是同一套工作流跑出来的：第一种杂志风，暖色衬线加图文混排，像一本翻开的杂志；第二种数据大屏，深色底配上数据图表，KPI 一眼看清；第三种建筑艺术，大图叙事加摄影级拍板，气场拉满。一套方法，跑出三种高级感，还能在浏览器里直接翻页改字。

三种完全不同的风格，全是同一套工作榴跑出来的，第一种杂志风 暖色衬线 加图文混牌，像一本翻开的杂志，第二种 数据大屏 深色底，配上数据图表，KPI一眼看清，第三种 建筑艺术，大图叙事加摄影机拍板，气场拉满，一套方法 跑出三种高级感，还能在浏览器里直接翻页改字。

从平均审美出发

AVERAGE TASTE

现成的爆款 Skill 当然好用，但问题是大家装的都一样。

怎么做的：现成的爆款 Skill 当然好用，但问题是大家装的都一样，跑出来的风格也就那几种。它给你的是所有人的平均审美，不是你的风格。想要不一样，就得自己动手设计。

现成的爆款skill当然好用，但问题是大家装的都一样，跑出来的风格也就那几种，它给你的是所有人的平均审美，不是你的风格，想要不一样就得自己动手设计。

补上审美判断

ADD TASTE

UX Pro Max 9 万星一句话给你一整套设计系统；Taste Skill 专门管审美，懂什么高级什么廉价。

怎么做的：先看两个 UI 设计的 Skill：第一个 UX Pro Max，9 万 star，一句话就能给你一整套设计系统，配色、字体、布局全配齐，把它当地基结构就稳了。第二个 Taste Skill 专门管审美，它懂什么样的图高级、什么样的廉价，把它当你的眼光帮你判断好坏。

先看两个UI设计的skills，第一个UX Pro Max 9万star，一句话就能给你一整套设计系统，配色字体布局全配齐，把它当地基结构就稳了，第二个taste skill专门管审美，它懂什么样的涂高级什么样的廉价，把它当你的眼光帮你判断好坏。

改造成自己的规范

MAKE IT YOURS

从 Pro Max 里留下你要的结构，从 Taste 里挑出你认的审美，再加上你自己的偏好。

怎么做的：进阶的关键就在这一步：从 Pro Max 里留下你要的结构，从 Taste 里挑出你认的审美，再加上你自己的偏好——字体、配色、语气，全写进一份属于你的 UI 规范。这就从公共审美变成了你的风格。规范订好之后我让它跑了一圈：落地页、品牌站，还有带动效的页面，风格统一，全都带着我自己的味道。这一套才真正是我的。

进阶的关键就在这一步，从pro max里留下你要的结构，从taste里挑出你认的审美，再加上你自己的偏好，字体配色语气，全写进一份属于你的UI规范，这就从公共审美变成了你的风格，规范订好之后我让它跑了一圈，落地业品牌站，还有带动效的页面，风格统一全都带着我自己的味道，这一套才真正是我的。

优化前后差很多

BEFORE / AFTER

很多人照着搭了一个 Skill，装上之后 AI 还是不听话，还是一股廉价感。

怎么做的：很多人照着搭了一个 Skill，装上之后 AI 还是不听话，还是一股廉价感。问题往往不在 AI，在你的 Skill 没优化——它写得太模糊，AI 根本没法照着做。

很多人照着搭了一个Scale，装上之后 AI还是不听话，还是一股廉价感，问题往往不在AI，在你的Scale没优化，它写的太模糊，AI根本没法照着做。

放进正反案例

GOOD / BAD CASES

光讲规则不够，得让 AI 看什么是对的、什么是错的。

怎么做的：第一招，把形容词变成可判定的规则：你写"简洁高级"，AI 看不懂；你写"主色不超过三种、留白至少多少、字号差一点五倍"，它才照着做。看 UI UX Pro Max 整套配色，全是带数值的标准。第二招，给它正反案例：光讲规则不够，得让 AI 看什么是对的、什么是错的。几万星的 Impeccable 厉害就厉害在它内置了大量好坏对照，能直接把廉价感审出来。你的 Skill 也该有一个案例库。

第一招，把形容词变成可判定的规则，你写简洁高级，AI看不懂，你写主色不超过三种，留白至少多少，字号差一点五倍，它才照着做，看UI EX Pro Max整套配色，全是带数值的标准，第二招 给它为正反案例，光讲规则不够，得让AI看什么是对的，什么是错的，几万星的Impact不厉害就厉害在，它内置了大量好坏对照，能直接把廉价感审出来，你的Scale也该有一个案例库。

用 Token 收住自由

TOKEN LIMITS

把颜色、间距、圆角全收进有限的几个 Token，它就取不到第四种乱七八糟的颜色了。

怎么做的：第三招，用 Token 把 AI 的自由收住：AI 越自由越容易乱来，把颜色、间距、圆角全收进有限的几个 Token，它就取不到第四种乱七八糟的颜色了。约束才是 AI 做出高级感的前提。第四招也是最关键的——边跑边补：让 AI 跑一遍，看它在哪儿出 slop，就把那个问题写成一条新规则，再跑，这样一轮一轮，你的 Skill 才越来越懂你。好 Skill 不是一次写成的，是这样优化出来的。最后记住：规则不是越多越好，冗余的删掉，留下最关键的。

第三招 用Token把AI的自由收住，AI越自由越容易乱来，把颜色 间距 圆角，全收进有限的几个Token，它就取不到第四种乱七八糟的颜色了，约束才是AI做出高级感的前提，第四招也是最关键的，边跑边补，让AI跑一遍，看它在哪儿出slop，就把那个问题写成一条新规则，再跑，这样一轮一轮，你的Scale才越来越懂你，好Scale不是一次写成的，是这样优化出来的，最后记住，规则不是越多越好，荣誉的删掉，留下最关键的。

四个 Skill 串起来

FOUR IN A CHAIN

管设计、管落地、管动效、管代码规范，四个怎么配：订设计系统、写高端页面、加上动效、把代码收干净。

怎么做的：差别在于我给 AI 装了 4 个 Scale：第一个 UI UX Pro Max，9 万星排第一，一句话帮你订出一整套设计系统，风格、配色、字体全配好；第二个 Impeccable，专治 AI 的塑料设计，一句 Polish 就把页面打磨到高端水准；第三个 React Bits，4 万星，一整个现成的动效组件，调几个丢进去页面就活了；第四个 Carpacity 那套编码规范，GitHub star 数一数二十七万，1000 行的雍容代码压回 100 行。四个怎么配：订设计系统、写高端页面、加上动效、最后把代码收干净。

差别在于我给AI装了4个Scale，再加上我自己调过的几个，管设计 管落地 管动效，管代码规范，第一个，UI-EX Pro Max 9万star排第一，一句话帮你订出一整套设计系统，风格配色字体全配好，第二个，Impactable，专制AI的塑料设计，一句Polish就把页面打磨到高端水准，第三个，ReactBits 4万star，一整个现成的动效组件，调几个丢进去，页面就活了，第四个，全GitHubStar数一数二十七万， Carpacity那套编码规范，1000行的雍容代码压回100行。

先打磨廉价感

POLISH FIRST

专治 AI 的塑料设计，一句 Polish 就把页面打磨到高端水准。

怎么做的：第二个 Impeccable 专治 AI 的塑料设计：一句 Polish 就把页面打磨到高端水准。默认产出的半成品问题很固定——紫剑遍烂尖剧、代码又长又乱，先用它过一遍再谈别的。

第二个，Impactable，专制AI的塑料设计，一句Polish就把页面打磨到高端水准。

动效之后收代码

CLEAN UP LAST

1000 行的雍容代码压回 100 行，四个全开源，你的 AI 就不一样了。

怎么做的：最后 Carpacity 那套编码规范收尾：1000 行的雍容代码压回 100 行。顺序是订设计系统、写高端页面、加上动效、最后把代码收干净。我自己也在上面做了些微调，四个全开源，你的 AI 就不一样了。

1000行的雍容代码压回100行，四个怎么配，订设计系统，写高端页面，加上动效，最后把代码收干净，我自己也在上面做了些微调，四个全开源，你的AI就不一样了。

平台化网页演示

PLATFORM SLIDES

两万多 star，它不只是个 Skill，更像一个完整的网页演示平台。

怎么做的：GitHub 上挑 star 最高的三个，一个一个看。第一个 Frontend Slides，两万多 star 排第一，它不只是个 Skill，更像一个完整的网页演示平台：PPT 直接转成网页，也能从零生成，交互演示样样行。开头那套发布会风格就是它生成的，纯 HTML 整整 10 页，翻页手感像产品官网。不满意？换一句指令，秒变复古杂志风，照片、图表、双栏排版全都排好。

第一个Frontend Slides，两万多STAR牌第一，它不只是个skill，更像一个完整的网页演示平台，PPT直接转成网页，也能从零生成，交互演示样样性，开头那套发布会风格就是它生成的，纯HTML整整10页，翻页手感向产品官网，不满意，换一句指令，秒遍复古杂志风，照片图表，双栏排版全都排好。

高端发布会风格

KEYNOTE STYLE

风格最狠的一个：电子杂志加电子墨水的美学，HTML WebGL 背景。

怎么做的：第二个 Guisang PPT Skill，16000 的 star，风格最狠的一个：电子杂志加电子墨水的美学，HTML WebGL 背景。要做发布会、专题报告这种高端场子，选它。

第二个，Guisang PPT Scale 16000的STAR，风格最狠的一个电子杂志，加电子墨水的美学单，HTML WebGL背景，要做发布会，专题报告，这种高端厂子选它。

按场景三选一

PICK BY SCENE

要平台化选 Frontend Slides，要高端发布会选 Guisang，要模板工厂用 HTML PPT Scale。

怎么做的：第三个 HTML PPT Skill，近 6000 star，一座模板工厂：36 套主题、十几套整套模板、几十种动画，想换风格就像换皮肤，给 AI 里设计约束，从它入手最省事。怎么选？要平台化选 Frontend Slides，要高端发布会选 Guisang，要模板工厂用 HTML PPT Scale。三个都开源，记下来，下次做 PPT 直接开场。

第三个，HTML PPT Scale，近6000STAR，一座模板工厂，36套主题，十几套整套模板，几十种动画，想换风格就像换皮肤，给AI里设计约束，从它入手最省事，怎么选，要平台化选，Frontend Slides，要高端发布会选Guisang，要模板工厂用，HTML PPT Scale。

搭好规范骨架

SKELETON

一个完整的设计规范 Skill 至少要有七块：基础规则、组件规范、页面结构、视觉语言、AI 体验式辞规则、案例库，还有版本管理。

怎么做的：一个完整的设计规范 Skill 至少要有这七块：基础规则、组件规范、页面结构、视觉语言、AI 体验式辞规则、案例库，还有版本管理。落到文件上其实很简单：一个 Design Skill 文件夹，Foundations 放基础，Components 放组件，Pages 放页面，Promptos 放提示词，References 放案例，再加一个 ChangeLog 记版本。结构越清晰，AI 就越懂你。

一个完整的设计规范，SKILL至少要有这七块，基础规则 组建规范，页面结构 视觉语言，AI体式辞规则 按例库，还有版本管理，落到文件上其实很简单，一个DesignSKILL文件夹，Foundations放基础，Components放组件，Pages放页面，Promptos放提示词，References放按例，再加一个ChangeLog基板本，结构越清晰 AI就越懂你。

用案例校准

CALIBRATE

规范搭好，还能接上之前讲过的工具：用 Hue 生成设计语言，用 Impeccable 把 AI 的廉价感审出来。

怎么做的：规范搭好，还能接上之前讲过的工具：用 Hue 生成设计语言，用 Impeccable 把 AI 的廉价感审出来。几万星的开源 Skill 本质也是这一套结构。这不是纸上谈兵。

规范搭好 还能接上之前讲过的工具，用Hue生成设计语言，用Impeccable把AI的廉价感审出来，几万星的开源SKILL本质也是这一套结构，这不是纸上弹柄。

串联工具链

CHAIN THE TOOLS

同一套规范，我跑出了三种完全不同的灵魂：3D 沉浸、滚动湿炫、杂志编辑的高级。

怎么做的：同一套规范，我跑出了三种完全不同的灵魂：3D 沉浸的库、滚动湿炫的炫、杂志编辑的高级。结构清晰，AI 更懂你，效率自然就上来了。未来的设计规范不是用来展示的，是用来驱动的。

同一套规范，我跑出了三种完全不同的灵魂，3D沉浸的库，滚动蓄湿的炫，杂志编辑的高级，结构清晰 AI更懂你，效率自然就上来了，未来的设计规范不是用来展示的，是用来驱动的。

taste-skill

TASTE SKILL

专治 AI 设计的塑料味，它给 AI 一整套反廉价的设计审美。

怎么做的：第一个 Taste Skill 专治 AI 设计的塑料味：它给 AI 一整套反廉价的设计审美，排版、留白、配色全是规范，安装就一行命令 npx skills add，几秒装好。看效果：同一句"做个落地页"，左边是默认的 AI 味，右边是装了它之后。还能一句话切 Swiss、极简、粗疑这些风格，成品全是它生成的。

第一个TasteScale专制AI设计的塑料位，它给AI一整套反凭拥的设计审美，排版留白配色全是规范，安装就一行命令，NPXScales ad 几秒装好，看效果，同一句做个落地页，左边是默认的AI位，右边是装了它之后，还能一句话切Swiss 极简 粗疑，这些成品全是它生成的。

codegraph

CODEGRAPH

给 AI 一张代码地图，它把整个项目解析成知识图谱，谁调用谁一清二楚。

怎么做的：第二个 CodeGraph 给 AI 一张代码地图：它把整个项目解析成知识图谱，谁调用谁一清二楚，而且全成本地。同样一行命令装好。比如给 10 万行的老项目加功能，以前 AI 要翻几十个文件、烧一堆 Token，现在查一下图，秒级定位改哪儿、哪儿别碰，Token 直接降一个量级。

第二个，CodeGraph给AI一张代码地图，它把整个项目解析成知识图谱，谁调用谁一清二楚，而且全成本地，同样一行命令 装好，比如给10万行的老项目加功能，以前AI要翻几十个文件，烧一堆Token，现在查一下图，秒级定位改哪儿 哪儿别碰，Token直接降一个量级。

darwin-skill

DARWIN SKILL

它把优化 Skill 当成训练模型：9 个维度打分，两个评审交叉验证，关键步骤停下来等你拍板。

怎么做的：第三个 Darwin Skill 最上层：它把优化 Skill 当成训练模型，9 个维度打分，两个评审交叉验证，关键步骤还会停下来等你拍板。一个 Skill 初始 62 分，自动迭代改好了留下，改杂了立刻回退，分数只升不降，几轮就涨到 94。你的 Skill 越用越强。三个怎么配合？给老项目做新页面：先用 CodeGraph 读懂结构，再让 Taste Skill 写出好看的界面，最后用 Darwin Skill 把这套流程沉淀成你自己的 Skill。CodeGraph 管地图，Taste Skill 管审美，Darwin Skill 管进化。三个装上，AI 就从平庸实习生变成自身队友。

第三个，DarwinScale 最上层，它把优化Scale当成训练模型，9个维度打分，两个评审交叉验证，关键步骤还会停下来等你拍板，一个Scale初始62分，自动迭代改好了留下，改杂了 立刻回退，分数只升不降，几轮就涨到94，你的Scale越用越强，三个怎么配合，给老项目做新页面，先用CodeGraph独动结构，再让TasteScale写出好看的界面，最后用DarwinScale把这套流程，沉淀成你自己的Scale。

impeccable 审计

AUDIT

帮你审计 UI 领每一处问题：字体层级、颜色对比、间距节奏，有问题的地方全都帮你标出来。

怎么做的：第一个 Skill Impeccable，帮你审计 UI 领每一处问题：字体层级、颜色对比、间距节奏，有问题的地方全都帮你标出来，套路化的 AI 感也能一眼识别。找出来，然后直接重设计。Live Mode 时时在页面上改，不用来回复制，从发现到改好一步到位。

第一个 SKILL Impeccable，帮你审计 UI 领每一处问题，字体层级 颜色对比 间距节奏，有问题的地方全都帮你标出来，套路化的 AI 感也能一眼识别，找出来 然后直接重设计，Live Mode 时时在页面上改不用来回复制，从发现到改好 一步到位。

hue 生成规范

GENERATE SPEC

截图扔进去或者说一句描述，它生成一套完整的设计语言——不只是灵感参考，而是真正可用的规范。

怎么做的：第二个 Hue，截图扔进去或者说一句描述，它生成一套完整的设计语言：不只是灵感参考，而是真正可用的规范——颜色 Token、字体规则、间距系统，AI 输出从此有可复用的规范。每次新项目不用从零开始定间距系统。

第二个 Hue 截图扔进去或者说一句描述，它生成一套完整的设计语言，不只是灵感参考 而是真正可用的规范，颜色 Token 字体规则 间距系统，AI 输出从此有可辅用的规范，每次新项目不用从零开始间距系。

huashu 锁定风格

LOCK THE STYLE

把这套设计语言固化成 Skill，之后 AI 每次输出都有同一个立场。

怎么做的：第三个 Toshu Design，把这套设计语言固化成 Skill，之后 AI 每次输出都有同一个立场——不是平均水准，是你的风格。Taste、SARS 各种形式，同一个立场。装好之后，AI 每次生成都是你想要的样子。三个 Skill 组合起来是一套完整的 AI 设计工作流：Hue 生成规范、Toshu 固化风格、Impeccable 审计输出。这三个加在一起，AI 不是没有品位，是你还没教它。装对 Skills，UI 从此有立场。

第三个 Toshu Design，把这套设计语言固化成 SKILL，之后 AI 每次输出都有同一个立场，不是平均水准 是你的风格，Topaze、SARS 各种形式 同一个立场，三个 SKILL 组合起来，是一套完整的 AI 设计工作流，Qo 生成规范 化式序 锁定风格，Impactable 审计输出。

先定设计系统

DESIGN SYSTEM

161 套行业配色、67 种 UI 风格、57 个字体搭配，每一种都有独立的视觉方案。

怎么做的：让 AI 做界面，出来的总是蓝白卡片毫无记忆点。UI UX Pro Max：161 套行业配色、67 种 UI 风格、57 个字体搭配。告诉他你做什么产品，配色、字体、间距全部给齐——SaaS、创意机构、Fintech，每一种都有独立的视觉方案，颜色、字体、间距、完整设计系统一次出来，71000 star。

让AI 做界面 出来的总是蓝白卡片毫无积疑点，UI UX Pro Max 161 套行业配色 67 种UI 风格 57 个字体搭配，告诉他你做什么产品 配色字体兼具全部给齐，SARS 创意机构 Fintech 每一种都有独立的视觉方案，颜色字体兼具完整设计系统一次出来 71000 star。

七阶段再动手

SEVEN PHASES

先想清楚方向、先写好测试，再动手实现，改了这里不会坏那里，方向不跑偏。

怎么做的：AI 总是想到什么写什么，改完一半才发现方向全错。Super Powers 给它装上七阶段工作流，从规划到发布，每一步都有行为规范：先想清楚方向、先写好测试，再动手实现，改了这里不会坏那里，方向不跑偏。Anthropic 官方 Marketplace 认证，17 万 star。

AI总是想到什么写什么 改完一半才发现方向全错，Super Powers 给他装上七阶段工作流 从规划到发布 每一步都有行为规范，先想清楚方向 先写好测试 再动手实现，改了这里不会坏 那里方向不跑偏，Anstropic官方 Marketplace 认证 17 万次star。

精准修改

PRECISE EDITS

一个文件四条原则：先想清楚、保持简单、精准修改、目标驱动，让 AI 动手前先把思路整理清楚。

怎么做的：改了这里坏那里、改着改着方向全错，AI 没有耐心。Carpacity Cloud MD 一个文件四条原则：先想清楚、保持简单、精准修改、目标驱动，让 AI 在动手之前先把思路整理清楚。这是 Carpacity 亲自写的工程规范，10 万 star。还有 Awesome Design MD：把 Stripe、Apple、Notion、Linear 57 个品牌的设计系统全打包成一个文件，品牌色、字体层级、间距规范每个都完整，放进项目，AI 输出的界面直接带品牌调性，不用每次重新定义规范，7 万 star。

Carpacy Cloud Mad 一个文件四条原则，先想清楚 保持简单 精准修改 目标驱动，让AI在动手之前 先把思路整理清楚，这是Carpacy 亲自写的工程规范 10 万star，Awesome Design MD 把 Stripe Apple Notion Linear 57 个品牌的设计系统，全打包成一个文件，品牌色 字体层级 兼具规范 每个都完整，放进项目 AI 输出的界面 直接带品牌调性。

先分清职责

WHO DOES WHAT

Skill 是能力包，MCP 是连接器；Skill 决定专业度，MCP 决定能力边界。

怎么做的：Skill 是什么？你可以把它理解成 AI 的专业能力包：里面可以包含流程、规则、知识、视力，甚至自动执行脚本。它解决的是怎么做好这件事。但知道怎么做，不代表能接触到需要的资源。MCP 是 AI 和外部世界之间的连接标准，让 Agent 能访问工具、读取信息、执行操作，它解决的是如何与外部系统协作。Skill 不负责连接系统，MCP 不负责定义能力。两个经常一起出现，但解决的是完全不同的问题。

Scale 是什么，你可以把它理解成 AI 的专业能力包，里面可以包含流程 规则 知识 视力，甚至自动执行脚本，它解决的是怎么做好这件事，但知道怎么做，不代表能接触到需要的资源，MCP 是 AI 和外部世界之间的连接标准，让Agent 能访问工具 读取信息 执行操作，它解决的是如何与外部系统协作，Scale 不负责连接系统，MCP 不负责定义能力，两个经常一起出现，但解决的是完全不同的问题，Scale 是能力包，MCP 是连接器，Scale 决定专业度，MCP 决定能力边界。

诊断失败原因

DIAGNOSE

AI 干不了活，通常只有两个原因：不知道怎么做，或者拿不到资料。

怎么做的：AI 干不了活，通常只有两个原因：不知道怎么做，或者拿不到资料。先判断是哪种，再决定补 Skill 还是接 MCP——补错了方向，装一堆也没用。

AI干不了活 通常只有两个原因，不知道怎么做，拿不到资料。

连接再注入方法

CONNECT THEN TEACH

两个经常一起出现，但解决的是完全不同的问题。

怎么做的：实际用法上，先用 MCP 把该连的连上（数据库、浏览器、文件系统），再用 Skill 把该教的教上（流程、规则、判断）。连接决定它能不能碰到，方法决定它碰得好不好。

Scale 是能力包，MCP 是连接器，Scale 决定专业度，MCP 决定能力边界。

GSAP + Anime.js

TWO LIBRARIES

以上这些装上一个库就全搞定；第二个 Anime.js 只有 24.5KB，但能做的效果毫不逊色。

怎么做的：这种动效只需要两个库：磁吸悬停（鼠标靠近就自动吸附，物理感极强）、补肩动画（一行代码精准控制每个属性）、无限滚动（惯性循环、流畅无缝）、卡片堆叠（弹簧回弹自然有层次）、粒子轨迹（视觉震撼感拉满）——以上这些装上一个库就全搞定。第二个是 Anime.js，官网本身就是最好的演示，上下滚动全是动效非常流畅，它只有 24.5KB，但能做的效果毫不逊色。

慈禧旋停 鼠标靠近就自动吸附，物理感极强，补肩动画，一行代码精准控制每个属性，无限滚动 惯性循环 流畅无缝，卡片堆叠 弹簧回弹自然有层次，粒子轨迹 视觉震撼感拉满，以上这些 装上一个库就全搞定，第二个是Anime GS，官网本身就是最好的演示，上下滚动全是动效 非常流畅，它只有24.5KB，但能做的效果毫不逊色。

物理感交互

PHYSICAL FEEL

磁吸悬停鼠标靠近就自动吸附，物理感极强；卡片堆叠弹簧回弹自然有层次。

怎么做的：物理感是这两个库的强项：磁吸悬停鼠标靠近就自动吸附，物理感极强；卡片堆叠弹簧回弹自然有层次；无限滚动惯性循环、流畅无缝。不需要自己计算缓动，直接调用就行。

慈禧旋停 鼠标靠近就自动吸附，物理感极强，卡片堆叠 弹簧回弹自然有层次，不需要自己计算缓动，直接调用就行。

从感觉映射到写法

FEELING TO CODE

Time Line 怎么组织、React 怎么清理动画，这些最佳实践模型不知道——GreenSock 把官方最佳实践打包成了一个 AI Skill。

怎么做的：问题是 AI 虽然认识这两个库，但并不真正理解它们：Time Line 怎么组织、React 怎么清理动画，这些最佳实践模型不知道。GreenSock 的解法很简单，他们把官方最佳实践打包成了一个 AI Skill，就是 GSAP Skills，从基础到 Time Line，从 ScrollTrigger 到 React 的集成，全部覆盖，Claude Code、Cursor、Codex 装上就能用。同样一个需求，没有 Skill AI 只能猜，有了 Skill AI 开始按照最佳实践生成代码，差别非常明显。GSAP 和 Anime.js 是 Web 动效、UI 交互的主流选择，装上 GSAP Skills，AI 写出来的就是官方最佳实践。

问题是 AI虽然认识这两个库，但并不真正理解它们，Time Line怎么组织，React怎么清理动画，这些最佳实践末日模型不知道，Green Sock的解法很简单，他们把官方最佳实践，打包成了一个AI Skill，就是JS App Skills，从基础到Time Line，从Scroll Trigger到React的集成，全部覆盖，Cloud Code，Cursor Codex 装上就能用，同样一个需求，没有Skill AI只能猜，有了Skill AI开始按照最佳实践生成代码。

先做设计判断

JUDGE FIRST

它先判断适合什么风格，再开始生成——二十种设计哲学从包豪斯到北欧极简。

怎么做的：它先判断适合什么风格，再开始生成：二十种设计哲学，从包豪斯到北欧极简；五大流派覆盖主流审美——瑞士网格派强调克制和层级，极简留白追求奢华精致，柔和科技、柔和东方哲学各有路线。选好方向之后 Trix 实时调整配色、字体和信息密度，所见即所得，改到满意为止。

他先判断适合什么风格 再开始生成，二十种设计哲学从包豪斯到北欧集检，五大流派覆盖主流审美，瑞士网格派强调客质和层级 集检流白 追求奢华精致，柔和科技柔和东方哲学，悬好方向之后Trix时时调整配色 自行和信息密度，所见即所得 改到满意为止。

输出可点击原型

CLICKABLE PROTOTYPE

你只说一句话，十分钟后就能拿到一个真实可以点击的 App 原型，每一处跳转和动效都经过自动验证。

怎么做的：你只说一句话，十分钟后就能拿到一个真实可以点击的 App 原型，每一处跳转和动效都经过自动验证。同样的内容还能生成 HTML 预览和可编辑的 PPTX，双击就能修改文字和图片，不需要安装任何软件。产品动画 60 帧流畅输出，MP4 加 GIF 双格式同步生成，自动配上背景音乐，约 8 分钟完成。

你只说一句话 十分钟后就能拿到一个真实可以点击的app圆形，每一处跳转和动效都经过自动验证，同样的内容还能生成HTML预览和可编辑的PPTX，双击就能修改文字和图片 不需要安装任何软件，产品动画60帧 流畅输出，MP4加GIF双格式同步生成 自动配上背景音乐 约8分钟完成。

多格式交付与自查

MULTI-FORMAT QA

信息图达到印刷级清晰度，PDF 和 SVG 可以直接导出，数据图表自动排版、像素完美对齐。

怎么做的：信息图达到印刷级清晰度，PDF 和 SVG 可以直接导出，数据图表自动排版、像素完美对齐。还有五维度设计评审，给出 Keep / Fix / Quick Wins 清单；品牌资产同步生成，保持一致性。你只需要打字、按下回车，一份能交付的设计就出来了。

信息图达到印刷极清晰度，PDF和SVJ可以直接导出 数据图表自动排版 像素完美对齐，还有五维度设计评审 给出KeepFix QuickWinds清单，品牌资产同步生成 保持一致性，你只需要打字 按下回车 一份能交付的设计就出来了。

Impeccable 管规则

RULES

把 37 条设计规则内置进 AI，解决那个"感觉差点意思"的问题。

怎么做的：再说 Impeccable，三万多 star，设计圈最火的 AI 设计工具之一：把 37 条设计规则内置进 AI，解决那个"感觉差点意思"的问题。留白、层级、排版节奏，这些用 Prompt 根本说不清楚的，Typography、Color、Spatial、Motion 全维度覆盖。

再说Impecable，三万多Star设计圈最火的AI设计工具之一，把37条设计规则内置进AI，解决那个感觉差点意思的问题，留白 层级 排版节奏，这些用Proud根本说不清楚的，Typeography Color Spatial Motion，全为度覆盖。

Hue 管调性

BRAND TONE

给它一个品牌网址，颜色、字体、排版规则它全部学会，然后直接生成完整的设计系统。

怎么做的：先说第一个：一个让 AI 学会品牌设计语言的工具。给它一个品牌网址，颜色、字体、排版规则它全部学会，然后直接生成完整的设计系统，还带 Dark Mode，主流 AI 编程工具都能用。

先说第一个，一个让AI学会品牌设计语言的工具，给它一个品牌网址 颜色 字体 排版规则，它全部学会，然后直接生成完整的设计系统，还带Dark Mode，主流AI变成工具都能用。

对比品牌感

COMPARE

三个案例：Hue 配色调，Impeccable 清除 AI 乱用的字重变体和居中对齐，整个页面的档次立刻就不一样。

怎么做的：三个案例对比：K-01 精品咖啡品牌 Morning Rachel，Hue 配了深焦糖色系，搭配 Cannella 衬线字体，Impeccable 清除了 AI 乱用的字重变体和集中对齐，强制留白和对齐规则，整个页面的档次立刻就不一样。K-02 创意设计工作室 Obleak，Hue 配的是高对比黑白、超大无衬线、不对称布局，Impeccable 强制视觉层级，不让 AI 乱用等宽字体，大胆留白加不对称网格，跟咖啡品牌完全是两种气质。K-03 本地语音工具，Hue 配了科技深蓝，Geist 加 JetBrains Mono 字体，Impeccable 处理了功能卡片的间距和交互状态，工具产品也能有品牌感。Hue 管品牌调性，Impeccable 管设计规则，两个一起用，AI 出来的界面才真的有设计感。

K-01 精品咖啡品牌Morning Rachel，Hue 配了深焦糖色系，搭配Cannela 趁线字体，Impecable 清除了AI 乱用的字件变和集中对齐，强制留白和对齐规则，整个页面的档次立刻就不一样，K-02 创意设计工作室 Obleak，Hue 配的是高对比黑白，超大无线线 不对称补局，Impecable 强制视觉层级，不让AI 乱用等换三点，大胆留白加不对称网盒，跟咖啡品牌完全是两种气质，K-03 本地语音工具，Woxel Hue 配了科技深蓝，Geist 加Japaritan Mono 字体，Impecable 处理了功能卡片的间距和交互状态。

锁定三个旋钮

THREE KNOBS

design variance 控制有多大胆，motion intensity 控制动画量，visual density 控制信息密度。

怎么做的：核心是三个旋钮：design variance 控制有多大胆（一是保守，十是极端出格），motion intensity 控制动画量，visual density 控制信息密度。数字锁定，风格锁定——你看到的不是模板，是有立场的设计决策。同一个 Skill 能写出风格完全不同的界面：极简、暖色、AI 工具、品牌卡片，每一种都有自己的立场，不是套出来的模板。

核心是三个旋钮，design variance控制有多大胆，一是保守 十是极端出格，motion intensity控制动画量，visual density控制信息密度，数字锁定 风格锁定，你看到的不是模板 是有立场的设计决策，同一个skill能写出风格完全不同的界面，极简 暖色 AI工具 品牌卡片，每一种都有自己的立场 不是套出来的模板。

先判断场景

INFER SCENE

还有场景推断这一步：让 AI 先读懂你的产品场景，再动手。

怎么做的：颜色有目标、不故意打破对称、Hero 严格两行内——规则越具体，AI 越有立场。还有场景推断这一步：让 AI 先读懂你的产品场景，再动手。

颜色有毛点 不举打破对称，hero 严格两行内，规则越具体 AI越有立场，还有场景，推断这一步，让 AI 先读懂你的产品场景，再动手。

过硬规则检查

HARD RULES

每次生成都必须过检：禁进渐变、禁紫色渐变、Hero 不能超两行、卡片不能三张一样。

怎么做的：Skill 里有一套强制规范，每次生成都必须过检：禁进渐变、禁紫色渐变、Hero 不能超两行、卡片不能三张一样——都是 AI 真实的坏毛病。开源 MIT，让 AI 写的页面别再千篇一律。Cursor、Claude Code、Codex 等主流 AI 工具全都支持，AI 写的页面终于可以不那么一眼就是 AI 写的了。

skill 里有一套强制规范，每次生成都必须过减，进 imdash 进紫色渐变，hero 不能超两行，卡片不能三张一样，都是 AI 真实的坏毛病，还有场景，推断这一步，curse cloud code，codex 等主流 AI 工具全都支持，AI 写的页面终于可以不那么一眼，就是 AI 写的了。

先定审美方向

PICK A DIRECTION

6 种鲜明的审美方向：Swiss 极简、Brutalist、粗野工业、Nordic、客制、赛博。

怎么做的：Front and Design 提供了 6 种鲜明的审美方向：Swiss 极简、Brutalist、粗野工业、Nordic、客制、那样赛博。不是让 AI 乱选风格，是让你主动锚定一个，AI 才能稳定输出有记忆点的界面。它内置了一份反模式清单：禁用 Inter 字体、禁用紫色渐变、禁用居中堆叠，让 AI 从源头规避这些设计误区。左边是装上之后，右边是没有 Scale 的默认输出，同样一句提示词，两个完全不同的结果。

Front and Design,提供了6种鲜明的审美方向，Swiss极简, Brutalist,粗利工业, Nordic,客制,那样赛博，不是让AI乱选风格,是让你主动矛定一个AI才能稳定输出有记忆点的界面，它内置了一份反模式清单,禁用Inter字体,禁用紫色渐变，禁用居中堆叠,让AI从源头规避这些设计的一区。

加载品牌系统

LOAD BRAND

把 68 个品牌的设计系统打包进一个文件：Stripe 的极简金融感、Linear 的工程美学。

怎么做的：每次开新项目，你有没有从零定义颜色变量、字体规则、组件规范，然后出来的效果还是没什么行业感？Awesome Design 把 68 个品牌的设计系统打包进一个文件：Stripe 的极简金融感、Linear 的工程美学、Vercel 的极致黑白、Recursed 的精密渐变。每个模板包含完整的 Token 定义、排版层级和视觉规则，加载一个模板，AI 输出的每个组件都自带这套规则。左边是 Stripe Design 加持之后，右边是普通 AI 生成的定价页，同一个 Prompt，两个完全不同的结果，一个文件让 AI 有品牌立场。

Awesome Cloud Design把68个品牌的设计系统打包进一个文件，Stripe的极简金融感,Linear的工程美学,Versail的极致黑白,Recast的精密见变，每个模板包含完整的Token定义,排版层级和视觉规则，加载一个模板,AI输出的每个组件都自带这套规则，一个文件让AI有品牌立场。

用反模式清单收口

ANTI-PATTERNS

Impeccable 把这些 AI 审美问题归纳成 37 条规则、8 个类别，每条都有名字和说明。

怎么做的：Impeccable 把这些 AI 审美问题归纳成 37 条规则：Visual、Typography、Color、Layout 等 8 个类别，这些就是让人一眼认出 AI 出图的特征——紫色渐变、毛玻璃烂用，每一条都有名字和说明。它能实时检测设计里存在哪些反模式并标注出来。左边是装上之后，右边是默认 AI 输出，同样的提示词，完全不同的结果。以前 AI 帮设计师出图，现在更重要的是帮设计师把审美判断变成可复用系统。装对 Scale，AI 才有立场。

Impeccable把这些AI审美问题归纳成37条规则，Visual, Typography, Color, Layout等8个类别，这些就是让人一眼认出AI出图的特征，紫色渐变,毛玻璃烂用,每一条都有名字和说明，它能实时检测设计里存在哪些反模式并标注出来，以前AI帮设计师出途,现在更重要的是帮设计师把审美判断变成可附用系统，装对Scale,AI才有立场。

拉高水准

根据视频提炼

推动变化

根据视频提炼

统一画面

根据视频提炼

核心原理

根据原文提炼

codegraph

给 AI 装上 · 地图

先把整个项目变成代码知识图谱，谁调用谁一清二楚；全程本地运行。面对十万行老项目，AI 可以先查图、快速定位该改哪里，少翻文件、少烧 Token。

taste-skill

给 AI 装上 · 风格

“The Anti-Slop Frontend Framework for AI Agents.” 给 AI 一整套审美方向，让页面不再每次都像同一个模板。

impeccable

给 AI 装上 · 收口

“Design fluency for AI harnesses.” 作为最后一道质检，专门揪出紫色渐变、滥用毛玻璃等常见 AI 味问题，改到位再交付。

darwin-skill

给 AI 装上 · 进化

把优化 Skill 当成训练模型：从清晰、正确、完整、可执行、失败编码、鲁棒、一致、安全、可维护 9 个维度打分；改好了留下，改杂了回退，让分数只升不降。

impeccable

37 RULES · 视频称

视频称包含 37 条规则，覆盖常见的页面设计问题：拦住紫色渐变和滥用毛玻璃，再给出明确的视觉方向。

taste skill

ANTI-AI-SLOP · 13 STYLES · 视频称

反 AI Slop 的前端框架。视频画面称 40.9k star、内置 13 种风格，再用密度、层级、装饰三个参数控制输出调性。

UI/UX Pro Max

ONE-LINE DESIGN SYSTEM · 视频称

一句话输出完整设计系统。视频称约 90.1k star，并含 161 套配色、67 种风格、99 条 UX 原则。

awesome-claude-design

68 BRAND SYSTEMS · 视频称

视频画面称 2.6k star、收录 68 个品牌设计系统。加载一份 design MD，整套界面就能拥有统一的品牌立场。

前置路由 Skill

Route First

核心不是直接生成页面，而是一句需求进来，先判断该交给谁做。视频未给出具体 Skill 名称。

ui-ux-pro-max

ui-ux-pro-max

01，开局定方向：只定方向，不负责落地。

taste

taste

02，负责落地页：落地页 · 作品集 · 旧站翻新。

interface-design

interface-design

03，负责后台：后台 · 仪表盘 · 一致性。

impeccable

impeccable

04，最后的规则检查：画面显示 17 条规则、96/100 可交付。

codegraph

codegraph // understand the project

看懂项目：把整个项目在脑子里画成一张知识图谱，不用每次重读文件，问代码问题又快又准。

Playwright MCP

Playwright MCP // drive the browser

跑浏览器：真的能打开网页、点按钮、填表单，不再只会瞎猜。

taste-skill

taste-skill // set the style

定风格：装一整套审美方向（Swiss 极简、粗野等），你定调、它负责执行，输出不再千篇一律。

humanizer

humanizer // de-AI the writing

去 AI 味：把 AI 写作的痕迹一键洗掉，套话废话都删掉；写文案、发消息、回邮件都能用。

darwin-skill

darwin-skill // self-evolution

自我进化：把优化 Skill 当成训练模型，九个维度打分，改好了留下、改杂了回退，分数只升不降。

表格变图表

SMART-CHARTS

Excel/CSV 直接拖进去，自动挑图表类型，给出能点能筛的数据看板；周报、竞品分析直接能用，不用自己调配色和图形。

去 AI 味

HUMANIZER-ZH · /HUMANIZER

专门收拾 AI 写作那套「三段式、满屏破折号」的毛病，改完更自然；邮件、周报、汇报都能用。

录音转写

OPENAI-WHISPER-API

开会录音（画面示例「周会录音.m4a」58:24）直接丢进去，一键出文字稿；整理纪要、写代办都省时，不用手动记笔记。

每日资讯早报

TENCENT-NEWS

一句话出早报，热榜和实时资讯整理好；上班路上就知道今天行业有啥大事，不用自己刷。

自己造 Skill

SKILL-CREATOR

把每天重复的那点流程写成一个 Skill，以后一句话让 AI 替你干（画面描述："Guide for creating effective skills"）。

GSAP 官方 AI Skills

GSAP AI SKILLS · OFFICIAL

以前让 AI 写动画，复杂一点就变成一堆 class 和简单的淡入淡出。加上这个 Skill，AI 才会按 GSAP 的方式组织动画。

按 GSAP 的方式组织动画

ORGANIZED

滚动触发、文字拆分、幻灯转场、SVG 路径动画，这些高级交互都可以交给 AI。

最关键的是编排

TIMELINE

复杂动效不能靠一堆 class 硬凑，得用 Timeline 把节奏串起来。

按规范处理细节

PERFORMANCE · LIFECYCLE · CLEANUP

性能（60fps transform only）、React 生命周期（useGSAP）、动画清理（revert on unmount），它也会按规范处理。

MotionSites

PROMPT INSPIRATION

AI 网页设计 Prompt 灵感库，提供高质感 Hero、落地页和动销页面参考。看到喜欢的案例，直接复制提示词，再交给 Agent 按项目改。

Showreel

SHOWREEL.DESIGN · VISUAL TASTE

收集优秀工作室和创作者的动态设计作品。把喜欢的画面截图发给 AI，让它提取配色、字体、留白和动画节奏。

React Bits

REACT ANIMATION COMPONENTS

React 项目的现成动画组件库：文字动效、背景动效、鼠标交互和卡片效果。先看 demo，再复制代码，让 AI 改成项目自己的风格。

Uiverse

INTERACTION DETAILS

用来补齐按钮动画、输入框交互、加载效果、开关样式和卡片 Hover。这些小细节，往往就是普通页面与精致页面之间的差距。

问题不在代码

DESIGN SYSTEM · HIERARCHY · DETAILS

AI 写代码没有问题；页面显得廉价，往往是因为设计系统不完整、排版层级不清楚，审美细节也没有被统一考虑。

让 UI Skill 带着流程做

LAYOUT · COLOR · TYPE · MOTION

UI Skill 相当于一套专业网页设计方法：从布局、配色、字体、组件状态，到留白、动效和细节质感一起考虑。同样一句需求，普通 AI 靠感觉猜；用了 UI Skill 的 AI 会按专业设计流程来做。

动手之前 · 问需求

这个 Skill 不写代码，只问关键问题，一次只问一个，还会先给推荐答案，你点头就行；一轮问完，需求从一句话变成一份能开工的清单。

动手的时候 · UI 设计规范

方向对了也别急着生成页面，先让 AI 学会设计；配色、字体、间距、组件、动效全部写成一套规范，落地页、后台、App 页面出来都是同一套设计基因。

测试的时候 · 查 bug

页面出 bug 别让 AI 瞎猜，它一猜就乱改越修越乱；先给 bug 造一个会变红的信号（能稳定复现），再把场景缩到最小，然后提假设、插桩验证、最后动手修，修完补一条回归测试防止再回来。

改说话方式

让 Codex 回答务实直接，先给结论再给必要步骤，省略寒暄、夸奖和重复总结。

一份工作规则（AGENTS.MD）

项目里放一份固定的工作规则：先读代码再动手、优先复用现有代码、能简单实现就别新增抽象、只改相关文件、完成后必须验证。

任务拆两段

规划时让它先读项目、给最小改动方案；确认后再让它执行，并且少解释过程。

大文件先转 Markdown

PDF、Word、PPT 先处理成干净文本，再让 Codex 读，更省上下文。

任务结尾加一句

先检查现成实现，标准库能解决就别加依赖，别做没要求的扩展。

01 重叠排列

Overlap Stack · 组件交互细节

头像组收起时重叠排列，点击后平滑散开成一整行并淡入姓名，再次点击收回

根据原文提炼：头像默认重叠；点击依次展开姓名，再次点击反向收拢。

02 进度底色

Progress Fill Background · 组件交互细节

用组件背景本身表示完成进度（0%→100%），勾选时浅色填充 300ms 平滑右推，100% 时整卡轻微提亮

根据原文提炼：用卡片底色显示进度；更新时平滑推进，完成后轻微提亮。

03 横向手风琴

Horizontal Accordion · 组件交互细节

4 条竖向窄条，点一条 360ms 横向展开为宽卡片，切换时宽度先滑过去、详情延迟 120ms 淡入

根据原文提炼：四列横向手风琴；选中项先扩宽，详情随后淡入。

04 组件托盘

Sliding Tray · 组件交互细节

主组件固定，下方垫深灰托盘；点摘要行托盘从下方滑出明细，主组件不动；再点收回

根据原文提炼：主卡保持不动；底部托盘点击展开明细，再次点击收回。

05 跟手放大

Finger Follow Magnify · 组件交互细节

Dock 图标按住横向滑动时按手指距离缩放（当前最大、相邻中等），放大图标自然挤开旁边图标，松手选中、其余缩回

根据原文提炼：Dock 图标按指针距离缩放，并挤开相邻项；松手选中。

06 下拉摘要

Pull Down Summary · 组件交互细节

顶部圆角胶囊只显示关键数字，下拉时高度跟手展开成完整统计面板（60% 后数字卡片淡入），下方内容下移降透明度；未过阈值回弹

根据原文提炼：顶部摘要随下拉展开；过阈值显示详情，否则回弹。

WEB / LEDGE · 黑白建筑摄影事务所官网

黑白摄影风 · finesse UI

整屏七条竖向照片带（中间彩色主图、其余去色），左下超大白色标题只把一个字换成青绿色

根据原文提炼：黑白建筑首页用七列影像，中列保留彩色，标题单字点青。

DASH / SWITCHYARD · 浅灰清爽运营工作台

清爽浅灰风 · finesse UI

冷灰近白底、白色大圆角卡、顶部胶囊导航，只用橙和墨黑两色，进度条做成整条胶囊，右侧深色清单卡压住版面

根据原文提炼：浅灰运营台配白卡，橙黑点题，右侧深色清单压版。

WEB / ASSEMBLY · 暗色展厅扇形作品陈列

暗色展厅风 · finesse UI

近黑渐变底，十几张作品像手里的牌一样扇形展开（中间最大），底部小胶囊切换排法，颜色全交给作品

根据原文提炼：暗色展厅把作品扇形铺开，中图最大，颜色仅来自作品。

WEB / FRANTOIO · 暖纸杂志风品牌首页

暖纸杂志风 · finesse UI

奶油纸色底，左边三行超大宋体标题（关键词陶土色斜体），右边满版实拍压一张细线表格标签卡，只用三色、不要渐变

根据原文提炼：暖纸杂志首页用大宋体、陶土斜体与右侧满版实拍。

WEB / TRIPTYCH · 暗底三维作品展示墙

空间纵深 · finesse UI

深灰近黑底，作品排成可转动的 3D 弧面、底下淡淡倒影光，标题一行无衬线粗体接一行细斜体衬线，点缀只用一种暗金

根据原文提炼：深色作品集用可转动弧面与浅倒影，仅以暗金点缀。

01 手势转场

Gesture Driven Transition · AppMotionCraft

从左边缘右拖，progress = clamp(横向位移/屏幕宽,0,1)，当前页左移-28%并缩小、黑色遮罩渐显，下一页跟进；底部进度条 55% 阈值决定回弹还是完成转场

根据原文提炼：侧滑进度跟手；未过55%回弹，过线完成转场。

02 3D 视差

Layered Parallax Depth · AppMotionCraft

柠檬黄主卡内背景/中间/前景三层以 0.2×/0.6×/1.0× 不同速度跟随手指，滞后系数 k = 0.40/0.30/0.16，制造纵深厚度

根据原文提炼：卡内三层按0.2/0.6/1倍速跟手，形成纵深。

03 磁吸交互

Magnetic Slider Interaction · AppMotionCraft

步道容量卡第 2 行滑钮，轨道有 25%/50%/75% 刻度，靠近刻度被磁吸贴合；每帧物理迭代公式 pull/magnet/v，贴上刻度后进度条变 #F0563A

根据原文提炼：滑钮靠近25/50/75%刻度时增强吸力并同步读数。

04 液态形变

Liquid Card Deformation · AppMotionCraft

按住白色卡片左右拖，卡片跟手平移并按速度变形（scaleX = 1+|v|×0.11，scaleY = 1-|v|×0.055），松手后阻尼回弹 x(t) = A×cos(2.2πt)×e^(-3.4t)

根据原文提炼：卡片随拖速横向拉伸、纵向压缩，松手阻尼复原。

05 滚动聚焦

Scroll Focus Snap · AppMotionCraft

告警列表在 46% 高度定中线，越接近中线的行越大越清楚（scale 1.0/opacity 1.0 → 距 2.2 行高 opacity 0.32），松手惯性 v*=0.93 后吸附最近整行

根据原文提炼：列表中线项放大清晰，远项缩淡；松手吸附整行。

06 流体 Tab

Fluid Segmented Control · AppMotionCraft

三段式控件黑色药丸像液体一样流向选中项（前沿 lead×0.20、后沿 tail×0.105 分离，中间拉长），文字颜色在药丸过半时才切换

根据原文提炼：Tab 药丸前沿快、后沿慢，过半后才切换文字色。

07 图片展开

FLIP Card Expansion · AppMotionCraft

紫色主卡点击后用 FLIP 做法从原位置展开成全屏详情页（First量小卡→Last全屏→Invert顶层复制→Play过渡，圆角 22→0，约 1.4s ease-in-out），展开到 70% 后详情文字淡入

根据原文提炼：用 FLIP 将主卡连续展开全屏，70%后淡入详情。

08 物理碰撞

Physics Collision Cards · AppMotionCraft

三张白色读数卡（质量 1.0/0.55/1.6），第一张往右甩出后互相碰撞推挤回弹、各回原位；一维弹性碰撞 + 过半后回家弹簧 v += (原位-x)×0.013

根据原文提炼：三张读数卡按质量碰撞回弹，后程由弹簧拉回原位。

WEB / STUDIO · 创意工作室大胆首屏

高端 agency 感 · finesse UI

橙红渐变背景，超大 NEXOR 字标穿过人物主图，左下服务标题简介、右下联系表单，像高端 agency 不像普通 SaaS

根据原文提炼：橙红工作室首屏用超大字穿插人物，服务与联系分置两侧。

WEB / DAYDREAM · 概念产品发布首页

精致锐利 · Impeccable 水准

黑色背景、红橙地面光，左侧叠放三台倾斜设备，中间像素字体标题 EXPLORE DAYDREAM MODEL 1，画面精致锐利、不要廉价霓虹

根据原文提炼：黑底概念产品页叠放倾斜设备，以红橙地光和像素标题聚焦。

WEB / COFFEE · 咖啡品牌安静首页

温暖克制 · finesse UI

奶油色背景、顶部细导航，左侧大幅手冲咖啡照片、右侧粗体中文标题短文案、下方三个数据胶囊，温暖克制真实

根据原文提炼：奶油底咖啡首页左图右文，下方用三枚数据胶囊收口。

WEB / PORTFOLIO · 设计师站作品主角

真实作品站感 · Taste Skill

黑色背景、红色高亮，左侧 I'M DAODAO 身份介绍，右侧圆形主视觉和播放按钮，底部弧形作品画廊，像真实作品站不要模板卡片

根据原文提炼：黑红作品集左侧身份文案，右侧圆形主视觉，底部弧形画廊。

WEB / LUMEN · 纸质杂志摄影首页

独立杂志排版 · Taste Skill

浅米色纸张背景，中间竖版胶片照片，左下角大号 LUMEN 字标，四周围绕卷号页码细线竖排说明，排版像独立杂志、留白多、动效克制

根据原文提炼：米色摄影页居中竖版胶片，四周用卷号、页码与细线留白。

WEB / IMPRINT · 暗色画册印刷感首页

印刷质感 · finesse UI

16:10 宽屏，左侧巨大 IMPRINT 字标，中央竖版彩色抽象作品，右侧极简说明，深黑背景、杂志网格、细线标注、留白大

根据原文提炼：暗色印刷首页采用左字标、中作品、右说明的杂志网格。

它真正省时间的地方——给你一个成熟的起点：页面结构、视觉层级、组件排布都有参考，不用对着空白页面发愁，只需替换和调整。

适合个人主页、项目展示页、公司官网、产品落地页。如果你也想做网页，但一打开 Agent 就不知道从哪开始，可以试试这个方法：先复刻喜欢的网站，再改造成自己的版本。

「/」(SLASH)——第一步敲斜杠打开命令菜单，常用命令和安装好的 UI 设计 Skill 都在这里。

「/init」——新项目先用它，让 Codex 读一遍项目结构（src/、components/、styles/、pages/），后面才知道东西放哪。

选中 UI 设计 Skill——告诉它做一个咖啡店官网，需求不用写很长，说清楚三点：氛围感、首屏大图、菜单和预约入口明显。Codex 负责搭页面、改代码、跑预览；UI 设计 Skill 负责网页审美、版式、配色、留白、动效层级。

换场景用新任务——想换一个完全不同的页面，不要接着聊，用新任务开一个干净对话，再选一次 UI 设计 Skill。做数据后台时需求重点变成信息密度高、重要数字先看到、表格图表清楚；页面类型变了，UI 设计 Skill 的处理重点也会从氛围感切到信息层级和可读性。

控上下文——「/status」看上下文占用（快满了就「/compact」）；想试另一种方案用「/side」开支线，满意再带回主线。

管审美

taste-skill

给 AI 一整套设计审美。

排版、留白、配色都有规范；同一句需求能直接切换 Swiss 极简、粗犷或液态风格，换的是设计语言，不是套模板。

管界面

Finesse UI

把审美真正落到页面上。

不只说明页面该是什么样，也规定怎么做出来：12 列栅格、24 沟槽、一个主按钮、1.6 行高、4 档字阶、12 圆角与 1px 描边。

管动效

Gsap Skill

不是随便加淡入放大，而是设计动效。

把滚动、视差、时间轴和跟随纳入设计，让 AI 知道动作为何发生、如何衔接，避免普通的装饰性动画。

管代码

codegraph

给 AI 一张代码地图，先看懂再修。

把项目解析成知识图谱，理清调用关系；面对老项目时少翻文件、少烧 Token，也更不容易改错。它与本库第九批收录的「CodeGraph」是同一 Skill 的大小写写法变体。

管进化

darwin-skill

不直接写代码，而是让 Skill 自己进化。

按结构、覆盖、示例、边界、可读、复用、稳态、反例、收口 9 个维度打分，两个评审交叉验证；关键步骤等你拍板，改好留下、改杂回退，让分数只升不降。