版拾 设计参考库官网
白底极简的设计参考库官网：标题里轮换弹出 App 图标的首屏、圆角外框中的产品浏览窗口、打字搜索配界面长廊、六格内容类型便当、智能体检索对话演示、使用场景卡片、漂浮图标专区和超大字标深色页脚。
介绍
一个完整的单文件页面，从这里起步。结构、文案位和响应式都已排好，复制提示词交给模型，它会按你的品牌改写文案、配色和图片。
适用场景
SaaS 产品官网与落地页：首屏、功能、定价、常见问题和收尾行动号召一次排好。
安装
订阅 Builder 后，用 8pt CLI 取回整页源码，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt template design-ref-library
mcp › 使用 8pt MCP 调用 get_template("design-ref-library")
代码
单文件 HTML + CSS，无构建步骤。
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>版拾 · App 与网站的设计参考库</title><meta name="robots" content="noindex">
<style>
:root{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
…订阅 Builder 查看完整源码。查看价格