plannotator-design-artifact

v0.1.0

Creative direction for HTML artifacts — palette, type, layout, theming, and sharing via tot.page.

CodexClaude Code1 skill

by plannotatorMIT13updated 1 month ago

Source

$ git clone https://github.com/plannotator/design-artifact

Clone the source, then follow the repository's marketplace instructions for your runtime. The repository root is the plugin root.

Layout

plannotator-design-artifact/

├── .codex-plugin/plugin.json
├── .claude-plugin/plugin.json
└── skills/design-artifact/SKILL.md

Skills1

design-artifactskills/design-artifact/SKILL.md

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

Manifests2

.codex-plugin/plugin.json

{
  "name": "plannotator-design-artifact",
  "version": "0.1.0",
  "description": "Creative direction for HTML artifacts — palette, type, layout, theming, and sharing via tot.page.",
  "author": {
    "name": "plannotator",
    "url": "https://github.com/plannotator"
  },
  "homepage": "https://github.com/plannotator/design-artifact",
  "repository": "https://github.com/plannotator/design-artifact",
  "license": "MIT",
  "keywords": [
    "design",
    "html",
    "artifacts",
    "typography",
    "theming",
    "skills"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "Design Artifact",
    "shortDescription": "Creative direction for polished HTML artifacts",
    "longDescription": "Design principles and creative direction for HTML artifacts — sizing up the brief's register, deliberate palette and type pairing, token-based light/dark theming, avoiding the generic AI aesthetic, and optionally sharing the finished page via tot.page.",
    "developerName": "plannotator",
    "category": "Productivity",
    "capabilities": [
      "Write"
    ],
    "defaultPrompt": [
      "Design a polished HTML artifact for this."
    ]
  }
}

.claude-plugin/plugin.json

{
  "name": "plannotator-design-artifact",
  "skills": [
    "./skills/design-artifact"
  ]
}