2. Linux.do
  3. 【重生之我在 L 站做前端, 1 】2602年，0️⃣人在意的前端由谁来拯救

【重生之我在 L 站做前端, 1 】2602年，0️⃣人在意的前端由谁来拯救

還sんì吥懂 2026-07-08 21:45 1

[!check]

上一世妈妈难产弟弟被卖 被产品大妈打到妈都不认识



“这一世，我绝不会重蹈覆辙！”

我们要做 扭轱辘^-^ 纽祜禄 の 前端




不过现在前端万人嫌，应该0人在意吧 ^-^




不对，标题应该改为；重生之我在 L 站做前端 ^-^



第二弹 – 手机做前端 ^-^ [【重生之我用手机写前端 - 2 】2602年，^-^人在意的前端还能怎么救？更新：当然是Astra大人！ - 文档共建 - LINUX DO



虽然天天都在吐槽前端，前端，前端。感觉前端的开发者还挺乐意分享的。每次看到一些新奇的创意，都能找到一些复刻的方法。


在网上当街溜子



竟然没人提variant吗，超强的ai设计工具啊



如果想得到最新、最有趣的前端设计方法，那肯定就要在网上高强度冲浪^-^了 不过也要保持专注，因为一不小心就会被浪冲走。

关键词 design trends 2026

其实，一个站点就能解决很多问题

https://www.behance.net/


很多时候，我们的前端做的不好看，一部分原因是因为我们没有用到专有名词。可以在冲浪的过程中把这些名词都记下来，然后就直接丢给AI，让AI自己在网上查。




模型选择


GPT


astra一次成（虽然看起来还是有套模版的痕迹，但是很丝滑，astra有一点点吃提示词，需要多启发一下，最好丢个图让它抄）



TL;DR

Bikini Atoll — A world beneath the blue





已折叠，一言以蔽之，astra王朝

gpt-5.5


说实话，不觉得 GPT 系列做前端的能力很差，它应该还是在后训练阶段给的相关资料不够。因此会遇到文案到处跑的问题，但是如果给截图的话，其实一比一复刻的能力是很强的。这里有一个比较老的话题，之前还是用5.3和5.4的时候做的。 嗯，当时一比一复刻的能力，绝对是比 4.6 opus 好特别多。 【A\ 5x Max 已退款】用回 GPT5.3-codex-xhigh 做PPT美滋滋，发几张复刻咨询公司的ppt效果图 - 搞七捻三 / 搞七捻三, Lv1 - LINUX DO


如果有已经设计好的东西，就可以把截图丢给gpt，让他来复刻。

如果想从头开始设计的话，那就不推荐GPT，因为会想让人摔电脑。


gpt-5.6-terra


建议改名 terror 已丑哭 ^-^ 虽然和之前的丑法不一样，但是真的好丑 （这就是所谓的先锋 疯 派设计吗



GPT-5.6-sol



好一些吧。。但是其实字体大小还是不对。难道gpt对于1em有着自己的独到见解吗？ ^-^ 其实每个部分单独看倒不是不能看，加在一起就很吃藕



Claude



Fable（其实Opus4.8/Sonnet5）对于效果的把控都还不错，不过sonnet5长上下文会流口水



像楼主这样的小白萌新，还是直接用 Claude 了。比较基础的需求都可以轻松应对。在有订阅的情况下，结合CC，它可以直接把效果提前渲染出来，我们可以先检验，然后再部署。



他自己也带了一个前端的插件，之前检查过提示词。其实做的还是不错的，写的比较简洁(确实是A\的一贯高水准) 不过加起来也是有两千个单词的样子。不过插件里面的提示词都是比较偏设计哲学，具体的设计方向还是需要用用户来把控。


Fable 5


还是之前 terra + sol 都搞不定的 fable-5一次成（有一点小问题）



(应该放个预览，可以看到，其实网页本身有瑕疵，滚动的时候会闪烁，好像是fable5刚出那个时间段的通病)






这几个也是时代的眼泪，grok4.5/glm5.2 （好像4.6/5.3也没好到哪里去）

Grok 4.5



不说啥了，这是蒸了Opus又蒸了GPT么，和Opus一样乱丢破折号，和GPT一样把指令写进文案。这个截图是为了吐槽，风格上还是比GPT直接出要要好一些的


GLM5.2


在社交媒体上看到很多人做出来的都很好看，不过我做不出来这种效果（之前也在论坛里面吐槽了很多次）看到佬友分享说，是因为 OpenCode Go 里面的这个模型比较烂 【opencode，退钱！】opencode正使用仅有262.1K上下文的digitalocean作为glm-5.2的provider - 搞七捻三 - LINUX DO



提示词


其实，其实词工程在2602年的争议还挺大的，尤其是在一些后端的项目里面，因为我们现在后端有很多非常棒的skill。还有推项目进度的框架，其实就随便写一写就能蹬出来了。


前端的话，因为毕竟考虑到有创造力的这个部分，而且确实需要我们自己眼睛看才能把控出来。体感上，多样且抽象的提示词还是有用的，不过不需要写特别多，主要还是一些关键词。


算就是一个熟能生巧的过程吧，现在自用的开源项目，不管有没有很多人去用它，都会尽量逼迫自己用AI写出来一个前端。每次都会尝试一些不同的风格，这样也是可以探索一下AI能力的边界。


一个简单的工作流



  1. 字体搭配 → 一般来说，在网页里面用一套衬线字体搭配一套非衬线字体，就能够展现出一种美轮美奂的效果。 但是有一些AI会比较蠢，它就会默认使用Inter，真的丑死了。 一眼AI。

    所以提示词里面可以写：We would like our font pairing to be unique, and vibing with our content, We should be open to all the available fonts that are free, and open to the public, We should generally refrain from the fonts that say "trending on Google Fonts," because that is a common sign of AI slop.


小补充



这是制作字体搭配font paring的过程







  1. 色盘选择 → 这里无非就是一些关键词了，譬如说 pastel color, vibrant color palette, simplistic color palette, neon color palette 如果有 Opus 或者是 Fable，那也可以跳过这一步。反正他选的颜色都挺好看的。记得让他给颜色起一个有逼格的名字。

    一般来说，颜色不要太多，尤其我这样的萌新宝宝要注意 一不留神，就会变成大妈审美(也不是说农家乐审美不好了，一些网站土潮土潮，做的挺好看的。比较考验设计师的功力 可是我没有功力，所以就放弃





    也有一些网站可以选择。

    https://colorhunt.co/

    https://coolors.co/

    https://colordesigner.io/palettes/flat




  2. 风格把控 → 因为之前高强度上网冲浪会得到一些关键词，就可以把这些关键词丢给AI。 还可以多写一点，譬如说什么 avant-garde, jaw-breaking, unapologetic. 如果和楼主一样有一身的艺术细菌,也可以使用 Modern High Museum of Art, Unparallel aesthetics.




Design System


自己没有什么前端的基础辣，就是大学的时候修过一些艺术史什么的提高绩点。这个 section 里面提供的内容仅供参考。


大项目其实可以直接上 design system。自己对于这个玩意儿的理解 → 可以把它想象成是一个用于设计 UI/UX 的 harness。我们一开始可以先设计出来各种各样的 design token。譬如说，我们的字体呀、配色呀，甚至说每一个小的元素的长相，都可以变成 design token。把它做完之后，我们用设计系统就可以随时切换成不同的样式，这样可以保证整体的一致性。




这几个也是时代的眼泪了

Astryx 烟灰缸


这个就是别的买他妹做的(metamate方差挺大的,不少老员工还挺有开源精神的)。

【更新默认配色方案】附赠简单效果 Meta 开源了一套自用的UI设计系统 Astryx - 开发调优 / 开发调优, Lv1 - LINUX DO


https://astryx.atmeta.com

感觉他们组的氛围还挺好（好像有一些 React 的核心开发者还在），之前还给我送了小礼物。还找他们预定了免费的贴纸。当然，我这种非正常人类关注的点也很奇葩，比如说这种没点卵用的东西就让我挺高兴, 然后我现在狗颠儿一样去安利他们


感觉这个项目AI上手起来没有什么难度，它自己内置的CLI里面甚至都提供了文档。目前就是支持Vite会好一些，如果想在上面加Astro，还是会有问题。


Figma + 别的


觉得 Figma 不好用，至今没有学会快捷键的使用方式（放弃

看它股价都已经跌到了不知道哪里去了。 这应该是一开始欢天喜地和A\整合，结果把自己整没了的典型案例。


https://v0.app/


去年的时候用的比较多，其实应该现在也挺好用的吧？不过都有fable5，还用什么v0啊 ^-^



一些例子


尝试在CC里面用gpt sol



这是错怪 5.6 sol了吗？


用在了cc里面 （其实没有，仔细看了一下 还是一坨





五分钟前做好的


这里就给一个简单的实战吧。就直接 Fable 5, xHigh.


因为我是语音输入（【06/10 重做了TUI + 用了自己的MLX包】嘘！吵到我用TNT了 - 基于qwen3-asr-随时随地在终端语音输入 - （termux移步旧分支） - 开发调优 / 开发调优, Lv1 - LINUX DO），就直接截图了。其实没有用到特别复杂的提示词技巧，主要灵活运用了一些关键词 项目在这里 （因为Fable正好延期了，就有多余的Token可以去做这个）【四个SKILL梦幻联动】一套做PPT的skills。内置了战略咨询模版 + 用到了一些独特的方法 - 开发调优 - LINUX DO


这个应该算是第二轮对话，第一轮就相当于是先让Fable在CC里面理解一下项目内容 (因为是对着ASR讲的，语言组织比较乱糟，但是AI理解上是没有问题的，如果认真设计提示词，效果应该会更好)

关键词如下，包括 our own trends, avant-garde, design best practices, high level of aesthetics.


后面Fable嘟噜嘟噜吐了一大堆，简单扫了一眼，好像没啥大问题，我也没仔细看 关键词在这个里面应该就是 consistency, animated, animated SVG Parallax effects. Sky is our ceiling.(可以看到，这段我急着讲完，口糊也很多 ^-^) 让他做完，直接就 push 上去了



看效果



之前的某个回复


09/2026 更新一下之前做的 （为了方便查阅，先给出了原始话题，可以参考， 下面更新一下最近做的一些东东）



下面几个都可以看到源码



  1. 这个是4.8写的 → 【06/10 重做了TUI + 用了自己的MLX包】嘘！吵到我用TNT了 - 基于qwen3-asr-随时随地在终端语音输入 - （termux移步旧分支） - 开发调优 / 开发调优, Lv1 - LINUX DO






  1. 老话题，但是最近用sonnet-5 写了landing page 【2026/07/06更新 codex/claude/agy/grok 协作skill - 见最底部回复】Codex / CC 化身issues工单规划/测试/重写的勤劳牛🐎

    sonnet功力还是不太够，不过网页点开是会动的，比截图好一些





  2. 【Automaton】 - 超级节约token，有效推进度，适配coding/写作 - 结合了gsd/gstack/superpowers 的特性 - 开发调优 - LINUX DO



    这个如果没记错的话是sonnet5流口水，交给fable修




  3. 【已添加qwen asr / cohere asr / ibm graphite】本地语音YYDS，MLX的语音全家桶 （似乎mlx也支持N卡的样子 - 开发调优 - LINUX DO 左边是opus-4.8xhigh 右边是astra-xhigh. 新模型确实是越来越牛了！









  1. 【06/26依旧更新】一套科研适用的文档处理 skills - pdf / docx / xlsx / pptx - 适配 codex / cc - 开发调优 / 开发调优, Lv1 - LINUX DO 太长就不截图辣

    这个好像是 sonnet 5做的




  2. 【基本完结】三句话我让Codex SKILLs 给我生成了一篇LaTex Review - SKILLs果然有替代很多MCP功能的潜质 - 开发调优 - LINUX DO 这个是4.8写的







  1. 公益站睡觉去了就关了，报错的页面可以参考fable5 两次成 → 【炸了 ^-^ 眠一眠】自用 - RC公益站，一个一言不合就炸车的公益站 - 福利羊毛 / 福利羊毛, Lv1 - LINUX DO

  2. 这个是之前和glm对比的 【OpencCode流口水】GLM5.2 和 Opus-4.8 前端比一比 - 两个小案例 - 开发调优 / 开发调优, Lv1 - LINUX DO

  3. 这个是用opus4.8直接对着一个新框架【更新默认配色方案】附赠简单效果 Meta 开源了一套自用的UI设计系统 Astryx - 开发调优 / 开发调优, Lv1 - LINUX DO

最新回复 (19)
  • 归谜 07-08 21:56
    1楼

    关注了佬，学习一下最新的前端设计开发思路。

  • 還sんì吥懂 楼主 07-08 21:56
    2楼

    感谢佬友的支持，今天会尽量把想写的东西写完。

    以后遇到有趣的，可以再补充。

  • vasn 07-08 21:58
    3楼

    不对，标题应该改为；重生之我在 L 站做前端 ^-^

  • 還sんì吥懂 楼主 07-08 22:00
    4楼

    听劝，已经改了。


    以前那个被 GPT 乱棍打死的前端已经死了。 现在我们是是钮祜禄 * 前端。

  • 和宇宙的温柔并联 07-08 22:01
    5楼

    那么可以改成:重生之我在L站做…

  • Denial3938 07-08 22:10
    6楼

    目前我把pencil dev作为vscode插件使用 但我实在是找不到在设计图里改文字的地方 谁跟我讲讲

  • Otirik 07-08 22:14
    7楼

    收藏了，对我这个前端萌新帮助很大，感谢佬的分享。 ^-^

  • 還sんì吥懂 楼主 07-08 22:28
    8楼

    感谢佬友的支持！ ^-^ yeah

  • 還sんì吥懂 楼主 07-08 22:29
    9楼

    pencil dev



    还没有用过这个工具，去网站上看了一下，好像还挺炫酷的。

  • 思無邪 07-08 22:30
    10楼

    你好哇，最伟大的切图仔！字一定要 大

  • 远坂凛的宠物 07-08 22:34
    11楼

    马一下噶哈哈


    有时候功能趁手和美观还挺不好平衡的

  • 還sんì吥懂 楼主 07-08 22:36
    12楼

    你好哇，最伟大的切图仔！字一定要 大




    欧吼吼


    其实之前尝试让 Opus 做一个五彩斑斓的黑，觉得还挺好看的。它是那种带闪光的感觉 但是有点太过于流光溢彩，就闪瞎了我的狗眼

  • 树枝孤鸟 07-08 23:18
    13楼

    感谢佬友，玛一下

    我这个后端垃圾就需要这种口牙

  • Denial3938 07-08 23:35
    14楼

    那这年头做前端切图仔怎么整呢 还是手动操作吗

  • 還sんì吥懂 楼主 07-08 23:56
    15楼

    主营业务是后训练来着

    切图应该不需要了吧 ^-^ 面向Web的这些框架现在都是响应式的 嗯，字重和字号应该都可以根据设备的宽度来动态调整。 移动端，我猜现在也是响应式了吧。

  • Denial3938 07-09 00:05
    16楼

    如果是比较正规的流程 做产品前肯定有设计 现在设计稿用什么弄 figma penpot 还是其他

  • mark 07-09 00:08
    17楼

    五彩斑斓的黑



    AI对五彩斑斓的黑虽然解决不了，但是人家态度好啊。

  • 㞩 07-09 00:14
    18楼

    看到fable5，我仿佛看到了核弹一样瘫坐在地面，看到这个文档，我感觉前端在核弹中站起来了。

  • 還sんì吥懂 楼主 07-09 00:18
    19楼

    我之前在的地方他们还是鼓捣figma的 应该就是复用已有的design token然后拿出来给大团队里的人鞭尸

    因为盘子比较大，eng团队里面都有自己的工作流（design token那种。。。没有参与过前端的项目，一般都是对着figma嘴一句“这个好看那个好丑” ^-^ （已经提桶跑路半年


    开会的时候都很少遇到过纯做UI的人（不会写代码的，应该早就被优化掉了，应该有一个同学还在，然后他天天都在和产品扯皮，天天都要到处开会 像个老妈子一样）, 感觉可能是新项目里面会用一些。旧项目感觉engr就随便和 data scientist 一起做做 A B 测试，鼓捣鼓捣就行了。

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐