一种用于将小型网站部署到 Cloudflare 的人工智能辅助工作流程
利用人工智能编程助手、GitHub以及Cloudflare的免费套餐，可创建一套可重复的工作流程与提示词模板，用于设计、迭代并部署小型网站。
一个小型信息网站不再需要漫长的开发过程。借助人工智能编码助手完成大部分实现工作，一个人只需在半天的专注工作中，就能将初步构想转化为GitHub上的源代码，通过Cloudflare实现自动部署，并拥有自定义的在线域名。难度从编写代码转变为明确需求以及对最终成果给出精准反馈。本指南将逐步介绍这一工作流程，提供可用于设计、标志、审核和迭代阶段的提示词模板，并明确指出该方法在何种情况下不再适用。
从目标出发，而非从框架开始
对于开发者来说，第一个自然出现的问题是该使用哪种技术栈：React、Next.js、静态站点生成器还是其他方案。当助手能够完成大部分实现工作时，这个问题的重要性就远低于一个更简单的问题：该网站实际上需要做什么？
对于个人网站或咨询网站的初始版本，答案可以很简单。访问者应当能够理解该网站的核心理念，找到其中的文章和见解，并知道如何联系到你。这就是一个完整的范围。先将其写下来，既能为你也能为模型提供后续决策的明确标准，还能避免首次发布后演变成一个重新设计的项目。
当你还没有设计思路时
很多人在开始时并没有设计规范，这也没关系。不必使用原型图，只需描述你期望的体验：比如专业、现代、简洁、宽敞且以技术为导向，但不要刻意追求未来感。助手会将这些描述转化为最初的视觉草图。
一旦内容出现在屏幕上，反馈就会变得容易，因为你是针对具体内容作出反应，而非凭想象：
- 标志与品牌风格不匹配。
- 横幅图片被裁剪了。
- 某个区域显得过于拥挤。
- 页面的某部分暂时需要隐藏。
这类一系列的反应构成了设计过程。你不需要设计术语，只需具备发现问题并表达出来的能力即可。
反馈循环比最初的提示更重要
并不存在一个完美的提示语。最初的输出只是为了给你提供可以回应的内容，后续的指令会越来越具体：修正标志、调整横幅裁剪、隐藏未完成的部分、重命名导航项、测试链接、检查移动端布局。
高质量的结果源于多次简短而具体的调整，而非一个庞大的请求。简短的步骤还能更便于发现模型是否做出了你未要求的改动。
首个版本的通用提示语
一个实用的初始提示语应先说明项目内容，再要求模型提出设计方案并解释理由，之后才生成代码。模板可包含以下部分：
- 品牌、企业或项目的名称。
- 目标：该网站应帮助你实现什么。
- 目标受众：它是为谁设计的。
接着让模型根据目标与受众提出建议：
- 配色方案。
- 排版风格方向。
- 首页结构。
- 主页区域的创意构思。
- 导航设计。
- 推荐的内容板块。
- 行动号召设计。
- 整体视觉风格。
最后要要求它在编写任何代码之前先解释拟定的设计方案以及为何该方案适合目标受众，并且只有在你认可这个方向后才能生成第一个可用的版本。将设计方案与实际实现分开是关键：用文字拒绝某个配色方案的成本远低于从已生成的CSS中删除它。
将标志设计视为独立任务
标志不仅要在网站上使用，还要出现在社交平台资料、幻灯片以及文档中。如果将其混入网站设计需求中，往往只会得到仅适用于页面顶部的设计，因此应给品牌标识单独的设计要求。
请设计一个简洁的标志概念，要求风格极简、现代、专业且富有特色，即便在较小尺寸下仍能保持辨识度。需说明该标志适用的场景：网站、社交媒体头像、演示文稿、文档，以及浅色和深色背景。简要描述品牌所代表的理念，然后提出以下要求：
- 视觉概念。
- 字体设计方向。
- 色彩方案。
- 图标或字母组合的设计思路。
- 适用于浅色背景的版本。
- 适用于深色背景的版本。
- 说明该设计为何适合该品牌。
请明确要求避免使用过于复杂、依赖精细细节的插图或符号，因为这类元素在缩至图标大小时会变得模糊不清。
由助手负责具体实现，您只需明确设计意图
一旦方向确定，编码助手（在本工作流程中为ChatGPT和Codex）便可承担大部分实现工作。其优势在于，指令只需描述想要达成的效果，而无需指定具体要修改哪个文件、哪一行代码：
- 将横幅一分为二。
- 暂时将这些部分注释掉。
- 重命名这个按钮。
- 让这个按钮能滚动到相关部分。
- 使徽标与原始设计图保持一致。
你仍然需要审核每个结果，但不必再为每一处细微调整而亲自在代码库中操作。
尽早注册域名并持续在本地进行开发
注册域名很快：搜索、查看可用性、注册并支付即可。但要使其完全可使用则需要更长时间。在本文描述的场景中，一切按预期解决大约花了24小时；实际等待时间取决于域名注册商以及DNS传播速度。
这段等待时间并不妨碍开发工作。可以通过快速循环在本地预览环境中持续构建和测试：修改、预览、检查、修复，然后再测试。在本地操作还能避免未完成的实验被公开，同时用更高层次的描述来说明变更，这样就不必在多个文件中逐行查找进行修改了。
将模型用作审核工具，而不仅是构建工具
在第一个版本完成后，让助手对其进行评估。在给出评估任务时，应明确其角色，避免其重新设计所有内容，并要求其提供有优先级且可操作的反馈。
请它以资深UI和UX设计师的身份查看截图，在不进行不必要的重新设计的前提下，找出最需要改进的地方：
- 布局：间距、对齐方式以及整体视觉平衡。
- 层次结构与字体：视觉引导的清晰度、字体选择及可读性。
- 一致性：页面中颜色与品牌元素的统一性。
- 在小屏幕上的适配性。
- 行动号召：每个行动号召是否清晰明确且表述恰当。
要求对各项发现进行排序，每项都要说明哪些地方存在不足、为何重要以及具体需要做出什么修改。同时要限制修改范围，仅针对那些能显著提升专业性与可用性的改动。最后这一点能防止评审变成一系列表面上的偏好列举。
迭代才是工作的主要环节
在初步设计之后，几乎不需要再创造新内容，大部分工作都是对现有内容进行优化，此时简洁明确的提示最为有效。一个可靠的迭代模板如下：
- 按顺序列出所需的具体修改项，每行一项。
- 明确要求不要重新设计无关部分，保留所有现有有效的功能。
关于保持原有功能的指示尤为重要。助手在修复你所要求的问题时往往会“改进”附近的代码，而明确的约束可以减少这种偏差。自我检查清单并不能替代你自己的审查，但它能在你查看之前发现明显的功能退化。
从本地预览到通过 GitHub 和 Cloudflare 上线的实时网站
当网站在本地能够正常运行后，将其源代码推送到 GitHub 仓库中。GitHub 能为你提供版本历史记录，以及一种安全的方法来撤销助手所做的任何更改。
接下来，将该仓库与 Cloudflare 相连，这样每次向仓库推送代码都会触发自动构建和部署。此后，发布内容只需进行提交并推送即可。对于小型信息网站而言，这种情况下 Cloudflare 的免费套餐已经足够；请根据自身需求查看当前套餐的限制。
当域名已激活且 DNS 记录配置完成之后，将自定义域名绑定到已部署的项目上。此时，在浏览器中输入该域名即可查看在线网站。
成本及适用场景
这类项目的运营成本相当低：
- 域名注册：此案例中约为每年 12 美元。
- GitHub：免费。
- Cloudflare：免费套餐已足够使用。
- AI 工具：取决于您使用的 ChatGPT 或其他助手的订阅费用。
除了助手订阅费用外，域名基本上是唯一的基础设施成本。
这种方法并不适用于所有应用。任何涉及支付、敏感个人数据、复杂身份验证、数据库或受监管环境的应用都需要专业的工程处理：威胁建模、由熟悉每行代码的人进行代码审查、测试以及运行监控。不过，对于作品集、着陆页、咨询网站、原型以及简单的内容站点而言，其入门门槛已大幅降低。
助手能决定什么以及不能决定什么
助手承担了大量的执行工作：编写和编辑代码、将设计反馈转化为实际修改、排查视觉故障以及解释陌生的技术步骤。仍有几项决策必须由人类来决定：
- 网站应呈现的内容。
这样就能解决瓶颈问题。限制因素不再是你能否从技术上构建网站，而是你是否能够明确自己想要什么。实现上的障碍降低了，但做出判断的需求依然存在。
关键要点
- 在选择任何技术之前，先明确目标、受众和核心信息。
- 在编写代码之前，让模型提出设计方案并说明理由，然后明确批准其方向。
- 单独处理标志设计，确保其在各种媒介上都能正常显示，而不仅仅是在网站标题栏中。
- 采用简短、具体的迭代周期，同时设定“保留其他所有内容”的约束条件并使用自查清单。
- 将助手既当作批评者也当作帮手，提供有优先级且可操作的反馈。
- 将代码上传到 GitHub，每次推送时让 Cloudflare 自动部署，从而实现自动版本控制和托管。
- 这种轻量级方法仅适用于低风险网站。其价值在于各组件如何整合为统一的工作流程：你掌控目标、判断与审批，助手负责执行，GitHub 记录历史，Cloudflare 负责发布。