# Artifact Design

Design artifacts such as HTML pages, dashboards, charts, reports, plans, memos...

- Repository: https://github.com/ahmadrosid/nakama (748 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ahmadrosid/nakama --skill artifact-design -g -a claude-code -y`
Codex: `npx skills add ahmadrosid/nakama --skill artifact-design -g -a codex -y`
Cursor: `npx skills add ahmadrosid/nakama --skill artifact-design -g -a cursor -y`
Gemini CLI: `npx skills add ahmadrosid/nakama --skill artifact-design -g -a gemini-cli -y`

## Description

Design artifacts such as HTML pages, dashboards, charts, reports, plans, memos, summaries, code snippets, and logs. For slide decks and presentations, use slide-deck-design.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

Design complete deliverables that the user can revisit in the profile **Artifacts** tab.
These instructions are loaded directly when this skill is active.

## Choose the output

- Use HTML for visual reports, plans, memos, landing pages, and browser games.
- For slide decks and presentations, follow the slide-deck-design skill. It holds the deck template; load it with load_skill. Its theme, font, and resource rules replace the ones in this skill.
- Keep the format the user requests. Use Markdown for pages only when the user or another active skill requires it.
- Keep code, logs, and structured data in their appropriate formats. Preserve existing formats when moving files or editing artifacts.

## Design the page

The rest: https://github.com/ahmadrosid/nakama/blob/HEAD/packages/core/src/skills/bundled/artifact-design/SKILL.md