agentsclimarketplace

Open design ui library

Skill Arnie016/codex-prompt-templates/skills/open-design-ui-library

Color-coded Codex prompt templates and Agent Skills for plugin-orchestrated AI coding workflows, MCP safety, repo intelligence, and automation.

Install
npx -y skills add Arnie016/codex-prompt-templates --skill open-design-ui-library

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use the local OpenDesign design-system library when building, redesigning, or reviewing UI. Triggers: making UI, frontend design, SaaS UI, dashboard, landing page, mobile app, design system, make it look better. Skip when the task is backend-only or the user supplied a stricter design spec.

SKILL.md

2.5 KB, as published. Nobody here has run it

OpenDesign UI Library

Goal: use proven product design systems and craft rules from sources/open-design before inventing UI styling.

When To Use

  • Building a new page, app, dashboard, mobile flow, deck, or marketing surface.
  • Improving an existing UI that looks generic, noisy, or "AI-generated."
  • Choosing CSS tokens, typography, spacing, component shape, and interaction states.

Workflow

  1. Identify the product surface: dashboard, SaaS landing, docs, pricing, mobile, content/editorial, or workflow tool.
  2. If editing an existing app, inspect its local tokens, theme, component primitives, screenshots, or visual tests before loading external inspiration.
  3. Read references/open-design-ui-library.md and choose one source design system, plus at most one secondary influence.
  4. If the fit is unclear, use the catalog in references/open-design-ui-library.md before reading source files.
  5. Load only the matching sources/open-design/design-systems/<slug>/DESIGN.md file and any needed craft file from sources/open-design/craft/.
  6. Translate the system into local tokens/components instead of copying brand assets, marks, or proprietary copy.
  7. Apply craft gates before finalizing:
    • no default purple/blue gradient hero unless the selected system calls for it
    • no emoji feature icons
    • no invented metrics
    • no filler copy
    • visible focus states and labelled inputs for interactive UI
  8. Validate visually with screenshots when a browser target is available.

Output

Design system used:
Reference files:
Key tokens/components applied:
Existing local design system preserved or mapped:
Craft checks:
Validation:

Skip When

  • The user provided a Figma/design spec that must be followed exactly.
  • The task is backend, data, CLI, infra, or test-only.
  • The requested UI is intentionally unstyled or wireframe-only.

Validation

  • The selected design-system reference is named.
  • Existing local tokens/components are preserved, or the mapping is stated.
  • UI changes are checked in a browser/screenshot when available.
  • Accessibility basics are present: focus states, labels, contrast, and non-overlapping text.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.