一个人 + AI，
怎么把想法变成网站

先放结果。这是现在打开 sycode.cn 看到的样子——桌面端首屏：

手机上打开自动变成单列、卡片缩放：

下面把这整个站是「怎么长出来」的，拆成 8 步讲给你听。

新手最容易犯的错：一上来就让 AI「给我做个网站」。结果要么是千篇一律的模板，要么聊了半小时还在改颜色。

关键认知：AI 写代码不难，难的是你把它当成了「读心术」。你描述得越结构化，它产出越接近你要的。对比两句需求：

• 模糊版：「帮我做个个人网站」——AI 只能猜，大概率给你一个套模板；
• 结构化版：「现代卡片风、浅色、蓝绿科技感；6 个页面：首页/作品/案例/AI聊天/玩/文章；首页要有 hero 主标题 + 作品预览 + 玩具箱入口；纯静态无构建依赖」——产出直接对齐你的设想。

我给本站的需求，大致是这样一段（喂给 AI 当起点）：

# 个人网站需求（v1）
风格：现代卡片风、浅色、蓝绿科技感
页面：首页 / 作品 / 案例 / AI聊天 / 玩 / 文章（6个）
首页要有：hero主标题、作品预览、进入玩具箱入口
内容：我的 AI 实践作品集 + 技术文章
约束：纯静态（HTML/CSS/JS，无构建依赖）
交付：能直接在浏览器打开看效果

就这几行，AI 就明白要做什么了——不是「做个网站」，而是「一个具体风格、6 个具体页面、具体约束的网站」。

第一版的目标只有一个：能点、能看、有结构。不求好看，不求功能全，先把骨架立起来。我用「首页骨架 + 一个能跳的导航」起步，半小时就出了可视原型。

心态比技巧重要：第一版越糙，越容易改。一开始就抠细节，反而动不动推倒重来。先让它「存在」，再让它「变好」。

第一版和现在对比，差别主要在「设计感」和「内容密度」上：

网站不是一整块，是几个「页面」拼起来的。我按用途切成了 6 块，每块解决一类需求：

• 首页：门面，放 hero + 作品预览 + 玩具箱入口；
• 作品 / 案例：把做过的项目陈列出来，点开看详情；
• AI 聊天 / 玩：让网站「活」起来和「好玩」起来（后面专讲）；
• 文章：技术分享入口，支持按专栏筛选、全站搜索。

每个页面长这样（挑两个有代表性的）：

很多人卡在「我不是设计师，做出来丑」。其实你不需要会画，只需要会描述感觉：

「现代、干净、浅色背景、蓝绿作为强调色、卡片有轻微阴影和圆角、hover 时轻微上浮」——把这句话喂给 AI，它就能给出一套像样的视觉。

本站的设计语言就是这么定下来的：白色底、绿色强调（而不是俗套的渐变紫）、卡片圆角 + 阴影、交互有微动效。迭代时也是用「把这里留白加大」「卡片再紧凑点」这种描述在调。

静态网站只能看。我想让它「能对话」，于是加了 AI 聊天。难点不在「调 AI」，而在架构怎么放 Key——API Key 绝不能在前端（会被人扒走刷爆额度）。

做法是经典的「前端 → 反代 → AI」三层：

• 前端只发「用户说了什么」，不带任何密钥；
• 自己的服务器做中转，Key 存在服务器环境变量里（chmod 600）；
• 后端只监听内网，再加限流（单 IP 每分钟 / 每天上限），防止被刷。

效果：桌面端和手机端都能聊。

有了聊天，网站「活」了；但光有正经内容，访客看完就走。我加了个玩具箱（play）：命格鉴定、Emoji 猜成语、打字赛、街机小游戏……让非技术朋友也能玩、愿意分享。

这些玩法分两类：纯前端逻辑（抽奖、计时、游戏），和「复用 AI 聊天接口」的轻量玩法（命格签语、嘴替文案）。后者依然走第五节的架构，零后端改动就能加新玩法。

命格鉴定是代表作：输入名字，本地算法生成技能值，AI 只补一句签语。

内容多了，得让用户能搜。全站搜索做了个覆盖层（overlay）：输入即过滤文章和作品，回车跳转。

我还顺手接了自建访问统计——不要 UV/PV 大屏，只要知道「有没有人看、看哪里」。纯前端埋点 → 后端计数 → 一个只有站长能看的报表：

1. 先描述，再写码：结构化需求 > 一句「做个网站」。把风格、页面、约束写清楚，省一半返工。
2. 第一版要糙：先出骨架能点能看，再迭代设计。完美主义是建站最大的敌人。
3. 不会设计就描述感觉：「现代、干净、浅色、卡片、微动效」比你说「好看一点」有用十倍。
4. 加功能守住边界：AI 的 Key 永远在后端，前端只发用户输入 + 加限流。
5. 让网站有「钩子」：聊天 + 玩具箱 + 搜索，让人愿意停留、愿意回来。

真实成本（本站 6 页面 + AI 聊天 + 玩具箱 + 统计）：

一句话总结：建站最贵的不是服务器，是你「想清楚要什么」的那点时间。想清楚了，AI 就是你的施工队。