AI 制作极简高级网站：从一句需求到可访问作品

这次，我们做了什么

把网站需求说成用户要完成的事情，比只说“高级感”更有效。frontend-design 帮助确定视觉方向，UI/UX Pro Max 用于排版、可读性与响应式检查。它们提供工作方法，真正的网站仍需要助手写出文件并在浏览器中验证。

开始前，准备这些

• 能读写本地文件的编程助手；本次在 Codex 中完成。
• 准备明确的站点主题、读者、页面内容与参考偏好。
• UI/UX Pro Max CLI 可为 Codex 初始化支持文件；Python 3 用于其搜索脚本。

安装方法与来源核对

以下为当前项目范围的安装方式，不使用全局 Skill 安装。先在独立练习文件夹执行，装好后重新打开助手确认可用。安装文件已在隔离目录实跑；这不代表你的模型、账号和外部服务也已经连接。

npx --yes skills@1.7.2 add https://github.com/anthropics/skills/tree/dbd4588f9e1033efb41dad4bef2f7947c8993d44/skills/frontend-design --skill frontend-design --agent codex --yes

npx --yes ui-ux-pro-max-cli@2.15.0 init --ai codex

frontend-design

anthropics/skills
许可证：Apache-2.0
仓库最近提交：2026-10-09 · 核对 2026-10-16
核对版本：dbd4588f9e1033efb41dad4bef2f7947c8993d44

ui-ux-pro-max

nextlevelbuilder/ui-ux-pro-max-skill
许可证：MIT
仓库最近提交：2026-10-15 · 核对 2026-10-16
核对版本：56ea9cf174ed86786187daa9de0e6247cb0747e4

日期表示核对到的仓库提交，不承诺每个功能都在该日期单独更新。许可证按原始文件范围记录，第三方模型、软件和素材可能采用不同条件。安装指令固定了核对版本；UI/UX Pro Max 使用已验证的作者 CLI 版本。

跟着做，走完整个流程

1. 01 / 先把一句需求补成一个小任务

   告诉助手网站给谁看、有哪些内容、希望用户点哪里。本次选择中文写作工作坊，只做展示和阅读，不引入数据库或支付。你可以直接复制下面完整提示词。

2. 02 / 安装并说明设计边界

   先安装 frontend-design，再用作者 CLI 为当前项目初始化 UI/UX Pro Max。安装命令都在下方。要求复用现有环境，白色和暖灰为主，不添加无意义图标或虚假客户评价。

3. 03 / 让助手生成并打开网站

   先得到一个可直接打开的 index.html，再逐项检查内容和层次。若你提供截图，应说明哪些布局需要参考，以及自己是否有权使用素材，不要求照搬他人品牌。

4. 04 / 用手机宽度检查交互

   在浏览器里切换窄屏，点击导航，展开 FAQ，检查文字是否溢出。改动后重新检查；只说“已适配”不等于实际打开过。本次检查了 1440px 桌面和 390px 手机视口，分别点击页内导航、展开 FAQ，并检查横向溢出。可先打开本站成品，再对照本页手机截图；源码包只有独立展示页，没有真实报名提交能力。

把这份任务交给你的助手

使用支持 Skill 的 Codex 时，可用 $名称 指明工作流程。其他工具的调用入口可能不同，以对应客户端为准。先替换材料和条件，再执行。

请使用 frontend-design 和 UI/UX Pro Max，为“留白·独立写作工作坊”制作一个完整中文单页网站。
面向没有写作基础的普通读者。内容包括：一句清楚的介绍、观察/起草/修改三项练习、常见问题、页脚。
风格：白与暖灰，深绿色少量强调，编辑式排版，大留白。不要图标堆叠、强渐变、3D、虚假评价或数据。
使用原生 HTML/CSS，输出一个可独立打开的 index.html。导航使用页内锚点，FAQ 可以展开。
这是一份作品示例，不做真实招生、注册、付款或后端服务。
完成后实际检查 1440px 和 390px 宽度、锚点、FAQ 与横向溢出，并说明未验证的内容。

可能产生的费用

frontend-design 此目录许可证为 Apache-2.0，UI/UX Pro Max 为 MIT。本例使用本地静态文件，不调用收费 AI API；助手账号、外部素材、域名和托管是否收费需要分别核对。

使用时，注意这几件事

• 不要把参考截图中的他人商标、照片和完整作品直接搬成自己的商业网站。
• 生成页面需要真实打开检查，尤其是手机文字、点击区域和导航。
• 本案例文件与商城独立，不改会员商品或订单代码。

常见问题