Nook Mac App Website
A light website for a Mac file-management app: app window demo with switchable views, six interactive feature sections, comparison table, one-time-purchase price card and FAQ.
Overview
A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.
Where to use it
Product pages for desktop and Mac apps: downloads, feature demos and pricing.
Install
With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt template mac-app
mcp › Use 8pt MCP to call get_template("mac-app")
Code
Single-file HTML + CSS, no build step.
<!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 file manager website template</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)}
…Subscribe to Builder to see the full source.See pricing