@namewta/speculo 1.0.22 → 2.0.1

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/assets/prototypes.js

@@ -0,0 +1,146 @@
+/* Original Speculo fixtures. No network, production actions, or persistent storage. */
+(() => {
+  const one = (selector) => document.querySelector(selector);
+  const all = (selector) => [...document.querySelectorAll(selector)];
+  let dialogTrigger;
+  all('[data-open-dialog]').forEach((button) => button.addEventListener('click', () => {
+    dialogTrigger = button;
+    const dialog = document.getElementById(button.dataset.openDialog);
+    dialog?.showModal();
+  }));
+  all('[data-close-dialog]').forEach((button) => button.addEventListener('click', () => button.closest('dialog').close()));
+  all('dialog').forEach((dialog) => dialog.addEventListener('close', () => dialogTrigger?.focus()));
+
+  if (document.body.dataset.template === 'enterprise-data') {
+    const rows = all('[data-request]');
+    const selection = () => {
+      const visible = rows.filter((row) => !row.hidden);
+      const chosen = visible.filter((row) => row.querySelector('input').checked);
+      one('[data-batch]').disabled = chosen.length === 0;
+      one('[data-batch]').textContent = chosen.length ? `Approve ${chosen.length} selected` : 'Approve selected';
+      one('[data-select-all]').checked = visible.length > 0 && chosen.length === visible.length;
+      one('[data-select-all]').indeterminate = chosen.length > 0 && chosen.length < visible.length;
+      return chosen;
+    };
+    const filter = () => {
+      const term = one('[data-search]').value.trim().toLowerCase();
+      const status = one('[data-status-filter]').value;
+      rows.forEach((row) => {
+        row.hidden = !row.textContent.toLowerCase().includes(term) || (status !== 'all' && row.dataset.state !== status);
+        if (row.hidden) row.querySelector('input').checked = false;
+      });
+      const count = rows.filter((row) => !row.hidden).length;
+      one('[data-count]').textContent = `${count} requests shown · local sample data`;
+      one('[data-empty]').hidden = count > 0;
+      selection();
+    };
+    one('[data-search]').addEventListener('input', filter);
+    one('[data-status-filter]').addEventListener('change', filter);
+    rows.forEach((row) => row.querySelector('input').addEventListener('change', selection));
+    one('[data-select-all]').addEventListener('change', (event) => {
+      rows.filter((row) => !row.hidden).forEach((row) => { row.querySelector('input').checked = event.target.checked; });
+      selection();
+    });
+    one('[data-batch]').addEventListener('click', () => {
+      const chosen = selection();
+      if (one('[data-failure]').checked) {
+        one('[data-feedback]').textContent = 'Approval could not be completed. Your selection is preserved; turn off the failure simulation and retry.';
+        one('[data-feedback]').classList.add('error');
+        return;
+      }
+      chosen.forEach((row) => {
+        row.dataset.state = 'approved';
+        row.querySelector('[data-state-label]').textContent = 'Approved';
+        row.querySelector('[data-state-label]').className = 'pill good';
+        row.querySelector('input').checked = false;
+      });
+      one('[data-feedback]').classList.remove('error');
+      one('[data-feedback]').textContent = `${chosen.length} request${chosen.length === 1 ? '' : 's'} approved in this preview. No company records changed.`;
+      filter();
+    });
+    let ascending = true;
+    one('[data-sort]').addEventListener('click', () => {
+      ascending = !ascending;
+      const sorted = [...rows].sort((a, b) => (Number(a.dataset.amount) - Number(b.dataset.amount)) * (ascending ? 1 : -1));
+      sorted.forEach((row) => one('tbody').append(row));
+      one('[data-sort]').textContent = `Amount ${ascending ? '↑' : '↓'}`;
+      one('[data-sort]').closest('th').setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
+    });
+    all('[data-request-detail]').forEach((button) => button.addEventListener('click', () => {
+      const row = button.closest('[data-request]');
+      one('[data-detail-title]').textContent = row.querySelector('strong').textContent;
+      one('[data-detail-owner]').textContent = row.dataset.owner;
+      one('[data-detail-amount]').textContent = `$${Number(row.dataset.amount).toLocaleString('en-US')}`;
+      one('[data-detail-state]').textContent = row.dataset.state;
+    }));
+    filter();
+  }
+
+  if (document.body.dataset.template === 'marketing-conversion') {
+    all('[data-billing]').forEach((button) => button.addEventListener('click', () => {
+      const yearly = button.dataset.billing === 'yearly';
+      all('[data-billing]').forEach((item) => item.setAttribute('aria-pressed', String(item === button)));
+      all('[data-price]').forEach((price) => { price.textContent = yearly ? price.dataset.yearly : price.dataset.monthly; });
+      one('[data-billing-note]').textContent = yearly ? 'Annual billing selected. Prices show the monthly equivalent; paid once a year.' : 'Monthly billing selected. Change or cancel at the end of any month.';
+    }));
+    one('[data-demo-form]').addEventListener('submit', (event) => {
+      event.preventDefault();
+      const feedback = one('[data-demo-feedback]');
+      if (one('[data-demo-failure]').checked) {
+        feedback.textContent = 'This simulated request failed. Your entries are preserved. Turn off the simulation and retry.';
+        feedback.classList.add('error');
+        return;
+      }
+      feedback.classList.remove('error');
+      feedback.textContent = 'Your preview request is ready. In the real product you would receive a scheduling link. No email was sent.';
+    });
+  }
+
+  if (document.body.dataset.template === 'commerce-service') {
+    let slot = '10:00';
+    const update = () => {
+      const guests = Number(one('[data-guests]').value);
+      one('[data-subtotal]').textContent = `$${guests * 68}`;
+      one('[data-total]').textContent = `$${guests * 68 + 8}`;
+      one('[data-guest-label]').textContent = `$68 × ${guests} guest${guests === 1 ? '' : 's'}`;
+    };
+    one('[data-guests]').addEventListener('change', update);
+    all('[data-slot]').forEach((button) => button.addEventListener('click', () => {
+      slot = button.dataset.slot;
+      all('[data-slot]').forEach((item) => item.setAttribute('aria-pressed', String(item === button)));
+    }));
+    one('[data-save]').addEventListener('click', (event) => {
+      const saved = event.currentTarget.getAttribute('aria-pressed') !== 'true';
+      event.currentTarget.setAttribute('aria-pressed', String(saved));
+      event.currentTarget.textContent = saved ? '♥ Saved for this visit' : '♡ Save experience';
+    });
+    one('[data-booking-form]').addEventListener('submit', (event) => {
+      event.preventDefault();
+      const result = one('[data-booking-feedback]');
+      if (one('[data-sold-out]').checked) {
+        result.textContent = 'That time just filled up in this simulation. Your choices are saved; choose another time and turn off the simulation to retry.';
+        result.classList.add('error');
+        return;
+      }
+      result.classList.remove('error');
+      result.textContent = `Preview reservation: ${one('[data-booking-date]').selectedOptions[0].textContent}, ${slot}, ${one('[data-guests]').value} guest(s), ${one('[data-total]').textContent} total. Nothing was booked or charged.`;
+    });
+    update();
+  }
+
+  if (document.body.dataset.template === 'brand-editorial') {
+    all('[data-project-filter]').forEach((button) => button.addEventListener('click', () => {
+      all('[data-project-filter]').forEach((item) => item.setAttribute('aria-pressed', String(item === button)));
+      all('[data-project]').forEach((card) => { card.hidden = button.dataset.projectFilter !== 'all' && card.dataset.project !== button.dataset.projectFilter; });
+      one('[data-project-count]').textContent = `${all('[data-project]').filter((card) => !card.hidden).length} projects shown`;
+    }));
+    all('[data-project-title]').forEach((button) => button.addEventListener('click', () => {
+      one('[data-project-dialog-title]').textContent = button.dataset.projectTitle;
+      one('[data-project-dialog-copy]').textContent = button.dataset.projectCopy;
+    }));
+    one('[data-contact-form]').addEventListener('submit', (event) => {
+      event.preventDefault();
+      one('[data-contact-feedback]').textContent = 'Your brief is ready in this local preview. No message has been sent; the production flow would show a delivery receipt here.';
+    });
+  }
+})();

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/brand-editorial.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Still Form — Objects for the everyday · Speculo prototype</title><link rel="stylesheet" href="assets/prototypes.css"><script src="assets/prototypes.js" defer></script></head>
+<body class="editorial" data-template="brand-editorial">
+<div class="prototype-bar"><span>Speculo · Brand editorial · Fictional studio and original CSS objects</span><a href="../gallery.html">← Design library</a></div>
+<nav class="site-nav wrap" aria-label="Primary"><a class="brand" href="#home">STILL / FORM</a><div class="nav-links"><a href="#work">Selected work</a><a href="#practice">Our practice</a><button class="ghost small" data-open-dialog="contact-dialog">Start a conversation ↗</button></div></nav>
+<main id="home"><section class="hero wrap"><p class="eyebrow">Independent design practice · Est. 2018</p><h1>Thoughtfully made.<br>Quietly present.</h1><div class="hero-bottom"><p>We design objects and identities that feel at home in everyday life. Useful, lasting, and considered from every side.</p><a href="#work" class="button">Explore selected work ↓</a></div><img class="hero-photo" src="../research-snapshot/ui-gallery/assets/landscape.jpg" alt="A straight road through a red sandstone desert with distant rock formations"><div class="photo-caption"><span>FIELD NOTES / 001 — Finding a slower rhythm</span><a href="../research-snapshot/ui-gallery/assets/ATTRIBUTION.md">Photo credit</a></div></section>
+<section class="section wrap" id="work"><div class="section-heading"><div><p class="eyebrow">A few things we've made</p><h2>Selected work, 2024—2026.</h2></div><p class="muted">Four fictional projects exploring the relationship between form, material, and everyday use.</p></div><div class="project-filters" role="group" aria-label="Filter projects"><button class="small" data-project-filter="all" aria-pressed="true">All work</button><button class="small" data-project-filter="objects" aria-pressed="false">Objects</button><button class="small" data-project-filter="identity" aria-pressed="false">Identity</button></div><div class="project-grid">
+<button class="project-card" data-project="objects" data-open-dialog="project-dialog" data-project-title="The morning vessel" data-project-copy="A small ceramic vessel designed around one daily ritual. The broad base feels settled on a desk; a soft rim makes the object comfortable to hold. In a production case study, include material tests, dimensions, and observed use rather than invented performance claims."><span class="project-art" aria-hidden="true"><span class="object"></span></span><span class="project-caption"><span><span class="project-name">The morning vessel</span><span class="project-description">Object design · Material exploration</span></span><span aria-hidden="true">↗</span></span></button>
+<button class="project-card" data-project="identity" data-open-dialog="project-dialog" data-project-title="Common Ground" data-project-copy="An identity for a neighborhood gathering place. Restrained typography, an earthy palette, and a simple frame let the changing community program take the lead. This fictional study demonstrates a case-study detail flow, not a real client engagement."><span class="project-art sage" aria-hidden="true"><span class="object"></span></span><span class="project-caption"><span><span class="project-name">Common Ground</span><span class="project-description">Identity · A place to come together</span></span><span aria-hidden="true">↗</span></span></button>
+<button class="project-card" data-project="objects" data-open-dialog="project-dialog" data-project-title="Soft edges" data-project-copy="A family of simple desk objects that replaces sharp transitions with generous curves. The shared material and edge treatment make each piece part of a system while allowing it to have a distinct purpose."><span class="project-art clay" aria-hidden="true"><span class="object"></span></span><span class="project-caption"><span><span class="project-name">Soft edges</span><span class="project-description">Objects · A family of useful forms</span></span><span aria-hidden="true">↗</span></span></button>
+<button class="project-card" data-project="identity" data-open-dialog="project-dialog" data-project-title="Between the lines" data-project-copy="An editorial identity built around generous margins and a clear reading rhythm. Hierarchy comes from scale and spacing before decoration; a compact set of typographic roles holds the publication together."><span class="project-art ink" aria-hidden="true"><span class="object"></span></span><span class="project-caption"><span><span class="project-name">Between the lines</span><span class="project-description">Editorial identity · Space to read</span></span><span aria-hidden="true">↗</span></span></button>
+</div><p data-project-count class="status" aria-live="polite">4 projects shown</p></section>
+<section class="section wrap" id="practice"><p class="eyebrow">The way we work</p><p class="manifesto">Good design makes room.<br>For the material. For the person.<br>For everything that happens next.</p><div class="split" style="margin-top:35px;align-items:start"><p class="muted">We begin by understanding the everyday context. What needs to work, what can become simpler, and which details deserve our attention.</p><p class="muted">Our process moves between research, making, and observation. We test small decisions early and let what we learn shape the whole.</p></div></section>
+<section class="section contact-band"><div class="wrap section-heading" style="margin-bottom:0"><div><p class="eyebrow">A place to begin</p><h2>Have something in mind?</h2><p class="muted">Tell us a little about it. A good conversation is a good start.</p></div><button class="primary" data-open-dialog="contact-dialog">Start a conversation ↗</button></div></section></main>
+<footer class="site-footer"><div class="wrap"><span>STILL / FORM · Objects. Identities. Everyday life.</span><span>Fictional work · Images credited separately · Offline preview</span></div></footer>
+<dialog id="project-dialog" aria-labelledby="project-title"><div class="dialog-heading"><div><p class="eyebrow">Selected work</p><h2 id="project-title" data-project-dialog-title>Project</h2></div><button class="icon" data-close-dialog aria-label="Close project">×</button></div><p data-project-dialog-copy></p><p class="muted" style="font-size:12px">All project descriptions and object illustrations are original fictional sample content.</p><button data-close-dialog>Return to selected work</button></dialog>
+<dialog id="contact-dialog" aria-labelledby="contact-title"><div class="dialog-heading"><div><p class="eyebrow">An introduction</p><h2 id="contact-title">What are you thinking about?</h2></div><button class="icon" data-close-dialog aria-label="Close contact form">×</button></div><form data-contact-form><label>Your name<input name="name" autocomplete="name" required></label><label>Email<input name="email" type="email" autocomplete="email" required></label><label>A little about your idea<textarea rows="4" name="idea" required></textarea></label><button class="primary" type="submit">Preview your introduction →</button><div class="notice" data-contact-feedback role="status" aria-live="polite">Local preview only. No message is sent or stored.</div></form></dialog>
+</body></html>

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/brand-editorial.md

@@ -0,0 +1,25 @@
+# 品牌与编辑叙事 / brand-editorial
+
+当任务包含「品牌介绍、作品探索、合作咨询」时使用。目标平台：desktop / web / mobile；密度起点：comfortable。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+摄影与文字叙事、作品分类、详情、返回焦点和咨询表单；Apple/Figma择一为主表达，不做双主调拼贴。
+
+## 预览与复用
+
+[打开离线原型](../templates/brand-editorial.html)。此 HTML/CSS/JS 为 Speculo 原创的虚构任务 fixture。所有交互只改本页内存，刷新重置，不发送请求、不付款、不创建真实记录。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[apple](../visual-references/apple.md), [figma](../visual-references/figma.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+实时监控；密集数据处理。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/commerce-service.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Gather — A morning of slow making · Speculo prototype</title><link rel="stylesheet" href="assets/prototypes.css"><script src="assets/prototypes.js" defer></script></head>
+<body class="commerce" data-template="commerce-service">
+<div class="prototype-bar"><span>Speculo · Commerce & services · Local booking simulation</span><a href="../gallery.html">← Design library</a></div>
+<nav class="site-nav wrap" aria-label="Primary"><a class="brand" href="#experience">gather<span style="color:var(--accent)">.</span></a><div class="nav-links"><a href="#experience">Experience</a><a href="#included">What's included</a><a href="#reviews" class="optional">Reviews</a></div></nav>
+<main class="wrap"><header class="intro" id="experience"><p class="eyebrow">Small groups. Something made by you.</p><h1>A morning of slow making.</h1><div class="actions" style="justify-content:space-between"><p class="muted" style="margin:0">A hands-on creative workshop · Riverside studio</p><button class="ghost small" data-save aria-pressed="false">♡ Save experience</button></div><a class="button primary booking-jump" href="#booking">Choose a time · from $68 →</a></header>
+<div class="listing-layout"><article><img class="experience-image" src="../research-snapshot/ui-gallery/assets/workspace.jpg" alt="Bright glass-walled office corridor with natural light"><div class="image-note"><span>Illustrative studio photo · fictional workshop</span><a href="../research-snapshot/ui-gallery/assets/ATTRIBUTION.md">Photo credit</a></div><div class="experience-facts"><div><strong>2.5 hours</strong><span>Time to settle in</span></div><div><strong>Up to 6 people</strong><span>Small by design</span></div><div><strong>Beginner friendly</strong><span>No experience needed</span></div></div><h2>Leave with a little more<br>than you arrived with.</h2><p class="muted">Step away from your screen and into a morning of making. We'll explore shape, texture, and simple materials, then create a small object to take home.</p><p class="muted">There's no perfect result to chase. You'll get a gentle introduction, time to experiment, and individual guidance when you need it.</p><div class="host-line"><span class="avatar" aria-hidden="true">AL</span><div><p><strong>Hosted by Alex Lee</strong></p><small>Fictional host · Designer and patient teacher</small></div></div><section class="section" id="included" style="padding-bottom:28px"><p class="eyebrow">Come as you are</p><h2>We've thought of the small things.</h2><ul class="checklist"><li>All materials and tools for the workshop</li><li>Tea, coffee, and space to take a break</li><li>A finished piece and simple care notes</li><li>Step-free access and a seated work area</li></ul><div class="notice">Need an adjustment? In the real service, share access needs before booking so the host can confirm what is possible.</div></section><section id="reviews" style="padding:25px 0 55px"><h2>Stories from the table.</h2><div class="review"><p>“Enough guidance to feel confident, enough freedom to make something that felt like mine.”</p><span class="muted" style="font-size:12px">Jamie · Fictional review for this prototype</span></div><div class="review"><p>“The best part was slowing down. I left with an object and a very different kind of Saturday.”</p><span class="muted" style="font-size:12px">Rin · Fictional review for this prototype</span></div></section></article>
+<aside id="booking" class="booking-card" aria-labelledby="booking-title"><p class="eyebrow">Your place at the table</p><h2 id="booking-title" class="booking-price">$68 <small>/ guest</small></h2><p class="muted" style="font-size:12px">Materials included · sample pricing</p><form data-booking-form><div class="field-grid"><label>Date<select data-booking-date name="date"><option value="sat">Saturday · Oct 24</option><option value="sun">Sunday · Oct 25</option><option value="next-sat">Saturday · Oct 31</option></select></label><label>Guests<select data-guests name="guests"><option value="1">1 guest</option><option value="2" selected>2 guests</option><option value="3">3 guests</option><option value="4">4 guests</option></select></label></div><div><p style="font-size:13px;font-weight:600;margin-bottom:7px">Start time</p><div class="slot-list" role="group" aria-label="Start time"><button type="button" data-slot="10:00" aria-pressed="true">10:00</button><button type="button" data-slot="14:00" aria-pressed="false">14:00</button><button type="button" disabled aria-label="17:00 is unavailable">17:00 · full</button></div></div><div class="receipt-row"><span data-guest-label>$68 × 2 guests</span><span data-subtotal>$136</span></div><div class="receipt-row"><span>Service fee</span><span>$8</span></div><div class="receipt-row total"><span>Total</span><span data-total>$144</span></div><button class="primary" type="submit">Preview reservation →</button><p class="muted" style="font-size:12px;margin:0;text-align:center">Nothing will be booked or charged.</p><label style="display:flex;align-items:center;gap:8px;font-size:11px;font-weight:400"><input data-sold-out type="checkbox">Simulate this time becoming unavailable</label><div class="notice" role="status" aria-live="polite" data-booking-feedback>Choose a date, time, and group size to see your complete reservation.</div></form><hr style="border:0;border-top:1px solid var(--line);margin:23px 0"><h3 style="font-size:14px">Plans can change.</h3><p class="muted" style="font-size:12px;margin:0">This example offers cancellation up to 48 hours before the workshop. Replace this with the service's approved terms before implementation.</p></aside></div></main>
+<footer class="site-footer"><div class="wrap"><span>gather · A little time, well spent.</span><span>Local fixture · No payment, booking, or external requests.</span></div></footer>
+</body></html>

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/commerce-service.md

@@ -0,0 +1,25 @@
+# 消费者交易与服务 / commerce-service
+
+当任务包含「服务详情、日期与人数选择、预约确认」时使用。目标平台：desktop / web / mobile；密度起点：touch。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+图片详情、服务包含项、日期/时段/人数、即时总额、不可用选项、库存冲突、模拟确认。
+
+## 预览与复用
+
+[打开离线原型](../templates/commerce-service.html)。此 HTML/CSS/JS 为 Speculo 原创的虚构任务 fixture。所有交互只改本页内存，刷新重置，不发送请求、不付款、不创建真实记录。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[airbnb](../visual-references/airbnb.md), [stripe](../visual-references/stripe.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+专业IDE；未经授权真实付款。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/cross-platform-workspace.md

@@ -0,0 +1,25 @@
+# 跨端 Agent 工作区 / cross-platform-workspace
+
+当任务包含「多工作区、会话切换、多端任务」时使用。目标平台：desktop / web / mobile；密度起点：default。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+工作区轨、会话列表、工作面与工具；每端承担适合的任务，不复制全部面板。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/06-cross-platform-workspace.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[vercel](../visual-references/vercel.md), [ibm](../visual-references/ibm.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+单页面品牌展示。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/dense-ide.md

@@ -0,0 +1,25 @@
+# 高密度 IDE / dense-ide
+
+当任务包含「代码编辑、数据库与API、日志诊断」时使用。目标平台：desktop / web；密度起点：compact。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+工具轨、资源树、tab/editor、检查器和状态栏；保留选择、焦点和跨面板上下文。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/01-dense-ide.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[linear](../visual-references/linear.md), [vercel](../visual-references/vercel.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+低频消费者表单；以摄影叙事为主的页面。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/enterprise-data.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Fieldwork — Purchase requests · Speculo prototype</title><link rel="stylesheet" href="assets/prototypes.css"><script src="assets/prototypes.js" defer></script></head>
+<body class="enterprise" data-template="enterprise-data">
+<div class="prototype-bar"><span>Speculo · Enterprise data · Interactive sample, no production actions</span><a href="../gallery.html">← Design library</a></div>
+<div class="enterprise-shell">
+<aside class="app-sidebar"><a class="brand" href="#requests">fieldwork<span aria-hidden="true"> /</span></a><div><p class="eyebrow">Northstar studio</p><nav aria-label="Workspace"><a href="#requests" aria-current="page">Purchase requests</a><a href="#overview">Monthly overview</a><a href="#review-notes">Review notes</a></nav></div><div class="sidebar-note"><strong>A clear view of every request.</strong><p class="muted" style="margin:8px 0 0">Review the context, make a decision, and keep the team moving.</p></div></aside>
+<main class="app-main" id="requests"><div class="app-topline"><span>Workspace / Finance / Requests</span><span class="actions"><span class="pill">October 2026</span><span class="avatar" aria-label="Maya Chen">MC</span></span></div>
+<div class="section-heading"><div><p class="eyebrow">Purchase operations</p><h1>Good work starts<br>with clear decisions.</h1><p class="muted">Review the team's tools, equipment, and services in one place.</p></div><button class="primary" data-open-dialog="request-help">How review works ↗</button></div>
+<section class="grid-3" id="overview" aria-label="Monthly request summary"><div class="card metric"><p class="muted" style="margin:0">Monthly budget</p><strong>$24,000</strong><span>October · sample allocation</span></div><div class="card metric"><p class="muted" style="margin:0">Requested</p><strong>$7,410</strong><span>4 requests in this preview</span></div><div class="card metric"><p class="muted" style="margin:0">Awaiting review</p><strong>3</strong><span>Snapshot before local decisions</span></div></section>
+<section class="data-section" aria-label="Purchase request list"><div class="data-toolbar"><div class="actions"><label><span class="sr-only">Search requests</span><input data-search type="search" placeholder="Search requests or people…"></label><label><span class="sr-only">Request status</span><select data-status-filter><option value="all">All statuses</option><option value="pending">Awaiting review</option><option value="approved">Approved</option></select></label></div><button class="small" data-batch disabled>Approve selected</button></div>
+<div class="table-wrap"><table><caption class="sr-only">Purchase requests with owner, amount, status, and details</caption><thead><tr><th><input data-select-all type="checkbox" aria-label="Select all visible requests"></th><th>Request / reference</th><th>Requested by</th><th aria-sort="none"><button class="ghost small" data-sort>Amount ↕</button></th><th>Status</th><th><span class="sr-only">Actions</span></th></tr></thead><tbody>
+<tr data-request data-state="pending" data-amount="2400" data-owner="Alex Morgan"><td><input type="checkbox" aria-label="Select Research workspace"></td><td><strong>Research workspace</strong><small class="mono">REQ-204 · Software</small></td><td>Alex Morgan<small>Product research</small></td><td class="mono">$2,400</td><td><span class="pill wait" data-state-label>Awaiting review</span></td><td><button class="ghost small" data-open-dialog="request-detail" data-request-detail>Review <span class="sr-only">Research workspace</span>↗</button></td></tr>
+<tr data-request data-state="pending" data-amount="1850" data-owner="Jules Park"><td><input type="checkbox" aria-label="Select Studio equipment"></td><td><strong>Studio equipment</strong><small class="mono">REQ-203 · Equipment</small></td><td>Jules Park<small>Brand studio</small></td><td class="mono">$1,850</td><td><span class="pill wait" data-state-label>Awaiting review</span></td><td><button class="ghost small" data-open-dialog="request-detail" data-request-detail>Review <span class="sr-only">Studio equipment</span>↗</button></td></tr>
+<tr data-request data-state="approved" data-amount="960" data-owner="Sam Rivera"><td><input type="checkbox" aria-label="Select Accessibility audit"></td><td><strong>Accessibility audit</strong><small class="mono">REQ-202 · Services</small></td><td>Sam Rivera<small>Engineering</small></td><td class="mono">$960</td><td><span class="pill good" data-state-label>Approved</span></td><td><button class="ghost small" data-open-dialog="request-detail" data-request-detail>Review <span class="sr-only">Accessibility audit</span>↗</button></td></tr>
+<tr data-request data-state="pending" data-amount="2200" data-owner="Mina Ahmed"><td><input type="checkbox" aria-label="Select Team learning budget"></td><td><strong>Team learning budget</strong><small class="mono">REQ-201 · Learning</small></td><td>Mina Ahmed<small>People operations</small></td><td class="mono">$2,200</td><td><span class="pill wait" data-state-label>Awaiting review</span></td><td><button class="ghost small" data-open-dialog="request-detail" data-request-detail>Review <span class="sr-only">Team learning budget</span>↗</button></td></tr>
+</tbody></table></div><div class="empty-state" data-empty hidden><h3>No requests match.</h3><p class="muted">Try a different name or select all statuses. Your other data is still here.</p></div><div class="table-foot"><span data-count>4 requests shown · local sample data</span><span>All requests on one page</span></div></section>
+<div class="notice" role="status" aria-live="polite" data-feedback>Select a request to review its context, or approve a group together.</div><section id="review-notes"><label style="display:flex;align-items:center;gap:9px;font-weight:400;color:var(--muted)"><input data-failure type="checkbox">Simulate an approval failure (preview control)</label></section>
+</main></div>
+<dialog id="request-detail" aria-labelledby="detail-title"><div class="dialog-heading"><div><p class="eyebrow">Request details</p><h2 id="detail-title" data-detail-title>Request</h2></div><button class="icon" data-close-dialog aria-label="Close request details">×</button></div><p class="muted">The requester has attached the purpose and expected team benefit. This local fixture contains no private financial data.</p><dl class="detail-grid"><div><dt>Requested by</dt><dd data-detail-owner></dd></div><div><dt>Amount</dt><dd data-detail-amount></dd></div><div><dt>Status</dt><dd data-detail-state></dd></div><div><dt>Budget owner</dt><dd>Finance operations</dd></div></dl><div class="notice">Approve from the request list to see the decision reflected in context.</div><button data-close-dialog>Back to requests</button></dialog>
+<dialog id="request-help" aria-labelledby="help-title"><div class="dialog-heading"><h2 id="help-title">A decision with context.</h2><button class="icon" data-close-dialog aria-label="Close review guide">×</button></div><ol><li>Search or filter to find the requests you own.</li><li>Open a request and check its amount and purpose.</li><li>Select requests and approve them together.</li><li>If a decision fails, keep the selection and retry.</li></ol><p class="muted">All changes live in memory and reset on reload.</p></dialog>
+</body></html>

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/enterprise-data.md

@@ -0,0 +1,25 @@
+# 企业数据与审批 / enterprise-data
+
+当任务包含「记录筛选、表格决策、批量审批」时使用。目标平台：desktop / web / mobile；密度起点：compact。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+搜索与状态筛选、排序、详情、全选/部分选择、批量决策、失败保留选择、空结果。
+
+## 预览与复用
+
+[打开离线原型](../templates/enterprise-data.html)。此 HTML/CSS/JS 为 Speculo 原创的虚构任务 fixture。所有交互只改本页内存，刷新重置，不发送请求、不付款、不创建真实记录。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[ibm](../visual-references/ibm.md), [vercel](../visual-references/vercel.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+完整电子表格；低密度品牌叙事。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/local-first-content.md

@@ -0,0 +1,25 @@
+# Local-first 内容编辑器 / local-first-content
+
+当任务包含「知识库、长文阅读、笔记编辑」时使用。目标平台：desktop / web / mobile；密度起点：comfortable。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+资源树、列表/正文/目录；可恢复选择、保存/同步/冲突反馈。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/07-local-first-content.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[mintlify](../visual-references/mintlify.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+监控大盘。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/marketing-conversion.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Relay — Make room for meaningful work · Speculo prototype</title><link rel="stylesheet" href="assets/prototypes.css"><script src="assets/prototypes.js" defer></script></head>
+<body class="marketing" data-template="marketing-conversion">
+<div class="prototype-bar"><span>Speculo · Marketing conversion · Fictional product, local preview</span><a href="../gallery.html">← Design library</a></div>
+<nav class="site-nav wrap" aria-label="Primary"><a class="brand" href="#home">relay<span style="color:var(--accent)">●</span></a><div class="nav-links"><a href="#product">Product</a><a href="#pricing">Pricing</a><a href="#questions" class="optional">Questions</a></div><button class="primary small" data-open-dialog="demo-dialog">Book a demo</button></nav>
+<main id="home"><section class="hero"><div class="wrap split"><div><p class="eyebrow">A calmer way to ship</p><h1>Less chasing.<br>More making.</h1><p class="muted">Give every handoff a clear owner, the right context, and a next step. Bring your team's work into focus.</p><div class="actions"><button class="primary" data-open-dialog="demo-dialog">See Relay in action ↗</button><a class="button" href="#product">Explore the workflow</a></div><p style="font-size:12px;margin-top:18px" class="muted">A 20-minute walkthrough. Built around your team's workflow.</p></div><div class="product-window" aria-label="Product illustration: a release handoff"><div class="window-bar"><i></i><i></i><i></i><span>Relay / Product launch</span></div><div class="window-content"><p class="eyebrow">Release 02.4</p><h2>Ready for the next person.</h2><div class="timeline-item"><b>✓</b><div><strong>Design signed off</strong><p class="muted">Maya attached the final interaction notes.</p></div></div><div class="timeline-item"><b>✓</b><div><strong>Build verified</strong><p class="muted">Sam confirmed the release checks.</p></div></div><div class="timeline-item"><b>3</b><div><strong>Launch review</strong><p class="muted">Jules has the context and owns the next step.</p></div></div><div class="notice" style="font-size:12px;margin-bottom:0">One shared view. No status meeting required.</div></div></div></div></section>
+<div class="trust-strip"><div class="wrap"><span>FICTIONAL TEAMS IN THIS DEMO</span><strong>Northstar</strong><strong>FORM & FIELD</strong><strong>Papertrail</strong><strong>Common Ground</strong></div></div>
+<section class="section wrap" id="product"><div class="section-heading"><div><p class="eyebrow">From scattered to shared</p><h2>Keep the work moving.<br>Keep the context with it.</h2></div><p class="muted">A small set of deliberate tools for the moments when work changes hands.</p></div><div class="grid-3"><article class="card"><span class="feature-number">01 / GATHER</span><h3>A useful starting point</h3><p class="muted">Bring the brief, decisions, and references together before asking someone to act.</p></article><article class="card"><span class="feature-number">02 / HAND OFF</span><h3>An owner, not a mention</h3><p class="muted">Make the next action explicit. The right person sees what they need and why it matters.</p></article><article class="card"><span class="feature-number">03 / CLOSE THE LOOP</span><h3>A visible outcome</h3><p class="muted">Capture what changed, what passed, and what still needs attention in the original thread.</p></article></div></section>
+<section class="section wrap" id="pricing"><div class="pricing-head"><p class="eyebrow">Room to grow</p><h2>Choose the right pace.</h2><p class="muted">Illustrative plans for this fictional product. No checkout or subscription is created.</p><div class="billing-toggle" role="group" aria-label="Billing period"><button class="small" data-billing="monthly" aria-pressed="false">Monthly</button><button class="small" data-billing="yearly" aria-pressed="true">Yearly · save 20%</button></div><p id="billing-note" data-billing-note class="status" aria-live="polite">Annual billing selected. Prices show the monthly equivalent; paid once a year.</p></div><div class="grid-3"><article class="card"><p class="eyebrow">Starter</p><h3>Find your rhythm</h3><div class="price">$<span data-price data-monthly="0" data-yearly="0">0</span><small> / person / month</small></div><ul class="checklist"><li>One shared workspace</li><li>Three active workflows</li><li>Searchable decisions</li></ul><button data-open-dialog="demo-dialog">Explore Starter</button></article><article class="card plan-featured"><p class="eyebrow">Team</p><h3>Move together</h3><div class="price">$<span data-price data-monthly="15" data-yearly="12">12</span><small> / person / month</small></div><ul class="checklist"><li>Unlimited active workflows</li><li>Reusable handoff templates</li><li>Cross-team visibility</li></ul><button class="primary" data-open-dialog="demo-dialog">Explore Team ↗</button></article><article class="card"><p class="eyebrow">Organization</p><h3>Build a shared practice</h3><div class="price" style="font-size:34px">Let's talk</div><ul class="checklist"><li>Workspace administration</li><li>Guided rollout planning</li><li>Dedicated support contact</li></ul><button data-open-dialog="demo-dialog">Talk to the team</button></article></div></section>
+<section class="section wrap" id="questions"><div class="faq"><p class="eyebrow">A few useful answers</p><h2>Before we meet.</h2><details><summary>Do we need to change how we work?</summary><p>Start with one handoff that already happens. The walkthrough maps your current steps before suggesting changes.</p></details><details><summary>What happens after requesting a demo?</summary><p>In a production flow, a scheduling link would let you pick a time. This preview only displays a local confirmation.</p></details><details><summary>Can we change plans later?</summary><p>The example plans allow changing at the end of a billing period. A real implementation must replace this example with its approved commercial terms.</p></details></div></section></main>
+<footer class="site-footer"><div class="wrap"><span>relay · Make room for meaningful work.</span><span>Fictional content · No customer claims or real purchase flow.</span></div></footer>
+<dialog id="demo-dialog" aria-labelledby="demo-title"><div class="dialog-heading"><div><p class="eyebrow">See it with your own work</p><h2 id="demo-title">Let's make a good handoff.</h2></div><button class="icon" data-close-dialog aria-label="Close demo request">×</button></div><form data-demo-form><label>Your name<input name="name" autocomplete="name" required placeholder="Maya Chen"></label><label>Work email<input type="email" name="email" autocomplete="email" required placeholder="maya@example.com"></label><label>What does your team need?<textarea name="brief" rows="3" required placeholder="For example: clearer handoffs between design and engineering"></textarea></label><label style="display:flex;align-items:center;font-weight:400"><input type="checkbox" data-demo-failure>Simulate a request failure</label><button class="primary" type="submit">Request a walkthrough</button><div class="notice" data-demo-feedback role="status" aria-live="polite">Preview only. Your details remain in this page and are never sent.</div></form></dialog>
+</body></html>

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/marketing-conversion.md

@@ -0,0 +1,25 @@
+# SaaS 营销与转化 / marketing-conversion
+
+当任务包含「产品说明、方案比较、联系转化」时使用。目标平台：desktop / web / mobile；密度起点：comfortable。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+价值主张、产品证据、功能、价格周期切换、FAQ、表单验证与失败恢复；价格/客户均明确为虚构。
+
+## 预览与复用
+
+[打开离线原型](../templates/marketing-conversion.html)。此 HTML/CSS/JS 为 Speculo 原创的虚构任务 fixture。所有交互只改本页内存，刷新重置，不发送请求、不付款、不创建真实记录。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[stripe](../visual-references/stripe.md), [vercel](../visual-references/vercel.md), [notion](../visual-references/notion.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+已登录高密度工作台。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/media-first.md

@@ -0,0 +1,25 @@
+# 媒体优先应用 / media-first
+
+当任务包含「媒体浏览、资产选择、内容库」时使用。目标平台：desktop / web / mobile；密度起点：default。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+媒体网格、详情与持久操作区；真实比例、图片加载失败和窄屏任务路径。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/08-media-first.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[spotify](../visual-references/spotify.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+长表单；纯代码编辑。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/mobile-supervisor.md

@@ -0,0 +1,25 @@
+# 移动监督与审批 / mobile-supervisor
+
+当任务包含「审批、通知、远程监督」时使用。目标平台：mobile / web；密度起点：touch。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+待处理项、审批上下文、决定与结果；明确触控目标和取消/恢复。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/05-mobile-supervisor.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[airbnb](../visual-references/airbnb.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+手机完整复刻IDE。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/monochrome-console.md

@@ -0,0 +1,25 @@
+# 单色运行控制台 / monochrome-console
+
+当任务包含「运行监控、Agent管理、本地工具」时使用。目标平台：desktop / web；密度起点：compact。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+运行列表、日志与状态摘要；失败提示不能随关闭的面板消失。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/02-monochrome-console.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[vercel](../visual-references/vercel.md), [linear](../visual-references/linear.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+品牌叙事；图片购物目录。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。

package/template/workflows/specdev/specdev-p-prototype/design-library/templates/responsive-web.md

@@ -0,0 +1,25 @@
+# 响应式 Web 工作台 / responsive-web
+
+当任务包含「多设备访问、自托管应用、会话与预览」时使用。目标平台：desktop / web / mobile；密度起点：default。这些是候选推荐条件，不替代当前项目与用户选择。
+
+## 任务骨架
+
+桌面多栏在手机转为单任务导航和 drawer；保留返回与任务状态。
+
+## 预览与复用
+
+[打开离线原型](../research-snapshot/ui-gallery/04-responsive-web.html)。此入口复用原有研究样板，保持原快照、相对结构和所有字节不变；它是可运行起点，不等于当前 change 已验证。
+
+复制页面时同时复制所有被引用的本地 CSS/JS/图片及 attribution，保持相对路径闭合。原样板的共享 styles/scripts/assets 不能丢失；新增模板共享 [样式](assets/prototypes.css) 和 [交互](assets/prototypes.js)。复用照片同时保留 [原资产署名](../research-snapshot/ui-gallery/assets/ATTRIBUTION.md)。
+
+## 视觉组合
+
+可选参考：[vercel](../visual-references/vercel.md), [linear](../visual-references/linear.md)。先选一个主布局和一个主视觉方向，再按 [组合协议](../composition.md) 记录辅助参考的具体角色、覆盖范围与拒绝原因。默认不提问颜色细枝末节，先形成可比较 HTML，由用户确认最终方案。
+
+## 不适用
+
+原生手势为核心的移动工具。不要为了套模板改变需求、信息架构、交付数量或已确认项目约束。
+
+## 验证场景
+
+用相同任务和数据比较候选；检查 390px/1440px、长中文、200% 缩放、键盘/focus、reduced motion，以及适用的空/加载/失败/权限/恢复状态。检查界面可见的业务反馈，不用按钮绑定存在代替成功路径。样板验证不替代生成 change 原型的验证；生产行为仍须另验。