# design-artifact

> Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, dec…

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.

- Type: Skill
- Made by: plannotator
- Category: Design
- Formats: Skills
- Version: 46fe817
- Source: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact
- Page: https://pluginboard.ai/skills/design-artifact

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the design-artifact folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Claude

In Claude (web or desktop): Download the design-artifact folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Gemini

In Gemini: Download the design-artifact folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.copilot/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Cursor

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.cursor/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Claude Code

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.claude/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

Or all of Effective HTML, in Claude Code:

```text
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
```

### Codex

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.agents/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Antigravity

In Antigravity: Copy the design-artifact folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Gemini CLI

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.gemini/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Replit

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact .agents/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### OpenClaw

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.openclaw/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### OpenCode

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.config/opencode/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

### Hermes Agent

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/design-artifact ~/.hermes/skills/design-artifact
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/design-artifact

---
From Pluginboard (https://pluginboard.ai).