OJO-Design-Skills
by touchine-ojo
Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and more.
117stars
4forks
Shell
Added 9/14/2026
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
AI Agentsagent-skillsai-agentclaude-codecodexdesign-methodologydesign-systemdesign-tokensprompt-engineeringui-ux
Installation
# Add to your Claude Code skills
git clone https://github.com/touchine-ojo/OJO-Design-SkillsGetting Started
Guides for using ai agents skills like OJO-Design-Skills.
- Caveman: Cut Claude Token Use by 65%How agent-side prompt compression works, when to use it, and when not to.
- What is an AI Skills Marketplace?Definitions, how marketplaces work, and how to choose between them in 2026.
- Getting Started with AI SkillsFirst-time install walkthrough for Claude Code, Codex CLI, and ChatGPT.
Security ReportVerified
Last scanned: 9/14/2026
{
"issues": [
{
"file": "README.md",
"line": 64,
"type": "remote-install",
"message": "Install command (remote install script piped to a shell — review the source before running): \"curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main\"",
"severity": "low"
}
],
"status": "PASSED",
"scannedAt": "2026-09-14T09:35:28.291Z",
"npmAuditRan": true,
"pipAuditRan": true,
"promptInjectionRan": true
}Compare with similar skills
See how OJO-Design-Skills compares with popular alternatives.
OJO Design Skills
Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and more.
English · 简体中文 · 日本語 · 한국어 · Español
OJO Design Skills is a drop-in skill bundle that teaches your AI coding agent how to make real design decisions — not generic "AI-looking" layouts. Install once, and your agent gains a complete UI/UX methodology: brand-driven visual direction, design tokens, component recipes, motion specs, and a strict anti-pattern guardrail that keeps output from looking like slop.
It is agent-agnostic and ships with a single installer that targets every major client.
Features
- Two-track methodology. Convention Track adopts a proven design language for SaaS and utility products; Innovation Track builds brand-driven identity via Material Metaphor, archetype, narrative, or cultural-semiotic approaches.
- Anti-AI-slop guardrails. Hard-banned combinations (purple-blue gradients, gray-box placeholders, single-hue palettes) are enforced as rules, not suggestions.
- Real-imagery requirement. Any screen that shows imagery must use real, subject-specific assets — no decorative placeholders, fake stock smiles, or gradient blobs.
- Code-grade output. Components resolve to atomic Tailwind class strings with an 8-state interaction model; motion uses spring physics, not fixed curves.
Showcase
The same brief, with and without these skills installed.
Design samples
Additional output produced with these skills installed — one product, multiple surfaces.
Quick start
Install all skills with one command — replace <client> with your agent:
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target <client>
The remote installer requires Bash, curl, and tar.
| Client | --target |
Default install directory |
|---|---|---|
| Codex | codex |
${CODEX_HOME:-~/.codex}/skills |
| Claude Code | claude-code |
${CLAUDE_HOME:-~/.claude}/skills |
| ZCode | zcode |
${AGENTS_HOME:-~/.agents}/skills |
| DeepCode | deepcode |
${AGENTS_HOME:-~/.agents}/skills |
| WorkBuddy | workbuddy |
${WORKBUDDY_HOME:-~/.workbuddy}/skills |
| OpenCode | opencode |
${OPENCODE_CONFIG_DIR:-~/.config/opencode}/skills |
| Generic agent | generic |
${AGENTS_HOME:-~/.agents}/skills |
Restart or reload the client if it does not pick up the new skills.
Replace existing copies without backups:
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target codex --force
Install to a custom client home:
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | CLAUDE_HOME=/path/to/.claude bash -s -- --target claude-code
Install to an explicit directory:
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target opencode --dest /path/to/skills
Install from a local checkout (useful for development):
./scripts/install.sh
Install from a different local checkout:
./scripts/install.sh --source /path/to/OJO-Design-Skills --target codex
Install a pinned tag or commit for a reproducible remote install:
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target codex --ref <tag-or-commit>
Preview what would be written without changing files:
./scripts/install.sh --target opencode --dry-run
Install a single skill (--skill can be repeated):
./scripts/install.sh --target zcode --skill app-ui-ux-best-practices
Skills
app-ui-ux-best-practices
The core methodology. Picks a track based on the product's value proposition, then produces complete design specifications.
- Convention Track — adopt one proven design language (Notion, Linear, Stripe, Things 3, …) for SaaS and utility products.
- Innovation Track — build a brand-driven identity via Material Metaphor, archetype, narrative, or cultural-semiotic methods.
- Ships with 9 reference files: anti-patterns, visual tokens, component recipes, motion system, material metaphor, design audit, and more.
How it works
Product brief
│
├─ Convention Track ──► pick proven system ──► tokens ──► components ──► specs
│ (SaaS / utility) (Notion, Linear…)
│
└─ Innovation Track ──► insight + feeling ──► methodology ──► tokens ──► specs
(brand-driven) (Material Metaphor / archetype / narrative)
Both tracks require a mandatory style-direction confirmation gate before producing tokens — the agent presents 2–3 genuinely distinct directions and waits for selection. Once installed, skills are activated automatically when the agent detects design-related intent (e.g. "design system", "视觉设计", "design tokens").
Contributing
Skills are plain Markdown files under skills/<name>/SKILL.md plus optional references/ files. To add or refine a skill, read the contributing guide, edit the relevant files, and run the installer locally to verify:
./scripts/install.sh --dry-run
Use GitHub Discussions for questions and early ideas, and Issues for reproducible bugs or focused feature requests. Security concerns should follow the private process in SECURITY.md.
License
Frequently Asked Questions
What is OJO-Design-Skills?
OJO-Design-Skills is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by touchine-ojo. Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and more. It has 117 GitHub stars.
Is OJO-Design-Skills safe to use?
Yes. OJO-Design-Skills passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
How do I install OJO-Design-Skills?
Clone the repository with "git clone https://github.com/touchine-ojo/OJO-Design-Skills" and add it to your Claude Code skills directory (see the Installation section above).
What programming language is OJO-Design-Skills written in?
OJO-Design-Skills is primarily written in Shell. It is open-source under touchine-ojo on GitHub, so you can review or fork the full source.
Are there alternatives to OJO-Design-Skills?
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh OJO-Design-Skills against similar tools.
Comments (0)
to leave a comment.
No comments yet. Be the first to share your thoughts!
Related Skills
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
257,961
38,579
JavaScript
AI Agentsai-agentsanthropic
Skills for Real Engineers. Straight from my .agents directory.
250,518
21,171
Shell
AI Agents
An agentic skills framework & software development methodology that works.
234,966
20,863
Shell
AI Agentsaibrainstorming
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
185,940
28,768
JavaScript
AI Agentsai-agentsanthropic