design-artifact
Design Artifact
Use this skill to turn a brief, flow, screenshot, or code context into a browser-openable HTML design artifact.
This is the HTML-first design control surface for standalone artifacts. It covers product prototypes, launch or narrative pages, HTML decks or storyboards, motion demos, and multi-direction explorations. It should stay focused on artifact creation rather than brand transfer or media generation.
Quick Positioning
Use this skill for:
- product surfaces, flows, and app concepts
- landing, launch, or storytelling pages that should feel like real artifacts rather than generic websites
- HTML slide decks or storyboards
- motion demos with meaningful playback or state changes
- side-by-side or toggleable exploration of a few strong design directions
Do not use this skill for:
- named-brand style transfer or design-system import ->
brand-design-md
More from bahayonghang/my-claude-code-settings
tech-design-doc
Generate technical design documents with proper structure, diagrams, and implementation details. Use when designing a new feature, documenting architecture decisions, or planning refactoring work. Default language is English.
105bidwriter
智能标书编写专家，专精工程咨询、建筑设计、市政工程领域的投标文件编写。
70article-cover
Generate article cover images as SVG. Use when creating cover/banner/header graphics for blogs, documentation, social media cards, or OG images. Trigger this skill whenever the user mentions article covers, blog banners, post thumbnails, social sharing images, or any visual header for written content — even if they don't explicitly say 'SVG'. Do not use it for full-scene illustrations, photo editing, or slide theme work.
63tech-blog
Write technical blog posts with source code analysis OR doc-driven research. Use when user wants to explain system internals, architecture, implementation details, or technical concepts with citations.
53git-commit-cn
Safely orchestrate Chinese Conventional Commits for staged Git changes, or for all working-tree changes when the user explicitly asks to include everything. Use when the user asks to write a commit message, split staged changes, split all changes, commit everything regardless of stage state, include untracked files in the commit set, organize a messy index before committing, prepare a Chinese commit, draft a Conventional Commit, or generate structured commit text without pushing by default.
47gemini-image
>-
46