工程开发
interface-design avatar

interface-design

为实用型应用程序提供界面设计指引,专注于仪表板、管理面板与数据密集型界面,采用以组件库为先的开发模式。

简介

本技能为实用型软件(如内部工具、分析仪表板及数据密集型管理面板)提供系统化的设计框架。旨在协助 AI 代理在前端开发过程中保持视觉与结构的一致性。本技能强调“组件库优先”的哲学,利用 shadcn/ui、Skeleton、Flowbite 与 Ant Design 等工业标准工具,并在之上定义简洁的自定义层。通过确保所有 UI 决策皆记录于项目特定的 'interface-design.md' 文件中,代理能可靠地管理布局、字体、配色与间距规则,避免设计偏移。

  • 标准化仪表板、管理面板及数据密集型应用的 UI 模式。

  • 自动化项目设计文档的建立与维护,确保视觉一致性。

  • 与热门组件库(如 shadcn/ui、Skeleton、Ant Design)无缝整合。

  • 提供收集项目背景、用户角色与设计意图的结构化工作流程。

  • 确立布局模式、数据表格、筛选栏与加载状态的明确准则。

  • 提倡通过对比与字体层级建立视觉结构,而非过度使用装饰性元素。

  • 在启动新项目、新增主要 UI 组件或进行定期设计审查时使用此技能。

  • 除非 'interface-design.md' 中有特定覆盖说明,否则应优先使用组件库的默认行为。

  • 遵循定义的文字层级与表面浮起规则(例如:使用细微边框而非阴影)。

  • 约束:不适用于营销登录页面或装饰性创意网站。

  • 关键词:UI 设计, 设计系统, 组件库, 仪表板, 数据表格, 管理面板, 前端一致性, shadcn/ui, Skeleton, Ant Design, UX 模式, 间距, 字体, 实用型界面。

仓库统计

Star 数
0
Fork 数
0
Open Issue 数
0
主要语言
Python
默认分支
main
同步状态
空闲
最近同步时间
2026年5月3日 20:19
在 GitHub 查看