1. 这不是“用AI做网站”而是普通人第一次真正拥有数字表达权2026年春天我在杭州一家独立设计工作室做品牌咨询日常要给客户出方案、写提案、搭轻量级展示页。去年这时候我还在为改第十版PPT配色焦头烂额今年三月我用Claude Code在咖啡馆靠窗位点了一杯美式花47分钟建好一个带响应式布局、微信扫码入口、服务模块可折叠的个人作品集网站并直接发给了正在看竞标文件的客户。整个过程里我确实没碰过VS Code的终端窗口没手敲过div标签也没在GitHub页面上点过“New file”按钮——但最关键的是我第一次感到这个网站不是“借来的模板”不是“套用的SaaS后台”它从逻辑结构到视觉节奏都长在我的脑子里只是由AI替我落笔成形。这背后没有魔法只有一套可拆解、可复现、可迁移的思维动作。很多人把这件事理解成“AI替代程序员”其实完全错了。Claude Code真正的价值是把过去被技术门槛锁死的数字表达权第一次平等地交到了非技术人员手上。就像1984年Macintosh让普通人能用鼠标画图2004年WordPress让小商家能自己发博客2026年的Claude Code让一个连HTML基础概念都说不全的市场总监、自由插画师、社区运营者能亲手定义自己的数字门面——不是选模板、填内容而是从信息架构开始一句一句说出“我希望访客第一眼看到什么”“点击‘服务’后应该展开几层信息”“手机横屏时联系表单要不要自动收起”。这种掌控感和你用Figma拖拽组件有本质区别Figma给你的是像素控制权Claude Code给你的是意图实现权。我特意统计了这七天里自己最常使用的三个中文句式它们构成了普通人与AI协作建站的语言底层第一类是空间锚定句“首页顶部留白比现在多50%标题下方加一条2px的浅灰分割线”——不用说“修改CSS的margin-top和border-bottom”而是用设计师日常沟通的空间感描述第二类是行为映射句“点击‘立即咨询’按钮后弹出微信二维码同时页面背景变暗”——把用户动作和界面反馈直接挂钩跳过DOM事件监听、CSS transition等中间层第三类是约束声明句“所有文字用思源黑体字号层级只允许出现16px/18px/24px/32px四档禁止使用红色系”——用设计规范语言代替技术实现路径让AI在生成时自动过滤掉不符合约束的方案。这三类句子就是普通人撬动代码世界的杠杆支点。它不依赖你懂JavaScript闭包而依赖你清楚自己想传递什么情绪、引导什么行为、守住什么边界。接下来我会用七天时间线把这套方法论掰开揉碎——不是教你怎么点按钮而是带你重建一套“人话驱动开发”的肌肉记忆。你不需要记住任何命令只需要记住当你说得越像在跟一个资深前端同事当面提需求AI产出就越接近你心里的画面。2. 核心能力分层解析为什么必须按Chat→Project→Cowork→Code顺序推进2.1 Chat不是聊天工具而是“思维校准器”很多人把Claude Chat当成高级搜索引擎输入“怎么建网站”等着AI给教程链接。这恰恰踩中了第一个认知陷阱。Chat真正的核心价值在于帮你完成想法具象化训练——把大脑里模糊的“想要个专业点的页面”转化成可执行的最小单元指令。举个真实例子第三天我打算建个人作品集时最初对Chat说“帮我做个作品集网站”。结果它返回了包含导航栏、轮播图、项目网格、页脚的完整HTML代码但所有内容都是Lorem Ipsum占位符配色是默认蓝灰。这根本不能用。于是我退回Chat做了三轮迭代第一轮聚焦信息架构“我的作品集需要展示平面设计、UI设计、品牌咨询三类工作。每类工作下我要放3个代表作。每个代表作需包含项目名称、服务周期、核心解决的问题、1张主图、2句效果描述。请用树状图列出这个结构。”第二轮锁定视觉基调“参考[附截图]这个网站的呼吸感文字行高1.8卡片圆角8px主色调用#3a5fae深青蓝和#f8f9fa极浅灰禁用阴影。请用文字描述这个风格的关键词。”第三轮定义交互逻辑“访客进入首页后首屏只显示大标题‘李明品牌策略与视觉系统’和副标题‘用系统思维解决增长问题’。滚动到第二屏才出现三类工作导航。点击任一导航项页面平滑滚动到对应作品区块。请用自然语言描述这个交互流程。”这三轮对话花了22分钟但换来的是当我进入Code环节时输入的第一句话就精准到“创建GitHub仓库my-portfolio按上述三轮确认的信息架构和视觉规范建站”。没有这22分钟的校准Code环节会陷入无休止的试错循环。Chat在这里扮演的角色本质上是降低后续环节的熵值——你花在Chat上的每一分钟都在为Code节省三倍以上的返工时间。提示别怕在Chat里反复推翻重来。我有个实操技巧每次迭代后把AI输出的结构化结果复制到备忘录用不同颜色标注“已确认”“待验证”“需补充”。七天下来我的备忘录里积累了17个这样的决策快照它们成了整个项目的“事实真相库”。2.2 Project让AI拥有你的“职业人格”Project功能被严重低估根本原因在于人们把它当成“存对话记录的文件夹”。实际上它是Claude生态里最关键的上下文固化装置。当你建立一个Project时你不是在创建对话空间而是在给AI注入你的职业DNA。我建立了三个核心Project每个都经过刻意设计“品牌策略写作”Project上传了我过去三年写的23篇行业分析报告PDF、一份《客户沟通禁忌清单》Markdown文档、一段3分钟语音我朗读自己最满意的一段文案强调停顿和语气。系统指令写的是“你是我十年合作的策略搭档熟悉我服务过的新消费品牌案例说话简洁有力避免形容词堆砌所有建议必须附带可落地的执行步骤。”“视觉系统提案”Project上传了5套完整VI手册含字体规范、色彩系统、应用示例、3份客户否定反馈邮件截图、一份《甲方决策链分析表》。系统指令是“你是我团队里的首席视觉架构师清楚知道CMO关注数据呈现设计总监在意细节精度实习生负责执行。所有输出需分三层给CMO的一页摘要、给设计总监的规范说明、给实习生的执行checklist。”“个人作品集”Project上传了本次建站的三轮Chat决策快照、两份客户表扬邮件、一张我手绘的网站草图照片。系统指令是“你是我专属的数字门面建筑师所有建议必须符合‘专业但不冰冷、系统但有温度’的核心调性。当不确定时优先选择增加留白、减少元素、强化文字层级。”关键差异在于在普通Chat里问“这个配色是否专业”AI会基于通用设计原则回答而在“个人作品集”Project里问同样问题AI会调取我上传的VI手册里的色彩心理学注释对比客户表扬邮件里提到的“信任感”关键词再结合手绘草图中的留白比例给出“当前#3a5fae饱和度偏高建议降至#2d4b8c与#f8f9fa形成更柔和的权威感”的具体建议。注意Project的威力不在数量而在“不可替代性”。我试过把所有资料塞进一个Project结果AI经常混淆不同场景的语境。后来发现每个Project必须满足三个条件①有明确的职业角色定位不是“助手”而是“搭档”②有至少一份真实业务产出物不是理论文档而是客户邮件/方案稿③有可验证的行为约束如“所有输出必须带执行步骤”。少一个条件上下文就会稀释。2.3 Cowork从“对话”到“共编”的临界点Cowork常被误认为是“带编辑框的Chat”但它真正的革命性在于消除了意图衰减链。在传统工作流中你的想法要经历“脑内构思→口头/文字描述→AI理解→AI生成→你阅读→你识别偏差→你重新描述”七次衰减。Cowork砍掉了其中四次——当你指着文档里某段说“这里太学术改成菜市场大妈能听懂的话”AI当场重写你立刻看到效果偏差归零。我用Cowork完成作品集文案的真实过程第一步在右侧文档区输入AI根据Project生成的初稿约800字。第二步用鼠标框选“品牌策略服务”段落输入指令“这段里‘系统性解决方案’‘价值重构’‘认知升维’三个术语全部删除换成具体动作比如‘帮客户把logo从旧版改成新版’‘把产品包装从杂乱改成统一视觉’‘让官网跳出率从70%降到35%’。”第三步AI重写后我发现数据案例不够直观于是框选整段输入“把所有百分比数据替换成客户原话。例如‘跳出率降到35%’改成‘客户说以前访客看了3秒就关掉现在平均停留2分17秒’。”第四步发现服务模块排列逻辑混乱直接拖动段落调整顺序然后输入“按客户决策路径重排先看到‘我们做什么’服务列表再看到‘做过什么’案例最后看到‘怎么合作’流程。每部分加小标题用emoji图标区分。”这个过程没有复制粘贴没有切换窗口没有重新描述上下文。AI始终在同一个语境里响应你的即时反馈。更关键的是Cowork的文档区支持Markdown实时渲染我输入## 服务流程立刻看到二级标题样式输入- [ ] 需求诊断自动变成带复选框的列表。这种所见即所得让非技术人员第一次拥有了“边思考边构建”的能力。实操心得Cowork的隐藏价值在于“错误可视化”。在Chat里AI可能用华丽辞藻掩盖逻辑漏洞在Cowork里漏洞直接暴露在文档结构中。比如我曾让AI写“服务优势”它生成了五点并列描述但当我把这五点拖成流程图时发现第三点和第五点存在因果倒置——这促使我追问“这五点之间是否存在先后关系能否用箭头连接”最终重构出“诊断→策略→设计→落地→复盘”的真实服务链。这种在视觉层面暴露逻辑缺陷的能力是纯对话模式永远做不到的。2.4 Code不是写代码而是“指挥数字世界”Claude Code常被称作“核武器”但它的真正威力不在于生成代码的速度而在于将抽象意图翻译成可执行数字实体的保真度。当你在Code界面输入“帮我建个网站”AI生成的是代码当你输入“帮我建个让客户一眼看懂我能解决什么问题的网站”AI生成的是以用户认知路径为蓝图的数字空间。Code环节的四个不可跳过动作① 权限预设在开启Code前必须在设置中打开“自动接受编辑”并连接GitHub。很多新手卡在这一步反复点击“允许”却不知为何。真相是Claude Code需要获得文件系统操作权限才能创建文件夹、写入HTML/CSS、提交Git。这就像给AI配一把万能钥匙而不是让它每次敲门都等你开门。② 项目锚定不要在空白Code界面输入需求。先在Project里确认好信息架构、视觉规范、交互逻辑再把Project链接粘贴到Code对话框顶部。我习惯输入“基于‘个人作品集’Project的所有约定创建GitHub仓库my-portfolio执行建站任务。”这样AI会自动调取VI手册里的色彩值、文案快照里的客户原话、手绘草图中的布局比例。③ 迭代闭环Code不是“一次生成永久使用”而是“生成→验证→修正→再生成”的螺旋。我建站时的典型循环是第一轮生成基础框架HTML结构基础CSS→ 在浏览器打开 → 发现手机端导航栏错位第二轮输入“修复移动端导航栏当屏幕宽度768px时导航栏改为汉堡菜单点击展开垂直列表” → AI修改CSS媒体查询 → 刷新查看第三轮发现微信二维码尺寸过小 → 输入“二维码图片放大至200×200px添加10px白色描边居中显示在页脚” → AI修改HTML img标签和CSS → 再次验证④ 约束强化每次迭代都要叠加新约束。初始约束是“用思源黑体”第二轮加入“所有按钮悬停状态必须有0.3秒缓动”第三轮加入“所有图片加载失败时显示灰色占位图文字提示”。这些约束像编程里的TypeScript类型定义不断收窄AI的发挥空间确保最终产物严格符合你的预期。关键洞察Code环节最危险的误区是把AI当“代码生成器”而忽略它作为“数字世界导演”的本质。当你要求“加个微信二维码”AI可能生成base64编码的图片也可能生成调用微信JS-SDK的API调用——前者适合静态展示后者适合动态交互。你需要用约束告诉它“只要静态图片不要任何JavaScript”。这种对数字实体属性的精准定义能力才是Code时代的核心竞争力。3. 七日实操全记录从零到上线的完整路径与避坑指南3.1 Day 1-2Chat与Project筑基——用2小时换7天效率Day 1上午模型选择实战课我注册Claude Pro后做的第一件事不是建网站而是做模型压力测试。打开Chat分别用Sonnet 4.6和Opus 4.6执行同一任务“分析这份会议纪要粘贴300字文本提取3个待办事项按紧急程度排序并为每个事项写一句向老板汇报的话”。Sonnet 4.6用时12秒输出清晰但遗漏了纪要中隐含的跨部门协作风险Opus 4.6用时38秒不仅列出待办还指出“市场部与技术部在Q3排期上存在冲突建议下周三方同步会”汇报话术也更符合高管语境。结论很明确Sonnet是日常办公的瑞士军刀Opus是攻坚克难的液压钳。我给自己定下铁律处理信息整理、文案润色、简单问答用Sonnet涉及逻辑推理、长文本分析、多约束决策时无条件切Opus。这个选择让我在后续Code环节节省了大量返工时间——当AI需要同时处理“响应式布局”“配色系统”“交互动效”三重约束时Sonnet常会顾此失彼而Opus能保持全局一致性。Day 1下午Project创建三原则我创建“个人作品集”Project时严格遵循三个原则真实性原则上传的不是理论文档而是真实业务资产。我把上周刚交付的客户方案PDF、客户签字的验收单扫描件、甚至微信里客户夸“这个配色让投资人眼前一亮”的聊天截图全部拖进Project。AI看到的不是抽象概念而是带着温度的业务证据。可验证原则系统指令必须能被客观检验。我写“所有文案必须包含至少一个客户原话”而不是“文案要真实可信”。第二天AI生成“服务优势”段落时我直接搜索“客户说”发现它真的嵌入了三处真实对话证明指令生效。最小必要原则每个Project只放最核心的3-5份材料。曾试图上传20份资料结果AI在响应时频繁引用无关文件。后来精简为1份VI手册定义视觉、1份客户表扬邮件定义价值、1份手绘草图定义结构效果立竿见影。Day 2全天Project深度训练我用真实任务训练Project任务1把一份5000字的行业白皮书压缩成300字朋友圈文案。在Project里输入“用‘个人作品集’Project的语境把这份白皮书核心观点写成朋友圈文案。要求开头用疑问句引发好奇中间用客户原话佐证结尾带行动号召。禁止使用‘赋能’‘抓手’‘颗粒度’等黑话。”任务2根据客户反馈修改提案。我上传了客户批注的PDF手写“这里太技术”“数据来源不明”在Project里输入“按客户批注修改提案第3页。把技术术语‘用户旅程地图’改成‘客户从看到广告到下单的全过程’所有数据补充来源说明例如‘35%转化率提升来自2025年Q2天猫数据’。”这两项任务让我彻底理解Project不是知识库而是决策校验器。当AI输出的内容偏离我的职业语境时它会立刻暴露——这正是训练的价值所在。3.2 Day 3-4Cowork协作实战——告别复制粘贴的窒息感Day 3用Cowork重写作品集文案我打开Cowork右侧文档区粘贴了Chat生成的初稿。重点操作如下结构手术用鼠标拖拽将“关于我们”段落移到“服务内容”之后。因为客户调研显示访客更关心“你能解决什么”而非“你是谁”。拖动后输入“按客户决策路径重组服务→案例→流程→关于。每个模块加icon服务模块用️案例模块用流程模块用⏳关于模块用。”语言降维框选“策略性视觉系统构建”整段输入“把所有专业术语替换成客户能懂的动作描述。例如‘视觉系统构建’改成‘帮客户统一所有地方的logo、字体、颜色’‘品牌资产沉淀’改成‘把客户的好口碑变成能重复用的设计素材’。”证据植入在“服务内容”模块AI写了“提升品牌专业度”。我框选这句话输入“替换为具体客户成果‘帮XX茶饮品牌统一全国300家门店视觉开业3个月复购率提升22%’。”整个过程像在指挥一个隐形团队左边对话框是项目经理右边文档是施工工地我随时叫停、调整、验收。Day 4Cowork搭建信息架构这是最容易被忽视的关键步。我新建一个Cowork文档标题为“作品集信息架构”在右侧输入首页 ├─ 大标题李明品牌策略与视觉系统 ├─ 副标题用系统思维解决增长问题 ├─ CTA按钮查看服务详情 └─ 滚动指示向下箭头 服务页 ├─ 三大服务模块平面/ UI / 品牌 ├─ 每模块含服务描述、3个代表作、客户原话 └─ 底部CTA预约15分钟免费咨询 案例页 ├─ 按行业分类新消费/科技/文化 ├─ 每案例含挑战、我的动作、客户成果 └─ 所有成果用客户原话数据支撑然后输入指令“把这个架构转成可点击的原型图。首页大标题用32px副标题用18pxCTA按钮圆角6px所有文字用思源黑体。导出为PNG。” AI生成后我直接发给客户“这是我们网站的骨架您看信息流是否符合您的预期”——这比发代码或设计稿更早锁定需求。避坑笔记Cowork最大的陷阱是“过度编辑”。我曾连续修改文案17次结果发现AI开始机械重复句式。后来学会“三击法则”每次修改后用鼠标三击选中整段输入“用完全不同句式重写保持原意”。这迫使AI跳出思维定式产出更自然的表达。3.3 Day 5-7Code建站全流程——从第一行代码到上线部署Day 5上午环境准备与权限打通注册GitHub用公司邮箱注册用户名用拼音全名避免特殊字符密码启用双重验证。安装VS Code下载官方版本安装时勾选“Add to PATH”确保终端能调用code命令。配置Claude扩展在VS Code扩展商店搜索“Claude Code”安装后重启。进入设置Ctrl,搜索“claude skip permissions”勾选“Enable Skip Permissions”。这三步看似简单但90%的失败源于此。常见问题GitHub用户名含下划线导致仓库创建失败 → 改用短横线或纯字母VS Code未勾选Add to PATH → Claude无法调用本地编辑器 → 终端报错“command not found”“Skip Permissions”未启用 → 每次生成文件弹窗确认打断工作流。我专门做了张检查表贴在显示器边框步骤验证方式GitHub注册成功能正常访问https://github.com/yournameVS Code可调用终端输入code --version返回版本号Claude扩展生效Claude桌面端设置里显示“VS Code connected”Day 5下午Code首次建站打开Claude桌面端点击Code标签选择Opus 4.6确认“自动接受编辑”已开启。输入基于“个人作品集”Project的所有约定创建GitHub仓库my-portfolio。 执行建站任务 1. 首页大标题32px副标题18pxCTA按钮圆角6px所有文字思源黑体 2. 服务页三大模块横向排列手机端堆叠每模块含服务描述3案例客户原话 3. 案例页按行业分类每案例含挑战/动作/成果三段式结构 4. 全局配色#3a5fae#f8f9fa所有图片加载失败显示灰色占位图 5. 导出可访问链接AI开始自动生成先创建仓库再写index.html接着生成style.css最后提交到GitHub。全程约8分钟期间我去做了一杯咖啡。回来时AI已给出在线预览链接https://yourname.github.io/my-portfolio。Day 6迭代优化实战打开预览链接发现三个问题问题1手机端服务模块未堆叠仍是横向排列问题2案例页客户原话字体太小且未加引号问题3页脚微信二维码尺寸过小我回到Code对话框逐条输入修正指令1. 修复移动端服务模块当屏幕宽度768px时服务模块flex-direction设为column间距改为20px 2. 案例页客户原话字体大小设为16px前后加「」符号行高1.6 3. 页脚二维码图片尺寸200×200px添加10px白色描边居中显示AI修改后我刷新页面全部解决。这时我意识到Code的迭代成本远低于传统开发。在传统流程中改一个CSS属性要重启本地服务器、清缓存、多端测试在Code里就是一句话一次刷新。Day 7上线与交付最后一步是让网站真正可用在GitHub仓库Settings → Pages选择main分支根目录保存等待1分钟访问https://yourname.github.io/my-portfolio确认HTTPS生效用Chrome开发者工具的Lighthouse跑分优化到90主要优化图片懒加载和字体预加载生成二维码打印在名片背面。交付时我给客户发了三样东西在线链接https://yourname.github.io/my-portfolioGitHub仓库地址方便他未来自己更新内容一份《维护指南》Markdown文档用Cowork生成如何更新服务案例打开index.html找到!-- SERVICE CASES --注释按格式添加新案例如何更换微信二维码替换/assets/wechat.png文件如何修改配色修改style.css中:root变量实操心得Code环节最该警惕的是“完美主义陷阱”。我曾花3小时调整按钮悬停动效结果客户说“能点就行”。后来明白AI建站的核心价值是“快速验证”不是“极致完成”。把80%精力放在信息架构和文案质量上剩下20%交给AI生成这才是高效路径。4. 真实问题排查手册七个高频故障与我的应对策略4.1 GitHub仓库创建失败权限与命名的双重雷区现象输入创建仓库指令后AI返回错误“Repository creation failed: Invalid repository name”。排查路径检查GitHub用户名是否含大写字母、空格、特殊符号如、#GitHub只接受小写字母、数字、短横线。检查仓库名是否以短横线开头/结尾是否含下划线是否超过100字符检查GitHub权限在GitHub Settings → Applications → Authorized OAuth Apps确认Claude有“public_repo”权限。我的解决方案建立命名公约仓库名一律用小写字母短横线如my-portfolio、brand-case-studies预检脚本在VS Code新建文件repo-check.js粘贴以下代码const repoName my_portfolio; // 替换为你想用的名字 const isValid /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/.test(repoName) repoName.length 100; console.log(isValid ? ✅ 可用 : ❌ 不可用);运行后终端输出✅即表示命名合规。注意不要用中文或拼音缩写如li-mingGitHub对非ASCII字符支持不稳定。我吃过亏——用lǐmíng建仓失败三次改用liming一次成功。4.2 页面样式错乱CSS作用域污染的隐形杀手现象电脑端显示正常手机端导航栏错位或文字行高异常。根本原因AI生成的CSS未正确设置媒体查询作用域或全局样式被局部样式覆盖。我的诊断三步法打开浏览器开发者工具F12切换到手机模拟模式点击错位元素在Styles面板查看实际生效的CSS规则搜索media确认是否有针对max-width: 767px的规则且该规则是否被更高优先级样式覆盖。实战修复案例我的服务模块在手机端仍横向排列检查发现AI生成的媒体查询写成了media (max-width: 768px) { .services { flex-direction: column; } }但.services类被另一个全局样式* { box-sizing: border-box; }干扰。我输入指令“在手机端媒体查询中为.services添加!important并确保flex-direction生效”。AI重写为media (max-width: 767px) { .services { flex-direction: column !important; gap: 20px !important; } }刷新后问题解决。关键技巧当样式问题反复出现时不要逐行修改CSS而是让AI重写整个媒体查询区块。我输入“重写所有手机端媒体查询确保.services、.case-item、.footer元素在768px时正确堆叠使用flex-column和gap属性移除所有可能冲突的全局样式”。4.3 图片加载失败路径与格式的致命组合现象网页显示灰色方块右键检查显示“Failed to load resource: net::ERR_FILE_NOT_FOUND”。排查重点图片路径是否相对路径AI常生成/images/logo.png但实际文件在assets/images/logo.png图片格式是否支持GitHub Pages只支持PNG/JPEG/GIF不支持WebP除非配置额外插件文件名大小写是否匹配Linux服务器区分大小写Logo.png≠logo.png。我的标准化流程所有图片统一存放于/assets/images/目录文件名全小写短横线如wechat-qrcode.png、case-01.jpg在Code中输入固定指令“所有图片路径使用相对路径./assets/images/xxx.png禁止使用绝对路径或/images/”。实操心得我建了个图片检查清单每次添加新图前必查① 是否在/assets/images/目录② 文件名是否全小写③ 格式是否为PNG/JPEG④ 尺寸是否2MBGitHub Pages限制。这让我彻底告别图片加载失败。4.4 字体未生效Web字体加载的静默失败现象网页显示默认字体而非指定的思源黑体。真相AI生成的CSS中font-family: Source Han Sans SC未包含Web字体加载代码浏览器找不到本地字体。我的双保险方案方案1推荐使用Google Fonts CDN。在Code中输入“在HTML head中添加Google Fonts链接加载Source Han Sans SC字体族名为source-han-sans-sc”。AI会插入link hrefhttps://fonts.googleapis.com/css2?familySourceHanSansSC:wght300;400;700displayswap relstylesheet并修改CSS为font-family: Source Han Sans SC, sans-serif;方案2本地字体。下载思源黑体OTF文件放入/assets/fonts/在CSS中用font-face声明。注意不要用系统字体栈如Helvetica Neue, Arial这会导致各设备显示不一致。Web字体是保证视觉统一的唯一方案。4.5 链接跳转失效锚点与路由的迷雾现象点击导航栏“服务”链接页面无反应或跳转到错误位置。根源分析锚点ID是否匹配AI可能生成a href#services服务/a但目标区块ID是idservice少s是否缺少平滑滚动原生锚点跳转生硬需CSS或JS增强GitHub Pages是否启用HTML5 History API默认不支持/services路由只支持/#services。我的终极修复指令修复所有导航链接 1. 确保href值与目标区块id完全一致包括大小写和复数 2. 为所有a[href^#]添加CSSscroll-behavior: smooth 3. 在JavaScript中添加document.querySelectorAll(a[href^#]).forEach(anchor { anchor.addEventListener(click, function(e) { e.preventDefault(); const target document.querySelector(this.getAttribute(href)); if (target) { target.scrollIntoView({ behavior: smooth }); } }); });AI会生成完整修复代码粘贴到HTML底部即可。4.6 响应式断点错乱像素战争的精确制导现象平板端768-1024px显示异常既不像手机也不像电脑。破局关键AI默认只设768px和768px两个断点但真实设备有多个区间。我的四段式断点体系/* 手机端 */ media (max-width: 767px) { ... } /* 平板竖屏 */ media (min-width: 768px) and (max-width: 1023px) { ... } /* 平板横屏/小桌面 */ media (min-width: 1024px) and (max-width: 1279px) { ... } /* 桌面端 */ media (min-width: 1280px) { ... }在Code中输入“按四段式断点重写所有媒体查询为平板竖屏768-1023px单独设置服务模块为2列布局案例模块为1列”。AI会生成精准适配代码。实操心得我用Chrome设备模拟器的“Responsive”模式挨个测试768、1024、1280三个关键像素点确保每个断点切换时布局自然过渡。这比盲目堆砌断点更有效。4.7 GitHub Pages部署失败Jekyll的意外拦截现象GitHub Pages设置后访问显示404或显示Jekyll构建错误。罪魁祸首GitHub Pages默认启用Jekyll会忽略以_开头的文件夹如_assets或尝试解析.html文件中的Liquid语法。我的零配置解决方案在仓库根目录创建.nojekyll文件空文件在Code中输入“在仓库根目录创建.nojekyll文件禁止Jekyll构建”确认Pages设置中Source选择“Deploy from a branch”Branch选“main”Folder选“/(root)”。关
Claude Code普通人建站指南：用自然语言实现数字表达权
发布时间：2026/7/11 13:12:13
1. 这不是“用AI做网站”而是普通人第一次真正拥有数字表达权2026年春天我在杭州一家独立设计工作室做品牌咨询日常要给客户出方案、写提案、搭轻量级展示页。去年这时候我还在为改第十版PPT配色焦头烂额今年三月我用Claude Code在咖啡馆靠窗位点了一杯美式花47分钟建好一个带响应式布局、微信扫码入口、服务模块可折叠的个人作品集网站并直接发给了正在看竞标文件的客户。整个过程里我确实没碰过VS Code的终端窗口没手敲过div标签也没在GitHub页面上点过“New file”按钮——但最关键的是我第一次感到这个网站不是“借来的模板”不是“套用的SaaS后台”它从逻辑结构到视觉节奏都长在我的脑子里只是由AI替我落笔成形。这背后没有魔法只有一套可拆解、可复现、可迁移的思维动作。很多人把这件事理解成“AI替代程序员”其实完全错了。Claude Code真正的价值是把过去被技术门槛锁死的数字表达权第一次平等地交到了非技术人员手上。就像1984年Macintosh让普通人能用鼠标画图2004年WordPress让小商家能自己发博客2026年的Claude Code让一个连HTML基础概念都说不全的市场总监、自由插画师、社区运营者能亲手定义自己的数字门面——不是选模板、填内容而是从信息架构开始一句一句说出“我希望访客第一眼看到什么”“点击‘服务’后应该展开几层信息”“手机横屏时联系表单要不要自动收起”。这种掌控感和你用Figma拖拽组件有本质区别Figma给你的是像素控制权Claude Code给你的是意图实现权。我特意统计了这七天里自己最常使用的三个中文句式它们构成了普通人与AI协作建站的语言底层第一类是空间锚定句“首页顶部留白比现在多50%标题下方加一条2px的浅灰分割线”——不用说“修改CSS的margin-top和border-bottom”而是用设计师日常沟通的空间感描述第二类是行为映射句“点击‘立即咨询’按钮后弹出微信二维码同时页面背景变暗”——把用户动作和界面反馈直接挂钩跳过DOM事件监听、CSS transition等中间层第三类是约束声明句“所有文字用思源黑体字号层级只允许出现16px/18px/24px/32px四档禁止使用红色系”——用设计规范语言代替技术实现路径让AI在生成时自动过滤掉不符合约束的方案。这三类句子就是普通人撬动代码世界的杠杆支点。它不依赖你懂JavaScript闭包而依赖你清楚自己想传递什么情绪、引导什么行为、守住什么边界。接下来我会用七天时间线把这套方法论掰开揉碎——不是教你怎么点按钮而是带你重建一套“人话驱动开发”的肌肉记忆。你不需要记住任何命令只需要记住当你说得越像在跟一个资深前端同事当面提需求AI产出就越接近你心里的画面。2. 核心能力分层解析为什么必须按Chat→Project→Cowork→Code顺序推进2.1 Chat不是聊天工具而是“思维校准器”很多人把Claude Chat当成高级搜索引擎输入“怎么建网站”等着AI给教程链接。这恰恰踩中了第一个认知陷阱。Chat真正的核心价值在于帮你完成想法具象化训练——把大脑里模糊的“想要个专业点的页面”转化成可执行的最小单元指令。举个真实例子第三天我打算建个人作品集时最初对Chat说“帮我做个作品集网站”。结果它返回了包含导航栏、轮播图、项目网格、页脚的完整HTML代码但所有内容都是Lorem Ipsum占位符配色是默认蓝灰。这根本不能用。于是我退回Chat做了三轮迭代第一轮聚焦信息架构“我的作品集需要展示平面设计、UI设计、品牌咨询三类工作。每类工作下我要放3个代表作。每个代表作需包含项目名称、服务周期、核心解决的问题、1张主图、2句效果描述。请用树状图列出这个结构。”第二轮锁定视觉基调“参考[附截图]这个网站的呼吸感文字行高1.8卡片圆角8px主色调用#3a5fae深青蓝和#f8f9fa极浅灰禁用阴影。请用文字描述这个风格的关键词。”第三轮定义交互逻辑“访客进入首页后首屏只显示大标题‘李明品牌策略与视觉系统’和副标题‘用系统思维解决增长问题’。滚动到第二屏才出现三类工作导航。点击任一导航项页面平滑滚动到对应作品区块。请用自然语言描述这个交互流程。”这三轮对话花了22分钟但换来的是当我进入Code环节时输入的第一句话就精准到“创建GitHub仓库my-portfolio按上述三轮确认的信息架构和视觉规范建站”。没有这22分钟的校准Code环节会陷入无休止的试错循环。Chat在这里扮演的角色本质上是降低后续环节的熵值——你花在Chat上的每一分钟都在为Code节省三倍以上的返工时间。提示别怕在Chat里反复推翻重来。我有个实操技巧每次迭代后把AI输出的结构化结果复制到备忘录用不同颜色标注“已确认”“待验证”“需补充”。七天下来我的备忘录里积累了17个这样的决策快照它们成了整个项目的“事实真相库”。2.2 Project让AI拥有你的“职业人格”Project功能被严重低估根本原因在于人们把它当成“存对话记录的文件夹”。实际上它是Claude生态里最关键的上下文固化装置。当你建立一个Project时你不是在创建对话空间而是在给AI注入你的职业DNA。我建立了三个核心Project每个都经过刻意设计“品牌策略写作”Project上传了我过去三年写的23篇行业分析报告PDF、一份《客户沟通禁忌清单》Markdown文档、一段3分钟语音我朗读自己最满意的一段文案强调停顿和语气。系统指令写的是“你是我十年合作的策略搭档熟悉我服务过的新消费品牌案例说话简洁有力避免形容词堆砌所有建议必须附带可落地的执行步骤。”“视觉系统提案”Project上传了5套完整VI手册含字体规范、色彩系统、应用示例、3份客户否定反馈邮件截图、一份《甲方决策链分析表》。系统指令是“你是我团队里的首席视觉架构师清楚知道CMO关注数据呈现设计总监在意细节精度实习生负责执行。所有输出需分三层给CMO的一页摘要、给设计总监的规范说明、给实习生的执行checklist。”“个人作品集”Project上传了本次建站的三轮Chat决策快照、两份客户表扬邮件、一张我手绘的网站草图照片。系统指令是“你是我专属的数字门面建筑师所有建议必须符合‘专业但不冰冷、系统但有温度’的核心调性。当不确定时优先选择增加留白、减少元素、强化文字层级。”关键差异在于在普通Chat里问“这个配色是否专业”AI会基于通用设计原则回答而在“个人作品集”Project里问同样问题AI会调取我上传的VI手册里的色彩心理学注释对比客户表扬邮件里提到的“信任感”关键词再结合手绘草图中的留白比例给出“当前#3a5fae饱和度偏高建议降至#2d4b8c与#f8f9fa形成更柔和的权威感”的具体建议。注意Project的威力不在数量而在“不可替代性”。我试过把所有资料塞进一个Project结果AI经常混淆不同场景的语境。后来发现每个Project必须满足三个条件①有明确的职业角色定位不是“助手”而是“搭档”②有至少一份真实业务产出物不是理论文档而是客户邮件/方案稿③有可验证的行为约束如“所有输出必须带执行步骤”。少一个条件上下文就会稀释。2.3 Cowork从“对话”到“共编”的临界点Cowork常被误认为是“带编辑框的Chat”但它真正的革命性在于消除了意图衰减链。在传统工作流中你的想法要经历“脑内构思→口头/文字描述→AI理解→AI生成→你阅读→你识别偏差→你重新描述”七次衰减。Cowork砍掉了其中四次——当你指着文档里某段说“这里太学术改成菜市场大妈能听懂的话”AI当场重写你立刻看到效果偏差归零。我用Cowork完成作品集文案的真实过程第一步在右侧文档区输入AI根据Project生成的初稿约800字。第二步用鼠标框选“品牌策略服务”段落输入指令“这段里‘系统性解决方案’‘价值重构’‘认知升维’三个术语全部删除换成具体动作比如‘帮客户把logo从旧版改成新版’‘把产品包装从杂乱改成统一视觉’‘让官网跳出率从70%降到35%’。”第三步AI重写后我发现数据案例不够直观于是框选整段输入“把所有百分比数据替换成客户原话。例如‘跳出率降到35%’改成‘客户说以前访客看了3秒就关掉现在平均停留2分17秒’。”第四步发现服务模块排列逻辑混乱直接拖动段落调整顺序然后输入“按客户决策路径重排先看到‘我们做什么’服务列表再看到‘做过什么’案例最后看到‘怎么合作’流程。每部分加小标题用emoji图标区分。”这个过程没有复制粘贴没有切换窗口没有重新描述上下文。AI始终在同一个语境里响应你的即时反馈。更关键的是Cowork的文档区支持Markdown实时渲染我输入## 服务流程立刻看到二级标题样式输入- [ ] 需求诊断自动变成带复选框的列表。这种所见即所得让非技术人员第一次拥有了“边思考边构建”的能力。实操心得Cowork的隐藏价值在于“错误可视化”。在Chat里AI可能用华丽辞藻掩盖逻辑漏洞在Cowork里漏洞直接暴露在文档结构中。比如我曾让AI写“服务优势”它生成了五点并列描述但当我把这五点拖成流程图时发现第三点和第五点存在因果倒置——这促使我追问“这五点之间是否存在先后关系能否用箭头连接”最终重构出“诊断→策略→设计→落地→复盘”的真实服务链。这种在视觉层面暴露逻辑缺陷的能力是纯对话模式永远做不到的。2.4 Code不是写代码而是“指挥数字世界”Claude Code常被称作“核武器”但它的真正威力不在于生成代码的速度而在于将抽象意图翻译成可执行数字实体的保真度。当你在Code界面输入“帮我建个网站”AI生成的是代码当你输入“帮我建个让客户一眼看懂我能解决什么问题的网站”AI生成的是以用户认知路径为蓝图的数字空间。Code环节的四个不可跳过动作① 权限预设在开启Code前必须在设置中打开“自动接受编辑”并连接GitHub。很多新手卡在这一步反复点击“允许”却不知为何。真相是Claude Code需要获得文件系统操作权限才能创建文件夹、写入HTML/CSS、提交Git。这就像给AI配一把万能钥匙而不是让它每次敲门都等你开门。② 项目锚定不要在空白Code界面输入需求。先在Project里确认好信息架构、视觉规范、交互逻辑再把Project链接粘贴到Code对话框顶部。我习惯输入“基于‘个人作品集’Project的所有约定创建GitHub仓库my-portfolio执行建站任务。”这样AI会自动调取VI手册里的色彩值、文案快照里的客户原话、手绘草图中的布局比例。③ 迭代闭环Code不是“一次生成永久使用”而是“生成→验证→修正→再生成”的螺旋。我建站时的典型循环是第一轮生成基础框架HTML结构基础CSS→ 在浏览器打开 → 发现手机端导航栏错位第二轮输入“修复移动端导航栏当屏幕宽度768px时导航栏改为汉堡菜单点击展开垂直列表” → AI修改CSS媒体查询 → 刷新查看第三轮发现微信二维码尺寸过小 → 输入“二维码图片放大至200×200px添加10px白色描边居中显示在页脚” → AI修改HTML img标签和CSS → 再次验证④ 约束强化每次迭代都要叠加新约束。初始约束是“用思源黑体”第二轮加入“所有按钮悬停状态必须有0.3秒缓动”第三轮加入“所有图片加载失败时显示灰色占位图文字提示”。这些约束像编程里的TypeScript类型定义不断收窄AI的发挥空间确保最终产物严格符合你的预期。关键洞察Code环节最危险的误区是把AI当“代码生成器”而忽略它作为“数字世界导演”的本质。当你要求“加个微信二维码”AI可能生成base64编码的图片也可能生成调用微信JS-SDK的API调用——前者适合静态展示后者适合动态交互。你需要用约束告诉它“只要静态图片不要任何JavaScript”。这种对数字实体属性的精准定义能力才是Code时代的核心竞争力。3. 七日实操全记录从零到上线的完整路径与避坑指南3.1 Day 1-2Chat与Project筑基——用2小时换7天效率Day 1上午模型选择实战课我注册Claude Pro后做的第一件事不是建网站而是做模型压力测试。打开Chat分别用Sonnet 4.6和Opus 4.6执行同一任务“分析这份会议纪要粘贴300字文本提取3个待办事项按紧急程度排序并为每个事项写一句向老板汇报的话”。Sonnet 4.6用时12秒输出清晰但遗漏了纪要中隐含的跨部门协作风险Opus 4.6用时38秒不仅列出待办还指出“市场部与技术部在Q3排期上存在冲突建议下周三方同步会”汇报话术也更符合高管语境。结论很明确Sonnet是日常办公的瑞士军刀Opus是攻坚克难的液压钳。我给自己定下铁律处理信息整理、文案润色、简单问答用Sonnet涉及逻辑推理、长文本分析、多约束决策时无条件切Opus。这个选择让我在后续Code环节节省了大量返工时间——当AI需要同时处理“响应式布局”“配色系统”“交互动效”三重约束时Sonnet常会顾此失彼而Opus能保持全局一致性。Day 1下午Project创建三原则我创建“个人作品集”Project时严格遵循三个原则真实性原则上传的不是理论文档而是真实业务资产。我把上周刚交付的客户方案PDF、客户签字的验收单扫描件、甚至微信里客户夸“这个配色让投资人眼前一亮”的聊天截图全部拖进Project。AI看到的不是抽象概念而是带着温度的业务证据。可验证原则系统指令必须能被客观检验。我写“所有文案必须包含至少一个客户原话”而不是“文案要真实可信”。第二天AI生成“服务优势”段落时我直接搜索“客户说”发现它真的嵌入了三处真实对话证明指令生效。最小必要原则每个Project只放最核心的3-5份材料。曾试图上传20份资料结果AI在响应时频繁引用无关文件。后来精简为1份VI手册定义视觉、1份客户表扬邮件定义价值、1份手绘草图定义结构效果立竿见影。Day 2全天Project深度训练我用真实任务训练Project任务1把一份5000字的行业白皮书压缩成300字朋友圈文案。在Project里输入“用‘个人作品集’Project的语境把这份白皮书核心观点写成朋友圈文案。要求开头用疑问句引发好奇中间用客户原话佐证结尾带行动号召。禁止使用‘赋能’‘抓手’‘颗粒度’等黑话。”任务2根据客户反馈修改提案。我上传了客户批注的PDF手写“这里太技术”“数据来源不明”在Project里输入“按客户批注修改提案第3页。把技术术语‘用户旅程地图’改成‘客户从看到广告到下单的全过程’所有数据补充来源说明例如‘35%转化率提升来自2025年Q2天猫数据’。”这两项任务让我彻底理解Project不是知识库而是决策校验器。当AI输出的内容偏离我的职业语境时它会立刻暴露——这正是训练的价值所在。3.2 Day 3-4Cowork协作实战——告别复制粘贴的窒息感Day 3用Cowork重写作品集文案我打开Cowork右侧文档区粘贴了Chat生成的初稿。重点操作如下结构手术用鼠标拖拽将“关于我们”段落移到“服务内容”之后。因为客户调研显示访客更关心“你能解决什么”而非“你是谁”。拖动后输入“按客户决策路径重组服务→案例→流程→关于。每个模块加icon服务模块用️案例模块用流程模块用⏳关于模块用。”语言降维框选“策略性视觉系统构建”整段输入“把所有专业术语替换成客户能懂的动作描述。例如‘视觉系统构建’改成‘帮客户统一所有地方的logo、字体、颜色’‘品牌资产沉淀’改成‘把客户的好口碑变成能重复用的设计素材’。”证据植入在“服务内容”模块AI写了“提升品牌专业度”。我框选这句话输入“替换为具体客户成果‘帮XX茶饮品牌统一全国300家门店视觉开业3个月复购率提升22%’。”整个过程像在指挥一个隐形团队左边对话框是项目经理右边文档是施工工地我随时叫停、调整、验收。Day 4Cowork搭建信息架构这是最容易被忽视的关键步。我新建一个Cowork文档标题为“作品集信息架构”在右侧输入首页 ├─ 大标题李明品牌策略与视觉系统 ├─ 副标题用系统思维解决增长问题 ├─ CTA按钮查看服务详情 └─ 滚动指示向下箭头 服务页 ├─ 三大服务模块平面/ UI / 品牌 ├─ 每模块含服务描述、3个代表作、客户原话 └─ 底部CTA预约15分钟免费咨询 案例页 ├─ 按行业分类新消费/科技/文化 ├─ 每案例含挑战、我的动作、客户成果 └─ 所有成果用客户原话数据支撑然后输入指令“把这个架构转成可点击的原型图。首页大标题用32px副标题用18pxCTA按钮圆角6px所有文字用思源黑体。导出为PNG。” AI生成后我直接发给客户“这是我们网站的骨架您看信息流是否符合您的预期”——这比发代码或设计稿更早锁定需求。避坑笔记Cowork最大的陷阱是“过度编辑”。我曾连续修改文案17次结果发现AI开始机械重复句式。后来学会“三击法则”每次修改后用鼠标三击选中整段输入“用完全不同句式重写保持原意”。这迫使AI跳出思维定式产出更自然的表达。3.3 Day 5-7Code建站全流程——从第一行代码到上线部署Day 5上午环境准备与权限打通注册GitHub用公司邮箱注册用户名用拼音全名避免特殊字符密码启用双重验证。安装VS Code下载官方版本安装时勾选“Add to PATH”确保终端能调用code命令。配置Claude扩展在VS Code扩展商店搜索“Claude Code”安装后重启。进入设置Ctrl,搜索“claude skip permissions”勾选“Enable Skip Permissions”。这三步看似简单但90%的失败源于此。常见问题GitHub用户名含下划线导致仓库创建失败 → 改用短横线或纯字母VS Code未勾选Add to PATH → Claude无法调用本地编辑器 → 终端报错“command not found”“Skip Permissions”未启用 → 每次生成文件弹窗确认打断工作流。我专门做了张检查表贴在显示器边框步骤验证方式GitHub注册成功能正常访问https://github.com/yournameVS Code可调用终端输入code --version返回版本号Claude扩展生效Claude桌面端设置里显示“VS Code connected”Day 5下午Code首次建站打开Claude桌面端点击Code标签选择Opus 4.6确认“自动接受编辑”已开启。输入基于“个人作品集”Project的所有约定创建GitHub仓库my-portfolio。 执行建站任务 1. 首页大标题32px副标题18pxCTA按钮圆角6px所有文字思源黑体 2. 服务页三大模块横向排列手机端堆叠每模块含服务描述3案例客户原话 3. 案例页按行业分类每案例含挑战/动作/成果三段式结构 4. 全局配色#3a5fae#f8f9fa所有图片加载失败显示灰色占位图 5. 导出可访问链接AI开始自动生成先创建仓库再写index.html接着生成style.css最后提交到GitHub。全程约8分钟期间我去做了一杯咖啡。回来时AI已给出在线预览链接https://yourname.github.io/my-portfolio。Day 6迭代优化实战打开预览链接发现三个问题问题1手机端服务模块未堆叠仍是横向排列问题2案例页客户原话字体太小且未加引号问题3页脚微信二维码尺寸过小我回到Code对话框逐条输入修正指令1. 修复移动端服务模块当屏幕宽度768px时服务模块flex-direction设为column间距改为20px 2. 案例页客户原话字体大小设为16px前后加「」符号行高1.6 3. 页脚二维码图片尺寸200×200px添加10px白色描边居中显示AI修改后我刷新页面全部解决。这时我意识到Code的迭代成本远低于传统开发。在传统流程中改一个CSS属性要重启本地服务器、清缓存、多端测试在Code里就是一句话一次刷新。Day 7上线与交付最后一步是让网站真正可用在GitHub仓库Settings → Pages选择main分支根目录保存等待1分钟访问https://yourname.github.io/my-portfolio确认HTTPS生效用Chrome开发者工具的Lighthouse跑分优化到90主要优化图片懒加载和字体预加载生成二维码打印在名片背面。交付时我给客户发了三样东西在线链接https://yourname.github.io/my-portfolioGitHub仓库地址方便他未来自己更新内容一份《维护指南》Markdown文档用Cowork生成如何更新服务案例打开index.html找到!-- SERVICE CASES --注释按格式添加新案例如何更换微信二维码替换/assets/wechat.png文件如何修改配色修改style.css中:root变量实操心得Code环节最该警惕的是“完美主义陷阱”。我曾花3小时调整按钮悬停动效结果客户说“能点就行”。后来明白AI建站的核心价值是“快速验证”不是“极致完成”。把80%精力放在信息架构和文案质量上剩下20%交给AI生成这才是高效路径。4. 真实问题排查手册七个高频故障与我的应对策略4.1 GitHub仓库创建失败权限与命名的双重雷区现象输入创建仓库指令后AI返回错误“Repository creation failed: Invalid repository name”。排查路径检查GitHub用户名是否含大写字母、空格、特殊符号如、#GitHub只接受小写字母、数字、短横线。检查仓库名是否以短横线开头/结尾是否含下划线是否超过100字符检查GitHub权限在GitHub Settings → Applications → Authorized OAuth Apps确认Claude有“public_repo”权限。我的解决方案建立命名公约仓库名一律用小写字母短横线如my-portfolio、brand-case-studies预检脚本在VS Code新建文件repo-check.js粘贴以下代码const repoName my_portfolio; // 替换为你想用的名字 const isValid /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/.test(repoName) repoName.length 100; console.log(isValid ? ✅ 可用 : ❌ 不可用);运行后终端输出✅即表示命名合规。注意不要用中文或拼音缩写如li-mingGitHub对非ASCII字符支持不稳定。我吃过亏——用lǐmíng建仓失败三次改用liming一次成功。4.2 页面样式错乱CSS作用域污染的隐形杀手现象电脑端显示正常手机端导航栏错位或文字行高异常。根本原因AI生成的CSS未正确设置媒体查询作用域或全局样式被局部样式覆盖。我的诊断三步法打开浏览器开发者工具F12切换到手机模拟模式点击错位元素在Styles面板查看实际生效的CSS规则搜索media确认是否有针对max-width: 767px的规则且该规则是否被更高优先级样式覆盖。实战修复案例我的服务模块在手机端仍横向排列检查发现AI生成的媒体查询写成了media (max-width: 768px) { .services { flex-direction: column; } }但.services类被另一个全局样式* { box-sizing: border-box; }干扰。我输入指令“在手机端媒体查询中为.services添加!important并确保flex-direction生效”。AI重写为media (max-width: 767px) { .services { flex-direction: column !important; gap: 20px !important; } }刷新后问题解决。关键技巧当样式问题反复出现时不要逐行修改CSS而是让AI重写整个媒体查询区块。我输入“重写所有手机端媒体查询确保.services、.case-item、.footer元素在768px时正确堆叠使用flex-column和gap属性移除所有可能冲突的全局样式”。4.3 图片加载失败路径与格式的致命组合现象网页显示灰色方块右键检查显示“Failed to load resource: net::ERR_FILE_NOT_FOUND”。排查重点图片路径是否相对路径AI常生成/images/logo.png但实际文件在assets/images/logo.png图片格式是否支持GitHub Pages只支持PNG/JPEG/GIF不支持WebP除非配置额外插件文件名大小写是否匹配Linux服务器区分大小写Logo.png≠logo.png。我的标准化流程所有图片统一存放于/assets/images/目录文件名全小写短横线如wechat-qrcode.png、case-01.jpg在Code中输入固定指令“所有图片路径使用相对路径./assets/images/xxx.png禁止使用绝对路径或/images/”。实操心得我建了个图片检查清单每次添加新图前必查① 是否在/assets/images/目录② 文件名是否全小写③ 格式是否为PNG/JPEG④ 尺寸是否2MBGitHub Pages限制。这让我彻底告别图片加载失败。4.4 字体未生效Web字体加载的静默失败现象网页显示默认字体而非指定的思源黑体。真相AI生成的CSS中font-family: Source Han Sans SC未包含Web字体加载代码浏览器找不到本地字体。我的双保险方案方案1推荐使用Google Fonts CDN。在Code中输入“在HTML head中添加Google Fonts链接加载Source Han Sans SC字体族名为source-han-sans-sc”。AI会插入link hrefhttps://fonts.googleapis.com/css2?familySourceHanSansSC:wght300;400;700displayswap relstylesheet并修改CSS为font-family: Source Han Sans SC, sans-serif;方案2本地字体。下载思源黑体OTF文件放入/assets/fonts/在CSS中用font-face声明。注意不要用系统字体栈如Helvetica Neue, Arial这会导致各设备显示不一致。Web字体是保证视觉统一的唯一方案。4.5 链接跳转失效锚点与路由的迷雾现象点击导航栏“服务”链接页面无反应或跳转到错误位置。根源分析锚点ID是否匹配AI可能生成a href#services服务/a但目标区块ID是idservice少s是否缺少平滑滚动原生锚点跳转生硬需CSS或JS增强GitHub Pages是否启用HTML5 History API默认不支持/services路由只支持/#services。我的终极修复指令修复所有导航链接 1. 确保href值与目标区块id完全一致包括大小写和复数 2. 为所有a[href^#]添加CSSscroll-behavior: smooth 3. 在JavaScript中添加document.querySelectorAll(a[href^#]).forEach(anchor { anchor.addEventListener(click, function(e) { e.preventDefault(); const target document.querySelector(this.getAttribute(href)); if (target) { target.scrollIntoView({ behavior: smooth }); } }); });AI会生成完整修复代码粘贴到HTML底部即可。4.6 响应式断点错乱像素战争的精确制导现象平板端768-1024px显示异常既不像手机也不像电脑。破局关键AI默认只设768px和768px两个断点但真实设备有多个区间。我的四段式断点体系/* 手机端 */ media (max-width: 767px) { ... } /* 平板竖屏 */ media (min-width: 768px) and (max-width: 1023px) { ... } /* 平板横屏/小桌面 */ media (min-width: 1024px) and (max-width: 1279px) { ... } /* 桌面端 */ media (min-width: 1280px) { ... }在Code中输入“按四段式断点重写所有媒体查询为平板竖屏768-1023px单独设置服务模块为2列布局案例模块为1列”。AI会生成精准适配代码。实操心得我用Chrome设备模拟器的“Responsive”模式挨个测试768、1024、1280三个关键像素点确保每个断点切换时布局自然过渡。这比盲目堆砌断点更有效。4.7 GitHub Pages部署失败Jekyll的意外拦截现象GitHub Pages设置后访问显示404或显示Jekyll构建错误。罪魁祸首GitHub Pages默认启用Jekyll会忽略以_开头的文件夹如_assets或尝试解析.html文件中的Liquid语法。我的零配置解决方案在仓库根目录创建.nojekyll文件空文件在Code中输入“在仓库根目录创建.nojekyll文件禁止Jekyll构建”确认Pages设置中Source选择“Deploy from a branch”Branch选“main”Folder选“/(root)”。关
