建筑画廊作品集设计

让作品成为主角，让项目档案容易浏览。

适合建筑事务所、室内设计工作室和空间作品集。左侧项目索引、大幅完整建筑画面、克制无衬线字体与细线档案结构。把产品资料交给 Agent，生成设计规范和可编辑响应式页面，也可以把这套方向应用到现有项目。

可放进项目的 DESIGN.md、语义化 tokens.css、版式规则和图片制作需求。
可在浏览器实际操作：可键盘操作的项目分类筛选和空结果状态。本地演示不需要服务器或账号。
响应式 HTML/CSS/JS、原创示例主视觉、可编辑 JSON 需求与检查清单。
AI 视觉方向参考 + 中英文真实模板案例

现已开放 · v1.0.0

USD 9.99 · 单次购买，或通过 Pro 获取。

你想完成哪件事？

制作 FIELDWORK / STUDIO 同方向页面

我有产品资料，希望按这个视觉方向做一个新页面。

使用你的文案完成原创页面、设计变量、主视觉需求与响应式源文件。

改造现有页面

保留现有路由和功能，为这一页建立统一视觉。

适配原项目框架的局部视觉改动和限定范围的设计变量。

修改内置交互

把我的真实资料填进可键盘操作的项目分类筛选和空结果状态。

可编辑字段和本地交互，附键盘、输入错误或空结果检查。

FIELDWORK / STUDIO · 从视觉方向到可编辑页面

AI 生成效果示意 · 非网页运行截图

给它什么

FIELDWORK / STUDIO 的原创虚构需求：住宅、公共空间和更新项目的虚构设计研究。

怎么处理

Codex 生图制作概念效果和独立主视觉，包内工具依据同套规范生成真实页面。图库可分别查看两类证据。

浏览全部输出示例

AI 效果示意 · FIELDWORK / STUDIO — 由 Codex 生图根据原创虚构需求制作。图片用于展示视觉方向；购买前可切换查看另附的真实模板输出。
真实模板输出 · 英文 — 使用安装包内示例和生成主视觉运行本地工具后截取的浏览器画面，交付可编辑 HTML/CSS/JS。可操作演示：可键盘操作的项目分类筛选和空结果状态。
真实模板输出 · 中文 — 同一工具使用中文内容生成的真实页面。手机菜单、锚点和问答可交互，业务服务需要另行接入。只进行本地选择或计算，未连接业务服务。

从你的材料，到交付文件

确认视觉方向
先读规范，确认哪些特征适合你的产品：左侧项目索引、大幅完整建筑画面、克制无衬线字体与细线档案结构。用效果图沟通画面，不从图片推断功能已经实现。
用你的材料制作
将文案和素材交给 Agent。新页面可运行包内 Node 工具，已有页面则适配现有组件；有可用工具时再生成新的主体图片。
检查真实页面
打开实际输出，操作可键盘操作的项目分类筛选和空结果状态，检查键盘焦点和手机断行，并验证相关的输入错误或空结果。替换虚构案例后，再单独接入业务服务。

把这项任务带到你的 Agent

先准备这些材料

准备产品／房型／项目名称、逐项确认的说明、受众和主要操作；建筑项目另需分类。使用有权使用的图片，或通过已有工具生成主视觉。

登录后获取安装包。
将整个文件夹解压到项目中： .agents/skills/gallery-architecture-design/SKILL.md (Codex) 或 .claude/skills/gallery-architecture-design/SKILL.md (Claude Code).
在该项目打开新对话，附上材料，将下方需求中的方括号替换为真实信息，先让 Agent 检查说明与依赖。

使用 $gallery-architecture-design，为面向[受众]的[产品]制作页面，目标操作是[主要操作]。先读 DESIGN.md，使用我提供的文案与素材，说明主视觉方向，再制作响应式页面。仅在工具可用时生成图片，保留事实，交付可编辑 HTML/CSS/JS 和桌面、手机检查结果，暂不发布。

安装与排错指引

得到第一版后，可以这样继续改

保持既定配色和层级，只修改首屏文案与一张确认过的图片，再检查手机断行和焦点对比度。

安装包交付什么

可放进项目的 DESIGN.md、语义化 tokens.css、版式规则和图片制作需求。
可在浏览器实际操作：可键盘操作的项目分类筛选和空结果状态。本地演示不需要服务器或账号。
响应式 HTML/CSS/JS、原创示例主视觉、可编辑 JSON 需求与检查清单。

你需要另外准备什么

自己的 Codex 或 Claude Code 服务；本地模板工具需要 Node.js 22+ 和浏览器，无 npm 依赖。
生成新图需要可用生图工具与自己的额度；已有应用继续使用它本身的框架依赖。

使用前须知

模板里哪些功能是真的可以操作？

包内的可键盘操作的项目分类筛选和空结果状态可在浏览器本地操作。没有支付、库存、预订系统或消息投递；AI 概念图可能展示更完整的视觉设想，实际交付请查看单独标注的运行截图。

安装后会自动得到和效果图一模一样的网页吗？

不会。效果图用于表达视觉方向，真实模板输出另有截图。Agent 会根据你的项目调整文案、图片和组件，生图结果也存在差异。

这是把 Refero 的文件重新打包出售吗？

不是。指令、设计变量、模板和案例均由 SiSkill 独立编写；Refero 作为研究参考，其原始文档、代码、截图、字体和品牌资产不进入安装包。

AI 效果图展示视觉方向，不是网页运行截图，也不承诺逐像素复现；另有真实模板截图可核对交付。包含静态原型，不含登录、支付、统计或业务后台。SiSkill 原创商品，与 Refero 及参考品牌无官方关联。模型和生图费用另计。