代码能力代码进阶
传奇泄露 - 魔法书 2-9 第1部分:入门与设置
本章节介绍如何通过提示工程快速构建并部署静态网站,涵盖从经典项目(如 Hello World、Pong 游戏)到现代工具(Netlify、Replit)的使用,以及开发环境搭建和 Git 基础。
提示词正文
复制后可直接粘贴到模型或内部评测工具。
你正在学习如何通过提示工程创建并部署网页项目。请完成以下任务:
- 使用 HTML、CSS 和 JavaScript 创建一个“Hello World”网站,并使用 N 快捷键自动部署到 Netlify。
- 创建一个可玩的 Pong 游戏,支持触屏手势和键盘控制(箭头键或 WASD),同样使用 N 快捷键部署。
- 构建一个“链接树”风格的个人链接页面(link in bio),以虚构角色(如动物、巫师)为主题,包含多个可点击链接。允许用户自定义标题、链接列表和设计风格(颜色、布局等)。使用 N 或 REPL 快捷键快速部署。
- 实现“图片转代码”功能:上传任意图片或手绘草图,将其转化为具有视觉冲击力的网页 UI,添加动态效果和精美样式。支持通过 DALL·E 生成背景图,并确保图像正确嵌入代码和最终压缩包中。
- 掌握 Netlify 的一键部署(N 快捷键)和手动拖拽部署(Netlify Drop),了解如何更新网站和修改域名。
- 学习使用 Replit 进行代码托管与部署,掌握 REPL 快捷键导出、静态站点配置及自定义域名设置。
- 在手机上完成开发环境搭建:注册 Replit 和 GitHub 账号,安装 Replit 应用,创建项目并同步至 GitHub,演示如何通过手机完成全流程开发。
- 配置专业开发工具链:安装 Cursor.sh、Warp 终端、Git Tower 或 SourceTree,启用 GitHub Copilot,创建新项目并与 Git 仓库同步。
- 学习 Git 基础:理解版本控制概念,掌握 clone、pull、commit、push、merge 等核心命令,推荐使用图形化工具(如 Git Tower)管理分支与历史。
- 了解 Linear 项目管理工具,适用于团队协作,可将 issue 名称作为 Git 分支名实现自动化流程。
使用场景
初学者快速上手网页开发个人品牌建设(链接树页面)游戏原型开发(Pong)无代码/低代码部署实践手机端编程学习团队协作与版本管理入门
参考输出
一个完整的静态网站项目结构,包含 index.html、style.css 和 script.js 文件;支持通过 N 快捷键自动部署到 Netlify 并生成可访问的 .netlify.app 域名链接;提供 Git 初始化、提交和推送至 GitHub 的完整命令行或 GUI 操作示例。
评分维度
重点评估可执行性、事实准确性、边界控制和结构完整度。
用户评分
0 个评分-
你的评分
登录后评分
评论
0登录后评论
相关提示词
图片写作生成
社交媒体帖子 - 野花丛中梦幻般的女子
这是一个电影级、照片写实风格的提示词,用于创作一幅女子在雏菊丛中的宁静肖像,强调柔和的自然光和前景细节的清晰对焦。
Nano Banana Pro图片提示词社交媒体帖子