frontend-design

Frontend Design - 独特生产级前端界面设计

技能概述

Frontend Design 是一个专注于创建具有强烈美学立场、避免同质化的高质量前端界面的设计技能，帮助您打造令人难忘的生产级用户界面。

适用场景

1. 品牌官网与产品页面设计

当您需要创建能够传递品牌个性、在竞品中脱颖而出的官方网站或产品展示页面时。该技能专注于建立视觉记忆点，确保用户在移除Logo后仍能识别您的界面风格。

2. 数据仪表盘与管理系统

对于SaaS产品、数据分析平台等复杂系统，该技能可以帮您设计既美观又不失功能性的仪表盘界面，打破默认组件库的千篇一律，创造独特的视觉体验。

3. 高保真组件与界面原型

当您需要从设计理念直接产出可用的前端代码时，包括React组件、HTML/CSS页面、交互动画等，该技能能确保设计与实现的一致性，避免设计稿与最终效果脱节。

核心功能

1. 设计可行性评估 (DFII)

在开始设计前，使用设计可行性与影响指数从5个维度评估您的设计方向：美学冲击力、场景适配度、实现可行性、性能安全性、一致性风险。通过量化评分帮助您判断设计方案是否值得推进，避免盲目执行高风险设计。

2. 审美方向定义与执行

拒绝默认模板和通用组件，引导您明确定义界面的审美立场（如野兽派、奢华极简、复古未来等），并提供字体选择、色彩系统、空间布局、动效设计、质感层次等全方位执行规则，确保每个元素都服务于整体美学主张。

3. 生产级代码实现

不仅生成设计概念，更产出干净、模块化、语义化且可访问的真实代码。支持原生HTML/CSS、React组件等主流技术栈，严格遵循无死样式、无冗余动画、键盘友好的实现标准，让设计稿直接转化为生产环境可用代码。

常见问题

这个技能适合什么类型的前端项目？

Frontend Design 适合任何需要独特视觉表达的前端项目，特别适用于品牌官网、产品落地页、SaaS管理后台、数据可视化仪表盘等场景。如果您希望界面避免"看起来像ShadCN默认样式"或"AI生成的感觉"，这个技能特别适合。对于需要快速迭代的内部工具或完全标准化的企业系统，可能需要权衡独特性与开发效率。

如何避免我的设计看起来像AI生成的？

该技能内置了详细的反模式检测机制，明确禁止使用Inter/Roboto等默认字体、紫色渐变SaaS风格、Tailwind/ShadCN默认布局等常见AI设计套路。通过强制要求设计前定义"差异化锚点"（即去Logo后如何被识别），以及设置DFII美学冲击力评分门槛，确保每个设计方案都有独特的视觉记忆点。同时强调"克制性装饰"原则，所有视觉元素必须服务于整体美学主张。

这个技能支持哪些前端框架？

该技能的代码实现标准是框架无关的，优先使用现代原生CSS特性，同时支持React函数组件、Framer Motion动画等主流方案。核心原则是"复杂度匹配"——极简设计要求极高的精确度，极繁设计则需要复杂的动画和层级。无论使用何种技术栈，都要求代码语义化、可访问性达标，并且没有无用的样式代码。如果您有特定的框架偏好，可以在对话中明确说明。