爱意满满的作品展示区。
vulgur

24 小时前端零基础用 Windsurf + Claude 上线一个简单的工具类网页

  •  
  •   vulgur ·
    vulgur · Feb 6, 2025 · 2996 views
    This topic created in 484 days ago, the information mentioned may be changed or developed.

    过去的 24 小时里我用 AI 制作了一个简单到不能再简单的小工具。

    这就是一个专注计时器,但不是番茄钟( Pomodoro )。想必用过番茄钟的各位都有过这样的经历,就是刚刚进入心流状态,25 分钟的番茄钟就到时间了,于是不得不进入休息时段。

    我的这个计时器采用的是叫做 Flowdoro 的一个时间管理法,番茄钟是倒计时,而这个是正计时,所以它不会主动打断你的心流状态,只有你觉得累了或者从心流状态中走出来就可以主动进入休息状态,休息时长是之前专注时长的五分之一。这样你会找到更适合你自己的专注和休息节奏,不会像番茄钟那样被固定的倒计时打乱心流。

    我对于 Next.js 和 React 几乎是一无所知,最开始是用 v0.dev 生成了一个简单的计时页面,但是我发现更复杂的 UI 和功能需求 v0 就搞不定了,所以就转成了在 Windsurf 里继续编辑。

    虽然我一行代码都没写,但是和 Claude 交流下来也是颇费功夫。它总是会在修改其他细节时擅自改动计时规则,导致我几次差点破口大骂……还有字体,我想让它修改计时数字的字体,但它总是修改其他文案的字体。除此之外,下面的很多调整都花费了我大量的 credit 才调整好:

    1. 按钮的布局和大小
    2. 中英文本地化
    3. 移动端上的自适应

    除了代码工作,最费时的是域名的选择,花了我半天时间。我咨询了豆包、ChatGPT 和 DeepSeek ,最终选择了这个域名(主要是便宜)。然后又花了半小时自己用 Figma 随便弄了一个 favicon ,最后才把这个网页拾掇得差不多了。

    这是我第一次通过 AI 来制作网页工具,可能对于高手来说一个小时就能做出来,但我前后花了将近 24 小时才最终完成,也算是新的探索和自我突破了。

    这里是网址,FlowFocus,欢迎大家使用和反馈!

    5 replies    2025-02-07 14:58:53 +08:00
    asLw0P981N0M0TCC
        1
    asLw0P981N0M0TCC  
       Feb 7, 2025
    高手不要 1 个小时 ,我估计半个小时 或者不到
    vulgur
        2
    vulgur  
    OP
       Feb 7, 2025
    @qwertyzzz 高高手
    asLw0P981N0M0TCC
        3
    asLw0P981N0M0TCC  
       Feb 7, 2025
    @vulgur 害 我和你一样把 我是说高手不要 1 小时
    GWesley
        4
    GWesley  
       Feb 7, 2025 via iPhone
    道哥来抢前端饭碗了
    vulgur
        5
    vulgur  
    OP
       Feb 7, 2025
    @GWesley 能跟着喝到漏下来的剩汤就不错了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2814 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 01:23 · PVG 09:23 · LAX 18:23 · JFK 21:23
    ♥ Do have faith in what you're doing.