先说个交底我的英文水平很一般CSS写过不少但Sass这种预处理器语法一直靠现查经常是“哦这个功能原来叫mixin”然后复制粘贴一段老代码改改。身边几个朋友都在折腾AI编程我也一直想试试VS Code里那堆AI插件到底能帮我到什么程度。刚好看到有人做了个星空动效就决定用它当试验田——一个不会英文、记不全语法的人用AI编程能不能把这玩意儿做出来。整个过程比我想象的有意思也比我预想的更折腾。AI确实帮我补齐了记不住的Sass语法但真正卡住我的不是语法是怎么把“我想要一片星空”这种模糊想法翻译成AI能听懂的提示词再在它给出的代码里快速找到问题、修掉问题。这篇就写写这次完整过程的真实体验包括提示词怎么憋、Sass编译怎么坑、AI幻觉怎么防给同样想上手AI编程又心里没底的朋友一个参考。1. 为什么拿Sass写星空动效还非要拉上AI1.1 一个刻意设计的“语法压力测试”我选这个项目时其实带着点小心思。星空动效听起来炫酷但拆开看就三件事随机分布的小点、明暗闪烁的动画、深空背景的渐变。这些用CSS本身也能做但要想让几十上百颗星星各有各的位置、大小、延迟时间手写CSS会写到怀疑人生。这正是Sass发挥价值的地方。Sass能让你在“编译前”用变量、循环、函数去批量生成CSS比如for循环一次生成100颗星星的样式每颗星星的left、top、animation-delay都做成随机值。这种“代码生成代码”的玩法本身就是语法敏感型任务——你不需要记住每一行CSS怎么写但必须知道Sass里有循环、有random()函数、有mixin可以复用。问题在于我这个人的Sass水平停留在“会用嵌套和变量”的层级each、function、mixin这些高级特性我每次都是查完就忘忘了再查。让我完整默写一段Sass循环代码基本等于让我用外语写小作文。所以这个项目天然适合测试AI编程助手语法门槛高、重复劳动多、但目标清晰。如果AI能把我记不全的Sass语法写得明明白白那它对我的价值就得到了验证如果翻车我也能知道AI编程的边界在哪里。1.2 先拆需求再让AI动手在打开VS Code之前我先把“星空动效”拆成了几个能落地的需求点没有这个步骤后面提示词根本没法写背景从深蓝到暗紫的径向渐变模拟夜空星星至少三组不同大小和层级的星星营造远近感分布星星位置随机不能排成整齐的网格这很关键整齐了就不叫星空了闪烁每颗星星的闪烁节奏不一样错开时间才有真实感可选优化若干颗亮星带有光晕效果或者有一两颗划过屏幕的流星把这些需求列出来之后我突然意识到这件看起来“只是写代码”的事其实一半的功夫在产品设计上。AI编程不是你把一句话丢给AI它就能干活而是你得先替它把活儿想清楚。这个习惯我在后面的多个环节里反复体会到。2. VS Code里的AI助手接入方式与提示词设计2.1 我用的是哪套组合以及为什么这么选VS Code里有不少AI编程方案GitHub Copilot是老牌选手但需要订阅Continue是一个开源插件可以自由配置不同的模型API还有各种国产插件也都能用。我选的是Continue加DeepSeek API的组合原因很实际配置灵活、按量付费、不用一次买断而且API密钥申请流程清晰适合我这种想先低成本试水的用户。配置过程并不复杂VS Code左侧扩展面板搜Continue安装后在它的配置文件里填上API信息。有一点需要提醒API密钥属于敏感信息VS Code的配置文件最好不要直接同步到公开的代码仓库里万一泄露被别人盗刷损失是实打实的。整个接入过程中最花时间的不是装插件而是搞清楚这个AI被设置成了什么角色。Continue这类工具允许你在配置里写系统提示词比如规定它“回答要简洁”“先给方案再给代码”“用中文解释”。我一开始没认真设置这些结果AI给的答案经常是一大坨英文注释对我这种不擅长英文的人来说阅读理解本身就变成了负担。后来我重新写了系统提示词要求所有解释用中文、代码必须带注释、涉及关键语法要说明作用整个体验瞬间拉高了一个档次。2.2 提示词的三层结构我在复盘里总结出的心法踩了几次提示词写得太糊的坑之后我总结出一个三层结构基本能覆盖绝大多数编程需求。第一层是“背景交代”告诉AI你准备做什么处于什么样的项目环境第二层是“具体任务”描述当前这一步要实现什么效果第三层是“输出约束”规定返回内容的形式和范围。举两个我实际用过的例子。一个是让AI设计星星生成的Sass代码我的提示词是这样写的背景我在做一个纯CSS/Sass的星空动效不需要JavaScript。 任务用Sass的for循环生成80颗星星的CSS样式要求每颗星星的left、top、animation-delay都随机星星大小在1px到3px之间。 约束请给出完整的.scss代码每个属性后面用中文注释说明含义并解释random()函数在这里的用法。另一个是报错后让AI自己找问题下面的Sass代码编译报错报错信息是XXXXX。请指出问题原因并直接给出修正后的完整代码。注意当前项目使用的是dart-sass版本如果涉及Sass新老语法差异请以新语法为准。这种写法比“帮我写个星空”要有效得多核心原因在于你把思考负担转移给了AI它会顺着你给定的范围和格式输出而不是天马行空地猜测你要什么。仔细想想这不光是AI编程的沟通技巧也是任何协作场景里表达需求的基本功。2.3 让AI解释每一段代码而不是默默复制我给自己定了一条规矩AI给的代码凡是我不理解的语法点就追问一句“解释一下这里”直到搞明白再粘进项目。这个习惯帮我避免了好几次“代码能跑但不知道为什么”的隐患也为后面的调试省了大力气。比如AI第一次给出星空代码时用了一个我完全陌生的函数叫random()我当时第一反应是“这玩意儿是真的存在吗还是AI编的”。我问了AI一句它给我解释了这是Sass内置函数能在编译期生成0到1之间的随机小数乘上100%就得到随机百分比位置。我又问了个深层问题“编译期随机和运行期随机有什么区别”AI说编译期随机意味着每次编译代码时星星的位置就固定下来了刷新页面不会重新随机除非重新编译。这个细节极大地影响了我对这个项目的理解。在纯CSS方案里星星的位置是“静态”的只是靠动画制造动态效果如果你想让星星位置每次都不同那还是得靠JavaScript。搞清楚这些底层区别之后你对项目能做什么、不能做什么心里就有底了。这段追问过程比我单独看十篇Sass教程都管用。3. 星空动效实现拆解Sass语法盲区由AI补齐的关键环节3.1 整体结构HTML只需一个容器先把整个项目的骨架交代一下。HTML部分干净得惊人只需要一个背景层和一个放星星的层就够了。真正的大头全在Sass编译产物里。div classstarry-sky/div有人可能会疑惑星星不需要写成一个个DOM节点吗这正是Sass的高明之处——它可以用box-shadow模拟星星也可以用::before和::after生成少量元素但最灵活的方式还是把星星的背景图案做进一个元素的box-shadow列表里通过逗号分隔的多重阴影来呈现多个光点。AI给出的初始方案是用一个大区块作为夜空画布内部用多个“星星容器”承载不同层级的星星。每一层的星星数量、透明度、尺寸和动画参数各不相同。直接用CSS的border-radius画圆点配合box-shadow复制一套Sass循环下来编译出的CSS长到眼睛发花。3.2 星星随机分布的实现for循环和random()函数这一节是整片星空的核心也是我语法盲区最集中的地方。AI给我看的第一版星星生成逻辑是这样for $i from 1 through 80 { .star-#{$i} { position: absolute; left: random(100) * 1%; top: random(100) * 1%; width: 1px random(2) * 1px; height: 1px random(2) * 1px; background: white; border-radius: 50%; animation: twinkle 1s random(3) * 0.5s infinite alternate; } }看这段代码的时候我愣了好几秒——原来for可以做循环random(100)能生成1到100的随机整数配合百分比单位能定位到画布任意位置。关键信息在1px random(2) * 1px这一行Sass里做单位运算比较严格直接写random(2)px在某些情况下会报错AI自动选择了用数值加单位相乘的写法来规避单位冲突。这里的动画参数也把每颗星星的闪烁时间错开了1秒加上一个0到1.5秒之间的随机值让每颗星星的“呼吸”节奏互不相同。这种细节肉眼可能感知不到但整体效果就是比所有星星同步闪烁要自然得多。这段代码给我的启发很大。过去我手写CSS遇到重复性样式就是复制粘贴改数字每一百颗星星要复制一百遍。现在明白了循环 随机函数才能真正解决“很多相似但不相同”的图案生成问题这个思路在任何需要批量生成视觉元素的场景里都通用。3.3 分层设计近景、中景、远景的Sass mixin复用星空如果只有一种大小的星星再随机也会显得平面化。真实夜空有近大远小的纵深感所以我把星星分成了三层远景小星、中景普通星、近景少数亮星。这里就要用到Sass的mixin了。mixin的作用有点像“样式模板”你定义一段可复用的样式规则然后在不同的类里调用它还能传参数进去改变细节。AI给出了一个多层级的实现方案mixin star-layer($count, $size-min, $size-max, $opacity) { for $i from 1 through $count { .star-#{$i}-layer { position: absolute; left: random(100) * 1%; top: random(100) * 1%; width: $size-min random($size-max - $size-min) * 1px; height: $size-min random($size-max - $size-min) * 1px; opacity: $opacity; background: white; border-radius: 50%; animation: twinkle random(4) 1s infinite alternate; } } }我没有让AI一次生成整个星空而是让它分别给了我三个层级的mixin调用结果因为每一层的分布密度和动画参数都需要单独调整。远景可能一百五十颗小星透明度低一点近景只有七八颗大星透明度高、光晕大。这种按层拆分的做法让后续微调变得特别顺手。有趣的是AI在给出这段代码的时候还在注释里提醒我mixin必须定义在使用它的代码之前否则Sass会提示找不到。这种细节你让我靠记性去处理大概率是要踩坑的。3.4 闪烁动画与光晕深度动用Sass函数为了赋予星空生气闪烁动画不能简单用opacity做匀速变化。真实星星的闪烁有一种“突然亮起来又慢慢暗下去”的节奏感。AI建议用两步关键帧先让透明度快速升到最高再缓慢降到最低配合alternate取值实现反复。keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }这看起来简单但要把这段动画挂到每一颗星星上且各自有不同延迟就要用到animation-delay的随机值。AI用random()给每颗星星分配了不同的延迟让它们不会整齐划一地同步闪烁这跟星星分布的随机异曲同工。亮星的光晕处理则是用box-shadow的多重阴影来模拟一层白色实影加一层更大范围的半透明阴影星星看起来就像在发光。我这个门外汉第一次看到这种用box-shadow做光晕的写法脑子里蹦出的念头是“原来还能这么玩”。4. 编译与调试的翻车现场AI给出的代码并非开箱即用4.1 Sass编译失败的经典原因老语法与新版本之争AI写的代码再漂亮到本地编译环节都会给你个下马威。我用的是Live Sass Compiler扩展来编译样式刚点下“Watch Sass”按钮满屏红色报错就弹了出来。印象最深的报错是除法运算符问题。老版本的Sass允许用/直接进行除法比如width: 100px / 2。但新版dart-sass里这种写法已经被移除了必须改用内置的math.div()函数。AI给我生成某段代码时可能参考了老教程用了老语法导致我在新版编译器下直接编译失败。这个报错的排查过程很典型。我先点开错误信息发现指向的是use sass:math;相关的内容然后才意识到是Sass版本的兼容性问题。解决方式倒不复杂在文件顶部引入math模块把除法改成math.div($size, 2)。AI在这个过程中也帮了大忙我把完整报错信息扔给它它马上告诉我这是新老语法差异并给了修正后的完整代码。4.2 编译成功但看不出星空效果浏览器调试才是救星编译问题解决之后新的尴尬出现了页面打开整个背景一片漆黑星星踪迹全无。代码没有报错但效果完全不对。这种“静悄悄翻车”的情况是最难查的因为没有任何提示告诉你哪里出了错。我把编译后的CSS发给了AI它问我“有没有看过星星元素的实际渲染尺寸和位置”我的第一反应是懵的。这时候我去浏览器按F12打开开发者工具发现星星容器的高度和宽度都是0里面的星星全部被裁剪掉了。问题的根源在于容器本身没有设置宽高星星的left和top百分比无法作用自然就全部叠在了零点附近显然不可见的位置。修复方式也很简单给容器设置固定的宽高或者让容器撑满父元素。这个修复过程看似简单但给我的教训是——当视觉效果不对时先去看实际渲染出来的DOM信息而不是在代码里瞎猜。AI可以提供思路但没法替你打开开发者工具这中间的经验积累只能靠自己。4.3 AI幻觉应对不存在的语法与胡编的函数用AI编程最大的坑不是它给错代码而是它用非常自信的语气给你编造出不存在的语法和函数。我在追查一处样式异常时AI告诉我去用某个“特殊的光晕函数”说可以生成平滑的渐变光晕。我按它的提示搜了一遍Sass文档结果压根没有这个函数。后来我总结出了一个有效的防幻觉策略凡是AI提到的函数或语法先去Sass官方文档里确认它真实存在或者直接在提示词里要求它“只使用Sass标准内置功能禁止使用自定义或实验性函数”。这两个动作能让幻觉出现的频率大幅下降。还有一个更聪明的办法让AI自己引用来源。我在提示词里加过一句“如果涉及Sass内置函数请指出它在官方文档中的名称”AI就会更倾向于使用它真正了解的语法而不是自由发挥。5. 从星空项目到日常开发这套协作方式沉淀了什么5.1 角色分工的变化我是项目负责人AI是高级助理做完这个项目我最深的感觉是AI编程并不是“把需求丢给AI然后等着拿成品”而是人和工具之间重新划分了责任。人要干的活儿包括定义需求、拆分任务、验证结果、调试异常AI负责的是把定义好的需求翻译成语法正确的代码补齐细节批量处理重复劳动。这个分工对我这种“语法记不全”的人来说非常理想。我不再需要死记硬背Sass里的每一个函数和语法糖只要我知道“存在一个能做随机的东西”“有办法做循环”就能反问AI具体怎么写。这就像你不需要记住字典里所有单词的拼写但你得知道要查哪个词才能把文章写对。5.2 一个可复用的AI编程工作流从这次项目里我沉淀了一套固定的工作流现在做任何小项目都按这个节奏走第一步把最终效果用大白话描述给AI听请它先画出一个实现方案不要急着写码第二步确认方案的技术路径符合预期再要求它分步给出代码第三步把代码粘进项目编译运行遇到报错就把报错信息原样喂给AI让它修正第四步把浏览器调试结果反馈给AI尤其是“看起来不对”的非报错问题用截图或描述告诉它实际情况第五步对不理解的关键语法追问到底确保这块逻辑掌握在自己手里这几步走下来项目的推进速度比我自己硬啃语法快得多而且对代码的理解并不比手写的日子差。因为有持续追问的环节很多东西反而是被AI“带着学”学会的。5.3 星空动效还能怎么扩展这次项目的产物并不是终点因为这套代码的扩展性比我想象中好。把星星数量从80颗改成300颗只需要改循环的上限数把闪烁速度调慢只需要改动画的秒数参数。更撩人的是同样的分层思路配合CSS变量还可以用来做流星、做极光、做城市夜空的背景改动成本微乎其微。我甚至想过把它做成一个可配置的星空背景工具用户通过修改几个CSS变量就能改变星星密度、闪烁速度、背景色系。AI编程在这里又给了我一份完整的“参数化改造方案”把所有硬编码的数字提升为变量让整个动效变成一个可调参的作品。这种从“一次性效果”到“可复用组件”的转变是我以前不敢想的。回头看这次经历我觉得用AI编程最关键的收获不是什么“月写一万行代码”的本事而是彻底改变了我面对不熟悉语法领域的恐惧。过去我看到Sass的mixin、each、random()函数第一反应是“这个太深了绕路吧”现在我的第一反应是“先让AI写一版出来然后追着它问明白”。这种心态的变化可能比任何具体语法知识都值钱。对和我一样英文一般、语法记不全的人来说VS Code里的AI编程助手确实像是一座桥。桥能不能搭得稳走起来顺不顺一半看工具一半看你怎么跟它沟通。但至少我自己的体验是过去觉得完全做不出来的东西现在真的能一点一点做出来了。