# UI 开发：从设计稿到上线前的打磨

> 给前端与设计工程师的一组工具：读 Figma 设计稿写代码，套用组件库与设计系统，清理 AI 生成界面的模板感，最后在真实浏览器里检查效果、性能与无障碍。

- 页面：https://hebbmind.com/zh-TW/collections/ui-development
- 更新时间：2026-10-09

## 资源

- [Figma MCP Server](https://hebbmind.com/zh-TW/mcp/mcp-server-guide.md): [MCP] 从设计稿出发：让 agent 读取 Figma 里的组件、变量与布局再写代码，比照着截图还原更准。需要 Figma 账号授权。
- [Frontend Design](https://hebbmind.com/zh-TW/skill/frontend-design.md): [Skill] 从零做页面时先定视觉方向，在配色、字体与布局上做有取舍的选择，避开千篇一律的模板化界面。Anthropic 官方。
- [UI UX Pro Max](https://hebbmind.com/zh-TW/skill/ui-ux-pro-max-skill.md): [Skill] 按产品类型检索界面风格、配色、字体搭配与 UX 规范，先拿到一套设计系统建议再动手。
- [shadcn/ui](https://hebbmind.com/zh-TW/skill/shadcn.md): [Skill] 用 shadcn/ui 的项目必装：agent 借助官方 CLI 读取项目配置与组件文档，按规范添加、组合和修复组件。
- [Tailwind CSS](https://hebbmind.com/zh-TW/skill/tailwindcss.md): [Skill] Tailwind CSS 的通用写法：响应式与状态变体、深色模式，克制使用任意值，先拆组件再用 @apply。
- [Impeccable](https://hebbmind.com/zh-TW/skill/impeccable.md): [Skill] 界面写完之后的打磨：audit、critique、polish 等命令配合确定性检测规则，揪出 AI 生成界面的常见问题。
- [UI Skills](https://hebbmind.com/zh-TW/skill/ui-skills.md): [Skill] 给设计工程师的细节修整：间距与层级、可访问性、网页元数据、动效卡顿。
- [designlang](https://hebbmind.com/zh-TW/cli/design-extract.md): [CLI] 想参考某个网站的风格时用：一条命令导出它的颜色、字体、间距等设计令牌和 Tailwind 配置。
- [Chrome DevTools MCP](https://hebbmind.com/zh-TW/mcp/chrome-devtools-mcp.md): [MCP] 改完在真实 Chrome 里验证：看控制台与网络请求、截图、录制性能追踪。Chrome DevTools 团队官方维护。
- [Web Quality Skills](https://hebbmind.com/zh-TW/skill/web-quality-skills.md): [Skill] 上线前的质量检查：结合 Lighthouse 与性能追踪，审计 Core Web Vitals 和 WCAG 无障碍。

[合集](https://hebbmind.com/zh-TW/collections.md)