1. 项目概述一个为AI代理设计的个人网站生成工作流如果你也曾经尝试过用AI来生成一个个人网站大概率会遇到这样的场景你满怀期待地输入了你的简历和一堆资料结果AI给你吐出来一个页面——它可能很“炫”充满了各种无意义的动画也可能很“素”像一个直接从Word文档转换过来的网页毫无设计感更常见的是它在手机上直接布局错乱或者文案充满了“赋能”、“协同”、“闭环”这类AI味十足的废话。你看着这个半成品感觉用它去求职或展示自己还不如直接发PDF简历来得实在。这正是Openclaw-personal-site-builder-cn-distribution这个项目要解决的问题。它不是一个简单的网页模板也不是一个拖拽式建站工具。它本质上是一套为AI编码代理AI coding agent设计的、高度结构化的“工作方法”或“技能包”。它的核心目标非常明确指导AI将一个普通人零散的求职资料简历、项目、照片等转化成一个真正体面、可用、且符合中文求职场景的静态网站。这套技能包skill的诞生源于一个非常现实的痛点现有的AI代理在生成网站时缺乏对“成品质量”和“使用场景”的深度理解。它们能写代码但不懂设计原则能填充内容但不懂信息优先级能生成页面但不懂部署上线。这套skill就是一套“交规”和“导航”告诉AI“嘿当你接到‘做个个人网站’这个任务时请按照我给你的这套规则和流程来走避开那些常见的坑最终交付一个用户真的敢拿去用的东西。”它特别强调“中文优先”和“求职展示”。这意味着它生成的网站其信息结构、文案风格、视觉节奏都是为中文阅读习惯和招聘场景优化的。面试官打开这个网站应该在10秒内知道你是谁、你能做什么、如何联系你而不是迷失在酷炫的动效或空洞的“个人宣言”里。2. 核心设计思路与工作流拆解2.1 从“生成代码”到“交付成品”的思维转变大多数AI建站工具或提示词其思维终点是“生成一个HTML文件”。而personal-site-builder-cn的思维终点是“交付一个可部署、可访问、符合预期的静态网站目录”。这中间的差异就是这套skill的价值所在。为了实现这个目标它的设计思路围绕以下几个核心原则展开流程驱动而非单点提示它不是一个简单的对话开场白prompt而是一个包含多个阶段的工作流workflow。AI代理需要按顺序执行“资料读取与评估 - 信息结构化 - 页面生成与设计 - 静态资源打包 - 可选部署上线”这一系列动作。workflow.md文件正是为此而生它像一份项目的“阶段划分图”防止AI一上来就埋头写代码忽略了前置的信息整理。规则约束而非自由发挥AI在缺乏约束时容易天马行空。SKILL.md文件充当了“设计总监”和“产品经理”的角色明确了一系列“必须做”和“不许做”的规则。例如“不允许大面积无意义空白”、“不允许AI味过重的文案”、“移动端导航不能压坏布局”。这些具体的、可执行的规则将主观的“好看”和“好用”转化为了客观的代码和样式检查点。场景化输入与容错处理它承认用户的输入可能是不完美的。因此skill内置了两种输入路径对于资料齐全的用户直接处理对于资料不全的用户则通过一套预设的问题如目标岗位、经验年限、核心优势进行交互式补齐。这个设计极大地提升了实用性让用户即使在只有零散想法时也能启动项目。产出标准化最终的输出被严格定义为一个完整的静态网站目录结构包含index.html,styles.css,robots.txt,sitemap.xml等而不是一堆散落的文件。这为后续的自动化部署和分发铺平了道路。2.2 文件架构与角色分工项目仓库的文件结构清晰地反映了这套分工协作的体系personal-site-builder-cn-distribution/ ├─ README.md # 项目总览面向所有访客 ├─ USAGE.md # 使用指南面向终端用户 ├─ OPENCLAW-NOTES.md # 集成指南面向特定AI工具如OpenClaw用户 ├─ AGENT-RUNBOOK.md # 执行手册面向AI代理本身 └─ skill/ └─ personal-site-builder-cn/ ├─ SKILL.md # 核心规则与质量标准 ├─ agents/ │ └─ openai.yaml # 代理配置示例 └─ references/ ├─ workflow.md # 阶段化工作流定义 └─ langgpt-prompt.md # 对话起始提示词SKILL.md这是宪法。它定义了网站的“气质”和“底线”。所有关于设计、内容、体验的最终标准都源于此。AI代理在编写每一行代码、设计每一个样式时都应回溯此文件进行自查。workflow.md这是项目管理甘特图。它将建站这个复杂任务分解为线性可执行的步骤如“阶段一资料审计与补全”、“阶段二信息架构设计”、“阶段三视觉风格定调”、“阶段四页面实现与测试”。AI代理按照这个流程推进能有效降低任务复杂度避免遗漏关键环节。AGENT-RUNBOOK.md这是飞行员检查单。它比workflow更细致包含了每个步骤的具体操作指令、成功/失败的条件判断、以及出错时的回退方案。例如“尝试读取./materials/resume.pdf如果文件不存在则触发问答流程Q1-Q5”。这确保了AI代理行为的确定性和可重复性。langgpt-prompt.md这是任务简报。它是一个精心编写的、可直接喂给AI如ChatGPT, Claude的初始提示词用于快速将AI“代入角色”理解它即将要执行的是一个有严格规范的建站任务而不是一次自由的创意写作。这种架构的好处在于关注点分离。用户只需关心USAGE.mdAI集成者关心OPENCLAW-NOTES.md而AI代理自己则在SKILL.md、workflow.md和AGENT-RUNBOOK.md的共同指导下工作。这使得整个系统易于理解、维护和适配。实操心得为什么需要这么多文件很多开发者倾向于把所有规则写在一个巨大的Prompt里但这在实际操作中非常低效。当需要调整部署逻辑时你不得不去一个上千行的文本里寻找相关段落。而本项目的模块化设计使得你可以单独更新“设计规则”改SKILL.md或“部署流程”改AGENT-RUNBOOK.md中的相关章节互不干扰。这对于迭代优化至关重要。3. 核心技能规则深度解析SKILL.md是这个项目的灵魂它详细规定了生成网站时必须遵守的“军规”。理解这些规则就能理解这个项目所追求的网站品质。我们来逐条拆解其背后的设计逻辑。3.1 中文语境与求职优先规则体现“不是把英文 portfolio 站生硬翻译成中文而是按中文阅读和中文招聘场景来组织信息。”、“默认目标读者是 HR、面试官、合作方。”深度解析 英文的个人作品集Portfolio网站和中文的求职展示网站在信息组织和表达重心上有本质区别。英文Portfolio常强调“叙事性”和“视觉冲击”个人项目案例是绝对核心简历Resume可能只是其中一个页面或可下载的PDF。文案风格偏向展示个性与创造力。中文求职场景HR和面试官首要目标是快速匹配岗位要求。因此核心技能、工作经历、项目成果必须放在最显眼、最易获取的位置。网站的整体风格应偏向专业、清晰、可靠而非过度张扬个性。因此AI在生成网站时需要做到信息结构倒置首页首要位置应是“个人简介核心技能工作经历”的摘要而非一个大大的艺术字名字或一段哲学式的个人宣言。文案去“翻译腔”避免使用“我是一名充满激情的XX工程师致力于用技术赋能世界”这类空洞表述。应使用更接地气、更具信息量的表述如“拥有X年XX领域开发经验擅长解决[某类具体问题]”。联系方式的显性化电话号码、邮箱、微信二维码等联系方式应在每个页面如页脚固定出现而不是藏在一个需要点击三次才能找到的“Contact”页面里。3.2 桌面与移动端的双重体验标准规则体现“桌面端不能散移动端不能炸。尤其移动端不允许标题失控、按钮拥挤、导航压坏布局。”深度解析 这要求AI不能仅仅使用简单的响应式框架如Bootstrap套用而必须进行真正的移动端优先Mobile-First和细节适配。字体与断行在移动端过长的标题或句子可能导致不自然的换行甚至一个词被拆成两行。AI需要运用CSS的hyphens,word-break,overflow-wrap等属性精细控制确保阅读流畅。导航栏处理桌面端的水平导航栏在移动端必须转化为汉堡菜单。但不止于此菜单项的文案在移动端可能需要缩短下拉菜单的触发区域要足够大遵循44x44pt的最小点击区域原则。表格与卡片简历或项目经历中的表格在移动端必须重新设计可能转化为堆叠的卡片或可横向滑动的区域绝不能出现需要左右滑动才能看完的表格。图片与性能技能要求中隐含了对性能的考量。AI应使用picture元素或设置srcset属性为不同屏幕尺寸提供合适的图片并确保图片经过压缩。注意事项移动端常见的“坑”视口Viewport务必在HTML头部设置meta name“viewport” content“widthdevice-width, initial-scale1”这是所有移动端适配的基础。固定定位Fixed Position底部联系栏或导航栏使用fixed定位时在iOS Safari上可能会与虚拟键盘产生交互问题需要测试。字体单位优先使用rem和em而非px以适应系统的字体大小设置。3.3 视觉与交互的克制哲学规则体现“不允许大面积无意义空白”、“不默认迷信重型动效”、“不允许联系页做成纪念碑广场”、“不允许二维码大卡片比内容还抢戏”。深度解析 这些规则共同指向一种“克制的设计感”。它反对两种极端一是过于稀疏、内容贫乏的“性冷淡风”二是过度装饰、动效喧宾夺主的“样板间风”。留白的意义留白White Space应该是节奏控制器用于分隔内容区块、引导视觉流、突出重要元素。而不是因为内容太少而被迫留下的空白。AI在布局时应通过网格系统CSS Grid/Flexbox确保内容密度合理。动效的服务性动画可以用于微交互反馈如按钮悬停、页面过渡、或渐进式展示内容。但应避免全屏动画、自动轮播的炫酷Banner以及复杂的滚动视差效果因为它们会分散对核心内容的注意力并可能影响页面性能。联系方式的平实化联系页面不应该只是一个孤零零的、居中显示的、带有阴影和光效的二维码卡片。它应该是一个包含多种联系渠道邮件、电话、社交链接、并附带简要说明的功能性区域。二维码应是选项之一而非视觉中心。3.4 代码质量与可维护性约束规则体现“不允许样式规则越改越乱最后用几十层覆盖互相打架。”深度解析 这是对AI生成代码质量的硬性要求。缺乏规划的CSS很容易变成“打补丁”式的代码选择器特异性Specificity越来越高最终难以维护。AI在编写样式时应遵循以下原则使用CSS方法论鼓励使用类似BEMBlock, Element, Modifier的命名约定或者至少保持清晰的类名结构如.profile-card,.profile-card__name,.profile-card--highlight。避免过度嵌套特别是在使用Sass/Less时过深的嵌套会增加选择器特异性降低性能。建立设计令牌Design Tokens在CSS开头定义颜色、字体、间距等变量CSS Custom Properties确保整个网站风格统一。结构化CSS文件建议按重置/基础样式 - 布局组件 - 通用组件 - 页面特定样式的顺序组织CSS代码。4. 自动化代理执行流程详解对于AI代理来说AGENT-RUNBOOK.md和workflow.md是它的“操作手册”。我们将这个端到端的流程拆解为可执行的步骤并补充每个步骤的实操细节和意图。4.1 阶段一环境初始化与资料审计目标确认工作目录评估输入资料的完整性。AI代理动作读取项目结构列出项目根目录下的文件和文件夹。预期找到materials/目录。扫描资料目录检查materials/内是否存在关键文件。必需项resume.pdf(或.docx,.txt)intro.txt(个人简介)links.txt(社交/作品链接)。可选项photos/,posters/,certs/等文件夹。完整性判断如果资料齐全进入阶段二。如果资料缺失触发“问答补齐”流程。根据AGENT-RUNBOOK.md中的预设问题列表向用户提问。例如Q1: 您正在寻找什么类型的岗位如前端开发、产品经理 Q2: 您拥有多少年的相关工作经验 Q3: 您最希望突出的3项核心技能或优势是什么 Q4: 请简述您认为最重要的1-2段工作或项目经历。 Q5: 您希望公开哪些联系方式邮箱、电话、微信等实操要点AI代理应尝试解析PDF或Word简历提取文本信息。可以使用如pdfplumber(Python) 或命令行工具pdftotext。links.txt的格式建议为每行一个链接可附带简单描述如https://github.com/yourname | GitHub 主页。AI应能解析这种格式。问答环节的问题应逐个提出并基于上一个答案进行适当追问以收集足够生成网站框架的信息。4.2 阶段二信息架构与内容规划目标将零散资料转化为清晰的网站内容蓝图。AI代理动作内容提炼从简历和简介中提取关键信息结构化如下个人基础信息姓名、职位、一句话简介。工作经历公司、职位、时间段、核心成就量化。项目经历项目名称、角色、技术栈、成果、链接如有。技能栈按类别分组如“编程语言”、“框架”、“工具”。教育背景学校、专业、学历、时间。网站结构设计规划网站的主要页面和导航。首页 (index.html)个人简介 核心技能亮点 精选项目/经历预览 显眼的行动号召如“查看完整简历”。简历页 (resume.html)完整、排版优美的简历详情提供PDF下载按钮。项目/作品页 (projects.html)可选。详细展示项目配图或链接。联系页 (contact.html)整合所有联系方式可嵌入简单联系表单。设计风格定调基于用户资料如岗位类型决定视觉倾向。技术类开发、算法偏向简洁、代码感、单色系高亮色。设计类UI/UX可更大胆地使用色彩、排版和留白。商务类产品、市场强调专业、清晰、可信赖。实操要点信息架构应输出为一个简单的JSON或Markdown大纲供后续阶段参考。例如{ “siteStructure”: [“首页”, “简历”, “项目”, “联系”], “homepageSections”: [“Hero简介”, “技能摘要”, “经历预览”, “CTA”], “primaryColor”: “#2563eb”, // 基于分析得出的主色调 “fontFamily”: “system-ui, -apple-system, sans-serif” // 安全字体栈 }4.3 阶段三静态网站实现与构建目标根据规划生成高质量的HTML、CSS、JavaScript代码。AI代理动作创建项目骨架在output-site/目录下生成标准的静态网站结构。output-site/ ├── site/ │ ├── index.html │ ├── resume.html │ ├── styles.css │ ├── script.js │ ├── assets/ # 存放图片、字体等 │ │ ├── profile.jpg │ │ └── project-1-screenshot.png │ ├── robots.txt │ ├── sitemap.xml │ └── site.webmanifest └── deploy/ # 存放部署配置如Cloudflare Pages的配置编写核心页面HTML使用语义化标签header,main,section,article。确保所有图片有alt属性链接有title属性。CSS采用移动端优先的响应式设计。使用Flexbox/Grid进行布局。将SKILL.md中的设计规则转化为具体的CSS代码如控制行高、间距、颜色对比度。JavaScript仅用于必要的交互如移动端菜单切换、表单验证。保持轻量。集成SEO与PWA基础在HTMLhead中正确设置title,description,keywords元标签。生成sitemap.xml列出所有页面。生成robots.txt允许搜索引擎抓取。创建site.webmanifest并提供图标使网站可被添加到手机主屏幕。资源处理将materials/photos/中的图片复制到assets/并使用工具可调用如sharp库或ImageMagick命令进行优化压缩。实操要点样式组织建议将styles.css分为几个部分/* 1. CSS变量 (设计令牌) */ :root { --primary-color: #2563eb; --spacing-unit: 0.5rem; } /* 2. 重置与基础样式 */ /* 3. 通用工具类 */ /* 4. 布局组件 (Header, Footer, Container) */ /* 5. 内容组件 (Card, Button, List) */ /* 6. 页面特定样式 */性能考量CSS和JS应尽量精简。避免使用庞大的CSS框架如引入完整的Bootstrap。可以使用PurgeCSS如果AI能集成构建步骤来删除未使用的CSS。无障碍访问确保有足够的颜色对比度WCAG AA标准为交互元素添加焦点样式:focus-visible。4.4 阶段四质量检查与本地测试目标确保生成的网站符合所有既定规则并在不同设备上表现正常。AI代理动作规则符合性检查对照SKILL.md逐项检查。文案是否自然无AI味移动端布局是否完好导航、按钮、表格是否可用是否有大面积无意义空白联系信息是否清晰易得代码验证使用命令行工具或在线服务检查HTML有效性如html5validator、CSS有效性。本地预览启动一个简单的本地HTTP服务器如Python的python -m http.server 8000并在脚本中提示用户手动在浏览器中打开http://localhost:8000/site进行查看。生成检查报告输出一个简单的Markdown报告列出检查项和结果。实操要点这个阶段可以部分自动化但某些主观检查如“文案是否自然”仍需依赖AI自身判断或最终用户确认。可以编写一个简单的Node.js或Python脚本利用puppeteer或playwright对页面进行截图模拟不同屏幕尺寸但这对于AI代理来说可能比较复杂。更务实的方法是生成清晰的检查清单让用户参与确认。4.5 阶段五部署准备与上线可选目标将静态网站部署到公共网络使其可通过链接访问。AI代理动作打包将site/目录压缩成site.zip便于上传。部署根据AGENT-RUNBOOK.md中的指引执行部署。如果目标平台是Cloudflare Pages检查是否有wranglerCLI工具和API令牌。执行wrangler pages publish ./site --project-nameyour-site。如果目标平台是Vercel/Netlify类似地使用对应的CLI工具或准备vercel.json/netlify.toml配置文件。更新SEO信息部署成功后获取生成的线上地址如https://your-site.pages.dev并回填到site/index.html的og:url等元标签中然后重新打包和部署或直接更新。实操要点此阶段高度依赖于AI代理所运行的环境是否具备相应的命令行工具、API权限和网络访问能力。OPENCLAW-NOTES.md文件正是为了说明这一点如果环境不支持此阶段可跳过用户手动部署即可。部署配置如wrangler.toml应放在output-site/deploy/目录下与源代码分离。5. 适配不同AI代理的实践指南这套skill的设计是通用的但具体到不同的AI代理如OpenAI的Assistant、Claude Code、OpenClaw等集成方式会有差异。关键在于理解AI代理的“能力边界”。5.1 能力模型分析与适配策略我们可以将AI代理的能力分为几个层级并据此制定适配策略能力层级包含的具体能力对本Skill的支持程度适配策略L4: 全自动执行本地文件读写、命令行执行、网络请求、API调用、浏览器自动化。完美支持。可完整跑通从资料读取到部署上线的全流程。直接加载整个skill目录让AI按AGENT-RUNBOOK.md执行。L3: 半自动编码强大的代码生成与解释能力能理解复杂工作流但无法直接执行命令或访问外部API。高度可用。能生成所有代码、配置和详细的部署指令但最后一步需要人工执行命令。提供SKILL.md和workflow.md作为核心约束。AI生成完整代码包和清晰的DEPLOYMENT_GUIDE.md给用户。L2: 对话式辅助优秀的代码片段生成和问题解答能力但缺乏对长流程任务的整体规划能力。核心规则参考。可以生成单个页面或组件但需要用户频繁引导和整合。用户将SKILL.md中的关键规则作为提示词的一部分分段向AI请求代码。L1: 基础代码生成只能根据简单提示生成代码片段无法理解项目上下文和规范。有限参考。生成的代码可能不符合规范需要大量人工修改。不建议直接使用本skill。可提取SKILL.md中的设计规则作为代码审查清单。5.2 针对OpenClaw的特别说明OpenClaw是一个旨在实现高度自动化的AI代理框架。OPENCLAW-NOTES.md文件的核心就是对齐期望OpenClaw能否成功运行本skill取决于其具体配置和插件生态。如果OpenClaw配置了文件系统插件、命令行插件和浏览器插件那么它很可能达到L4级别可以尝试全自动运行。你需要确保它有权访问materials/目录和output-site/目录。如果OpenClaw仅能进行代码生成和文件编辑那么它处于L3级别。最佳实践是让OpenClaw生成所有网站代码和部署脚本然后由用户自己在终端执行部署命令。关键检查点在让OpenClaw运行前请确认它能否ls或dir列出项目文件。cat或type读取materials/resume.pdf或文本文件。mkdir创建output-site目录。调用wrangler或curl等外部命令如需部署。实操心得管理AI代理的“幻觉”即使是最强大的AI代理在复杂任务中也可能产生“幻觉”比如声称执行了某个命令但实际上没有。因此在AGENT-RUNBOOK.md中关键步骤后应加入验证指令。例如在“创建目录”命令后紧跟一个“列出目录内容”的命令来确认。在部署后尝试curl一下网站地址看是否返回200状态码。这种“执行-验证”的循环能极大提高自动化流程的可靠性。5.3 为Claude Code或Cursor等现代编码助手的优化像Claude Code、GitHub Copilot或Cursor这类深度集成在IDE中的AI它们通常具备L3的能力。对于它们最佳使用方式是将Skill作为项目上下文将整个skill/personal-site-builder-cn/目录放在你的项目根目录下。从对话开始打开langgpt-prompt.md将其内容发送给AI让它进入角色。分阶段指导不要一次性要求“建个站”。而是说“我们现在处于阶段一请检查./materials目录并告诉我资料是否齐全。” 然后根据它的反馈引导它进入下一阶段“很好资料齐全。现在请进入阶段二为我规划网站的信息架构输出一个JSON大纲。”利用其代码编辑能力当需要编写具体代码时直接打开对应的文件如site/styles.css然后让AI根据SKILL.md中的规则为你编写或修改代码。它的优势在于能理解现有代码的上下文。这种方式结合了AI的代码能力和人类的流程控制往往能产出质量最高、最符合预期的结果。6. 常见问题与故障排查实录在实际使用这套skill与AI代理协作的过程中你可能会遇到一些典型问题。以下是我根据多次实践总结出的排查清单。6.1 资料读取与处理阶段问题1AI代理无法读取或解析我的简历PDF。可能原因PDF是扫描件图片、加密或格式异常复杂。解决方案预处理手动将PDF转换为纯文本文件.txt。macOS/Linux可使用pdftotext resume.pdf resume.txtWindows可用Adobe Acrobat或在线转换工具。提供文本摘要如果转换效果不佳直接在materials/intro.txt中提供一份清晰的文本版简历摘要。更新Skill在AGENT-RUNBOOK.md的“资料审计”步骤中增加对PDF解析失败的fallback处理逻辑让其优先寻找.txt版本。问题2AI在问答补齐环节问的问题很笼统补全的信息质量不高。可能原因AGENT-RUNBOOK.md中的预设问题不够具体或者AI没有结合上下文如已读取的部分资料进行追问。解决方案细化问题将问题设计得更具引导性。例如不要只问“最想突出哪些优势”而是问“针对[从简历中提取的岗位名称如‘前端开发’]这个岗位请列出你认为最匹配的3项技术优势如精通React生态、有性能优化经验、熟悉TypeScript。”提供示例在Prompt中给AI一个回答范例让它模仿这种详细程度。迭代式问答让AI基于用户的第一个简短回答提出更深入的追问。例如用户说“擅长性能优化”AI可以追问“可以具体分享一个你通过性能优化将页面加载速度提升X%的例子吗”6.2 网站生成与代码质量阶段问题3生成的网站样式混乱CSS规则互相冲突。可能原因AI在多次修改和添加样式的过程中产生了特异性冲突或重复规则。解决方案强制使用CSS方法论在SKILL.md中更明确地要求使用BEM等命名规范并提供一个基础的CSS结构模板。引入样式重置要求AI在styles.css开头加入一个现代CSS重置如modern-normalize或minireset.css的代码确保浏览器默认样式一致。代码审查步骤在AGENT-RUNBOOK.md的“质量检查”阶段加入一条“运行npx stylelint site/styles.css如果环境支持或人工检查是否有重复的CSS属性和冲突的选择器。”问题4移动端显示基本正常但某些细节如表单输入框体验很差。可能原因AI只做了宏观的响应式布局媒体查询忽略了移动端的交互细节。解决方案在SKILL.md的“移动端”规则中增加以下具体条款“所有input,textarea,button元素的最小高度不低于44px。”“设置meta name“viewport” content“widthdevice-width, initial-scale1, maximum-scale1”以防止用户缩放导致布局错乱。”“为输入框设置font-size: 16px;以防止iOS Safari自动缩放。”6.3 部署与上线阶段问题5AI代理无法完成部署提示权限错误或命令不存在。可能原因运行AI代理的环境没有安装对应的CLI工具如wrangler或者没有配置有效的API令牌。解决方案降级处理这是最可能的情况。修改AGENT-RUNBOOK.md将部署阶段从“自动执行”改为“生成部署指南”。让AI输出一个DEPLOYMENT_GUIDE.md文件详细说明需要安装什么工具。如何获取API令牌。需要执行的具体命令逐条给出。环境检查前置在流程开始时就让AI尝试运行wrangler --version或vercel --version。如果失败则提前进入“生成部署指南”流程。问题6部署成功后网站可以访问但图片不显示或样式错乱。可能原因文件路径错误。在本地开发时使用的是相对路径如./assets/photo.jpg但部署到服务器后网站可能运行在子目录下导致路径解析失败。解决方案使用根目录相对路径要求AI在生成HTML和CSS时所有资源路径都应以/开头如/assets/photo.jpg。这假设网站部署在域名的根目录。使用基URL在HTML的head中添加base href“/”标签需谨慎会影响页面内所有相对URL。静态站点生成器最佳实践如果AI能处理更复杂的流程可以使用像11ty或Hugo这样的静态站点生成器它们能更好地处理资源路径。6.4 与AI协作的通用技巧技巧1给AI“划清跑道”AI在自由发挥时容易偏离轨道。每次交互时都重新锚定它的目标。例如“根据我们之前在阶段二确定的JSON大纲现在开始编写首页的Hero部分HTML代码。请严格遵守SKILL.md中关于‘中文文案’和‘禁止大面积空白’的规则。”技巧2利用“角色扮演”和“链式思考”在langgpt-prompt.md中不仅定义任务还定义角色“你是一名资深的前端开发工程师尤其擅长为求职者打造专业、清晰的个人展示网站。你对细节有苛刻的要求并且深知在移动端上的用户体验至关重要。” 然后在复杂任务中要求AI“逐步思考”将其推理过程展示出来这能帮助你发现它理解上的偏差并及时纠正。技巧3小步快跑频繁验证不要指望AI一次性生成完美的整个网站。采用“生成-审查-迭代”的循环。例如先让它生成首页的HTML结构你审查通过后再让它为这个结构添加CSS样式然后再审查如此反复。这样能及时发现问题避免错误累积到最后难以收拾。这套Openclaw-personal-site-builder-cn-distributionskill 的价值不在于它提供了一个多么神奇的“一键生成”按钮而在于它提供了一套可靠的、可重复的、高质量的工作流程和标准。它将构建个人网站这个模糊的需求分解成了AI能够理解和执行的明确步骤并用具体的规则约束了输出的质量下限。无论你是想全自动完成还是半自动辅助这套skill都能作为一个强大的“外脑”和“协作者”帮助你或你的AI代理把一个想法稳稳地落地成一个真正能用的作品。它的务实恰恰是它在当前AI技术背景下最可贵的地方。