← All skills
design
55 / 100 · Review before installing
Check before installing.
By zai-org/ZCode (GitHub) · design · 8,613 stars · scanned at commit b95ebaf
设计工作流：交付物是写入工作区的 HTML 设计稿、可交互原型或 HTML 演示稿时使用，覆盖输入理解、新建与改版、品牌配色、视觉探索与审查。不负责对话内的交互视图 / mockup / 变体对比（用 visualize 插件），也不直接生成 .pptx 文件（需要 pptx 时调用 presentations 插件）。Design workflow for workspace deliverables: HTML design files, interactive prototypes and HTML slide decks, including UI/UX, color, brand and design review. Not for in-chat interactive views or mockups (visualize plugin) or .pptx generation (call the presentations plugin when a pptx is needed).
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 61 places.
Show 17 more
- apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/html-ppt-hermes-cyber-terminal/example.html, line 394
<span class="kw">$</span> brew install hermes-agent/tap/hermes - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 62
npx hyperframes init "$COMP" --example blank --skip-skills --non-interactive - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 125
- `npx hyperframes lint "$COMP"` — validate composition before dispatch - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 126
- `npx hyperframes transcribe <audio>` — generate captions - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 127
- `npx hyperframes tts <text>` — generate narration - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 414
- [ ] `npx hyperframes lint` and `npx hyperframes validate` both pass - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 415
- [ ] `npx hyperframes inspect` passes, or every reported overflow is intentionally marked - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 427
npx hyperframes inspect - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/SKILL.md, line 428
npx hyperframes inspect --json - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 15
When this skill runs inside Open Design, the daemon shells out to `npx hyperframes render`, which inherits the auto-enable. You do **not** need to add browser f - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 121
npx hyperframes add html-in-canvas - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 128
| Liquid Glass | Voronoi glass fracture with parallax reveal | `npx hyperframes add vfx-liquid-glass` | - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 129
| iPhone & MacBook | Real 3D GLTF devices with live HTML screens | `npx hyperframes add vfx-iphone-device` | - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 130
| Text Cursor | Dramatic text reveal with chromatic shadows | `npx hyperframes add vfx-text-cursor` | - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 131
| Portal | Dimension breach with volumetric light | `npx hyperframes add vfx-portal` | - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 132
| Shatter | HTML shatters into glass fragments | `npx hyperframes add vfx-shatter` | - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/hyperframes/references/html-in-canvas.md, line 133
| Magnetic | Magnetic field particle visualization | `npx hyperframes add vfx-magnetic` |
and 41 more places
Sends data to these websites: get.filebase.dev, api.openai.com, api.groq.com, fonts.google.com
The author does not mention this.
Found in 9 places.
Show 6 more
Runs commands on your computer
The author does not mention this.
Found in 97 places.
Show 17 more
- apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/live-artifact/SKILL.md, line 97
"$OD_NODE_BIN" "$OD_BIN" tools live-artifacts create --input artifact.json - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/live-artifact/SKILL.md, line 110
"$OD_NODE_BIN" "$OD_BIN" tools connectors list --format compact - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/live-artifact/SKILL.md, line 116
"$OD_NODE_BIN" "$OD_BIN" tools connectors execute --connector "$CONNECTOR_ID" --tool "$TOOL_NAME" --input input.json - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/open-design-landing-deck/SKILL.md, line 162
FAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/ - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/open-design-landing-deck/SKILL.md, line 174
npx tsx scripts/compose.ts inputs.json out/index.html - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/design-skeletons/video-shortform/SKILL.md, line 97
"$OD_NODE_BIN" "$OD_BIN" media generate \ - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 58
~/.claude/skills/gstack/bin/gstack-skill-start --skill "design-consultation" --model "claude" - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 263
~/.claude/skills/gstack/bin/gstack-context-recovery - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 314
~/.claude/skills/gstack/bin/gstack-question-log '{"skill":"design-consultation","question_id":"<id>","question_summary":"<summary-slug>","category":"<approval|c - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 323
~/.claude/skills/gstack/bin/gstack-question-preference --write '{"question_id":"<id>","preference":"<pref>","source":"inline-user"}' - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 353
GSTACK_STATE_ROOT=$(~/.claude/skills/gstack/bin/gstack-paths --get GSTACK_STATE_ROOT); : "${GSTACK_STATE_ROOT:?gstack-paths failed; reinstall with ./setup or /g - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 378
~/.claude/skills/gstack/bin/gstack-learnings-log '{"skill":"SKILL_NAME","type":"operational","key":"SHORT_KEY","insight":"DESCRIPTION","confidence":N,"source":" - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 394
~/.claude/skills/gstack/bin/gstack-skill-end --skill "design-consultation" --outcome OUTCOME \ - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 419
ls DESIGN.md design-system.md 2>/dev/null || echo "NO_DESIGN_FILE" - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 434
bun --no-env-file run $HOME/.claude/skills/gstack/bin/gstack-design-md.ts check DESIGN.md - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 448
cat PRODUCT.md 2>/dev/null | head -120 || echo "NO_PRODUCT_MD" - apps/zcode-cli/packages/design-plugin/skills/design/design-resources/skills/design-consultation/SKILL.md, line 459
GSTACK_STATE_ROOT=$(~/.claude/skills/gstack/bin/gstack-paths --get GSTACK_STATE_ROOT); : "${GSTACK_STATE_ROOT:?gstack-paths failed; reinstall with ./setup or /g
and 77 more places
Can call paid AI services billed to you
The author does not mention this.
Found in 1 place.
Changes files outside its own folder
The author does not mention this.
Found in 5 places.
Show 2 more
Safer alternatives
Low-risk skills in the same category (design) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'design' ] || [ -L ~/.agents/skills/'design' ]; then echo 'A skill folder named design already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/zai-org/ZCode' "$d" && git -C "$d" checkout --quiet 'b95ebaffeab641907b38652f45c1502bd762972d' -- 'apps/zcode-cli/packages/design-plugin/skills/design' && mkdir -p ~/.agents/skills && cp -R "$d"/'apps/zcode-cli/packages/design-plugin/skills/design' ~/.agents/skills/'design' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'design' ~/.claude/skills/'design' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for zai-org/ZCode shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/zai-org/ZCode/)
Score history
| Date | Version | Score |
|---|
| 2026-11-11 | b95ebaf | 55 |