介绍
一个完整的单文件页面，从这里起步。结构、文案位和响应式都已排好，复制提示词交给模型，它会按你的品牌改写文案、配色和图片。
适用场景
桌面应用和 Mac 软件的产品页：下载、功能演示和定价。
安装
订阅 Builder 后，用 8pt CLI 取回整页源码，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt template mac-app
mcp › 使用 8pt MCP 调用 get_template("mac-app")
代码
单文件 HTML + CSS，无构建步骤。
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><title>Nook — Mac 文件管理器官网模板</title>
<style>
:root{--bg:#F6F6FA;--ink:#14152B;--ink2:#2B2D45;--mu:#5A5D74;--fa:#7D8099;--line:rgba(20,21,43,.08);--br:#3D5BF0;--br2:#6C83FF;--br3:#2A44D4;--card:linear-gradient(170deg,#fff,#F8F8FC);--edge:rgba(20,21,43,.08);--ease:cubic-bezier(.16,1,.3,1);--disp:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
--w-ink:#1D1D1F;--w-dim:#8E8E93;--w-fa:#6E6E73;--w-side:rgba(243,243,247,.97);--w-edge:rgba(0,0,0,.07);--w-sel:#EAEAEE;--w-well:#F2F2F5;--w-row:rgba(61,91,240,.15);--w-ctl:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}p{margin:0}h1,h2,h3,h4{margin:0}
:focus-visible{outline:2px solid var(--br);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1180px;margin:0 auto}
.sec{padding:140px 16px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
…订阅 Builder 查看完整源码。查看价格