前端设计概念百科 · 可交互的设计参考库 · 面向 AI Coding 的 Prompt 库
不知道叫什么 → 找到专业名称 → 看懂设计类型 → 亲手试效果 → 选定方案 → 复制 Prompt → 交给 Coding Agent
在线站点：https://gongfpp.github.io/interface-atlas-web/
界面图谱把「视觉风格、组件、交互模式、动效、页面、设计基础、无障碍」这些前端设计里天天遇到、却常常叫不出名字的东西，整理成一套可检索、可交互、可交给 AI 的参考库。它不教你某个框架怎么用，而是帮你和你的 AI 助手先在同一套词汇上对齐。
- 叫不出名字：用口语描述就能找到专业术语（「加载的时候灰色一闪一闪」→ 骨架屏 Skeleton Loading）。
- 看不到效果：每个概念都有真实可运行的 Live Demo，而不是截图或 GIF。
- 不知道何时不该用：每个条目都有 When to Use 与 When NOT to Use、易混淆概念辨析。
- 不知道怎么交给 AI：实验室可复制当前风格与状态的实现说明；通用概念仍保留 4 层 Prompt，另附机器可读 JSON / Markdown。
| 分区 | 数量 | 内容 |
|---|---|---|
| 风格 Styles | 25 | 每种视觉语言的完整迷你网页示范（可运行） |
| 组件 Components | 46 | Live Demo、Variants、Anatomy、多框架命名对照 |
| 交互模式 Patterns | 21 | 解决某类交互问题的方法与取舍 |
| 动效 Motion | 23 | 真实运行，带播放器（播放 / 重播 / 慢速 / 前后对比） |
| 页面 Pages | 26 | 页面类型的结构拆解与布局变体（含 404 / 订单确认 / 聊天 / 日历 / 帮助中心等） |
| 基础 Foundation | 18 | 字号、行高、间距、像素与分辨率、相对单位、圆角、边框、层级、栅格、断点、触控目标、动效时长等入门基础 |
| 无障碍 A11y | 6 | 焦点环、跳过链接、减弱动效、键盘导航、实时区域、替代文本 |
| 灵感图库 Gallery | 5 套 / 40 张 | AI 生成的设计参考图集，每套附可复现的生图 Prompt |
每个概念条目包含：中英双语名称 / Aliases（含口语描述）/ 定义 / When to Use / When NOT to Use / Variants / Related / Compare / 实现要点 / 4 层 Agent Prompt / 参考来源。
- 口语化搜索：「骨架屏」「卡片鼠标放上去浮起来」「Mac 那种快捷搜索框」都能命中；关键词 / Alias / Tags / 正文加权匹配，构建时生成静态索引，无运行时模型、无 API 依赖。
- 选定并带走：统一实验室选择基础示例或风格变体，「使用当前方案」直接带入组件、风格、模式与验收要求。真实预览形式与「未预览」的附加形式分开标注，后者不会伪装成已演示效果；保存、恢复与导出保留这一边界。通用说明单独保留，复制失败可手动选择文本；连续操作的反馈以最近一次复制为准。
- 准确的预览边界：「窄容器」限制内容宽度；「设备视口」提供独立 iframe 页面；两者均不替代真机测试。仅显示实际生效的演示模式，动效页沿用播放器。
- 项目参考册：在当前浏览器保存方案配置与选择理由，按项目分组、恢复、复制或下载 Markdown；可下载 JSON 备份并在其他浏览器导入，导入先预览，再合并新增方案，不覆盖已有记录。移除方案可在当前页面撤销。原有条目收藏和浏览历史继续保留；存储失败时保留待保存操作并显示提示，重试会与最新存储合并，保留其他标签页的新增、编辑与删除。方案保存失败后重试沿用同一条记录，不重复新增；改变配置或项目仍可另存方案。清理浏览器数据会丢失方案，重要内容需导出备份。
- 同任务对比：弹窗/抽屉/底部面板、分页/无限滚动、标签页/折叠面板使用同一组内容，可直接操作体验差异。
- 从任务进入：首页精选后台页面、表单填写、截图术语三条路径。表单包含上传与资料编辑的完整模拟流程，以及按钮主次和间距的单因素正反例。
- 组件跨风格变体：46 个组件共 401 套适配风格示例，其中按钮 21 套、输入框/卡片/选择框/复选框/开关各 12 套，其余组件各 8 套。六类核心组件以紧凑样例墙对照外观，选中后进入完整交互演示；风格按材质、形态、字体与反馈重新设计。按钮示例可用键盘完成保存、取消与重试，统一标注为不提交真实数据的本地模拟。
- 面向 AI 的机器可读层：
/api/concept/<type>/<id>.json、全库打包/api/terms.json、/llms.txt、/llms-full.txt，以及每页的/<type>/<id>.mdMarkdown 镜像。 - 双语：中文为默认，英文在
/en/下完整镜像。
Astro（静态输出）+ React Islands + Tailwind CSS v4 + TypeScript。无后端、无数据库，可部署到任意静态托管；评论走 giscus（GitHub Discussions）。
npm install
npm run dev # 本地开发
npm run build # 全量管线：content:check → api:build → search:build → astro build
npm run preview # 预览构建产物npm run test:unit # 收藏/历史、方案重试、复制乱序与全库形式边界回归
npm run content:check # 内容校验：引用完整性 / 双语必填 / compare 组
npm run check # astro check（类型）
npm run lint # eslint（含 react-hooks 规则）
npm run test:smoke # Playwright：搜索闭环 / 各页无横向溢出 / 无障碍
npm run search:test # 黄金查询回归（Top-3 命中率 ≥ 80%）
npm run gen:registry # 新增 Demo 后重新生成 Demo 注册表src/
content/ # 全部内容条目（YAML，按类型分目录），内容即数据
islands/ # React 交互岛（搜索、Prompt、Demo）
components/ # Astro 组件与页面区块
pages/ # 文件路由（zh 无前缀，en 在 /en 下）
layouts/ # BaseLayout
lib/ # 搜索、i18n、内容读取
styles/ # Tailwind v4 主题令牌与全局样式
scripts/ # 内容校验、API 层、搜索索引、注册表生成
docs/ # PRD / 内容生产规范 / 部署说明 / 竞品调研
public/ # 静态资源、生成好的 API 与 llms 文本
内容条目规范见 docs/content-guide.md；产品定义见 docs/PRD.md。新增一个概念通常只需要：写一个 src/content/<type>/<id>.yaml，配一个同名的 src/islands/demos/<id>.tsx，然后 npm run gen:registry 并跑一次 npm run content:check。
AGPL-3.0。如需商业授权请联系作者。
首页精选 10 种参考构图，风格库共 25 种。封面与详情的完整交互页复用同一份真实 DOM、品牌、素材和样式；整页预览可以直接操作，不再切换到另一套局部 Demo。详情支持真实 390/320px 独立视口、模式、重置与独立打开，操作仅在当前页面内存中演示，不注册账号、不发送数据或支付。新增风格时，须同时补齐共享页面的布局、对应操作及逐风格回归；不能只新增一份独立 React Demo。
此展示范围与组件实验室的风格变体分开管理。主视觉照片为按用户参考重新生成的素材近似，文字与布局为真实 DOM；来源、状态边界、维护入口和验收方式见 风格参考样张，逐风格迁移差异与代表性前后截图见 迁移与验收记录。