frontend-design-3

这玩意儿干嘛的？

设计师给了你一张设计稿，你对着它写 CSS 写了一整天还没对齐？frontend-design-3 帮你从设计直接生成前端代码，像素级还原。支持 React、Vue、纯 HTML+CSS，38 Stars。第三代版本在复杂布局和组件拆分方面大幅增强。

为什么值得装？

设计师的稿子很美，但还原成代码总是差点意思——间距不对、颜色偏差、暗色模式没适配、移动端乱了。frontend-design-3 不只还原静态视觉，还会自动处理移动端适配、暗色模式切换、无障碍访问等细节。装了这个 Skill，设计师和前端之间的「代沟」基本就填平了。

怎么用？

1. 提供设计稿截图或描述页面布局
2. AI 分析设计意图，生成对应框架的代码（React/Vue/HTML 均可）
3. 获取响应式、语义化、含暗色模式和无障碍支持的完整前端代码

核心功能

功能	说明
像素级还原	设计师截图直接生成对应代码，间距、颜色精准匹配
多框架支持	React、Vue、HTML+CSS 均可输出
响应式适配	自动处理移动端、平板、桌面多种视口
暗色模式	自动生成暗色模式样式，一键切换
无障碍支持	语义化 HTML、ARIA 标签、键盘导航支持
组件智能拆分	复杂布局自动拆分为可复用组件