该技能用于把粗糙或仅能用的前端工作，转化为经过设计、可发布的界面。用法上先阅读应用，保留技术栈本地约定，再改进真实产品表面，而非添加通用装饰。
适用对象包括文档站、产品落地页、组件库、工作台应用、仪表盘、技术类开源网站，以及 React、Next.js、Vite 项目。
工作流程：一是理解界面，先判断屏幕类型，打开主路由与本地基础组件，优先复用已有库与模式，如本地 UI 组件、cn 工具、Tailwind token、shadcn/Radix、lucide 图标、已安装的动效库等；缺失的 UI 部件可借助组件参考寻找来源并适配。二是设定设计方向，从产品职责出发而非通用趋势，并以 token 定义背景、前景、弱化文本、边框、强调色、圆角、阴影、间距、字号、动效时长与缓动等视觉语法。三是设计完整状态，覆盖加载、骨架、待定、乐观更新、空状态、错误与无权限、成功确认，以及悬停、聚焦、按下、禁用、选中、活动路由、拖拽重排和移动端导航、长文本、溢出等。四是应用工艺规则，保持布局稳定，使用真实内容与数据形态，图标用于可识别操作，避免卡片套卡片与装饰性光斑、单一渐变等。五是像设计工程师一样验证，运行仓库标准格式化/检查/类型检查/构建/测试命令，启动开发服务器在浏览器检查桌面与移动端，排查重叠、文字截断、对比度、滚动、空白画布、控制台错误与加载停滞，3D/画布需确认非空白、适配与可交互。
内置资源包括 scripts/design_audit.py 做项目快速扫描，以及设计语言、设计工艺、实现模式、UI 组件、交互语言、设计工具、动效与图标等参考文档。
限制：资料未提供具体收费、价格、平台或效果数据；相关参考路径与示例需按资料中的名称使用，未说明的内容暂未提供。