AgentMatter
EN/中文
提交项目GitHub
Skills · 社区项目

OJO Design Skills

OJO Design Skills 为 AI 编程代理提供两条 UI/UX 设计路线：工具型产品借鉴成熟体系，品牌型产品建立独特方向，并输出设计令牌、组件状态和动效规范。

127 StarsMIT1 个月前更新
安装与使用 GitHub
01

项目介绍

OJO Design Skills 当前包含 app-ui-ux-best-practices 主 Skill 及参考文档。它从产品定位和参考研究出发，再确定视觉方向、颜色与排版、组件和交互规格。它是一套设计工作方法，不是素材站或保证商用品质的一键生成器；最终质量仍取决于输入、宿主与人工验收。

02

核心功能

01

区分工具与品牌产品

常规路线采用适合的成熟设计语言；创新路线可用材质隐喻、原型、叙事或文化符号建立方向。

02

把方向落实到组件

输出明确颜色、排版、间距、Tailwind 类和相关交互状态，覆盖默认、焦点、加载、错误等状态。

03

约束占位素材与模板化视觉

要求主题相关素材和有依据的视觉选择；不应把禁止某些组合误解为某个颜色永远不可用。

作者展示的个人网站首页、文章页、列表页与介绍页设计
仓库作者的多页面设计样例；并非本站生成或测试结果。查看仓库原图
03

安装与使用

使用仓库的 Bash 安装器，把 <client> 替换为目标客户端，例如 codex 或 claude-code。该命令会下载并运行脚本，执行前应审阅来源与目标目录；不要默认追加 --force。

AI AGENT INSTALL

让 AI Agent 帮你安装

把这段话发送给 Codex、Claude Code 或其他可以操作本地环境的 AI Agent。

请帮我安装 OJO Design Skills，仓库：https://github.com/touchine-ojo/OJO-Design-Skills。先阅读 README.md 和 skills/app-ui-ux-best-practices/SKILL.md，确认我的 Agent 与安装目录，使用文档原始命令。使用仓库的 Bash 安装器，把 <client> 替换为目标客户端，例如 codex 或 claude-code。该命令会下载并运行脚本，执行前应审阅来源与目标目录；不要默认追加 --force。重载客户端后确认 app-ui-ux-best-practices 可用。用一个小型产品简报请求设计规范，检查是否给出与产品一致的方向、令牌、组件状态和素材要求；生成界面还需检查响应式和可访问性。遇到凭据、额外权限、新依赖或覆盖文件时先确认，不在日志暴露机密，不自动进行对外写入。
01开始前准备
  • Bash、curl 与 tar；Windows 用户需准备合适的 Bash 环境。
  • 已经安装的目标 AI 编程客户端。
  • 明确产品、受众、界面目标和可用素材。
02复制安装命令或配置
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target <client>
03按步骤完成安装
  1. 1
    选择客户端并审阅安装脚本

    打开仓库 scripts/install.sh，确认目标和写入目录。上方命令的 <client> 可替换为 codex、claude-code、zcode、deepcode、workbuddy 或 opencode；它是占位符，不能原样执行。

  2. 2
    安装并重载客户端

    在具备 Bash、curl、tar 的环境执行替换好目标的命令。保持默认保护行为；如已有同名 Skill，先确认备份或覆盖方案，再重载客户端。

  3. 3
    用明确简报验证

    提供产品类别、目标受众、关键页面和参考图。让 Agent 先建立方向，再输出颜色、排版、组件与交互规范；对最终页面进行人工验收。

如何确认安装成功

重载客户端后确认 app-ui-ux-best-practices 可用。用一个小型产品简报请求设计规范，检查是否给出与产品一致的方向、令牌、组件状态和素材要求；生成界面还需检查响应式和可访问性。

使用前注意
  • 安装脚本会写入对应客户端的技能目录。
  • --force 会替换现有副本且不备份，本教程不建议默认使用。
04

使用场景

SCENARIO 01

建立产品设计规范

为 SaaS 或工具界面确定统一的颜色、间距、组件和状态。

SCENARIO 02

探索品牌方向

为内容、生活方式或创意产品建立有证据支持的视觉路线。

05

使用评价

根据 README 与核心工作流，项目把产品定位、视觉方向和组件细节串成了可执行规范。方向确认需要用户参与，示例也不能证明任意项目都能直接商用；本站没有运行安装器或生成界面测试。

值得一试的地方

  • 兼顾成熟体系与品牌差异化。
  • 把视觉方向落实到具体组件和状态。

使用前要知道

  • 需要产品简报、素材和人工设计判断。
  • 仓库示例不是独立评测，安装与实际生成未实测。
06

README

OJO Design Skills

Overview

OJO Design Skills 为 AI 编程代理提供两条 UI/UX 设计路线：工具型产品借鉴成熟体系，品牌型产品建立独特方向，并输出设计令牌、组件状态和动效规范。 OJO Design Skills 为 AI 编程代理提供两条 UI/UX 设计路线：工具型产品借鉴成熟体系，品牌型产品建立独特方向，并输出设计令牌、组件状态和动效规范。

Getting started

  • 使用仓库的 Bash 安装器，把 <client> 替换为目标客户端，例如 codex 或 claude-code。该命令会下载并运行脚本，执行前应审阅来源与目标目录；不要默认追加 --force。
  • 核心 Skill 根据产品价值选择常规或创新路线。
  • 常规设计流程先研究参考并确认视觉方向，再生成设计令牌与组件；咨询式使用可服从调用方格式。
  • 重载客户端后确认 app-ui-ux-best-practices 可用。用一个小型产品简报请求设计规范，检查是否给出与产品一致的方向、令牌、组件状态和素材要求；生成界面还需检查响应式和可访问性。

Configuration

curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target <client>
在 GitHub 阅读完整 README →