附录

本文用到的工具和链接

Refero Styles

用于浏览网站设计风格，并查看对应的颜色、字体、组件规则和 DESIGN.md。

https://styles.refero.design/

web-to-design-md

用于读取网站中的颜色、字体、CSS 变量、组件和交互状态，并整理成设计说明。

https://github.com/Paidax01/web-to-design-md

Pinterest

适合寻找整体视觉风格、颜色、卡片布局、仪表盘和个人效率工具等参考。

https://www.pinterest.com/

Page Flows

适合查看真实产品的页面设计和用户流程，包括登录、设置、订阅、搜索、任务管理和移动端引导等场景。

https://pageflows.com/

Codex Skill 和开源工具

taste-skill

地址

https://github.com/Leonxlnx/taste-skill

用途是为 Codex 提供网页审美、参考图还原和视觉生成相关能力，也包含减少模板化网页风格的实践规则。

  • design-taste-frontend 普通网页的视觉调整
  • image-to-code 根据参考图还原网页
  • imagegen-frontend-web 没有参考图时生成网页效果图
  • imagegen-frontend-mobile 生成手机 App 页面效果图
  • brandkit 制作品牌视觉板
  • redesign-existing-projects 改造已有项目
  • minimalist-ui 制作极简风格界面
  • gpt-taste 增强视觉和动效表现
  • high-end-visual-design 制作高端方向的视觉设计

GSAP skills

地址

https://github.com/greensock/gsap-skills

用于在 Codex 中使用 GSAP，实现滚动动画、交互动效和其他网页动画效果。

web-to-design-md

地址

https://github.com/Paidax01/web-to-design-md

输入网页 URL 后，可以提取页面的颜色、字体、按钮、间距和卡片样式，输出 Codex 可以读取的 DESIGN.md。

设计参考网站

风格参考

  • Refero Styles 浏览已经整理好的网页风格、DESIGN.md、配色和字体规则

真实产品界面参考

  • Mobbin 查看真实 App 和产品界面，适合参考登录页、引导页和仪表盘
  • Page Flows 查看真实产品的页面流程、交互和布局

审美与视觉方向参考

  • Recent 浏览近期网页设计趋势，寻找视觉方向
  • Collect UI 查看 UI 组件和页面灵感
  • Minimal Gallery 寻找极简风格网站参考
  • Land-book 浏览 Landing Page 案例
  • Lapa Ninja 浏览高质量 Landing Page 案例
  • Pinterest 搜索网页设计、作品集和情绪板等视觉参考

动效与组件参考

  • React Bits 查看 React 动效组件和交互实现

其他工具

  • Imagen 用于生成页面配图、头像、项目展示图和其他视觉素材
  • Cowart 无限画布工具，用于集中摆放参考图、页面截图和生成素材，方便对比、标注和修改

适合 AI 辅助开发的 UI 组件库

基础组件库

  • shadcn/ui 采用复制代码到项目的方式，组件结构便于 AI 读取、修改和组合，基于 Tailwind 与 Radix
  • Radix UI 提供无样式基础组件，重点处理交互逻辑和可访问性
  • Headless UI 提供无样式但交互完整的组件，适合与 Tailwind 配合使用

中文和国内生态

  • Ant Design React 企业级组件库，文档结构清晰
  • Ant Design Mobile Ant Design 的移动端组件库，适合 H5 和移动端页面
  • Arco Design 支持 React 和 Vue，提供较完整的企业级组件体系
  • Semi Design 支持主题定制，适合需要统一视觉规范的项目
  • NutUI 面向移动端的组件库，支持 Vue 和 React
  • TDesign 腾讯推出的多端组件体系，支持 React、Vue 和小程序

现代视觉方向

  • HeroUI 基于 Tailwind，适合制作具有视觉表现力的界面
  • Mantine 功能覆盖较完整，文档适合开发时查阅
  • Chakra UI 关注可访问性和组件组合
  • Park UI 基于 Ark UI，适合制作可定制组件
  • Magic UI 以动效组件为主，适合需要增强页面表现力的项目

AI 组件集市

  • 21st.dev 提供可安装的组件 Registry，延伸 shadcn 生态
  • V0 Vercel 的 AI UI 生成工具，常用于生成 shadcn 风格代码
  • Aceternity UI 提供视觉表现较强的组件，适合实验性页面和动效页面