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.
How to install artifact-design?
open-octo/octo-agent/artifact-design
$npx -y skills add open-octo/octo-agent --skill artifact-designInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/open-octo/octo-agent" --skill "open-octo/octo-agent/artifact-design"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/open-octo/octo-agent" that are relevant to the current task. Run `npx skills add "https://github.com/open-octo/octo-agent"` and select the relevant skills, then follow their instructions.
Related
6 picksType
- tddTest-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.Jul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeJul 2026
- qaInteractive QA session where user reports bugs or issues conversationally, and the agent files GitHub issues.Jul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output…Jul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright.Jul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking…Jul 2026
