词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code ndf-ui-style-system-runner 技能：梳理界面风格与组件原则

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/ndf-ui-style-system-runner/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/ndf-ui-style-system-runner/`，把核对后的文件保存为 `.claude/skills/ndf-ui-style-system-runner/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/ndf-ui-style-system-runner`。

中文摘要

根据产品语境和受众整理布局、组件、配色、排版和可访问性原则。

SKILL.md 中文导读

可复现示例

调用 /ndf-ui-style-system-runner，使用下方虚构路线卡片材料写一份界面风格建议。
project `Route Cards` | audience=volunteers using a touch display
screens=route list and route detail | states `selected` and `unavailable`
constraint `existing monochrome palette` | requirement distinguish states without relying on color alone

工作步骤

  1. 核对受众、布局与输入设备。
  2. 按组件、配色和文字层级整理建议。
  3. 补充状态反馈与可访问性取舍。

验收方法

保留 `existing monochrome palette`，用文字和组件样式区分 `selected`、`unavailable`。分别给出列表、详情布局和触控可访问性建议。

GitHub 原文 · 更新日期

适用环境

本地 Claude Code 项目。使用同一 GitHub 固定版本的 NDF 文档规则和对应技能，输出由维护者审核。

常见问题

这份建议会指定具体框架吗？

说明界面原则、状态与取舍。实现框架由项目维护者决定。

相关指南

相关推荐