SuperAPI AI 工具集

command-line-chic

设计与创作

查看项目

更新于 10-15 21:47

技能介绍

用途:这是 freeCodeCamp 的「Command-line Chic」UI 设计顾问技能,用于在构建、样式化或评审界面时应用其美学规范,适用于 freeCodeCamp 产品、仪表盘、管理工具、落地页、文档、编辑器主题及前端贡献等场景。

主要能力:提供一套设计原则与令牌值,包括深色优先且可切换主题、最小 18px 基础字号、至少 7:1 对比度、五种带语义的强调色(紫、黄、蓝、绿、红),以及按钮、表单、卡片、导航、表格、模态框、代码块等组件模式与布局、无障碍要求。

使用方式:将令牌翻译为项目所用技术,如原生 CSS、Tailwind、CSS-in-JS、React Native、Flutter、SwiftUI 或编辑器主题。原生 CSS 可在 :root 定义变量,通过 body 上的 .dark-palette 与 .light-palette 切换;Tailwind 可映射到 theme.extend.colors;CSS-in-JS 可构建语义化 theme 对象。组件应引用语义令牌而非硬编码十六进制值。

限制:资料未提供安装命令、收费信息或具体平台支持范围。需避免纯黑背景、小于 18px 的可读文本、装饰性强调色、仅浅色模式设计、硬编码颜色、以阴影作为深色模式主要层次手段、缺失键盘焦点状态,以及使用 Hack、Lato 和系统回退之外的字体。