') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); 【外滩大会2026】电商线框策略工作台 · Issue #76 · modelstudioai/modelstudioai.github.io · GitHub
Skip to content

【外滩大会2026】电商线框策略工作台 #76

Description

@ChecheChat

参赛项目名称

电商线框策略工作台|Ecommerce Wireframe Strategist

团队 / 作者

ChecheChat

GitHub:[@ChecheChat](https://github.com/ChecheChat)

我做了什么

我制作了一套面向电商运营与设计师的纯文本分析 Skill,用于解决电商设计在线框形成前缺少系统判断,以及设计上线后数据难以进入下一轮的问题。

在实际工作中,运营或设计师制作主图、详情页、活动页之前,需要先理解商品、研究市场与竞品、提炼卖点、判断品牌调性,并确定页面的信息顺序。这些工作通常分散在聊天记录、表格和个人经验中,容易出现需求不完整、结论缺少依据、运营与设计理解不一致等问题。

本项目将这套隐性的判断过程整理为五个连续阶段:

  1. 资料台:整理商品、任务、品牌及调研材料,检查缺失和冲突信息。
  2. 调研台:分析用户提供的市场、竞品、评论和历史资料。
  3. 策略台:确定目标人群、核心卖点、支撑证据和差异化表达。
  4. 线框台:生成单张图片的阅读顺序,或详情页、落地页的内容结构。
  5. 复盘台:根据人工录入的点击、转化和运营反馈,生成下一版线框假设。

Skill 不负责生成最终图片,也不连接电商或投放平台 API。它专注于设计前后的决策质量,让调研有依据、线框有目标、反馈能够真正进入下一轮。

为了减少 AI 凭常识补充结论,工作流将所有重要判断区分为“事实、共识、推断、机会、待验证”,并要求核心策略能够追溯到用户提供的材料。

使用的工具

  • OpenWork / 百炼 CLI
  • 百炼能力 / 模型:阿里云百炼 qwen3.7-plus 多模态模型
  • Skill 名称:ecommerce-wireframe-strategist
  • 其他:Markdown、YAML、GitHub、Mermaid、结构化工作流模板

效果展示

项目最终形成了一套可以重复使用的电商视觉线框决策流程。

用户只需要手动提供商品信息、设计任务、品牌规则、市场资料、竞品资料、用户评价及历史数据,Skill 就会按阶段生成:

  • 项目资料完整性检查;
  • 市场与竞品调研分析报告;
  • 商品表达策略;
  • 电商视觉线框策略单;
  • 上线数据复盘报告;
  • 下一版本的最小测试方案。

线框策略不会只给出笼统的“高级感、年轻化”等风格词,而是明确每个模块的目的、主信息、支撑证据、内容元素和验收标准。

例如:

模块 1|建立用户相关性
用户需要理解:这个商品与我的问题有关
主信息:目标人群 + 核心问题
验收标准:第一阅读层能够独立表达对象与利益
模块 2|说明商品价值
用户需要相信:商品能够解决上述问题
主信息:核心卖点
支撑内容:参数、成分、资质或真实反馈

上线后,用户可以继续录入版本变化、表现数据和运营观察。Skill 会区分已经观察到的事实、可能的解释和暂时无法判断的问题,并为下一轮建议一至两个最小测试变量,避免每次把整套方案全部推翻。

项目链接(可选)

GitHub 仓库:

https://github.com/ChecheChat/ecommerce-wireframe-strategist

踩坑记录(可选)

1. 不能在资料不完整时直接生成线框

最初容易把工作流理解成“输入商品信息,立即输出页面结构”。但如果缺少本轮经营目标、核心卖点证据或品牌边界,生成的线框看似完整,实际无法用于设计。

因此增加了“资料台”和阶段门禁。Agent 会先输出已知信息、缺失信息、冲突信息和待验证假设,再判断是否适合进入下一阶段。

2. 竞品常用的表达不等于已经验证有效

多个竞品都采用某种卖点或页面结构,只能说明它是行业常见做法,不能直接证明它有效。

因此调研阶段会分别识别行业共识、同质化表达、可测试机会和潜在风险,避免把竞品分析变成简单照搬。

3. 线框不能只是固定模块模板

如果所有商品都机械套用“痛点—卖点—成分—效果—促销”,就无法反映不同商品和用户的真实决策过程。

现在每个线框模块都必须回答“这一段承担什么用户决策任务”,无法服务本轮目标的模块会被删除。

4. 不能把转化问题全部归因于设计

转化结果还可能受到价格、商品竞争力、流量人群、库存、促销机制和页面承接等因素影响。

因此复盘 Agent 必须同时提供至少一个非设计层面的解释,并指出还需要哪些信息才能进一步判断。

5. 单次数据反馈不能直接证明因果

一个版本表现提升,并不能证明所有修改都有效。一次同时修改过多内容,也会导致下一轮无法复用经验。

因此每轮只建议测试一至两个主要变量,同时记录修改项、保持项、预期影响和实际结果,让反馈逐步沉淀为可以复用的设计经验。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions