关于 WebStack

WebStack 是一个专为设计师打造的网址导航站点，致力于收集和整理国内外优秀的设计资源、灵感创意网站、UI 素材资源以及设计工具。


有一段时间我发现我的收藏夹越来越多，很难找到某个不常用的网站。所以就有了这个网站，这里收集的基本都是我自己浏览器收藏夹里的网站，我平时用的相对比较多的一些都在这里。


如果你也是设计师，如果你也正好喜欢设计，那希望这个网站能给你带来一些作用。

项目起源与二次开发

本项目基于 WebStackPage 进行二次开发，使用 Kiro AI 辅助开发工具进行功能增强和优化。

原始项目：WebStackPage/WebStackPage.github.io

开发工具：Kiro AI - 智能代码助手，提供代码生成、重构、优化等功能

二开目标：数据与视图分离、增强管理功能、支持私有数据源、实现云端同步

感谢 WebStackPage 原作者提供的优秀开源项目基础，也感谢 Kiro AI 在开发过程中提供的智能辅助。 本项目继承了原项目的 MIT 开源协议，所有改进和新增功能同样开源共享。

二次开发亮点

相比原始项目，本版本进行了以下重大改进：

数据 JSON 化
  • 将硬编码在 HTML 中的网站数据提取为独立的 JSON 文件（assets/data/default.json）
  • 实现数据与视图完全分离，便于程序化管理和批量更新
  • 支持两级分类结构：纯一级分类或一级+二级分类
站内搜索
  • 顶部导航栏集成实时搜索框，支持中文、拼音全拼、拼音首字母多种搜索方式
  • 实时过滤显示匹配结果，自动隐藏无匹配内容的分类
  • 搜索结果为空时显示友好提示信息
双数据源支持
  • 默认数据源：项目内置的官方推荐网站列表（只读）
  • 私有数据源：用户自定义的个人书签数据（可编辑）
  • 一键切换数据源，自动记忆用户选择
  • 支持从默认数据源初始化私有数据源
可视化管理面板
  • 书签管理：可视化增删改查网站卡片，支持 Logo 图标选择
  • 分类管理：创建、编辑、删除分类，支持两级分类结构和 emoji 图标
  • 手动排序：拖拽或按钮调整分类和书签的显示顺序
  • 数据导入导出：支持 JSON 文件导入导出、复制粘贴 JSON 文本
  • OSS 配置：配置阿里云 OSS 连接信息，支持配置导入导出
云端同步
  • 手动同步：一键上传私有数据至阿里云 OSS 或从 OSS 下载
  • 自动同步：支持页面加载时自动同步、定时自动同步（30分钟/1小时/2小时）
  • 版本管理：基于版本号的增量同步，避免不必要的数据传输
  • 离线可用：本地 localStorage 持久化，网络断开时仍可正常使用
  • 多端同步：在不同设备间自动同步最新数据
单语言优化
  • 移除多语言支持，统一为中文版本
  • 降低维护成本，避免双语内容不同步问题
  • 简化项目结构，提升加载速度

核心特性

  • 精选资源：收录超过 200+ 优质设计网站，涵盖灵感采集、素材资源、设计工具、社区资讯等多个分类
  • 智能搜索：支持中文、拼音全拼、拼音首字母多种搜索方式，快速定位目标网站
  • 双数据源：默认数据源 + 私有数据源，支持自定义书签管理，打造专属导航
  • 云端同步：支持阿里云 OSS 云端备份，多设备数据同步，随时随地访问你的书签
  • 管理面板：可视化管理界面，支持书签/分类的增删改查、导入导出 JSON 数据
  • 纯前端架构：无需后端服务器，部署简单，访问速度快
  • 开源免费：完全开源，可自由定制和部署属于自己的导航站

内容分类

常用推荐

Dribbble、Behance、UI中国、站酷等设计师常用平台

社区资讯

36kr、人人都是产品经理、优设等行业资讯平台

灵感采集

发现产品：Producthunt、少数派、利器
界面灵感：Pttrns、Collect UI、Android Niceties
网页灵感：Awwwards、CSS Design Awards、The FWA

素材资源

图标素材：Iconfinder、iconfont、flaticon
UI资源：咕噜素材、Freebiesbug、uplabs
字体资源：Google Font、方正字库、字体传奇网
摄影图库：Unsplash、Pixabay、visualhunt
Mockup：MockupZone、Dunnnk、Mockup World

常用工具

图形创意：Photoshop、Illustrator、Blender
界面设计：Sketch、Figma、Adobe XD
原型交互：Axure、Principle、Framer

使用指南

  1. 浏览网站：点击左侧侧边栏分类，快速跳转到对应内容区域
  2. 搜索功能：使用顶部搜索框，输入关键词即可实时过滤网站
  3. 切换数据源：点击右上角"默认数据源"按钮，可切换到私有数据源
  4. 管理书签：点击右上角"管理面板"，进入后台管理界面
    • 书签管理：添加、编辑、删除书签，支持 Logo 选择
    • 分类管理：创建、编辑分类，支持两级分类结构
    • 导入导出：支持 JSON 格式数据导入导出
    • 云端同步：配置阿里云 OSS，实现多端数据同步
  5. 自定义部署：Fork GitHub 仓库，修改 assets/data/default.json 文件，即可定制专属导航

技术实现

WebStack 采用纯前端架构，无需后端服务器，部署简单高效：

  • 前端框架：jQuery 1.11.1 + Bootstrap 3.x
  • UI 主题：Xenon Admin Theme（侧边栏、卡片组件）
  • 图标字体：Font Awesome、Linecons、Elusive Icons
  • 动画效果：TweenMax（侧边栏展开/收起动画）
  • 图片懒加载：lozad.js（提升页面加载速度）
  • 拼音搜索：pinyin-pro（支持中文拼音搜索）
  • 云端存储：阿里云 OSS SDK（可选，用于数据同步）
  • 数据存储：JSON 文件 + localStorage（本地存储）
  • 开发工具：Kiro AI（智能代码助手，辅助二次开发）
关于 Kiro AI：本项目的二次开发过程中使用了 Kiro AI 智能开发助手，它帮助我们快速实现了管理面板的功能增强、代码重构优化、以及新特性的开发。Kiro 提供了代码生成、智能补全、重构建议等功能，大大提升了开发效率。

原始项目：WebStackPage/WebStackPage.github.io

交流反馈

如果你有任何建议、发现了 Bug，或者想要分享优质设计资源，欢迎通过以下方式联系我们：

关于站长

Designer. Viggo.

Full-time UI designer with an enduring interest in Coding.


这是一个公益项目，而且是 开源 的。你也可以拿来制作自己的网址导航。

如果你有更好的想法，可以通过个人网站 viggoz.com 中的联系方式找到我，欢迎与我交流分享。


开源协议

本项目采用 MIT 开源协议，你可以自由地：

  • 使用、复制、修改、合并、发布、分发本软件
  • 将本软件用于商业或非商业用途
  • 在遵守协议的前提下，自由定制和部署

唯一的要求是在软件和软件的所有副本中都必须包含版权声明和许可声明。