制作 VERDANT / FORM 同方向页面
我有产品资料，希望按这个视觉方向做一个新页面。
使用你的文案完成原创页面、设计变量、主视觉需求与响应式源文件。
植物护肤品牌设计
让一组护肤品，成为清晰可选的日常护理。
适合独立护肤与个护品牌。植物产品静物、鼠尾草绿面板、大字直立衬线和细线产品选项。把产品资料交给 Agent，生成设计规范和可编辑响应式页面，也可以把这套方向应用到现有项目。
- 可放进项目的 DESIGN.md、语义化 tokens.css、版式规则和图片制作需求。
- 可在浏览器实际操作：产品选项切换与即时摘要。本地演示不需要服务器或账号。
- 响应式 HTML/CSS/JS、原创示例主视觉、可编辑 JSON 需求与检查清单。
- AI 视觉方向参考 + 中英文真实模板案例
现已开放 · v1.0.0
USD 9.99 · 单次购买，或通过 Pro 获取。
你想完成哪件事？
改造现有页面
保留现有路由和功能，为这一页建立统一视觉。
适配原项目框架的局部视觉改动和限定范围的设计变量。
修改内置交互
把我的真实资料填进产品选项切换与即时摘要。
可编辑字段和本地交互，附键盘、输入错误或空结果检查。
VERDANT / FORM · 从视觉方向到可编辑页面
AI 生成效果示意 · 非网页运行截图
给它什么
VERDANT / FORM 的原创虚构需求：一组植物护肤产品的虚构品牌展示。
怎么处理
Codex 生图制作概念效果和独立主视觉，包内工具依据同套规范生成真实页面。图库可分别查看两类证据。
浏览全部输出示例
- AI 效果示意 · VERDANT / FORM — 由 Codex 生图根据原创虚构需求制作。图片用于展示视觉方向；购买前可切换查看另附的真实模板输出。
- 真实模板输出 · 英文 — 使用安装包内示例和生成主视觉运行本地工具后截取的浏览器画面，交付可编辑 HTML/CSS/JS。可操作演示：产品选项切换与即时摘要。
- 真实模板输出 · 中文 — 同一工具使用中文内容生成的真实页面。手机菜单、锚点和问答可交互，业务服务需要另行接入。只进行本地选择或计算，未连接业务服务。
从你的材料，到交付文件
确认视觉方向
先读规范，确认哪些特征适合你的产品：植物产品静物、鼠尾草绿面板、大字直立衬线和细线产品选项。用效果图沟通画面，不从图片推断功能已经实现。
用你的材料制作
将文案和素材交给 Agent。新页面可运行包内 Node 工具，已有页面则适配现有组件；有可用工具时再生成新的主体图片。
检查真实页面
打开实际输出，操作产品选项切换与即时摘要，检查键盘焦点和手机断行，并验证相关的输入错误或空结果。替换虚构案例后，再单独接入业务服务。
把这项任务带到你的 Agent
先准备这些材料
准备产品／房型／项目名称、逐项确认的说明、受众和主要操作；建筑项目另需分类。使用有权使用的图片，或通过已有工具生成主视觉。
- 登录后获取安装包。
- 将整个文件夹解压到项目中：
.agents/skills/botanical-skincare-design/SKILL.md(Codex) 或.claude/skills/botanical-skincare-design/SKILL.md(Claude Code). - 在该项目打开新对话，附上材料，将下方需求中的方括号替换为真实信息，先让 Agent 检查说明与依赖。
使用 $botanical-skincare-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 及参考品牌无官方关联。模型和生图费用另计。
更多创作可能
- 精品民宿网站设计 — 适合精品民宿、客栈和独立住宿品牌。全景海边建筑、疏朗衬线标题、骨白咨询面板和横向房型索引。把产品资料交给 Agent，生成设计规范和可编辑响应式页面，也可以把这套方向应用到现有项目。内含房型比较与即时咨询摘要。
- 建筑画廊作品集设计 — 适合建筑事务所、室内设计工作室和空间作品集。左侧项目索引、大幅完整建筑画面、克制无衬线字体与细线档案结构。把产品资料交给 Agent，生成设计规范和可编辑响应式页面，也可以把这套方向应用到现有项目。内含可键盘操作的项目分类筛选和空结果状态。
- 精品咖啡品牌设计 — 适合精品烘焙商、咖啡店和小型食品品牌。燕麦与铁锈色块、醒目实用标题、等宽烘焙标签与宽松胶囊控件。把产品资料交给 Agent，生成设计规范和可编辑响应式页面，也可以把这套方向应用到现有项目。内含带输入校验的咖啡粉水比例计算器。
- 候补预约落地页 — 制作响应式预发布页面，包含产品说明、FAQ 和明确标注的本地演示表单，附可编辑源文件与桌面、手机预览。