# Design Artifact (agent skill)

> Design Artifact is an agent skill (a SKILL.md file) from plannotator/effective-html. Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. It works with Claude Code and Codex and has 3,555 GitHub stars across a repository of 3 listed skills.

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.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/plannotator/effective-html |
| Skill path | skills/design-artifact/SKILL.md |
| Skill name | design-artifact |
| GitHub stars | 3,555 |
| Installs on skills.sh | not listed |
| License | MIT |
| Skills in repo | 3 |
| Plugin marketplace | effective-html |
| Official | no |
| Works with | Claude Code, Codex |
| Category | Design & frontend |
| Last commit | Sep 14, 2026 |

## When it triggers

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

## Add this skill

### Claude Code

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

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/plannotator/effective-html.git
cp -r effective-html/skills/design-artifact .agents/skills/design-artifact   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/plannotator/effective-html.git
cp -r effective-html/skills/design-artifact .cursor/skills/design-artifact   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

---

Canonical page: https://appsgit.com/skills/plannotator-design-artifact
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.