atelier-ko — Astro 电商模板

Atelier Kō 是一个为小型家具工坊或类似手工艺目录设计的 Astro 电商主题，它的核心假设是：作品不多，摄影足够有力，因此界面刻意保持冷静和建筑感。整体视觉以画廊灰为主，搭配大号紧排的无衬线字体和等宽字体用于编号与尺寸，再用一个胡桃木色点缀呼应木材摄影。布局上多用细线而非卡片和阴影，没有圆角，也没有悬浮元素，段落标题前不设说明文字，结构清晰利落。动效克制：区块进入时轻微上移，图片以遮罩方式揭开，分割线从左向右绘制，首屏则随滚动缓慢漂移。所有内容由 Astro content collections 校验，站点名称、导航、页脚、联系方式和电商默认值都集中在一个配置文件里，输出为完全静态的 HTML，无框架运行时，所有增强功能在无 JavaScript 时也能降级为可用页面。

功能上，首页采用分屏式 hero，标题旁是一张全高照片，下方有规格带、编号的“工坊内”网格、带规格表的全宽特写模块和三木材面板。目录页支持客户端分类与材料筛选、价格排序、实时结果计数和空状态。产品页有缩略图切换的画廊、等宽规格表、数量步进器、相关作品，并输出 Product 和 BreadcrumbList JSON-LD。购物车以抽屉形式滑入，支持行内数量调整、实时小计、焦点陷阱和 Escape 关闭，全部由两个 data 属性驱动，无 JavaScript 时退化为普通链接到购物车页。购物车数据存于 LocalStorage，完整购物车页面和两步结账预览包含格式化的卡号、有效期和 CVC 输入框。页脚有居中的订阅区块，让每个页面都能触达。工作室页面包含全幅照片、编号原则、引用和统计条。滚动动效基于一个 IntersectionObserver 和四种显现变体，元素触发后即取消观察；头部和 hero 视差使用 CSS 滚动驱动，支持 animation-timeline 的浏览器无需 JavaScript，不支持时有样式化回退。

需要明确的是，订阅和结账流程只是设计预览，并未连接任何真实后端，上线前必须替换演示目录、价格、摄影和工作室文案，并设置 canonical 域名。主题自托管 Archivo 和 IBM Plex Mono 字体，仅 latin 和 latin-ext 子集，共四个 WOFF2 文件约 93 KB，不请求第三方源。设计令牌覆盖所有表面、文本、强调色和细线色，并提供一组组件类。Astro 图像管线全程使用 WebP，明确尺寸，首屏以上 eager 加载，以下 lazy。SEO 方面有 canonical URL、Open Graph 和 Twitter 卡片（含图片尺寸）、可配置的默认分享图、Organization/Product/BreadcrumbList JSON-LD、站点地图和动态 robots.txt。可访问性包含跳过链接、地标、每页一个 h1、所有控件有真实标签、焦点陷阱的移动菜单和可见焦点环。代码为严格 TypeScript，组件 props 有类型，内容 schema 用 Zod 校验。技术栈为 Astro 7、Tailwind CSS 4（Vite 插件）、Vite 8、TypeScript strict、Astro content collections、@astrojs/sitemap 和 Sharp。要求 Node.js 22.12.0 或更高。

适合作品数量有限、重视摄影和排版、希望快速搭建一个视觉克制且功能完整的静态电商站点的家具或手工艺品牌。由于结账仅为预览，若需真实交易需自行集成支付后端。