小白我要学实用 Agent 教程与工具实测
目录

行动路径 · 策展层级 5

从一句想法到公开网址的建站路径

把任务说明、独立项目、本地预览、原创界面、GitHub 和 Vercel 串成一个可验证闭环。

完成结果从一份独立原创任务说明出发，产出经过本地、产品化和发布检查，并能通过公开网址访问的网站。

查看本文目录

证据与适用边界

尚未实测。该标记与来源核验状态独立，不代表使用效果。

预计时间
建议分成任务说明、本地实现、界面改进、产品化检查和部署五段。实际用时取决于安装、报错和账号准备。
成本边界
路径本身不售卖提示词。软件额度、GitHub 与 Vercel 方案和自定义域名费用由各服务商决定；没有域名也可先使用平台部署网址。
证据状态
官方一手来源已核验
最后核验
2026-07-14
生命周期
当前维护
评分覆盖
0%；综合评分 未计算

写出可检查的网站任务说明

只写“做一个好看的网站”无法验收。先写用户、单一结果、区块顺序、已有文案、视觉气质、交互、非目标和发布标准。所有素材必须是你有权使用的内容。

  1. 完成网站任务说明

    操作
    复制第一个网站任务说明模板并逐项填写，不确定的字段写“待验证”。
    你应该看到
    Agent 能区分必须做、可选和明确不做。
    如何确认
    每个发布标准都能对应一个页面观察或命令结果。
    卡住时
    • 如果只有形容词，补充具体版式、内容层级和参考原因。

本节来源

在独立文件夹打开本地网站

让 Codex 只在专门的项目文件夹工作。先要求它解释将要创建的技术栈和命令，再允许安装依赖。启动命令运行后不要关闭对应终端；浏览器中的 localhost 只是你自己电脑上的临时服务。

  1. 确认工作范围

    操作
    在 Codex 中打开新项目文件夹，要求它列出即将创建或修改的文件。
    你应该看到
    对话明确显示当前项目路径和计划文件。
    如何确认
    路径只指向你的新项目，不是桌面根目录或其他项目。
    卡住时
    • 路径不对时停止执行，重新选择文件夹。

  2. 启动本地预览

    操作
    让 Codex 安装项目依赖并运行项目提供的开发命令，同时解释每条命令。
    你应该看到
    终端显示以 http://localhost 开头的网址。
    如何确认
    浏览器打开该网址，标题和核心区块与任务说明一致。
    卡住时
    • 出现端口被占用时，保留完整报错，让 Agent 选择空闲端口或停止旧进程。

本节来源

用原创视觉方向改进页面

不要复制来路不明或付费库中的完整提示词。把用户、内容层级、字体气质、颜色、密度、手机行为和禁用模式写进自己的视觉任务说明，再让 design-taste-frontend 负责实现质量审查。

  1. 完成一次 Taste Review

    操作
    让 Agent 对照原创任务说明和 Taste Skill 检查信息层级、手机排版、无障碍操作和常见模板感。
    你应该看到
    得到具体问题、修改理由和修改后的页面。
    如何确认
    在桌面与 390px 宽度检查标题、按钮、导航和正文没有溢出。
    卡住时
    • 如果只得到抽象赞美，要求列出可定位的元素和验收证据。

本节来源

把好看的页面补成别人能用的产品

页面好看只是一个检查项。发布前还要确认按钮真的会做事、等待和报错有说明、手机上能操作、隐私信息没有泄露、搜索引擎能看懂页面、公开网址能访问，并且改坏后能回到上一版。

  1. 跑完产品化七项检查

    操作
    打开 localhost 到真实产品指南，对真实动作、状态、手机、隐私、SEO、公开访问和回退逐项记录。
    你应该看到
    每一项都有通过、失败或不适用，不留下只能演示的假按钮。
    如何确认
    关掉本地服务后仍有独立的发布计划和上一版回退信息。
    卡住时
    • 如果一项太大，先保留最小真实动作并明确删掉未完成入口。

本节来源

检查工程并发布公开预览

先从项目文档读取真实检查命令并全部通过。首次发布采用浏览器优先路径：在 GitHub 建立空仓库，让 Codex 在解释并获得明确授权后推送，再从 Vercel Dashboard 的 Add New… > Project 导入。CLI 是命令行工具，只在浏览器导入受阻时作为备选。第一次做网站的人尚未独立完成这条路径，所以每一步都要保留实际界面和结果。

  1. 准备 GitHub 与 Vercel 账号

    操作
    在浏览器登录两个服务并核对账户或团队归属，不向 Agent 提供密码、验证码或 token。
    你应该看到
    GitHub 和 Vercel 控制台都能访问。
    如何确认
    账户名称与项目计划归属一致。
    卡住时
    • 权限不足时切换到有权创建仓库和项目的账户。

  2. 创建空的 GitHub 仓库

    操作
    在 GitHub 选择 New repository，填写 Owner、名称和可见性；已有本地项目时不要初始化 README、.gitignore 或 license。
    你应该看到
    新仓库显示 Quick Setup 和 HTTPS 地址。
    如何确认
    仓库为空，Owner、名称和可见性正确。
    卡住时
    • 误加初始文件时不要直接强推，先按发布指南处理。

  3. 让 Codex 初始化并提交

    操作
    让 Codex 解释并执行 git init、status、add 和 commit，提交前排除密钥与隐私文件。
    你应该看到
    本地 main 分支拥有可检查的首次提交。
    如何确认
    查看 git status、提交摘要和待上传文件。
    卡住时
    • 发现 .env 或密钥时立即停止并清理提交。

  4. 明确授权后推送到 GitHub

    操作
    核对 HTTPS remote 后，明确授权 Codex 执行 remote、分支和 push 命令；通过浏览器或凭据管理器认证，不把 token 放进聊天或代码。
    你应该看到
    GitHub 页面显示本地文件与提交。
    如何确认
    刷新仓库并复查 remote、分支和敏感文件。
    卡住时
    • 认证失败时使用 GitHub 官方登录流程，不共享 token。

  5. 从 Vercel 导入仓库

    操作
    在 Vercel 选择正确团队，点击 Add New…、Project，在 GitHub 仓库列表选择目标仓库并点击 Import。
    你应该看到
    进入正确仓库的新项目配置页。
    如何确认
    Vercel 团队、GitHub Owner 和仓库名全部正确。
    卡住时
    • 仓库不可见时检查 GitHub App 权限与当前团队。

  6. 检查构建设置并等待 Ready

    操作
    核对 Framework Preset、Root Directory、Build Command 和 Output Directory；没有项目依据时保留自动检测默认值，点击 Deploy 并等待 Ready。
    你应该看到
    Vercel 提供 https 部署网址。
    如何确认
    状态为 Ready，部署提交与 GitHub 最新提交一致。
    卡住时
    • 失败时先读 Build Logs 的第一处实际错误。

  7. 无痕检查首页和深层链接

    操作
    关闭本地服务后，在无痕窗口打开部署首页和一个真实内容深层链接。
    你应该看到
    两条地址无需登录即可显示正确页面且不返回 404。
    如何确认
    核对标题、核心动作、移动端和最新内容，地址不是 localhost。
    卡住时
    • 首页正常但深层链接失败时检查静态路由和输出模式。

本节来源

内容关系

正向关系

构建生成的反向关系