frontend-design 怎么用：一次网页改造里的操作步骤、效果和边界

这篇不是夸 frontend-design 有多强，也不是泛泛聊“AI 做设计”这件事。我就是拿一个现成的网页试了一遍，看看它到底怎么用，能把页面往前推多少。

我的实际感受是：它确实能让一个“能用但很普通”的页面变得更顺眼，也能给出一些值得借鉴的处理。但如果你拿它去碰复杂站点、要求高的品牌官网，或者想靠它一路做完整套界面，还是会有点不够。

还有一个很现实的问题：同一套设计思路反复用下去，后面的页面很容易越来越像。第一眼看着不错，做多了就会开始有模板味。

这篇文章就只讲实操：frontend-design 大概能做什么、我是怎么操作的、第一版怎么出、后面怎么追问，以及最终效果到底哪里变好了，哪里还差点意思。

frontend-design 能做什么

先把边界说清楚。

这个 skill 适合做的，主要是这几类事：

• 把一个已经能跑的页面重新整理视觉层次
• 给落地页、官网页、活动页换一个更明确的风格方向
• 在没有设计稿的时候，先快速试几种界面气质
• 把默认感很重的布局，改得更像一个认真做过设计的版本

它大概怎么工作，其实不复杂。frontend-design 这类 skill 不会只盯着“把颜色换一下、把圆角调大一点”，而是会先看页面是干什么的、谁在用、应该传达什么感觉，再去推字体、配色、留白、版式和局部动效这些东西。

我觉得它最有价值的一点，不是“审美突然变得很高级”，而是它会逼着你先把需求说具体。页面目标是什么，受众是谁，想要什么气质，不要什么风格，这些如果你不讲清楚，它大概率还是会往常见的 AI 页面样子上滑。

但它不太擅长的场景也很明确：

• 复杂品牌站
• 设计要求很高的产品官网
• 已经有强设计系统约束的项目
• 需要长期扩展、多页面统一维护的大站

原因也不神秘。复杂项目里，真正难的往往不是“这一屏怎么变好看”，而是整站的统一语言、细节控制和长期演进。

我这次拿什么页面做实验

这次我没有拿一个临时 demo 来试，直接拿当前博客网站动手。

首页原来不是不能看，但就是很普通。暗色模式为黑底、紫色高亮、常规导航、常规文章卡片，结构都对，就是一眼看过去没什么记忆点。首屏标题单独悬在那里，下面的文章列表也更像默认博客主题，而不是一个真的被认真收过视觉的首页。

我会选这个项目，也是因为这种情况最适合拿来试 skill。结构已经有了，逻辑也没问题，差的就是那一口气。改好了，效果很明显；改不好，也能马上看出来只是换了一层皮。

我是怎么用它的

这一段我尽量照真实过程来写，不写那种看起来很顺、实际没人这么用的教程。

我一开始没有说“帮我做得更高级一点”。这种话最省事，也最没用。你不给边界，它就很容易滑到熟悉的套路里，最后给你一版看着花哨、但很像别处抄来的页面。

我第一次给它的要求其实写得很死，核心意思就这几句：

使用 $frontend-design，改造当前项目的首页，直接在现有代码基础上实现。
整体气质要专业、克制、有记忆点，避免常见 AI 生成感和通用 SaaS 模板感。
保留现有功能逻辑和交互行为，不破坏流程。
适配桌面端和移动端。

这里我还专门补了一句，让它在开始编码前先用 2 到 4 句话说清楚视觉概念、目标用户感受和设计抓手。这个要求很有用，因为你能先看它想往哪边走，而不是等它把代码全改完了，才发现方向一开始就不对。

第一轮做完以后，我没有停在“嗯，比原来好看一点了”这个阶段，而是马上开始追具体问题。比如我一开始不喜欢黑色配金色，直接就说不喜欢金色，改成偏冷青灰。这个反馈就很有效，因为它不是空泛地说“再优化一下”，而是明确告诉它哪一刀砍错了。

这一轮我其实就已经感受到一个很现实的事：frontend-design 真正有用的时候，不只是帮你挑配色或者换排版，而是你拿着真实项目里的问题向它追问。风格不对，改；交互不通，修；移动端炸了，继续收。

接下来我又连续追了几轮，问题都很具体：

• 卡片太大了，缩一点，图片区域也别那么抢眼
• 首页上半区介绍太多，占地方，把 hero 收短，只保留标题、一行说明和两个链接
• 标题改成两行展示
• 汉堡菜单按钮在错误的尺寸下露出来了，还点不动，继续修
• 移动端头部错位，继续修
• 搜索结果列表虽然能用了，但样式太丑，还得再收一次

这串追问看着碎，其实很接近真实开发里的节奏。页面从来不是一句 prompt 就收工的，很多完成度恰恰是这样一点点磨出来的。

改造后结果怎么样

变化还是挺明显的。改造前它更像一套常规暗色博客主题，能用，也清楚，但没有太多自己的气质。改完之后，至少能看出它在往 “Personal Archive” 这个方向靠。导航、搜索、语言切换和主题切换被收进同一套冷青灰控件里，首屏也不再是一大块说明堆在上面，而是变成了一个更克制的 hero：标题更稳，说明退后，链接只留必要的两个。

文章列表那块我也很喜欢。它不是推翻重做，而是在原来的结构上把比例顺了一次。月份分组更清楚，卡片更紧，图片终于退回了配角位置，不会一上来先把人的视线全抢走。这种改法很实用，因为它没有动你的内容流程，但页面完成度会一下子高不少。

值得一提的是，这次我原本只是让它改一下首页，但它顺手把整个网站的样式也一起梳了一遍。原因也很简单：这个项目本身不大，总共就几个页面。后来我又在另一个更大的项目里尝试了一下，让它单独改造登录页。那次它确实只动了那一个页面，但效果比较一般，最后我没有采用。

所以我最后的结论还是一样：frontend-design 不是那种一句话就能直接出终稿的工具，也是需要调教的。但它很适合把一个已经能跑的页面往前推一大截。

这个 skill 值得怎么用，不值得怎么用

如果你问我，frontend-design 最值得怎么用，我会给这几个场景：

• 现有页面太普通，想先快速改善观感
• 手里没有正式设计稿，但又不想直接上线开发版视觉
• 想在几个视觉方向里快速试版
• 想先做一版更像样的展示稿，再自己往下继续收

这些场景里，它很有帮助。因为它能帮你先跨过“默认样子太重”那一步。

但如果你带着下面这些期待去用，我觉得大概率会失望：

• 想直接做复杂官网
• 想长期扩整站，还保持非常强的一致性
• 想把设计判断几乎全交给它

这些事不只是“会不会排版、会不会配色”的问题，背后还有品牌语言、内容策略、交互细节和长期维护。这个 skill 能碰到一部分，但碰不完整。

所以比较合适的定位是：它是一个有帮助的起点，不是最后答案。

最后给一个最低成本的上手方法

如果你看完想试，我建议别一上来就挑最复杂的项目。

可以直接这么做：

1. 找一个已经做完结构、但视觉普通的现成页面
2. 先写清楚页面目标、受众和限制
3. 给一个明确风格方向，再顺手写出“不想要什么”
4. 先让它出第一版
5. 再盯着层级、字体、重点区和氛围追问两三轮

这样最容易看到它真实的帮助范围。

它能把页面从“开发做完了”往“至少像认真设计过”推一步，这一步其实已经挺有用了。但如果你对结果要求很高，或者你要做的是一整套复杂网站，那最后还是得靠更细的人工判断，甚至回到真正的设计流程里。