这是一个整合HTML/CSS/JS的小微企业产品创新设计灵感生成器，通过输入行业与目标人群，模拟AI结合市场数据生成3-5套外观功能方案。代码遵循移动端适配、边界处理与可扩展原则，复制后可直接运行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小微企业产品创新设计灵感生成器</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
body { background: #f5f7fa; padding: 20px; color: #333; }
.container { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
h1 { font-size: 1.5rem; margin-bottom: 20px; color: #2563eb; text-align: center; }
.input-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-weight: 500; }
input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; }
button { width: 100%; padding: 12px; background: #2563eb; color: white; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background 0.2s; }
button:hover { background: #1d4ed8; }
.result { margin-top: 24px; }
.scheme { background: #f8fafc; border-radius: 8px; padding: 16px; margin-bottom: 12px; border-left: 4px solid #2563eb; }
.scheme h3 { font-size: 1.1rem; margin-bottom: 8px; color: #1e40af; }
.scheme p { margin: 4px 0; line-height: 1.5; }
.highlight { color: #dc2626; font-weight: 500; }
</style>
</head>
<body>
<div class="container">
<h1>小微企业产品创新设计灵感生成器</h1>
<div class="input-group">
<label for="industry">输入行业（如：餐饮/家居/文创）</label>
<input type="text" id="industry" placeholder="例：宠物用品">
</div>
<div class="input-group">
<label for="audience">输入目标人群（如：年轻宝妈/都市白领）</label>
<input type="text" id="audience" placeholder="例：Z世代露营爱好者">
</div>
<button onclick="generateSchemes()">生成创新方案</button>
<div class="result" id="result"></div>
</div>
<script>
// 设计元素库（模拟市场数据趋势：环保/智能/个性化/场景化）
const designElements = {
appearance: {
colors: ["莫兰迪低饱和色", "自然原木色", "渐变马卡龙", "复古做旧质感", "透明亚克力拼接"],
materials: ["可降解玉米塑料", "再生棉麻织物", "轻量化铝合金", "食品级硅胶", "竹纤维复合板"],
shapes: ["几何模块化拼接", "流体曲线轮廓", "迷你便携折叠", "仿生形态（如树叶/云朵）", "磁吸组合结构"]
},
functions: {
core: ["一键智能适配场景", "耗材订阅循环服务", "UGC内容共创模块", "能耗可视化监测", "跨界IP联名定制"],
scenarios: ["通勤/差旅便携", "居家轻收纳", "户外应急场景", "亲子互动体验", "独处疗愈时刻"],
differentiation: ["旧物改造增值服务", "社群打卡激励机制", "公益捐赠联动计划", "AR虚拟试用功能", "本地匠人手工背书"]
}
};
// 生成随机方案（3-5套）
function generateSchemes() {
const industry = document.getElementById('industry').value.trim();
const audience = document.getElementById('audience').value.trim();
const resultDiv = document.getElementById('result');
// 输入验证
if (!industry || !audience) {
resultDiv.innerHTML = '<p style="color: #dc2626;">请填写行业和目標人群</p>';
return;
}
// 生成3-5套方案（随机数量）
const schemeCount = Math.floor(Math.random() * 3) + 3; // 3-5套
let schemesHTML = '';
for (let i = 1; i <= schemeCount; i++) {
// 随机组合元素
const color = getRandom(designElements.appearance.colors);
const material = getRandom(designElements.appearance.materials);
const shape = getRandom(designElements.appearance.shapes);
const coreFunc = getRandom(designElements.functions.core);
const scenario = getRandom(designElements.functions.scenarios);
const diff = getRandom(designElements.functions.differentiation);
schemesHTML += `
<div class="scheme">
<h3>方案${i}：${industry}·${audience}定向设计</h3>
<p><span class="highlight">外观亮点</span>：${color} + ${material}材质 + ${shape}造型</p>
<p><span class="highlight">核心功能</span>：${coreFunc}（适配${scenario}）</p>
<p><span class="highlight">差异化优势</span>：${diff}（结合${industry}行业轻资产特性）</p>
</div>
`;
}
resultDiv.innerHTML = schemesHTML;
}
// 工具函数：随机选取数组元素
function getRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
</script>
</body>
</html>
使用说明
1. 在输入框分别填写行业（如“咖啡轻食”）和目标人群（如“写字楼加班族”）
2. 点击“生成创新方案”按钮，将随机输出3-5套包含外观（颜色/材质/造型）、核心功能（场景适配）、差异化优势的方案
3. 方案融合了环保/智能/场景化等市场趋势，贴合小微企业低成本试错需求
扩展建议
- 后续可通过
"designElements"对象添加行业专属元素（如“美妆”增加“可替换胶囊包装”）
- 接入真实API（如阿里云市场数据）替换随机生成逻辑，提升方案精准度
- 增加“方案收藏”功能，方便对比筛选最优解
关注我，有更多编程干货等着你！
