sz-icnc-webapp - SKILL.md Agent Skill

name: sz-icnc-webapp description: 苏州艾恩西精密五金有限公司官网开发指南。当需要修改、更新或开发 sz-icnc.com 网站时使用此技能，包括：(1) 页面内容编辑 (2) 样式调整 (3) 添加新功能 (4) 国际化翻译 (5) 产品展示更新。技术栈：HTML5 + CSS3 + 原生 JavaScript，支持中/英/日三语切换。

SZ-ICNC 官网开发

苏州艾恩西精密五金有限公司企业官网，支持中英日三语国际化。

决策树：选择开发路径

用户需求 → 是什么类型？
├─ 内容修改 → 编辑 index.html 对应 section
├─ 样式调整 → 修改 css/style.css
├─ 功能开发 → 编辑 js/main.js
├─ 翻译更新 → 编辑 js/i18n.js 的 translations 对象
└─ 新增页面 → 复制 index.html 结构，更新导航链接

项目结构

sz-icnc.com/
├── index.html      # 主页面
├── css/style.css   # 全局样式（CSS变量定义主题）
├── js/
│   ├── main.js     # 交互逻辑
│   └── i18n.js     # 国际化模块
├── images/         # 图片资源
├── slides/         # PPT 幻灯片页面
│   ├── index.html  # 幻灯片展示页
│   └── media/      # PPT 提取图片
│       ├── hdphoto1~3.wdp      # 高清图片（WDP 格式）
│       ├── image1~134.png      # PNG 图片
│       └── image8~134.jpeg     # JPEG 图片
└── docs/*.pptx     # 公司资料（可作为内容参考）

国际化 (i18n)

支持语言：🇨🇳 中文(zh-CN) | 🇺🇸 English(en) | 🇯🇵 日本語(ja)

添加翻译：在 js/i18n.js 的 translations 对象中添加键值对

HTML 使用：

<p data-i18n="section.key">默认文本</p>
<input data-i18n-placeholder="form.email" placeholder="邮箱" />

JS 使用：

window.i18n.t("key.name"); // 获取翻译
window.i18n.switchLanguage("en"); // 切换语言
window.i18n.getCurrentLanguage(); // 当前语言

页面模块

模块	选择器	说明
导航栏	`header nav`	Logo + 链接 + 语言切换 + 移动端菜单
横幅	`section.hero`	欢迎信息 + CTA 按钮
关于我们	`#about`	公司介绍
产品中心	`#products`	产品卡片网格
联系我们	`#contact`	电话、邮箱、地址
页脚	`footer`	版权信息

常用操作

添加产品卡片：

<div class="product-card">
  <img src="images/product.jpg" alt="产品名称" />
  <h3 data-i18n="products.item1.title">产品名称</h3>
  <p data-i18n="products.item1.desc">产品描述</p>
</div>

修改主题色：编辑 css/style.css 中 :root 的 CSS 变量

开发规范

HTML：语义化标签，data-i18n 属性用于可翻译文本
CSS：移动优先，断点 768px/1024px，使用 CSS 变量
JS：ES6+ 语法，querySelector 选择器，添加必要注释
图片：压缩后放入 images/，使用描述性文件名