Agent Plugins Marketplace
← All plugins

design-helper

v0.3.1

Settle CSS values, layout and motion by eye: draws every candidate side by side in the browser, you pick one, and it applies the choice to your code.

Codex1 Skill

By Dessert99License: MIT1.1k GitHub starsUpdated 2 hours ago

Directory evidence

Runtimes
Codex
Parsed components
1 skill or MCP entry
Source updated
Sep 27, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install design-helper for Codex

Installs for the current user
codex plugin marketplace add hashgraph-online/awesome-codex-plugins
codex plugin marketplace upgrade awesome-codex-plugins
codex plugin add design-helper@awesome-codex-plugins

Paste and run these commands in a terminal with Codex. They add and refresh the awesome-codex-plugins catalog, then install this plugin.

Compatibility: the page URL and API slug “design-helper” remain stable.

  • Codex: design-helper@agent-plugin-marketplace → design-helper@awesome-codex-plugins

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/hashgraph-online/awesome-codex-plugins

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/Dessert99/design-helper/.

Plugin files

plugins/Dessert99/design-helper/
├── .codex-plugin/plugin.json
└── skills/design-helper/SKILL.md

Included Skills1

design-helperskills/design-helper/SKILL.md

Use whenever anything visible must be decided — a CSS value, spacing, radius, shadow, border, color, layout, wireframe, state, motion. Never describe the options in prose or a table and ask the user to pick; render them side by side in one HTML file, open it in a browser, let them choose with their eyes, then apply the chosen value to the code yourself. Not a design generator — it does not invent a look, it lays out the range and measures. Read this BEFORE writing or changing any UI code, and whenever the user says "5가지 버전으로 보여줘" · "A 랑 B 중에 뭐가 나아" · "어떻게 할까" · "비교해줘".

Plugin manifests1

plugins/Dessert99/design-helper/.codex-plugin/plugin.json
{
  "name": "design-helper",
  "version": "0.3.1",
  "description": "Settle CSS values, layout and motion by eye: draws every candidate side by side in the browser, you pick one, and it applies the choice to your code.",
  "author": {
    "name": "Dessert99",
    "url": "https://github.com/Dessert99"
  },
  "homepage": "https://github.com/Dessert99/design-helper",
  "repository": "https://github.com/Dessert99/design-helper",
  "license": "MIT",
  "keywords": [
    "design",
    "css",
    "ui",
    "layout",
    "motion",
    "comparison",
    "frontend"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "design-helper",
    "shortDescription": "Compare CSS values side by side and pick by eye",
    "longDescription": "Instead of describing options in prose, design-helper draws every candidate for one property side by side in your browser. You pick a letter in chat, and it applies the chosen value to your code and verifies it. Replies and sheet labels are in Korean by default.",
    "developerName": "Dessert99",
    "category": "Design",
    "capabilities": [
      "Interactive",
      "Read",
      "Write"
    ],
    "defaultPrompt": [
      "Show me 5 versions of the button radius",
      "Compare the card padding",
      "Lay out the dashboard"
    ],
    "websiteURL": "https://github.com/Dessert99/design-helper",
    "screenshots": [],
    "composerIcon": "./assets/icon.svg",
    "logo": "./assets/icon.svg",
    "brandColor": "#F59E0B"
  }
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[design-helper on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-helper)