SuperAPI AI 工具集

interface-design-system

设计与创作

查看项目

更新于 10-15 23:56

技能介绍

用途:Interface Design System 是 Claude Code 的设计工程技能,用于构建具有系统一致性的界面,主要面向仪表盘、管理后台和应用 UI,防止跨会话的设计漂移。

主要能力:提供基于原则的设计工艺(间距网格、深度策略、表面层级);通过 .interface-design/system.md 跨会话记忆设计决策并在每次会话自动加载;强制组件遵循统一模式。资料称,没有该系统时按钮高度会在 36px、38px、40px 间漂移,有了它则一次决策、持续应用。

使用方式:推荐插件安装,先执行 /plugin marketplace add Dammyjay93/interface-design,再通过 /plugin menu 选择 interface-design,安装后重启 Claude Code。也可手动克隆仓库并复制 .claude 与 .claude-plugin 目录到用户目录后重启。常用命令包括 /interface-design:init 初始化、/interface-design:status 查看当前系统、/interface-design:audit src/components 审计代码一致性、/interface-design:extract 从现有代码提取模式。首次会话会评估项目上下文、建议设计方向并请求确认,随后在构建每个组件前声明设计选择,最后可保存 system.md。

适用场景:数据密集型仪表盘、管理后台、开发者工具、消费级应用、金融与企业 B2B 界面等。资料给出 Precision & Density、Warmth & Approachability、Sophistication & Trust、Boldness & Clarity、Utility & Function 等设计方向。

限制:资料未提供收费、价格、平台支持范围或效果保证等信息;具体行为取决于 Claude Code 环境与项目配置。