OJO Design Skills
Two UI/UX skills teach an agent design decisions: track selection, tokens, component recipes and anti-slop guardrails.
- 177 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills give instructions for generating interface code, and the installer is downloaded and run from the network.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ojo-design-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills give instructions for generating interface code, and the installer is downloaded and run from the network.
This is third-party code. Review the repository files before installing.
What it does
OJO Design Skills is a bundle of two skills that gives an agent a methodology instead of the typical AI look. The `app-ui-ux-best-practices` skill picks a track based on the product's value. The Convention track adopts a proven design language such as Notion, Linear, Stripe or Things 3 for SaaS and utilities. The Innovation track builds a brand identity through material metaphor, archetype, narrative or cultural semiotics. The skill ships with 9 reference files: anti-patterns, visual tokens, component recipes, a motion system and a design audit. The second skill, `pixel-paper-editorial`, builds responsive sites on a white dotted background with original pixel stickers and a retro interface. The rules are strict: combinations such as purple-blue gradients and gray placeholders are banned, and screens with imagery need real subject-specific assets. Components resolve to Tailwind class strings with an eight-state model and motion uses spring physics.
Who it is for. Frontend developers and solo designers who want agent-made layouts with a clear system rather than averaged pages.
Good fit when
- A SaaS product needs an interface in the spirit of Linear or Notion with tokens and component recipes.
- A brand needs its own identity built through archetype or narrative.
- A finished page has to be checked for template tricks: gradients, gray boxes, decorative placeholders.
- A portfolio or landing is built in a pixel-paper style with a dotted background and a cutout collage.
Not a fit when
- You need a ready React UI kit: the skills describe methodology and specs and ship no library.
- The project runs on another styling stack where Tailwind classes will not fit.
- The task is purely server-side with no interface.
Example request
Use `app-ui-ux-best-practices`: pick a track for a coffee tracking app and produce tokens, component recipes and a motion spec.Limitations
The skills supply specifications and rules rather than a ready component library: the agent builds code for your stack. Output uses Tailwind classes and has to be translated for another styling system. The strict bans on gradients and gray placeholders may not suit neutral corporate interfaces. The installer is downloaded and run from the network, so read `scripts/install.sh` before starting. Bash, `curl` and `tar` are required, and the client sometimes needs a restart after installation.
How to disable. Delete the `app-ui-ux-best-practices` and `pixel-paper-editorial` folders from the client skills directory, for example `~/.claude/skills`. The bundle leaves no background processes.
FAQ
How do I install OJO Design Skills?
Run the install script with your client: `curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target claude-code`. For Codex use `--target codex`. Restarting the client after installation is wise.
Which agents are supported?
Seven install targets: Codex, Claude Code, ZCode, DeepCode, WorkBuddy, OpenCode and a `generic` agent. Each has its own skills directory, for example `~/.claude/skills` for Claude Code.
How do the Convention and Innovation tracks differ?
Convention adopts a proven design language for SaaS and utilities. Innovation builds a brand identity from material metaphor, archetype, narrative or cultural semiotics. The skill picks the track from the product value.
What do the anti-slop rules ban?
Purple-blue gradients, gray box placeholders and single-hue palettes are hard-banned. Screens with imagery need real subject-specific assets with no decorative placeholders or fake smiles.
Can I install from a local checkout?
Yes, run `./scripts/install.sh` from the clone. Advanced options include `--force` to replace without backups, `--dest` for a custom directory and variables such as `CLAUDE_HOME`.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| OJO Design Skills (this card) | no | 177 | |
| Impeccable | no | 108,873 | a command set for reviewing and polishing finished interfaces; OJO adds a track-selection methodology and a pixel editorial style |
| UI UX Pro Max | no | 148,899 | a searchable base of styles, palettes and fonts; OJO ties the choice to Convention and Innovation tracks |
README in short
The bundle installs with one script into the chosen client skills directory. The repository has README translations in Chinese, Japanese, Korean and Spanish.