Artifact Design | Agent Skills Atlas

About this skill

Design guidance for any self-contained HTML/Markdown file shown in octo's Artifacts panel — reports, dashboards, architecture/system diagrams, generated UIs, slide-style pages. Read this BEFORE writing the file, not after — it calibrates how much design effort the request warrants and covers the panel's real constraints (sandboxed iframe, no external resources, narrow default width, no live theme push). Use when the user asks to "画架构图" / "generate a diagram" / "make a dashboard" / "produce a report page" / "visualize this as a page" / build any artifact meant to be looked at rather than edited. For chart/graph/plot-specific color and mark rules, also read the dataviz skill.

Quick start

Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.

Installation guide →

Review, license & listing details

Review the source before using this skill

This is an imported listing. We haven’t certified its safety, license, or compatibility. Skills may include executable scripts.

Automated security scan: Partial

Only SKILL.md was scanned. Supporting files and scripts were not checked. No safety grade has been assigned.

0 potential findings · Scanned 11/4/2026 · Scanner 0.2.1

Content SHA-256: 5d6d650b0c1463b1e05d1eab03d7b1077d309806430572e2b81c9bc9e8b18d4e

About scan coverage and limitations

Original listing metadata

Original name

artifact-design

Original description

About this listing

Category: Developer tools
Reported license: MIT
Listing language (estimated): English
Review status: Not individually reviewed
Agent compatibility: Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.