UI 开发：从设计稿到上线前的打磨
给前端与设计工程师的一组工具：读 Figma 设计稿写代码，套用组件库与设计系统，清理 AI 生成界面的模板感，最后在真实浏览器里检查效果、性能与无障碍。
10 个资源更新于 2026-10-09
- Figma MCP ServerMCP从设计稿出发：让 agent 读取 Figma 里的组件、变量与布局再写代码，比照着截图还原更准。需要 Figma 账号授权。figma/mcp-server-guide2.1k
- Frontend DesignSkill从零做页面时先定视觉方向，在配色、字体与布局上做有取舍的选择，避开千篇一律的模板化界面。Anthropic 官方。anthropics/skills181k
- UI UX Pro MaxSkill按产品类型检索界面风格、配色、字体搭配与 UX 规范，先拿到一套设计系统建议再动手。nextlevelbuilder/ui-ux-pro-max-skill136k
- shadcn/uiSkill用 shadcn/ui 的项目必装：agent 借助官方 CLI 读取项目配置与组件文档，按规范添加、组合和修复组件。shadcn-ui/ui126k
- Tailwind CSSSkillTailwind CSS 的通用写法：响应式与状态变体、深色模式，克制使用任意值，先拆组件再用 @apply。MengTo/Skills6.8k
- ImpeccableSkill界面写完之后的打磨：audit、critique、polish 等命令配合确定性检测规则，揪出 AI 生成界面的常见问题。pbakaus/impeccable82k
- UI SkillsSkill给设计工程师的细节修整：间距与层级、可访问性、网页元数据、动效卡顿。ibelick/ui-skills9.8k
- designlangCLI想参考某个网站的风格时用：一条命令导出它的颜色、字体、间距等设计令牌和 Tailwind 配置。Manavarya09/design-extract4.2k
- Chrome DevTools MCPMCP改完在真实 Chrome 里验证：看控制台与网络请求、截图、录制性能追踪。Chrome DevTools 团队官方维护。ChromeDevTools/chrome-devtools-mcp53.7k
- Web Quality SkillsSkill上线前的质量检查：结合 Lighthouse 与性能追踪，审计 Core Web Vitals 和 WCAG 无障碍。addyosmani/web-quality-skills3k
