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.

With OJO Skills	Without OJO Skills

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.

Restart or reload the client if it does not pick up the new skills.

curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target codex --force

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

curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target opencode --dest /path/to/skills

./scripts/install.sh

./scripts/install.sh --source /path/to/OJO-Design-Skills --target codex

curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target codex --ref <tag-or-commit>

./scripts/install.sh --target opencode --dry-run

./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.

pixel-paper-editorial

Create responsive websites with a white dotted background, original pixel art stickers, and retro pixel UI. Optional cutout collage heroes add oversized type, torn-paper seams, selection highlights, and pill calls to action while keeping the layout simple.

• Preserves the pixel style while adapting sticker subjects, accent colors, and layout to the current theme.
• Includes web implementation rules, general-purpose collage guidance, and visual reference analysis.
• Supports runnable websites and explicitly requested concept-image previews.

Example: Use $pixel-paper-editorial to create a photography portfolio with a white dotted background and original pixel stickers. Keep the layout simple.

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

MIT