技能说明
这项技能聚焦产品界面，而不是营销落地页。它引导 Agent 理解产品领域、真实用户任务与界面气质，制定布局层级、颜色、字体、间距、表面层次和组件状态规则，并把已确认的设计决策保存在 .interface-design/system.md 供后续页面复用。可用于仪表盘、SaaS、设置页、数据界面与管理后台。方向板和截图涂绘仅在可用图像工具时提供。MIT 许可；安装前应审阅技能内容，因为它会在编程 Agent 当前权限下运行。
关于此技能
适用于仪表盘、SaaS、后台和工具等产品界面，不适用于营销落地页。它强调先理解产品和真实用户任务，再确立视觉方向，并可把已确认规则保存到 .interface-design/system.md 跨会话复用。MIT 许可；安装前请审阅技能规则与权限。
核心能力
从产品领域出发
结合产品世界、实际用户和关键任务提出独特的视觉方向，减少套用通用界面模板。
设计系统记忆
把确认过的颜色、间距、表面层次与组件模式保存到 .interface-design/system.md，后续任务可读取并延续。
产品界面评审
围绕层级、排版、颜色、表面、状态与动效检查仪表盘、后台和工具界面。
可选视觉探索
当前环境提供图像生成工具时，可制作方向板、参考图或截图涂绘；没有该工具时仍可使用文字与规则完成设计。
适用场景
仪表盘与数据界面
明确数据层级、密度、视觉焦点和状态表达，适合分析工具和运营面板。
SaaS 与管理后台
设计或扩展导航、设置页、表单、管理操作和常见反馈状态。
跨页面保持一致
将已确认的视觉规则沉淀为 system.md，让后续页面和新会话延续同一套决定。
使用步骤
- 01
明确产品与用户任务
说明正在设计的产品界面、实际使用者及其要完成的动作；上下文不足时回答 Agent 的简短问题。
- 02
确定设计方向
让 Agent 先给出产品领域、视觉气质和界面结构，再由你确认方向。
- 03
构建并检查界面
按已确认规则实现页面，检查信息层级、关键状态与跨组件的一致性。
- 04
选择是否保存
完成后决定是否把设计决策写入项目中的 .interface-design/system.md，供后续工作复用。
常见问题
适合营销落地页吗？+
不适合。此技能明确聚焦仪表盘、应用、SaaS、工具和后台界面；营销落地页应使用面向营销页面的设计技能。
会自动保存设计系统吗？+
文档展示的是先提出保存、再由用户确认的流程；你可以决定是否在项目中保留 system.md。
方向板和截图涂绘一定可用吗？+
不是。它们依赖当前 Agent 环境提供图像生成工具；没有该工具时仍可使用核心设计流程。
支持哪些 Agent？+
仓库明确提供 Claude Code 与 Codex 的安装和调用说明；skills CLI 会检测它支持的 Agent。
安装前需要注意什么？+
技能会在编程 Agent 当前权限下运行。先阅读来源文件，确认其指令适合项目，再安装或使用。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Codex
已提供来源链接
命令可直接复制
2026/09/18
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design（自动检测受支持的 Agent）；指定 Codex：npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent codex -g；指定 Claude Code：npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g。README：https://github.com/Dammyjay93/interface-design#installation