前端 UI 技能清单：按场景选型指南

一、Vue 3 项目开发

面向 Vue 3 技术栈的完整方案，涵盖前端设计、UI 工程化、Element Plus 组件库以及无障碍审计四个环节。

• frontend-design：负责整体前端视觉与交互设计
• frontend-ui-engineering：将设计落地为可维护的 UI 工程实现
• element-plus-vue3：基于 Element Plus 的 Vue 3 组件库方案
• a11y-audit：无障碍审计，确保符合可访问性标准

适合需要兼顾视觉质量与可访问性标准的 Vue 3 中后台或企业级项目。

二、已有网站重设计

针对存量项目的视觉升级，在不推翻现有架构的前提下，系统性提升网站的审美水准与品牌质感。

• redesign-existing-projects：面向已有项目的重设计方法论
• hallmark：标志性视觉语言与识别度塑造
• premium-frontend-design：高端前端设计能力

适合希望保留技术底座、仅做视觉与体验升级的网站。

三、截图转网页

从设计稿或截图直接还原为可运行网页，打通视觉到代码的转换路径。

• image-to-code：图像到代码的自动转换能力

适合快速复刻参考站点或落地设计交付物。

四、从线框开始

以线框图为起点推进原型设计，强调先结构后视觉的构建顺序。

• wireframe-prototyping：线框图与原型搭建
• prototype：可交互原型实现

适合产品早期阶段快速验证布局与交互逻辑。

五、高端品牌官网

面向品牌官网的完整方案，对调性、一致性和视觉溢价有较高要求。

• brand-guidelines：品牌规范与视觉标准
• brandkit：品牌工具包与素材体系
• premium-frontend-design：高端前端设计能力

适合追求品牌质感与统一视觉表达的项目。

六、极简风格

以克制、留白和内容优先为核心的设计方向。

• minimalist-ui：极简主义界面设计

适合追求干净、现代、低干扰界面的产品。

七、工业、终端、粗野主义风格

面向硬朗、原始、高对比度视觉语言的设计方案。

• industrial-brutalist-ui：工业与粗野主义界面设计

适合开发者工具、终端界面或具有强烈个性主张的产品。

八、Apple 风格产品界面

借鉴 Apple 设计哲学与工程实现的产品界面方案。

• apple-design：Apple 风格设计语言
• emil-design-eng：面向工程落地的设计实现

适合追求精致细节、流畅体验与高级感的产品。

九、动效设计

覆盖动效创作、动效词汇、动效优化与动效评审的完整链路。

• animate：动效创作与实现
• animation-vocabulary：动效术语与表达体系
• improve-animations：动效优化与打磨
• review-animations：动效评审与质量把控

适合需要系统化提升界面动态表现力的项目。

十、组件库选型

在多种组件库之间做出理性选择，避免后期迁移成本。

• pick-ui-library：组件库评估与选型

适合项目启动阶段的技术决策。

十一、Toast 通知

专注于轻量级通知反馈的实现方案。

• ask-sonner：基于 Sonner 的 Toast 通知方案

适合需要统一、优雅提示体验的产品。

十二、Radix UI 迁移

从 Radix UI 向 Base 迁移的专项方案。

• migrate-radix-to-base：Radix 到 Base 的迁移路径

适合正在进行底层组件库替换的团队。

十三、移动端视觉方案

面向移动端的视觉生成与设计能力。

• imagegen-frontend-mobile：移动端界面图像生成

适合移动端优先或需要快速产出移动界面方案的项目。

结语

以上技能组合可按项目实际需求灵活拆分与重组。建议在启动阶段先明确项目类型与设计目标，再对应选取相应的技能模块，以避免资源浪费并提升交付效率。